Preact support

[rcoopr]

Would love to integrate this in some of my current projects, but many use preact. There are a few outstanding issues though

Component mount:

@number-flow_react.js?v=76d9a20d:208 Uncaught NotSupportedError: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.
    at set parts (@number-flow_react.js?v=76d9a20d:208:37)
    at NumberFlowElement.attributeChangedCallback (@number-flow_react.js?v=76d9a20d:511:16)

There is a call to this.attachShadow({ mode: "open" }) here

number-flow/packages/number-flow/src/index.ts

Line 93 in 366217d

this.attachShadow({ mode: 'open' })

If we make this conditional on !this.shadowRoot, the component mounts.

---

Trend (auto)

We run into an issue with trend. Leaving trend on default, the transition from 9 -> 10 loops the last digit through 8, 7, ..., 1, 0 - instead of the correct behaviour of simply going from 9 to 0.

Steps to reproduce:

pnpm create vite@latest number-flow-test
# select preact. typescript
pnpm i @number--flow/react

Add this code to the homepage:

<NumberFlow
  value={count}
  format={{ notation: 'compact' }}
  locales="en-US"
/>

• Observe an incorrect transition when count goes from 9 to 10, or from 10 to 9.

---

HMR

There is another issue with HMR. customElements.define may be called after already having defined the custom element. The steps to reproduc this are:

• Mount a <NumberFlow /> element and save the file.
• Comment out the <NumberFlow /> element and save.
• Uncomment it and save.

This error is produced:

NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "number-flow" has already been used with this registry
    at NumberFlowElement.define (number-flow.js?v=76d9a20d:150:31)
    at number-flow.tsx:29:19

So it looks like we need to check if the custom element has already been defined before calling define

---

I have not worked with custom elements before, but I could potentially look into these issues in the coming couple of weeks.

Thanks again for the library.

[barvian]

Hey, thanks for the investigation! The define() one is tricky because I'm not sure how to differentiate it from an actual error (i.e. there was already a custom element called number-flow).

[rcoopr]

We can check the registered elements constructor method against NumberFlowLite's. I have fixes for all the issues, but I'm not sure how to detect if preact is in use, because it needs the same fix for the serializeParts as React19. I'll submit a PR and leave a note on that method and leave it up to you to decide what to do with it - prop, env variable, separate export etc.