From 0fd898eaa1d98db138d706b7e5c4f8753fbaccc2 Mon Sep 17 00:00:00 2001 From: Matvei Andrienko Date: Thu, 25 Jul 2024 13:26:29 +0200 Subject: [PATCH 1/3] fix: provide both browser and node cjs bundles --- package.json | 13 ++++++++----- scripts/bundle.mjs | 16 +++++++++++++--- ...undle.cjs => validate-cjs-browser-bundle.cjs} | 4 +--- scripts/validate-cjs-node-bundle.cjs | 4 ++++ 4 files changed, 26 insertions(+), 11 deletions(-) rename scripts/{validate-cjs-bundle.cjs => validate-cjs-browser-bundle.cjs} (74%) create mode 100644 scripts/validate-cjs-node-bundle.cjs diff --git a/package.json b/package.json index ca1501526..6649e2bfd 100644 --- a/package.json +++ b/package.json @@ -10,25 +10,28 @@ "url": "https://github.com/GetStream/stream-chat-react.git" }, "types": "dist/index.d.ts", - "main": "dist/index.cjs.js", + "main": "dist/index.node.cjs", "module": "dist/index.js", "jsdelivr": "./dist/browser.full-bundle.min.js", "exports": { ".": { "types": "./dist/index.d.ts", - "require": "./dist/index.cjs.js", + "node": "./dist/index.node.cjs", + "require": "./dist/index.browser.cjs", "import": "./dist/index.js", "default": "./dist/index.js" }, "./emojis": { "types": "./dist/plugins/Emojis/index.d.ts", - "require": "./dist/plugins/Emojis/index.cjs.js", + "node": "./dist/plugins/Emojis/index.node.cjs", + "require": "./dist/plugins/Emojis/index.browser.cjs", "import": "./dist/plugins/Emojis/index.js", "default": "./dist/plugins/Emojis/index.js" }, "./mp3-encoder": { "types": "./dist/plugins/encoders/mp3.d.ts", - "require": "./dist/plugins/encoders/mp3.cjs.js", + "node": "./dist/plugins/encoders/mp3.node.cjs", + "require": "./dist/plugins/encoders/mp3.browser.cjs", "import": "./dist/plugins/encoders/mp3.js", "default": "./dist/plugins/encoders/mp3.js" }, @@ -243,7 +246,7 @@ "test": "jest", "types": "tsc --noEmit --skipLibCheck false", "validate-translations": "node scripts/validate-translations.js", - "validate-cjs": "node scripts/validate-cjs-bundle.cjs", + "validate-cjs": "concurrently 'node scripts/validate-cjs-node-bundle.cjs' 'node scripts/validate-cjs-browser-bundle.cjs'", "semantic-release": "semantic-release", "browse-examples": "ladle serve", "e2e": "playwright test", diff --git a/scripts/bundle.mjs b/scripts/bundle.mjs index 91c21d0fd..6e4132506 100755 --- a/scripts/bundle.mjs +++ b/scripts/bundle.mjs @@ -31,16 +31,26 @@ const deps = Object.keys({ }); const external = deps.filter((dep) => !bundledDeps.includes(dep)); +/** @type esbuild.BuildOptions */ const cjsBundleConfig = { entryPoints: [sdkEntrypoint, emojiEntrypoint, mp3EncoderEntrypoint], bundle: true, format: 'cjs', - platform: 'browser', target: 'es2020', external, outdir: outDir, - entryNames: '[dir]/[name].cjs', + outExtension: { '.js': '.cjs' }, sourcemap: 'linked', }; -await esbuild.build(cjsBundleConfig); +// We build two CJS bundles: for browser and for node. The latter one can be +// used e.g. during SSR (although it makes little sence to SSR chat, but still +// nice for import not to break on server). +const bundles = ['browser', 'node'].map((platform) => + esbuild.build({ + ...cjsBundleConfig, + entryNames: `[dir]/[name].${platform}`, + platform, + }), +); +await Promise.all(bundles); diff --git a/scripts/validate-cjs-bundle.cjs b/scripts/validate-cjs-browser-bundle.cjs similarity index 74% rename from scripts/validate-cjs-bundle.cjs rename to scripts/validate-cjs-browser-bundle.cjs index abba3c960..3ba8b1e7a 100644 --- a/scripts/validate-cjs-bundle.cjs +++ b/scripts/validate-cjs-browser-bundle.cjs @@ -1,7 +1,6 @@ // As the community transitions to ESM, we can easily break our CJS bundle. // This smoke test can help to detect this early. -// First, set up minimal browser-like environment: const { JSDOM } = require('jsdom'); const dom = new JSDOM('', { url: 'https://localhost', @@ -15,5 +14,4 @@ for (const key of Object.keys(window)) { } } -// Then, try importing our CJS bundle: -require('../dist/index.cjs.js'); +require('../dist/index.browser.cjs'); diff --git a/scripts/validate-cjs-node-bundle.cjs b/scripts/validate-cjs-node-bundle.cjs new file mode 100644 index 000000000..97c119f5e --- /dev/null +++ b/scripts/validate-cjs-node-bundle.cjs @@ -0,0 +1,4 @@ +// As the community transitions to ESM, we can easily break our CJS bundle. +// This smoke test can help to detect this early. + +require('../dist/index.node.cjs'); From 6d8d474a5e6a7fa4a9e63b55fe731ae39b54abfe Mon Sep 17 00:00:00 2001 From: Matvei Andrienko Date: Thu, 25 Jul 2024 14:06:37 +0200 Subject: [PATCH 2/3] fix: bundle size check --- .github/workflows/size.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml index 4cd518f7c..93348d056 100644 --- a/.github/workflows/size.yml +++ b/.github/workflows/size.yml @@ -18,4 +18,4 @@ jobs: - uses: preactjs/compressed-size-action@v2 with: repo-token: '${{ secrets.GITHUB_TOKEN }}' - pattern: './dist/**/*.{js,css,json}' + pattern: './dist/**/*.{js,cjs,css,json}' From 7ee7b419c7e30e1976bfb10a443c8504593358e4 Mon Sep 17 00:00:00 2001 From: Matvei Andrienko Date: Thu, 15 Aug 2024 16:26:22 +0200 Subject: [PATCH 3/3] fix: use nested conditional exports --- package.json | 33 ++++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 3f5d6c7f1..1c9759cc9 100644 --- a/package.json +++ b/package.json @@ -16,23 +16,38 @@ "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.node.cjs", - "require": "./dist/index.browser.cjs", - "import": "./dist/index.js", + "node": { + "require": "./dist/index.node.cjs", + "import": "./dist/index.js" + }, + "browser": { + "require": "./dist/index.browser.cjs", + "import": "./dist/index.js" + }, "default": "./dist/index.js" }, "./emojis": { "types": "./dist/plugins/Emojis/index.d.ts", - "node": "./dist/plugins/Emojis/index.node.cjs", - "require": "./dist/plugins/Emojis/index.browser.cjs", - "import": "./dist/plugins/Emojis/index.js", + "node": { + "require": "./dist/plugins/Emojis/index.node.cjs", + "import": "./dist/plugins/Emojis/index.js" + }, + "browser": { + "require": "./dist/plugins/Emojis/index.browser.cjs", + "import": "./dist/plugins/Emojis/index.js" + }, "default": "./dist/plugins/Emojis/index.js" }, "./mp3-encoder": { "types": "./dist/plugins/encoders/mp3.d.ts", - "node": "./dist/plugins/encoders/mp3.node.cjs", - "require": "./dist/plugins/encoders/mp3.browser.cjs", - "import": "./dist/plugins/encoders/mp3.js", + "node": { + "require": "./dist/plugins/encoders/mp3.node.cjs", + "import": "./dist/plugins/encoders/mp3.js" + }, + "browser": { + "require": "./dist/plugins/encoders/mp3.browser.cjs", + "import": "./dist/plugins/encoders/mp3.js" + }, "default": "./dist/plugins/encoders/mp3.js" }, "./dist/css/*": {