chore: build an es5 bundle and move main to es6 (#1480)

Author: pauldambra

.babelrc

@@ -1,6 +1,7 @@
 {
     "presets": ["@babel/env", ["@babel/typescript", { "jsxPragma": "h" }]],
     "plugins": [
+        "@babel/plugin-transform-nullish-coalescing-operator",
         [
             "@babel/transform-react-jsx",
             {

.github/workflows/ssr-es-check.yml renamed to .github/workflows/es-check.yml

@@ -1,4 +1,4 @@
-name: Server-side rendering and ES5
+name: ES5 support check
 
 on:
   - pull_request
@@ -19,8 +19,5 @@ jobs:
 
       - run: pnpm install && pnpm build
 
-      - name: Run es-check to check if our bundle is ES5 compatible
-        run: npx [email protected] es5 dist/{array,main}.js
-
-      - name: Require module via node
-        run: cd dist; node -e "require('./main')"
+      - name: Run es-check to check if our ie11 bundle is ES5 compatible
+        run: npx [email protected] es5 dist/array.full.es5.js

package.json

@@ -38,19 +38,22 @@
         "react/package.json"
     ],
     "dependencies": {
+        "core-js": "^3.38.1",
         "fflate": "^0.4.8",
         "preact": "^10.19.3",
         "web-vitals": "^4.2.0"
     },
     "devDependencies": {
         "@babel/core": "7.18.9",
         "@babel/plugin-syntax-decorators": "^7.23.3",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.25.8",
         "@babel/plugin-transform-react-jsx": "^7.23.4",
         "@babel/preset-env": "7.18.9",
         "@babel/preset-typescript": "^7.18.6",
         "@cypress/skip-test": "^2.6.1",
         "@jest/globals": "^27.5.1",
         "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^28.0.1",
         "@rollup/plugin-json": "^6.1.0",
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-terser": "^0.4.4",

pnpm-lock.yaml

@@ -5,26 +5,37 @@ import typescript from '@rollup/plugin-typescript'
 import { dts } from 'rollup-plugin-dts'
 import terser from '@rollup/plugin-terser'
 import { visualizer } from 'rollup-plugin-visualizer'
+import commonjs from '@rollup/plugin-commonjs'
 import fs from 'fs'
 import path from 'path'
 
-const plugins = [
+const plugins = (es5) => [
     json(),
     resolve({ browser: true }),
     typescript({ sourceMap: true, outDir: './dist' }),
+    commonjs(),
     babel({
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
         babelHelpers: 'bundled',
+        plugins: ['@babel/plugin-transform-nullish-coalescing-operator'],
         presets: [
             [
                 '@babel/preset-env',
                 {
-                    targets: '>0.5%, last 2 versions, Firefox ESR, not dead, IE 11',
+                    targets: es5
+                        ? '>0.5%, last 2 versions, Firefox ESR, not dead, IE 11'
+                        : '>0.5%, last 2 versions, Firefox ESR, not dead',
                 },
             ],
         ],
     }),
-    terser({ toplevel: true }),
+    terser({
+        toplevel: true,
+        compress: {
+            // 5 is the default if unspecified
+            ecma: es5 ? 5 : 6,
+        },
+    }),
 ]
 
 const entrypoints = fs.readdirSync('./src/entrypoints')
@@ -44,6 +55,8 @@ const entrypointTargets = entrypoints.map((file) => {
 
     const fileName = fileParts.join('.')
 
+    const pluginsForThisFile = plugins(fileName.includes('es5'))
+
     // we're allowed to console log in this file :)
     // eslint-disable-next-line no-console
     console.log(`Building ${fileName} in ${format} format`)
@@ -67,7 +80,7 @@ const entrypointTargets = entrypoints.map((file) => {
                 ...(format === 'cjs' ? { exports: 'auto' } : {}),
             },
         ],
-        plugins: [...plugins, visualizer({ filename: `bundle-stats-${fileName}.html` })],
+        plugins: [...pluginsForThisFile, visualizer({ filename: `bundle-stats-${fileName}.html` })],
     }
 })
 

rollup.config.js

@@ -0,0 +1,11 @@
+// a straight copy of the array.full.ts entrypoint,
+// but will have different config when passed through rollup
+// to allow es5/IE11 support
+
+// it doesn't include recorder which doesn't support IE11,
+// and it doesn't include web-vitals which doesn't support IE11
+
+import './surveys'
+import './exception-autocapture'
+import './tracing-headers'
+import './array.no-external'

src/entrypoints/array.full.es5.ts

@@ -33,7 +33,10 @@ export const staticFilesMock = RequestMock()
     .onRequestTo(/array.full.js/)
     .respond((req, res) => {
         // eslint-disable-next-line no-undef
-        const arrayjs = fs.readFileSync(path.resolve(__dirname, '../dist/array.full.js'))
+        const ENV_BROWSER = process.env.BROWSER
+        const fileToRead = ENV_BROWSER === 'browserstack:ie' ? '../dist/array.full.es5.js' : '../dist/array.full.js'
+        // eslint-disable-next-line no-undef
+        const arrayjs = fs.readFileSync(path.resolve(__dirname, fileToRead))
         res.setBody(arrayjs)
     })
     .onRequestTo(/playground/)