fix(build): Generate umd and system files

[romulo94]

Hi @dai-shi ,
We were looking for cdn files and the lib didn't have a system or umd file.
We're going to use the lib in microfrontends using single-spa and we need to import like:
<script type="systemjs-importmap"> { "imports": { "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js", "react": "https://unpkg.com/browse/[email protected]/umd/react.production.min.js", "react-dom": "https://unpkg.com/browse/[email protected]/umd/react-dom.production.min.js", "zustand": "https://unpkg.com/[email protected]" } } </script>
But we can not use esm or default (./index.js)
Is it possible to add a new config for rollup?

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit dc5d981:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
React Parcel	Configuration
Next.js	Configuration

[dai-shi]

Ah, I wasn't familiar with it. Looks nice.
Do we need both umd and systemjs? Is there any case when only either one works?
Is there any convention to add entries in package.json? Or, maybe we don't need it as it's just full path?

We try to keep the config consistent among zustand/jotai/vaito as much as possible. Would you be able to create PRs there too? (Once, the questions above are clear.)

[romulo94]

Ah, I wasn't familiar with it. Looks nice. Do we need both umd and systemjs? Is there any case when only either one works? Is there any convention to add entries in package.json? Or, maybe we don't need it as it's just full path?

We try to keep the config consistent among zustand/jotai/vaito as much as possible. Would you be able to create PRs there too? (Once, the questions above are clear.)

Thanks!
We don't need to put a new entry in package, we need to delivery the files like:
https://unpkg.com/browse/[email protected]/umd/
Or check this link and you can see 4 formats: UMD, SystemJS, ESM and ES2015 (https://cdn.jsdelivr.net/npm/[email protected]/lib/)
The main idea it's just add 2 new formats for cdn links.

About UMD and SystemJS:
Can do the same, there are some diferences between them.
UMD and SystemJS works in client side.
"UMD works everywhere and usually used as a fallback in case ESM does not work" - LINK
"SystemJS is a hookable, standards-based module loader. It provides a workflow where code written for production workflows of native ES modules in browsers (like Rollup code-splitting builds), can be transpiled to the System.register module format to work in older browsers that don't support native modules" LINK

And I can do the same at jotai/vaito!
BTW, Zustand is an AWESOME library! Congrats!

[romulo94]

@dai-shi
PS: I need to check vaito because you are using alias in rollup config, but I can find the correct config for UMD and SystemJS, dont worry!

[dai-shi]

Thanks for the explanation!
Your suggestion looks good as is, but let me ask a few more questions:

1. What do you think is good or bad if we change the default format from cjs to umd? Will it cause too much trouble for the existing cjs users?
2. I understand systemjs requires its own format, but react doesn't seem to provide it and many of my packages don't provide it either. what would users do in such cases? They use fallback umd and don't get benefit of code splitting and so on?

[dai-shi]

Do systemjs users need old browser support? (they can use umd in such cases?)
otherwise,

Suggested change

	babelPlugin(getBabelOptions({ ie: 11 })),
	getEsbuild('node12'),

would build more efficient output?

[romulo94]

Thanks for the explanation! Your suggestion looks good as is, but let me ask a few more questions:

1. What do you think is good or bad if we change the default format from cjs to umd? Will it cause too much trouble for the existing cjs users?
2. I understand systemjs requires its own format, but react doesn't seem to provide it and many of my packages don't provide it either. what would users do in such cases? They use fallback umd and don't get benefit of code splitting and so on?

1 - It's not a bad ideia. I prefer to keep the same config for while.
"umd (Universal Module Definition) — Works as amd, cjs, and iife all in one."
Following:
how-are-umd-and-commonjs-cjs-package-folders-different-and-which-should-i-use
what-are-cjs-amd-umd-esm-system-and-iife

2 - SystemJs can read AMD, UMD and others formats, so It's not necessary to provide it, but in my opnion it's a good option, you dont need to register a different format in SystemJS (Use just system in system instead of UMD-AMD-ESM in system). Is it a problem?

[dai-shi]

@romulo94 Thanks for the follow up.
Yeah, to be safe, let's keep what we had untouched and add umd and systemjs.

Please update jotai/valtio likewise.

[dai-shi]

Looks good to me. Thanks for your contribution!

[romulo94]

@dai-shi ,
Thanks for understanding!
It's a pleasure to contribute!!!

One last question
Umd and System files gonna publish here (https://www.jsdelivr.com/package/npm/zustand) ?

[dai-shi]

I suppose so. Let's try.

[dai-shi]

Released: https://github.com/pmndrs/zustand/releases/tag/v3.6.9

It may take time to be up on CDN? Let me know if you have any issues.

[romulo94]

@dai-shi no issues!
We have the links
https://unpkg.com/browse/[email protected]/system/
https://unpkg.com/browse/[email protected]/umd/

Zustand gonna be used with single-spa, it's perfect.