Fix UMD build & transform cookie CJS build into ESM for ESM build

e2e/universal-cookie-umd.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/test';
+
+declare global {
+  const UniversalCookie: any; // should import the right type but was not able to make it work
+}
+
+test('UMD build works properly', async ({ page }) => {
+  await page.goto('/');
+  await page.addScriptTag({
+    path: './packages/universal-cookie/umd/universalCookie.js',
+  });
+
+  const result = await page.evaluate(() => {
+    const cookies = new UniversalCookie();
+    cookies.set('testCookie', 'helloWorld');
+    const retrievedValue = cookies.get('testCookie');
+    return retrievedValue;
+  });
+
+  expect(result).toBe('helloWorld');
+
+  const cookieValue = await page.evaluate(() =>
+    new UniversalCookie().get('testCookie'),
+  );
+  expect(cookieValue).toBe('helloWorld');
+});
+
+test('UMD minified build works properly', async ({ page }) => {
+  await page.goto('/');
+  await page.addScriptTag({
+    path: './packages/universal-cookie/umd/universalCookie.min.js',
+  });
+
+  const result = await page.evaluate(() => {
+    const cookies = new UniversalCookie();
+    cookies.set('testCookie', 'helloWorld');
+    const retrievedValue = cookies.get('testCookie');
+    return retrievedValue;
+  });
+
+  expect(result).toBe('helloWorld');
+
+  const cookieValue = await page.evaluate(() =>
+    new UniversalCookie().get('testCookie'),
+  );
+  expect(cookieValue).toBe('helloWorld');
+});

packages/react-cookie-demo/server.js

@@ -8,6 +8,7 @@ const app = express();
 
 app
   .use('/assets', express.static('dist'))
+  .use('/umd', express.static('../universal-cookie/umd'))
   .use(cookiesMiddleware())
   .use(serverMiddleware);
 

packages/react-cookie/rollup.config.mjs

@@ -1,7 +1,7 @@
-import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import terser from '@rollup/plugin-terser';
 import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import babel from '@rollup/plugin-babel';
 
@@ -19,7 +19,7 @@ export default [
       format: 'esm',
       entryFileNames: '[name].mjs',
     },
-    plugins: [typescript({ outDir: './esm' })],
+    plugins: [resolve(), commonjs(), typescript({ outDir: './esm' })],
     external,
   },
   {
@@ -43,8 +43,8 @@ export default [
       globals,
     },
     plugins: [
-      commonjs(),
       resolve(),
+      commonjs(),
       typescript({ outDir: 'umd' }),
       replace({
         preventAssignment: true,
@@ -62,8 +62,8 @@ export default [
       globals,
     },
     plugins: [
-      commonjs(),
       resolve(),
+      commonjs(),
       typescript({ outDir: 'umd' }),
       replace({
         preventAssignment: true,

packages/universal-cookie/rollup.config.mjs

@@ -1,11 +1,9 @@
 import resolve from '@rollup/plugin-node-resolve';
 import terser from '@rollup/plugin-terser';
+import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
 import babel from '@rollup/plugin-babel';
 
-const mainFields = ['module', 'jsnext:main', 'main', 'browser'];
-const external = ['cookie'];
-
 export default [
   {
     input: 'src/index.ts',
@@ -14,8 +12,8 @@ export default [
       format: 'esm',
       entryFileNames: '[name].mjs',
     },
-    plugins: [typescript({ outDir: './esm' })],
-    external,
+    plugins: [resolve(), commonjs(), typescript({ outDir: './esm' })],
+    external: [], // cookie library is not ESM compatible so we transform it
   },
   {
     input: 'src/index.ts',
@@ -27,7 +25,7 @@ export default [
       typescript({ outDir: './cjs' }),
       babel({ babelHelpers: 'bundled' }),
     ],
-    external,
+    external: ['cookie'],
   },
   {
     input: 'src/index.ts',
@@ -36,8 +34,8 @@ export default [
       format: 'umd',
       name: 'UniversalCookie',
     },
-    plugins: [resolve({ mainFields }), typescript({ outDir: './umd' })],
-    external,
+    plugins: [resolve(), commonjs(), typescript({ outDir: './umd' })],
+    external: [], // cookie library is not UMD compatible so we transform it
   },
   {
     input: 'src/index.ts',
@@ -46,11 +44,7 @@ export default [
       format: 'umd',
       name: 'UniversalCookie',
     },
-    plugins: [
-      resolve({ mainFields }),
-      typescript({ outDir: './umd' }),
-      terser(),
-    ],
-    external,
+    plugins: [resolve(), commonjs(), typescript({ outDir: './umd' }), terser()],
+    external: [], // cookie library is not UMD compatible so we transform it
   },
 ];

packages/universal-cookie/umd-sandbox.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <script crossorigin src="umd/universalCookie.js"></script>
+    <script>
+      function load() {
+        var data = '{{data}}';
+
+        var cookies = new UniversalCookie(null, { path: '/' });
+        cookies.set('data_cookie', data, {
+          expires: data.expires_at,
+        });
+
+        document.body.innerHTML = cookies.get('data_cookie');
+      }
+      window.onload = load;
+    </script>
+  </head>
+  <body></body>
+</html>