Upgrade dependencies, add package entrypoints #824

jolyndenning · 2021-07-05T19:09:28Z

This includes breaking changes and will be part of single-spa@6. It's to the 6.0 branch

This resolves #652 and makes it possible to easily resolve single-spa/single-spa-layout#141 (by publishing a new major version of single-spa-layout that uses the package entrypoints).

Included is the following:

Switch from yarn -> pnpm
Upgrade husky from v4 to v7. I used pinst to avoid issues with yarn 2 users as described in https://typicode.github.io/husky/#/?id=yarn-2
(Breaking) Change package.json "type" to "module"
(Breaking) Add package.json "exports"
(Breaking for CDN users) Change rollup build to output .cjs extension for the umd folder. This is because when "type" is "module" the .js files must be ESM, but the UMD build is not. Using cjs works around this.
Change package.json "main" to have the .cjs extension
Upgrade to Jest 27. Fix tests to work with Jest 27.
Upgrade to Node 16. Fix tests to work with Node 16 (Fix tests in Node 15 #652)
Run upgraded version of prettier on all files.
Remove unused babel-eslint dependency
Upgrade to new package names for all rollup plugins. (@rollup/plugin-node-resolve instead of rollup-plugin-node-resolve)

github-actions · 2021-07-05T19:10:59Z

File size impact

Error: Error while trying to generate a snapshot for 6.0-deps merge into 6.0.

Error: Command failed: git merge FETCH_HEAD --allow-unrelated-histories

    at ChildProcess.exithandler (child_process.js:303:12)
    at ChildProcess.emit (events.js:315:20)
    at maybeClose (internal/child_process.js:1026:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)

_{Generated by file size impact during file-size-impact#1005399717}

jolyndenning · 2021-07-05T19:32:41Z

package.json

  "types": "typings/single-spa.d.ts",
+  "type": "module",
+  "exports": {


I tested these in Node 10, Node 16 (esm importing esm, cjs importing esm, and cjs importing cjs, both for prod and dev via node --conditions=development). I also tested it in webpack 4, webpack 5, and rollup (with @rollup/plugin-node-resolve). Seems to work.

jolyndenning · 2021-07-05T19:34:19Z

rollup.config.js

@@ -11,6 +11,7 @@ const useAnalyzer = process.env.ANALYZER === "analyzer";
 const replaceOpts = {
  "process.env.BABEL_ENV": null,
  __DEV__: !isProduction,
+  preventAssignment: true,


Rollup recommended setting this to prepare for an upcoming breaking chagne.

jolyndenning · 2021-07-05T19:34:38Z

rollup.config.js

@@ -33,7 +34,7 @@ export default (async () => [
    input: "./src/single-spa.js",
    output: [
      {
-        file: `./lib/umd/single-spa${isProduction ? ".min" : ".dev"}.js`,
+        file: `./lib/umd/single-spa${isProduction ? ".min" : ".dev"}.cjs`,


Since the package.json "type" is now "module", the umd build needs the CJS extension

I guess the alternative that I've seen packages do, is to put another package.json with the contents of {type: 'commonjs'} in the umd folder so that you can maintain the .js extension.

I don't mind the cjs extension. It's not super easy to do echo '{\"type\": \"commonjs\"}' > lib/umd/package.json in a fully platform agnostic way - the echo part sometimes creates invalid json characters in windows, and also the file separators are sometimes tricky. I could do it with node, but it's sort of a pain to have to create a build script just to do this.

jolyndenning · 2021-07-05T19:35:01Z

spec/apis/single-spa-events-api.spec.js

-            done();
-          }
-        })
-        .catch(fail);


fail no longer exists in jest 26/27

jolyndenning · 2021-07-05T19:35:37Z

spec/apps/partial-rerouting/partial-rerouting.spec.js

@@ -2,7 +2,7 @@ import * as singleSpa from "single-spa";

 describe("partial rerouting", () => {
  function delay() {
-    return new Promise((resolve) => setImmediate(resolve));


setImmediate has issues in jest 27. See jestjs/jest#11539

jolyndenning · 2021-07-05T19:36:03Z

spec/parcels/parcel-error-handlers.spec.js

@@ -24,6 +24,10 @@ describe("parcel errors", () => {
        const parcel1 = app.mountProps.mountParcel(parcelConfig1, {
          domElement: document.createElement("div"),
        });
+
+        // avoid unhandled rejection causing test failure


Required for NodeJS 16 promise stuff

jolyndenning · 2021-07-05T21:16:23Z

package.json

+  "exports": {
+    ".": {
+      "development": {
+        "import": "./lib/esm/single-spa.dev.js",


I'm using the esm directory rather than es2015 to maintain IE11 support. One option could be to change it to es2015 here and then ask users who support IE11 to use the esm version, as a step towards dropping IE11 support. Thoughts?

What's the size difference between the two?

In any case, I think it may be worth dropping IE11 support by default - otherwise, we're stuck waiting for the next major to drop it, and who knows how long that will be?

It's 2kb. I agree it would be nice to start indicating that we're not going to support IE11 forever by changing the default to not support IE11 but still have it supported with a bit of manual configuration.

Most people use the system version, though, which currently supports ie11. Maybe we could create a system2015 version, as well?

Am leaning towards this directory structure:

lib/ es5/ umd/ system/ esm/ es2015/ umd/ system/ esm/

That sounds good to me

frehner · 2021-07-06T16:08:36Z

package.json

+  "exports": {
+    ".": {
+      "development": {
+        "import": "./lib/esm/single-spa.dev.js",


What's the size difference between the two?

In any case, I think it may be worth dropping IE11 support by default - otherwise, we're stuck waiting for the next major to drop it, and who knows how long that will be?

frehner · 2021-07-06T16:10:35Z

package.json

@@ -2,25 +2,46 @@
  "name": "single-spa",
  "version": "5.9.3",


If this is the 6 branch, may be worth updating this right now too?

I only update version during publish, since pnpm version major automatically updates package.json

frehner · 2021-07-06T16:19:12Z

rollup.config.js

@@ -33,7 +34,7 @@ export default (async () => [
    input: "./src/single-spa.js",
    output: [
      {
-        file: `./lib/umd/single-spa${isProduction ? ".min" : ".dev"}.js`,
+        file: `./lib/umd/single-spa${isProduction ? ".min" : ".dev"}.cjs`,


I guess the alternative that I've seen packages do, is to put another package.json with the contents of {type: 'commonjs'} in the umd folder so that you can maintain the .js extension.

frehner · 2021-07-06T16:23:31Z

spec/apis/single-spa-events-api.spec.js

-          }
-        })
-        .catch(fail);
+    it(`is fired on the window whenever the hash changes`, async () => {


I'm pretty sure you can still do async (done) => if that makes things easier. That way you don't have to do the finish promise trick

No, you can't, according to https://jestjs.io/blog/2021/05/25/jest-27#features-coming-with-breaking-changes

jolyndenning · 2021-07-06T18:42:30Z

Merging this now for a beta release of 6.0. Am happy to address any more feedback in future PRs

Upgrade dependencies, add package entrypoints

1e4b225

Joel Denning added 5 commits July 5, 2021 13:12

Fix build

b7c8c43

Fix build

d7c84b1

Fix build

699591f

Fix build

78869f1

Fix

8cf52b9

jolyndenning commented Jul 5, 2021

View reviewed changes

Self review

42a2c02

jolyndenning commented Jul 5, 2021

View reviewed changes

frehner reviewed Jul 6, 2021

View reviewed changes

Anthony's feedback

5fe0353

jolyndenning merged commit 8110c22 into 6.0 Jul 6, 2021

jolyndenning deleted the 6.0-deps branch July 6, 2021 18:42

Uh oh!

Upgrade dependencies, add package entrypoints #824

Upgrade dependencies, add package entrypoints #824

Uh oh!

Conversation

jolyndenning commented Jul 5, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 5, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File size impact

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

frehner Jul 6, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jolyndenning Jul 6, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

frehner Jul 6, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jolyndenning commented Jul 6, 2021

Uh oh!

Uh oh!

jolyndenning commented Jul 5, 2021 •

edited

Loading

github-actions bot commented Jul 5, 2021 •

edited

Loading

frehner Jul 6, 2021 •

edited

Loading

jolyndenning Jul 6, 2021 •

edited

Loading

frehner Jul 6, 2021 •

edited

Loading