From 7af13b2ba918371a506786720c99631709881e05 Mon Sep 17 00:00:00 2001 From: Ben Scott Date: Fri, 27 Aug 2021 11:38:13 -0700 Subject: [PATCH 1/4] Use correct path for module/esnext entrypoint --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c23014e8c36..75fb310052e 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "component library" ], "main": "build/cjs/index.js", - "module": "build/esm/index.js", - "esnext": "build/esnext/index.ts.esnext", + "module": "build/esm/index.mjs", + "esnext": "build/esnext/index.esnext", "types": "build/ts/latest/src/index.d.ts", "typesVersions": { "<4.0": { From 5fd37f58aee0f86074291cea6d8b2d1b7c2c316e Mon Sep 17 00:00:00 2001 From: Ben Scott Date: Fri, 27 Aug 2021 11:39:37 -0700 Subject: [PATCH 2/4] Remove reference to removed file --- .eslintrc | 6 ------ 1 file changed, 6 deletions(-) diff --git a/.eslintrc b/.eslintrc index 8a3cfb7ebf5..5a096bf1664 100644 --- a/.eslintrc +++ b/.eslintrc @@ -97,12 +97,6 @@ "@shopify/jsx-no-hardcoded-content": "off" } }, - { - "files": ["esnext/index.js"], - "rules": { - "import/no-unresolved": "off" - } - }, { "files": ["playground/Playground.tsx"], "rules": { From 8cc285de09ae9cb997dc210542babca3c71b33cb Mon Sep 17 00:00:00 2001 From: Ben Scott Date: Fri, 27 Aug 2021 11:40:40 -0700 Subject: [PATCH 3/4] import rollupPlugins from plugin-package-build --- package.json | 1 - sewing-kit.config.ts | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index 75fb310052e..71be750c504 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,6 @@ "@sewing-kit/plugin-jest": "^0.5.1", "@sewing-kit/plugin-package-build": "^0.5.1", "@sewing-kit/plugin-prettier": "^0.1.2", - "@sewing-kit/plugin-rollup": "^0.3.3", "@sewing-kit/plugin-stylelint": "^0.4.2", "@sewing-kit/plugin-typescript": "^0.6.1", "@shopify/babel-preset": "^24.1.2", diff --git a/sewing-kit.config.ts b/sewing-kit.config.ts index e9be7270bac..90637c500fa 100644 --- a/sewing-kit.config.ts +++ b/sewing-kit.config.ts @@ -9,8 +9,7 @@ import { } from '@sewing-kit/core'; import {babel} from '@sewing-kit/plugin-babel'; import {workspaceTypeScript} from '@sewing-kit/plugin-typescript'; -import {packageBuild} from '@sewing-kit/plugin-package-build'; -import {rollupPlugins} from '@sewing-kit/plugin-rollup'; +import {packageBuild, rollupPlugins} from '@sewing-kit/plugin-package-build'; import {eslint} from '@sewing-kit/plugin-eslint'; import {stylelint} from '@sewing-kit/plugin-stylelint'; import {prettier} from '@sewing-kit/plugin-prettier'; From 57523166ab9b543ee43725b8b22c087b4c3ea2a1 Mon Sep 17 00:00:00 2001 From: Ben Scott Date: Fri, 27 Aug 2021 11:56:49 -0700 Subject: [PATCH 4/4] Use .js instead of .mjs extension for esm build files This avoids an issue in webpack that uses different import semantics for js and mjs files This fixes our size-limit check --- package.json | 4 ++-- scripts/build-validate.js | 4 ++-- sewing-kit.config.ts | 46 +++++++++++++++++++++++++++++++++++++-- 3 files changed, 48 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 71be750c504..9a061853e70 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "component library" ], "main": "build/cjs/index.js", - "module": "build/esm/index.mjs", + "module": "build/esm/index.js", "esnext": "build/esnext/index.esnext", "types": "build/ts/latest/src/index.d.ts", "typesVersions": { @@ -185,7 +185,7 @@ }, { "name": "esm", - "path": "build/esm/index.mjs", + "path": "build/esm/index.js", "limit": "105 kB" }, { diff --git a/scripts/build-validate.js b/scripts/build-validate.js index 45270397940..adb3bcef27b 100644 --- a/scripts/build-validate.js +++ b/scripts/build-validate.js @@ -17,7 +17,7 @@ validateVersionReplacement(); function validateStandardBuild() { // Standard build assert.ok(fs.existsSync('./build/cjs/index.js')); - assert.ok(fs.existsSync('./build/esm/index.mjs')); + assert.ok(fs.existsSync('./build/esm/index.js')); assert.ok(fs.existsSync('./build/esm/styles.css')); // Assert it uses named exports rather than properties from the React default @@ -117,7 +117,7 @@ function validateVersionReplacement() { assert.deepStrictEqual(fileBuckets.includesVersion, [ './build/cjs/configure.js', - './build/esm/configure.mjs', + './build/esm/configure.js', './build/esm/styles.css', './build/esnext/components/AppProvider/AppProvider.css', './build/esnext/configure.esnext', diff --git a/sewing-kit.config.ts b/sewing-kit.config.ts index 90637c500fa..ac75b918be4 100644 --- a/sewing-kit.config.ts +++ b/sewing-kit.config.ts @@ -46,7 +46,8 @@ function libraryPackagePlugin() { esmodules: true, esnext: true, }), - rollupAdjustmentsPlugin(), + rollupAdjustPluginsPlugin(), + rollupAdjustOutputPlugin(), jestAdjustmentsPlugin(), ]); } @@ -152,7 +153,7 @@ function preAndPostBuildPlugin() { }); } -function rollupAdjustmentsPlugin() { +function rollupAdjustPluginsPlugin() { return rollupPlugins((target) => { const stylesConfig = target.options.rollupEsnext ? { @@ -181,3 +182,44 @@ function rollupAdjustmentsPlugin() { ]; }); } + +/** + * Output .js files for the esm build instead of .mjs files + * + * By default webpack 4 handles imports within js and mjs files differently. + * mjs files are subject to a stricter set of rules when importing from commonjs + * files such as react. + * Some apps (including sewing-kit based apps) work around this by adding + * `config.module.rules.push({test: /\.mjs$/, type: 'javascript/auto'});` + * to their webpack config, which tells webpack to treat .mjs files the same + * as .js files. However we should not rely on this behaviour being present. + * + * Thus publish our esm files with a .js file extension. + */ +function rollupAdjustOutputPlugin() { + return createProjectPlugin('PolarisJest', ({tasks: {build}}) => { + build.hook(({hooks}) => { + hooks.target.hook(({hooks, target}) => { + const isDefaultBuild = Object.keys(target.options).length === 0; + if (!isDefaultBuild) { + return; + } + + hooks.configure.hook(async (configuration) => { + configuration.rollupOutputs?.hook((outputs) => { + for (const output of outputs) { + if (typeof output.entryFileNames === 'string') { + output.entryFileNames = output.entryFileNames.replace( + /\.mjs$/, + '.js', + ); + } + } + + return outputs; + }); + }); + }); + }); + }); +}