Use client

[tkrotoff]

To be compatible with React Server Components, the 'use client' directive is needed, see https://react.dev/reference/react/use-client

Problem: Microbundle and Rollup don't support 'use client'

• 'use client' developit/microbundle#1049
• 'use client' directive for Client Components rollup/rollup#4699

Solution: given this source code is very small, use createElement and CJS directly.
Then no need for a bundler, the code is directly compatible with everything (CJS, ESM).

I carefully checked the example works, the tests pass and using my own app which uses this package, that nothing is broken.

Here the npm package it generates:

[tkrotoff]

This is not transpiled anymore but it's not a problem, spread is supported everywhere now:

• https://caniuse.com/mdn-javascript_operators_spread
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#browser_compatibility

[tkrotoff]

The arrow function in the useEffect above is also not transpiled anymore but this is supported everywhere:

• https://caniuse.com/arrow-functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#browser_compatibility

Same for const:

• https://caniuse.com/const
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const#browser_compatibility

[christo-pr]

@tkrotoff Thanks a lot!!! this is really really helpful, so let me get this straight then, you're saying that we no longer need to build the code right? so a simple npm publish will upload the js file and the ts file and that's it correct?

[tkrotoff]

we no longer need to build the code right?

Yes that's the idea.

• This package is only one file
• React exports CJS and UMD, not ESM: https://unpkg.com/browse/[email protected]/

The only edge cases I can think of are:

• Users of UMD, but you never exported UMD anyway
• Users of ESM directly in the browser, I don't think it's handled using microbundle + the way React exports itself

[christo-pr]

Yeah that why I though, well I just bump the version and publish it, I wonder if the 'use client' at the top will affect any usage of this for older version of react, I guess we'll see on the issues, thanks again @tkrotoff really appreciate the help! 👍🏻