feat: Publish some packages as ESM & CJS (#36012)

Co-authored-by: Ward Peeters <[email protected]>

packages/create-gatsby/package.json

@@ -30,7 +30,7 @@
     "fs-extra": "^10.1.0",
     "gatsby-plugin-utils": "^3.13.0-next.0",
     "joi": "^17.4.2",
-    "microbundle": "^0.14.2",
+    "microbundle": "^0.15.0",
     "node-fetch": "^2.6.6",
     "string-length": "^4.0.2",
     "terminal-link": "^2.1.1",

packages/gatsby-design-tokens/package.json

@@ -32,7 +32,7 @@
   "devDependencies": {
     "agadoo": "^2.0.0",
     "cross-env": "^7.0.3",
-    "microbundle": "^0.14.2",
+    "microbundle": "^0.15.0",
     "preval.macro": "^5.0.0"
   },
   "engines": {

packages/gatsby-legacy-polyfills/package.json

@@ -40,7 +40,7 @@
     "event-target-polyfill": "^0.0.3",
     "execa": "^5.1.1",
     "fs-extra": "^10.1.0",
-    "microbundle": "^0.14.2",
+    "microbundle": "^0.15.0",
     "npm-run-all": "^4.1.5",
     "object-assign": "^4.1.1",
     "url-polyfill": "^1.1.12",

packages/gatsby-link/.babelrc

@@ -1,3 +1 @@
-{
-  "presets": [["babel-preset-gatsby-package", { "browser": true, "esm": true }]]
-}
+{}

packages/gatsby-link/package.json

@@ -6,18 +6,30 @@
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
+  "source": "src/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.mjs",
+  "types": "index.d.ts",
+  "files": [
+    "dist/*"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "microbundle -f cjs,modern --jsx React.createElement --generateTypes false",
+    "watch": "npm run build watch --no-compress",
+    "prepare": "cross-env NODE_ENV=production npm run clean && npm run build",
+    "clean": "del-cli dist/*"
+  },
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
     "@types/reach__router": "^1.3.10",
     "gatsby-page-utils": "^2.19.0-next.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
     "@testing-library/react": "^11.2.7",
-    "babel-preset-gatsby-package": "^2.19.0-next.0",
-    "cross-env": "^7.0.3"
+    "cross-env": "^7.0.3",
+    "del-cli": "^3.0.1",
+    "microbundle": "^0.15.0"
   },
   "peerDependencies": {
     "@gatsbyjs/reach-router": "^1.3.5",
@@ -29,18 +41,11 @@
     "gatsby"
   ],
   "license": "MIT",
-  "main": "index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/gatsbyjs/gatsby.git",
     "directory": "packages/gatsby-link"
   },
-  "scripts": {
-    "build": "babel src --out-dir . --ignore \"**/__tests__\"",
-    "prepare": "cross-env NODE_ENV=production npm run build",
-    "watch": "babel -w src --out-dir . --ignore \"**/__tests__\""
-  },
-  "types": "index.d.ts",
   "engines": {
     "node": ">=14.15.0"
   }

packages/gatsby-link/src/index.js

@@ -4,38 +4,9 @@ import { Link, Location } from "@gatsbyjs/reach-router"
 import { parsePath } from "./parse-path"
 import { isLocalLink } from "./is-local-link"
 import { rewriteLinkPath } from "./rewrite-link-path"
+import { withPrefix, getGlobalPathPrefix } from "./prefix-helpers"
 
-export { parsePath }
-
-export function withPrefix(path, prefix = getGlobalBasePrefix()) {
-  if (!isLocalLink(path)) {
-    return path
-  }
-
-  if (path.startsWith(`./`) || path.startsWith(`../`)) {
-    return path
-  }
-  const base = prefix ?? getGlobalPathPrefix() ?? `/`
-
-  return `${base?.endsWith(`/`) ? base.slice(0, -1) : base}${
-    path.startsWith(`/`) ? path : `/${path}`
-  }`
-}
-
-// These global values are wrapped in typeof clauses to ensure the values exist.
-// This is especially problematic in unit testing of this component.
-const getGlobalPathPrefix = () =>
-  process.env.NODE_ENV !== `production`
-    ? typeof __PATH_PREFIX__ !== `undefined`
-      ? __PATH_PREFIX__
-      : undefined
-    : __PATH_PREFIX__
-const getGlobalBasePrefix = () =>
-  process.env.NODE_ENV !== `production`
-    ? typeof __BASE_PATH__ !== `undefined`
-      ? __BASE_PATH__
-      : undefined
-    : __BASE_PATH__
+export { parsePath, withPrefix }
 
 export function withAssetPrefix(path) {
   return withPrefix(path, getGlobalPathPrefix())

packages/gatsby-link/src/prefix-helpers.js

@@ -0,0 +1,32 @@
+import { isLocalLink } from "./is-local-link"
+
+export const getGlobalBasePrefix = () =>
+  process.env.NODE_ENV !== `production`
+    ? typeof __BASE_PATH__ !== `undefined`
+      ? __BASE_PATH__
+      : undefined
+    : __BASE_PATH__
+
+// These global values are wrapped in typeof clauses to ensure the values exist.
+// This is especially problematic in unit testing of this component.
+export const getGlobalPathPrefix = () =>
+  process.env.NODE_ENV !== `production`
+    ? typeof __PATH_PREFIX__ !== `undefined`
+      ? __PATH_PREFIX__
+      : undefined
+    : __PATH_PREFIX__
+
+export function withPrefix(path, prefix = getGlobalBasePrefix()) {
+  if (!isLocalLink(path)) {
+    return path
+  }
+
+  if (path.startsWith(`./`) || path.startsWith(`../`)) {
+    return path
+  }
+  const base = prefix ?? getGlobalPathPrefix() ?? `/`
+
+  return `${base?.endsWith(`/`) ? base.slice(0, -1) : base}${
+    path.startsWith(`/`) ? path : `/${path}`
+  }`
+}

packages/gatsby-link/src/rewrite-link-path.js

@@ -3,7 +3,7 @@ import { resolve } from "@gatsbyjs/reach-router/lib/utils"
 import { applyTrailingSlashOption } from "gatsby-page-utils/apply-trailing-slash-option"
 import { parsePath } from "./parse-path"
 import { isLocalLink } from "./is-local-link"
-import { withPrefix } from "."
+import { withPrefix } from "./prefix-helpers"
 
 const isAbsolutePath = path => path?.startsWith(`/`)
 

packages/gatsby-plugin-image/package.json

@@ -4,9 +4,9 @@
   "scripts": {
     "build": "npm-run-all --npm-path npm -s clean -p build:*",
     "build:gatsby-node": "tsc --jsx react --downlevelIteration true --skipLibCheck true --esModuleInterop true --outDir dist/ src/gatsby-node.ts src/babel-plugin-parse-static-images.ts src/resolver-utils.ts src/types.d.ts -d --declarationDir dist/src",
-    "build:gatsby-ssr": "microbundle -i src/gatsby-ssr.tsx -f cjs -o ./[name].js --no-pkg-main --jsx React.createElement --no-compress --external=common-tags,react --no-sourcemap",
-    "build:server": "microbundle -f cjs,es --jsx React.createElement --define SERVER=true",
-    "build:browser": "microbundle -i src/index.browser.ts -f cjs,modern --jsx React.createElement -o dist/gatsby-image.browser --define SERVER=false",
+    "build:gatsby-ssr": "microbundle -i src/gatsby-ssr.tsx -f cjs -o ./[name].js --no-pkg-main --jsx React.createElement --jsxFragment React.Fragment --no-compress --external=common-tags,react --no-sourcemap",
+    "build:server": "microbundle -f cjs,es --jsx React.createElement --jsxFragment React.Fragment --define SERVER=true",
+    "build:browser": "microbundle -i src/index.browser.ts -f cjs,modern --jsx React.createElement --jsxFragment React.Fragment -o dist/gatsby-image.browser --define SERVER=false",
     "prepare": "yarn build",
     "watch": "npm-run-all --npm-path npm -s clean -p watch:*",
     "watch:gatsby-node": "yarn build:gatsby-node --watch",
@@ -56,7 +56,7 @@
     "cssnano": "^4.1.10",
     "del-cli": "^3.0.1",
     "do-sync": "^3.0.11",
-    "microbundle": "^0.13.0",
+    "microbundle": "^0.15.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.9",
     "semver": "^7.3.7",

packages/gatsby-script/.babelrc

@@ -1,6 +1 @@
-{
-  "presets": [
-    ["babel-preset-gatsby-package", { "browser": true, "esm": true }],
-    "@babel/preset-typescript"
-  ]
-}
+{}

packages/gatsby-script/package.json

@@ -6,33 +6,25 @@
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
+  "source": "src/index.ts",
   "main": "dist/index.js",
+  "module": "dist/index.modern.mjs",
   "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/*.d.ts",
-        "dist/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist/*"
   ],
+  "sideEffects": false,
   "scripts": {
-    "typegen": "rimraf \"dist/**/*.d.ts\" && tsc --emitDeclarationOnly --declaration --declarationDir dist/",
-    "build": "babel src --extensions \".js,.jsx,.ts,.tsx\" --out-dir dist --ignore \"**/__tests__\"",
-    "watch": "babel -w src --extensions \".js,.jsx,.ts,.tsx\" --out-dir dist --ignore \"**/__tests__\"",
-    "prepare": "cross-env NODE_ENV=production npm run build && npm run typegen"
+    "build": "microbundle -f cjs,modern --jsx React.createElement",
+    "watch": "microbundle watch -f cjs,modern --jsx React.createElement --no-compress",
+    "prepare": "cross-env NODE_ENV=production npm run clean && npm run build",
+    "clean": "del-cli dist/*"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
-    "@babel/preset-typescript": "^7.16.7",
     "@testing-library/react": "^11.2.7",
-    "babel-preset-gatsby-package": "^2.19.0-next.0",
     "cross-env": "^7.0.3",
-    "rimraf": "^3.0.2",
+    "del-cli": "^3.0.1",
+    "microbundle": "^0.15.0",
     "typescript": "^4.7.2"
   },
   "peerDependencies": {

yarn.lock

@@ -16536,56 +16536,10 @@ methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 
-microbundle@^0.13.0:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/microbundle/-/microbundle-0.13.3.tgz#cfc5055b50cf7a0bcc5eec441604f4520ccd07ec"
-  integrity sha512-nlP20UmyqGGeh6jhk8VaVFEoRlF+JAvnwixPLQUwHEcAF59ROJCyh34eylJzUAVNvF3yrCaHxIBv8lYcphDM1g==
-  dependencies:
-    "@babel/core" "^7.12.10"
-    "@babel/plugin-proposal-class-properties" "7.12.1"
-    "@babel/plugin-syntax-import-meta" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.12.1"
-    "@babel/plugin-transform-flow-strip-types" "^7.12.10"
-    "@babel/plugin-transform-react-jsx" "^7.12.11"
-    "@babel/plugin-transform-regenerator" "^7.12.1"
-    "@babel/preset-env" "^7.12.11"
-    "@babel/preset-flow" "^7.12.1"
-    "@babel/preset-react" "^7.12.10"
-    "@rollup/plugin-alias" "^3.1.1"
-    "@rollup/plugin-babel" "^5.2.2"
-    "@rollup/plugin-commonjs" "^17.0.0"
-    "@rollup/plugin-json" "^4.1.0"
-    "@rollup/plugin-node-resolve" "^11.0.1"
-    asyncro "^3.0.0"
-    autoprefixer "^10.1.0"
-    babel-plugin-macros "^3.0.1"
-    babel-plugin-transform-async-to-promises "^0.8.15"
-    babel-plugin-transform-replace-expressions "^0.2.0"
-    brotli-size "^4.0.0"
-    builtin-modules "^3.1.0"
-    camelcase "^6.2.0"
-    escape-string-regexp "^4.0.0"
-    filesize "^6.1.0"
-    gzip-size "^6.0.0"
-    kleur "^4.1.3"
-    lodash.merge "^4.6.2"
-    postcss "^8.2.1"
-    pretty-bytes "^5.4.1"
-    rollup "^2.35.1"
-    rollup-plugin-bundle-size "^1.0.3"
-    rollup-plugin-postcss "^4.0.0"
-    rollup-plugin-terser "^7.0.2"
-    rollup-plugin-typescript2 "^0.29.0"
-    sade "^1.7.4"
-    terser "^5.7.0"
-    tiny-glob "^0.2.8"
-    tslib "^2.0.3"
-    typescript "^4.1.3"
-
-microbundle@^0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/microbundle/-/microbundle-0.14.2.tgz#2db869c8145bd159aa55058ead47223f58f93bf2"
-  integrity sha512-jODALfU3w7jnJAqw7Tou9uU8e8zH0GRVWzOd/V7eAvD1fsfb9pyMbmzhFZqnX6SCb54eP1EF5oRyNlSxBAxoag==
+microbundle@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/microbundle/-/microbundle-0.15.0.tgz#d5a63ce02271b20d79fd30d83a123aaf962a5191"
+  integrity sha512-EkFst5ntLXoQGewkvga/Kd72RcN7IuJRl5ivLihJSbvLfJQo8LDS0n9X0q81vegiC59vhtKIM6qjrl1fOAtuGw==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "7.12.1"
@@ -16623,6 +16577,7 @@ microbundle@^0.14.2:
     rollup-plugin-postcss "^4.0.0"
     rollup-plugin-terser "^7.0.2"
     rollup-plugin-typescript2 "^0.29.0"
+    rollup-plugin-visualizer "^5.6.0"
     sade "^1.7.4"
     terser "^5.7.0"
     tiny-glob "^0.2.8"
@@ -17112,10 +17067,10 @@ nan@^2.10.0, nan@^2.14.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
-nanoid@^3.1.30:
-  version "3.1.30"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
-  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
+nanoid@^3.1.30, nanoid@^3.1.32:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -21972,6 +21927,16 @@ rollup-plugin-virtual@^1.0.1:
   resolved "https://registry.yarnpkg.com/rollup-plugin-virtual/-/rollup-plugin-virtual-1.0.1.tgz#8227c94c605b981adfe433ea74de3551e42ffeb4"
   integrity sha512-HCTBpV8MwP5lNzZrHD2moVxHIToHU1EkzkKGVj6Z0DcgUfxrxrZmeQirQeLz2yhnkJqRjwiVywK9CS8jDYakrw==
 
+rollup-plugin-visualizer@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.6.0.tgz#06aa7cf3fd504a29d404335700f2a3f28ebb33f3"
+  integrity sha512-CKcc8GTUZjC+LsMytU8ocRr/cGZIfMR7+mdy4YnlyetlmIl/dM8BMnOEpD4JPIGt+ZVW7Db9ZtSsbgyeBH3uTA==
+  dependencies:
+    nanoid "^3.1.32"
+    open "^8.4.0"
+    source-map "^0.7.3"
+    yargs "^17.3.1"
+
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"