Refactor build system for ESM (#435)

* Refactor build system

* Publish v7.0.0

.gitignore

@@ -1,9 +1,8 @@
 node_modules
 *.log
-es6
+esm
 cjs
 umd
-lib
 dist
 .DS_Store
 package-lock.json

.prettierignore

@@ -1,9 +1,8 @@
 node_modules
 *.log
-es6
+esm
 cjs
 umd
-lib
 dist
 .DS_Store
 package-lock.json

package.json

@@ -9,10 +9,12 @@
     "@babel/preset-env": "^7.23.7",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^14.1.2",
@@ -30,6 +32,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
     "size-limit": "^11.0.1",
+    "tslib": "^2.6.2",
     "typescript": "^5.3.3"
   },
   "scripts": {
@@ -47,19 +50,15 @@
   },
   "size-limit": [
     {
-      "path": "./packages/universal-cookie/lib/index.js",
+      "path": "./packages/universal-cookie-express/cjs/index.js",
       "limit": "4 KB"
     },
     {
-      "path": "./packages/universal-cookie-express/lib/index.js",
+      "path": "./packages/universal-cookie-koa/cjs/index.js",
       "limit": "4 KB"
     },
     {
-      "path": "./packages/universal-cookie-koa/lib/index.js",
-      "limit": "4 KB"
-    },
-    {
-      "path": "./packages/react-cookie/lib/index.js",
+      "path": "./packages/react-cookie/cjs/index.js",
       "limit": "10 KB"
     }
   ],

packages/react-cookie-demo/package.json

@@ -13,9 +13,9 @@
     "express": "^4.18.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-cookie": "^6.0.0",
+    "react-cookie": "^7.0.0",
     "react-dom": "^18.2.0",
-    "universal-cookie-express": "^6.0.0"
+    "universal-cookie-express": "^7.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",

packages/react-cookie/index.d.ts

@@ -1 +1 @@
-export * from './es6';
+export * from './esm';

packages/react-cookie/package.json

@@ -1,16 +1,20 @@
 {
   "name": "react-cookie",
-  "version": "6.1.3",
+  "version": "7.0.0",
   "description": "Universal cookies for React",
   "main": "cjs/index.js",
-  "module": "es6/index.js",
-  "types": "es6/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.mjs",
+      "require": "./cjs/index.js"
+    }
+  },
+  "types": "esm/index.d.ts",
   "sideEffects": false,
   "files": [
-    "es6",
+    "esm",
     "cjs",
     "umd",
-    "lib",
     "index.d.ts",
     "LICENSE"
   ],
@@ -29,17 +33,14 @@
   "author": "Benoit Tremblay <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf lib && rimraf es6 && rimraf cjs && rimraf umd",
-    "build": "npm run clean && npm run build-es6 && npm run build-cjs && npm run build-umd && npm run build-legacy",
-    "build-es6": "tsc",
-    "build-cjs": "babel es6 -D -d cjs",
-    "build-umd": "rollup -c",
-    "build-legacy": "babel es6 -D -d lib"
+    "prebuild": "rimraf esm && rimraf cjs && rimraf umd",
+    "build": "rollup -c",
+    "postbuild": "rimraf -G {cjs,umd}/*.d.ts"
   },
   "dependencies": {
     "@types/hoist-non-react-statics": "^3.3.5",
     "hoist-non-react-statics": "^3.3.2",
-    "universal-cookie": "^6.0.0"
+    "universal-cookie": "^7.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",

packages/react-cookie/rollup.config.mjs

@@ -1,9 +1,9 @@
 import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
 import terser from '@rollup/plugin-terser';
-
-const basePlugins = [resolve(), commonjs()];
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import babel from '@rollup/plugin-babel';
 
 const external = ['react', 'universal-cookie'];
 const globals = {
@@ -13,30 +13,62 @@ const globals = {
 
 export default [
   {
-    input: 'cjs/index.js',
+    input: 'src/index.ts',
+    output: {
+      dir: './esm',
+      format: 'esm',
+      entryFileNames: '[name].mjs',
+    },
+    plugins: [typescript({ outDir: './esm' })],
+    external,
+  },
+  {
+    input: 'src/index.ts',
+    output: {
+      dir: './cjs',
+      format: 'cjs',
+    },
+    plugins: [
+      typescript({ outDir: './cjs' }),
+      babel({ babelHelpers: 'bundled' }),
+    ],
+    external,
+  },
+  {
+    input: 'src/index.ts',
     output: {
       file: 'umd/reactCookie.js',
       format: 'umd',
       name: 'ReactCookie',
       globals,
     },
     plugins: [
-      ...basePlugins,
-      replace({ 'process.env.NODE_ENV': '"development"' }),
+      commonjs(),
+      resolve(),
+      typescript({ outDir: 'umd' }),
+      replace({
+        preventAssignment: true,
+        'process.env.NODE_ENV': '"development"',
+      }),
     ],
     external,
   },
   {
-    input: 'cjs/index.js',
+    input: 'src/index.ts',
     output: {
       file: 'umd/reactCookie.min.js',
       format: 'umd',
       name: 'ReactCookie',
       globals,
     },
     plugins: [
-      ...basePlugins,
-      replace({ 'process.env.NODE_ENV': '"production"' }),
+      commonjs(),
+      resolve(),
+      typescript({ outDir: 'umd' }),
+      replace({
+        preventAssignment: true,
+        'process.env.NODE_ENV': '"production"',
+      }),
       terser(),
     ],
     external,

packages/react-cookie/rollup.esm.mjs

@@ -0,0 +1,25 @@
+import glob from 'glob';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import typescript from '@rollup/plugin-typescript';
+
+export default {
+  input: Object.fromEntries(
+    glob
+      .sync('src/**/*.{ts,tsx}')
+      .map((file) => [
+        path.relative(
+          'src',
+          file.slice(0, file.length - path.extname(file).length),
+        ),
+        fileURLToPath(new URL(file, import.meta.url)),
+      ]),
+  ),
+  output: {
+    dir: './esm',
+    format: 'esm',
+    entryFileNames: '[name].mjs',
+  },
+  plugins: [typescript()],
+  external: ['react', 'universal-cookie', 'hoist-non-react-statics'],
+};

packages/react-cookie/src/__tests__/useCookies-test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { cleanCookies } from 'universal-cookie/lib/utils';
+import { cleanCookies } from '../../../universal-cookie/src/utils';
 import { act, render, screen } from '@testing-library/react';
 
 import { CookiesProvider, useCookies, Cookies } from '../';

packages/react-cookie/src/__tests__/withCookies-test.js

@@ -3,7 +3,7 @@ import { object } from 'prop-types';
 import { instanceOf } from 'prop-types';
 import ReactDOMServer from 'react-dom/server';
 import { CookiesProvider, withCookies, Cookies } from '../';
-import { cleanCookies } from 'universal-cookie/lib/utils';
+import { cleanCookies } from '../../../universal-cookie/src/utils';
 import { act, render, screen } from '@testing-library/react';
 
 function TestComponent({ cookies }) {

packages/react-cookie/tsconfig.json

@@ -3,7 +3,6 @@
     "target": "es2017",
     "module": "es6",
     "declaration": true,
-    "outDir": "./es6",
     "strict": true,
     "jsx": "react",
     "moduleResolution": "node",

packages/universal-cookie-express/package.json

@@ -1,14 +1,18 @@
 {
   "name": "universal-cookie-express",
-  "version": "6.1.3",
+  "version": "7.0.0",
   "description": "Hook cookies get/set on Express for server-rendering",
   "main": "cjs/index.js",
-  "module": "es6/index.js",
-  "types": "es6/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.mjs",
+      "require": "./cjs/index.js"
+    }
+  },
+  "types": "esm/index.d.ts",
   "sideEffects": false,
   "files": [
-    "lib",
-    "es6",
+    "esm",
     "cjs",
     "LICENSE"
   ],
@@ -27,14 +31,12 @@
   "author": "Benoit Tremblay <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf lib && rimraf es6 && rimraf cjs",
-    "build": "npm run clean && npm run build-es6 && npm run build-cjs && npm run build-legacy",
-    "build-es6": "tsc",
-    "build-cjs": "babel es6 -D -d cjs",
-    "build-legacy": "babel es6 -D -d lib"
+    "prebuild": "rimraf esm && rimraf cjs",
+    "build": "rollup -c",
+    "postbuild": "rimraf -G cjs/*.d.ts"
   },
   "dependencies": {
-    "universal-cookie": "^6.0.0"
+    "universal-cookie": "^7.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",

packages/universal-cookie-express/rollup.config.mjs

@@ -0,0 +1,33 @@
+import typescript from '@rollup/plugin-typescript';
+import babel from '@rollup/plugin-babel';
+
+const external = ['react', 'universal-cookie'];
+const globals = {
+  react: 'React',
+  'universal-cookie': 'UniversalCookie',
+};
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: {
+      dir: './esm',
+      format: 'esm',
+      entryFileNames: '[name].mjs',
+    },
+    plugins: [typescript({ outDir: './esm' })],
+    external,
+  },
+  {
+    input: 'src/index.ts',
+    output: {
+      dir: './cjs',
+      format: 'cjs',
+    },
+    plugins: [
+      typescript({ outDir: './cjs' }),
+      babel({ babelHelpers: 'bundled' }),
+    ],
+    external,
+  },
+];

packages/universal-cookie-express/tsconfig.json

@@ -4,7 +4,6 @@
     "module": "es6",
     "moduleResolution": "node",
     "declaration": true,
-    "outDir": "./es6",
     "strict": true
   },
   "files": ["./src/index.ts"]

packages/universal-cookie-koa/package.json

@@ -1,14 +1,18 @@
 {
   "name": "universal-cookie-koa",
-  "version": "6.1.3",
+  "version": "7.0.0",
   "description": "Hook cookies get/set on Koa for server-rendering",
   "main": "cjs/index.js",
-  "module": "es6/index.js",
-  "types": "es6/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.mjs",
+      "require": "./cjs/index.js"
+    }
+  },
+  "types": "esm/index.d.ts",
   "sideEffects": false,
   "files": [
-    "lib",
-    "es6",
+    "esm",
     "cjs",
     "LICENSE"
   ],
@@ -27,14 +31,12 @@
   "author": "Benoit Tremblay <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf lib && rimraf es6 && rimraf cjs",
-    "build": "npm run clean && npm run build-es6 && npm run build-cjs && npm run build-legacy",
-    "build-es6": "tsc",
-    "build-cjs": "babel es6 -D -d cjs",
-    "build-legacy": "babel es6 -D -d lib"
+    "prebuild": "rimraf esm && rimraf cjs",
+    "build": "rollup -c",
+    "postbuild": "rimraf -G cjs/*.d.ts"
   },
   "dependencies": {
-    "universal-cookie": "^6.0.0"
+    "universal-cookie": "^7.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",