Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preact support #43

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Preact support #43

wants to merge 2 commits into from

Conversation

rcoopr
Copy link

@rcoopr rcoopr commented Oct 22, 2024

This fixes the 2 broken issues from #38

The Trend issue is due to preact rendering the component with serialized parts, so implementing the same fix for React19 will work. Even though preact is using React18 under the hood, it supports custom elements differently.

const isReact19 = React.version.startsWith('19.')

const serializeParts = isReact19 ? (p: PartitionedParts) => p : JSON.stringify

Unfortunately I can't find a way to tell if preact is in use. It might be necessary to provide another export @number-flow/preact, or add a prop, or rely on an env variable to change the behaviour

Copy link

vercel bot commented Oct 22, 2024

@rcoopr is attempting to deploy a commit to the Barvian Team on Vercel.

A member of the Team first needs to authorize it.

@@ -91,7 +106,9 @@ export class NumberFlowLite extends ServerSafeHTMLElement {
this.#parts = parts

// Don't check for declarative shadow DOM because we'll recreate it anyway:
this.attachShadow({ mode: 'open' })
if (!this.shadowRoot) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this related to HMR as well? I wonder how a shadow root is already attached 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that was the only fix required for HMR to work without issue. It was in the case that a component is mounted, HMR reloads with that component no longer mounted, then HMR reloads a 2nd time with it mounted once again. Reproduction details are in #38

@T-Damer
Copy link

T-Damer commented Nov 4, 2024

Thanks for fix! Will try in my app as well

upd: oh, looks like they updated something else and we need another PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants