feat: ESNext by default, full ESM-CJS interop, max minification #1059

ctjlewis · 2021-07-09T03:25:19Z

Changes

Full ESM-CJS interop: .cjs/.mjs extensions, "module"/"main" fields, "exports" field. Ex:

"main": "./dist/index.cjs",
"module": "./dist/index.mjs",
"exports": {
  "./package.json": "./package.json",
  ".": {
    "import": "./dist/index.mjs",
    "require": "./dist/index.cjs"
  }
},

Emits ES2020, Terser minification for ESM by default
ES5 output now deprecated behind build --legacy flag
Pass --passWithNoTests to Jest by default with tsdx test
Package upgrades

Reasoning

Smallest possible bundle sizes due to minimal transpilation
Maximum ESM/CJS interop for Node 14+
ESNext output and ESM/CJS interop changes leave all transpilation to lower featuresets up to library consumers downstream in order to minimize problems at compile-time, and prevent TSDX from enforcing a maximum featureset on consumers (previously, this was ES5).

Inspired by module resolution issues with React Native's Metro importing TSDX modules. Also results in much smaller bundles, especially now that ESM is Terser'd by default.

vercel · 2021-07-09T03:25:23Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/formium/tsdx/DXDgToBbfGTFxbr7udnDDoQNXziL
✅ Preview: https://tsdx-git-fork-ctjlewis-no-dist-formium.vercel.app

src/createRollupConfig.ts

ctjlewis · 2021-07-09T03:27:08Z

src/createRollupConfig.ts

    opts.env,
    shouldMinify ? 'min' : '',
-    'js',
+    fileExtension,


Encode ESM/CJS module status as *.mjs and *.cjs instead of *.esm.js etc.

ctjlewis · 2021-07-09T03:27:42Z

package.json

@@ -38,7 +38,7 @@
    "templates"
  ],
  "engines": {
-    "node": ">=10"
+    "node": ">=14"


Logic assumes Node >14.

ctjlewis · 2021-07-09T03:28:32Z

package.json

    "rollup-plugin-postcss": "^2.5.0",
    "styled-components": "^5.0.1",
    "tiny-invariant": "^1.1.0",
    "tiny-warning": "^1.0.3",
-    "yarn-deduplicate": "^2.1.1"
+    "yarn-deduplicate": "^3.1.0"


Package updates, do not cause test failures.

ctjlewis · 2021-07-09T03:28:56Z

src/createRollupConfig.ts

+  const isEsm = opts.format.includes('es') || opts.format.includes('esm');
+
  const shouldMinify =
-    opts.minify !== undefined ? opts.minify : opts.env === 'production';
+    opts.minify !== undefined ? opts.minify : opts.env === 'production' || isEsm;


Minify ESM output also.

ctjlewis · 2021-07-09T03:30:05Z

src/templates/basic.ts

+        require: './dist/index.cjs',
+      },
+    },
+    // module: `dist/${safeName}.mjs`,


CJS/ESM interop logic.

ctjlewis · 2021-07-09T03:30:26Z

src/templates/react.ts

@@ -19,7 +19,7 @@ const reactTemplate: Template = {
    },
    scripts: {
      ...basicTemplate.packageJson.scripts,
-      test: 'tsdx test --passWithNoTests',
+      test: 'tsdx test',


tsdx test now passes --passWithNoTests by default.

ctjlewis · 2021-07-09T03:30:36Z

src/templates/template.d.ts

@@ -3,5 +3,5 @@ import { PackageJson } from 'type-fest';
 interface Template {
  dependencies: string[];
  name: string;
-  packageJson: PackageJson;
+  packageJson: PackageJson & { husky: any; prettier: any; };


Prevent TypeError.

ctjlewis · 2021-07-09T03:30:59Z

src/templates/utils/index.ts

+        path: `dist/${name}.production.min.cjs`,
        limit: '10 KB',
      },
      {
-        path: `dist/${name}.esm.js`,
+        path: `dist/${name}.min.mjs`,


Update emitted filepaths.

ctjlewis · 2021-07-09T03:31:19Z

src/types.ts

@@ -41,6 +41,8 @@ export interface TsdxOptions extends SharedOpts {
  env: 'development' | 'production';
  // Module format
  format: ModuleFormat;
+  /** If `true`, Babel transpile and emit ES5. */
+  legacy: boolean;
  // Is minifying?


ES5 now behind build --legacy flag.

ctjlewis · 2021-07-09T03:32:07Z

templates/basic/test/import.mjs

+// import * as module from 'your-package-name';
+import * as module from '../dist/index.mjs';
+console.log(module);


Test ESM import. If we generated this dynamically, the first line would work because of the package.json "exports" field: import * as module from 'my-package-name'

ctjlewis · 2021-07-09T03:32:19Z

templates/basic/test/index.test.ts

@@ -1,4 +1,4 @@
-import { sum } from '../src';
+const sum = (a: number, b: number) => a + b;


Guaranteed to pass.

ctjlewis · 2021-07-09T03:32:30Z

templates/basic/test/require.cjs

@@ -0,0 +1 @@
+console.log(require('..'))


Test CJS require.

ctjlewis · 2021-07-09T03:32:44Z

test/e2e/fixtures/build-default/src/syntax/generator.ts

@@ -1,4 +1,4 @@
 // regression test for generators
 export function* testGenerator() {
-  return yield true;
+  yield true;


Prevent TypeError.

ctjlewis

Changes to test files largely involve refactoring for --legacy flag and new emitted filepaths.

ctjlewis · 2022-02-28T20:04:31Z

Ha, totally forgot I sent this in! @jaredpalmer I ended up forking this and doing a lot more, see:

https://github.com/tszip/tszip

I also ended up starting fresh again, building on work done by Luke Edwards (what I currently use, basically state of the art):

https://github.com/tsmodule/tsmodule

Would draw special attention to the "Next.js component library" section of that README. The config mentioned there is now generated automatically by tsmodule create --react [project-name], just need to update docs.

We should talk sometime if you have a minute.

cdauth · 2022-04-04T12:16:28Z

Is there any rough idea when this will be released?

ctjlewis · 2022-07-29T18:48:33Z

@cdauth I'm trying to see what can be done but this repo is mostly not maintained as many people have moved onto other work. I would use tsmodule above even though it's basically experimental, feel free to open an issue if you have any problems.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ESNext by default, full ESM-CJS interop, max minification #1059

feat: ESNext by default, full ESM-CJS interop, max minification #1059

ctjlewis commented Jul 9, 2021 •

edited

Loading

vercel bot commented Jul 9, 2021 •

edited

Loading

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis Jul 9, 2021

ctjlewis left a comment

ctjlewis commented Feb 28, 2022 •

edited

Loading

cdauth commented Apr 4, 2022

ctjlewis commented Jul 29, 2022

		@@ -1,4 +1,4 @@
		import { sum } from '../src';
		const sum = (a: number, b: number) => a + b;

		@@ -0,0 +1 @@
		console.log(require('..'))

feat: ESNext by default, full ESM-CJS interop, max minification #1059

feat: ESNext by default, full ESM-CJS interop, max minification #1059

Conversation

ctjlewis commented Jul 9, 2021 • edited Loading

Changes

Reasoning

vercel bot commented Jul 9, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ctjlewis left a comment

Choose a reason for hiding this comment

ctjlewis commented Feb 28, 2022 • edited Loading

cdauth commented Apr 4, 2022

ctjlewis commented Jul 29, 2022

ctjlewis commented Jul 9, 2021 •

edited

Loading

vercel bot commented Jul 9, 2021 •

edited

Loading

ctjlewis commented Feb 28, 2022 •

edited

Loading