Preact support - Githubissues

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 https://github.com/barvian/number-flow/blob/366217dfd7262172d40efd5ff232f5a773a49821/packages/number-flow/src/index.ts#L93

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 / number-flow

Preact support #32

Component mount:

Trend (auto)

HMR