-
-
Notifications
You must be signed in to change notification settings - Fork 79
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
base: main
Are you sure you want to change the base?
Preact support #43
Conversation
@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) { |
There was a problem hiding this comment.
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 🤔
There was a problem hiding this comment.
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
Thanks for fix! Will try in my app as well upd: oh, looks like they updated something else and we need another PR |
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.
number-flow/packages/react/src/index.tsx
Line 17 in f34ee35
number-flow/packages/react/src/index.tsx
Line 60 in f34ee35
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