chore: improve @magicbell/react-headless cjs/esm support

[smeijer]

fixes cjs/esm support by building with tshy. Needed to upgrade immer from v9 to v10 to support the case.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 1:24pm

[pkg-pr-new]

@magicbell/cli

yarn add https://pkg.pr.new/@magicbell/[email protected]

@magicbell/embeddable

yarn add https://pkg.pr.new/@magicbell/[email protected]

@magicbell/core

yarn add https://pkg.pr.new/@magicbell/[email protected]

@magicbell/in-app

yarn add https://pkg.pr.new/@magicbell/[email protected]

magicbell

yarn add https://pkg.pr.new/[email protected]

@magicbell/project-client

yarn add https://pkg.pr.new/@magicbell/[email protected]

@magicbell/magicbell-react

yarn add https://pkg.pr.new/@magicbell/[email protected]

@magicbell/react-headless

yarn add https://pkg.pr.new/@magicbell/[email protected]

@magicbell/user-client

yarn add https://pkg.pr.new/@magicbell/[email protected]

@magicbell/webpush

yarn add https://pkg.pr.new/@magicbell/[email protected]

commit: 83e481e

[stigi]

Thanks @smeijer for this PR, I'll close #390 in favor of this one.

I've left a few comments inline, mostly questions and tiny suggestions though. The point I feel the strongest about is hardcoding __PACKAGE_NAME__ when we could import package.json as well.

[stigi]

💅 I think it's better to directly import here, instead of going through index.ts, as we're in the same package.

Suggested change

	import { IRemoteNotification } from '../types/index.js';
	import IRemoteNotification from './IRemoteNotification.js';

[smeijer]

Agree, we should drop all barrel files. They're bad for bundlers / tree shaking. I didn't do it here, as I simply added the extensions using https://www.npmjs.com/package/fix-esm-import-path.

[smeijer]

Agreed about dropping the "magic constants". I didn't like the package.json imports, because not all bundlers might support importing from json files, but I came up with something better by using https://npmjs.com/replace-in-file right after the build script.

Now, we have a single place where we can import the constants from lib/pkg.ts, which makes it native JS and typed, and we have a build step that replaces the constants in dist/{esm|commonjs}/lib/pkg.js with the proper values.

[stigi]

@smeijer let me know if you need additional support here, like testing, delegating tasks or pairing, but it's mostly done as I can see.