From ddf6975519298552fc37f3b941b29f88595f2faa Mon Sep 17 00:00:00 2001 From: Andre Wiggins Date: Mon, 16 Oct 2023 14:48:06 -0700 Subject: [PATCH] Convert project to entirely es modules --- frameworks/bundleHelpers.js | 16 ++++++++-------- frameworks/lit-html/package.json | 1 + frameworks/lit-html/rollup.config.js | 4 ++-- frameworks/preact-hooks/package.json | 1 + frameworks/preact-hooks/rollup.config.js | 6 +++--- frameworks/preact/package.json | 1 + frameworks/preact/rollup.config.js | 6 +++--- frameworks/react-hooks/package.json | 1 + frameworks/react-hooks/rollup.config.js | 10 +++++----- frameworks/react/package.json | 1 + frameworks/react/rollup.config.js | 10 +++++----- frameworks/solid-js/package.json | 1 + frameworks/solid-js/rollup.config.js | 6 +++--- frameworks/svelte/babel.config.js | 4 ++-- frameworks/svelte/package.json | 1 + frameworks/svelte/rollup.config.js | 11 +++++------ frameworks/vue/package.json | 1 + frameworks/vue/rollup.config.js | 10 +++++----- jest-puppeteer.config.js | 2 +- package-lock.json | 3 ++- package.json | 3 ++- scripts/package.json | 2 +- sizes.json | 8 ++++---- tests/babelTransformer.js | 4 ++-- tests/package.json | 1 + 25 files changed, 62 insertions(+), 52 deletions(-) diff --git a/frameworks/bundleHelpers.js b/frameworks/bundleHelpers.js index 82bb74e..31941fd 100644 --- a/frameworks/bundleHelpers.js +++ b/frameworks/bundleHelpers.js @@ -1,8 +1,10 @@ -const path = require("path"); -const { readdirSync, existsSync } = require("fs"); -const nodeResolve = require("@rollup/plugin-node-resolve").default; -const { default: terser } = require("@rollup/plugin-terser"); -const visualizer = require("rollup-plugin-visualizer").default; +import path from "path"; +import { readdirSync, existsSync } from "fs"; +import nodeResolve from "@rollup/plugin-node-resolve"; +import terser from "@rollup/plugin-terser"; +import { visualizer } from "rollup-plugin-visualizer"; + +const __dirname = new URL(".", import.meta.url).pathname; const frameworkOutput = (...args) => path.join(__dirname, "../dist/frameworks", ...args); @@ -16,7 +18,7 @@ const listDirsSync = source => * @param {string} frameworkName * @param {(environment: Environment) => any[]} plugins */ -function generateConfigs(frameworkName, plugins) { +export function generateConfigs(frameworkName, plugins) { return listDirsSync("./src") .map(appFolder => { const jsIndexPath = `./src/${appFolder}/index.js`; @@ -86,5 +88,3 @@ function generateConfig( } }; } - -module.exports = { generateConfigs }; diff --git a/frameworks/lit-html/package.json b/frameworks/lit-html/package.json index 2841b81..2a54886 100644 --- a/frameworks/lit-html/package.json +++ b/frameworks/lit-html/package.json @@ -1,5 +1,6 @@ { "name": "lit-html-apps", + "type": "module", "private": true, "version": "0.0.1", "license": "MIT", diff --git a/frameworks/lit-html/rollup.config.js b/frameworks/lit-html/rollup.config.js index d559f84..41cf0d4 100644 --- a/frameworks/lit-html/rollup.config.js +++ b/frameworks/lit-html/rollup.config.js @@ -1,3 +1,3 @@ -const { generateConfigs } = require("../bundleHelpers"); +import { generateConfigs } from "../bundleHelpers.js"; -module.exports = generateConfigs("lit-html", () => []); +export default generateConfigs("lit-html", () => []); diff --git a/frameworks/preact-hooks/package.json b/frameworks/preact-hooks/package.json index f3cf7f6..6587d84 100644 --- a/frameworks/preact-hooks/package.json +++ b/frameworks/preact-hooks/package.json @@ -1,5 +1,6 @@ { "name": "preact-hooks-apps", + "type": "module", "private": true, "version": "0.0.1", "license": "MIT", diff --git a/frameworks/preact-hooks/rollup.config.js b/frameworks/preact-hooks/rollup.config.js index fe0677e..92723e3 100644 --- a/frameworks/preact-hooks/rollup.config.js +++ b/frameworks/preact-hooks/rollup.config.js @@ -1,5 +1,5 @@ -const babel = require("@rollup/plugin-babel").default; -const { generateConfigs } = require("../bundleHelpers"); +import babel from "@rollup/plugin-babel"; +import { generateConfigs } from "../bundleHelpers.js"; const plugins = () => [ babel({ @@ -8,4 +8,4 @@ const plugins = () => [ }) ]; -module.exports = generateConfigs("preact-hooks", plugins); +export default generateConfigs("preact-hooks", plugins); diff --git a/frameworks/preact/package.json b/frameworks/preact/package.json index 9e369f0..d05b4d9 100644 --- a/frameworks/preact/package.json +++ b/frameworks/preact/package.json @@ -1,5 +1,6 @@ { "name": "preact-apps", + "type": "module", "private": true, "version": "0.0.1", "license": "MIT", diff --git a/frameworks/preact/rollup.config.js b/frameworks/preact/rollup.config.js index 94fd302..361d074 100644 --- a/frameworks/preact/rollup.config.js +++ b/frameworks/preact/rollup.config.js @@ -1,5 +1,5 @@ -const babel = require("@rollup/plugin-babel").default; -const { generateConfigs } = require("../bundleHelpers"); +import babel from "@rollup/plugin-babel"; +import { generateConfigs } from "../bundleHelpers.js"; const plugins = () => [ babel({ @@ -8,4 +8,4 @@ const plugins = () => [ }) ]; -module.exports = generateConfigs("preact", plugins); +export default generateConfigs("preact", plugins); diff --git a/frameworks/react-hooks/package.json b/frameworks/react-hooks/package.json index baa840e..e94fdbb 100644 --- a/frameworks/react-hooks/package.json +++ b/frameworks/react-hooks/package.json @@ -1,5 +1,6 @@ { "name": "react-hooks-apps", + "type": "module", "private": true, "version": "0.0.1", "license": "MIT", diff --git a/frameworks/react-hooks/rollup.config.js b/frameworks/react-hooks/rollup.config.js index e7c066c..31e7c3f 100644 --- a/frameworks/react-hooks/rollup.config.js +++ b/frameworks/react-hooks/rollup.config.js @@ -1,7 +1,7 @@ -const babel = require("@rollup/plugin-babel").default; -const replace = require("@rollup/plugin-replace"); -const commonjs = require("@rollup/plugin-commonjs"); -const { generateConfigs } = require("../bundleHelpers"); +import babel from "@rollup/plugin-babel"; +import replace from "@rollup/plugin-replace"; +import commonjs from "@rollup/plugin-commonjs"; +import { generateConfigs } from "../bundleHelpers.js"; const plugins = environment => [ babel({ @@ -19,4 +19,4 @@ const plugins = environment => [ commonjs() ]; -module.exports = generateConfigs("react-hooks", plugins); +export default generateConfigs("react-hooks", plugins); diff --git a/frameworks/react/package.json b/frameworks/react/package.json index a2a514f..d02c1b9 100644 --- a/frameworks/react/package.json +++ b/frameworks/react/package.json @@ -1,5 +1,6 @@ { "name": "react-apps", + "type": "module", "private": true, "version": "0.0.1", "license": "MIT", diff --git a/frameworks/react/rollup.config.js b/frameworks/react/rollup.config.js index 7632a77..b8d9e6f 100644 --- a/frameworks/react/rollup.config.js +++ b/frameworks/react/rollup.config.js @@ -1,7 +1,7 @@ -const babel = require("@rollup/plugin-babel").default; -const replace = require("@rollup/plugin-replace"); -const commonjs = require("@rollup/plugin-commonjs"); -const { generateConfigs } = require("../bundleHelpers"); +import babel from "@rollup/plugin-babel"; +import replace from "@rollup/plugin-replace"; +import commonjs from "@rollup/plugin-commonjs"; +import { generateConfigs } from "../bundleHelpers.js"; const plugins = environment => [ babel({ @@ -19,4 +19,4 @@ const plugins = environment => [ commonjs() ]; -module.exports = generateConfigs("react", plugins); +export default generateConfigs("react", plugins); diff --git a/frameworks/solid-js/package.json b/frameworks/solid-js/package.json index 0e6abee..f484c85 100644 --- a/frameworks/solid-js/package.json +++ b/frameworks/solid-js/package.json @@ -1,5 +1,6 @@ { "name": "solid-js-apps", + "type": "module", "private": true, "version": "0.0.1", "license": "MIT", diff --git a/frameworks/solid-js/rollup.config.js b/frameworks/solid-js/rollup.config.js index 447e898..8a8e603 100644 --- a/frameworks/solid-js/rollup.config.js +++ b/frameworks/solid-js/rollup.config.js @@ -1,5 +1,5 @@ -const babel = require("@rollup/plugin-babel").default; -const { generateConfigs } = require("../bundleHelpers"); +import babel from "@rollup/plugin-babel"; +import { generateConfigs } from "../bundleHelpers.js"; const plugins = () => [ babel({ @@ -7,4 +7,4 @@ const plugins = () => [ }) ]; -module.exports = generateConfigs("solid-js", plugins); +export default generateConfigs("solid-js", plugins); diff --git a/frameworks/svelte/babel.config.js b/frameworks/svelte/babel.config.js index 5b8f7d6..c63d19b 100644 --- a/frameworks/svelte/babel.config.js +++ b/frameworks/svelte/babel.config.js @@ -1,5 +1,5 @@ // Use babel.config.js to override local .babelrc in Svelte -module.exports = function (api) { +export default function (api) { api.cache(true); return { @@ -13,4 +13,4 @@ module.exports = function (api) { ] ] }; -}; +} diff --git a/frameworks/svelte/package.json b/frameworks/svelte/package.json index 61f90cd..ef82cfe 100644 --- a/frameworks/svelte/package.json +++ b/frameworks/svelte/package.json @@ -1,5 +1,6 @@ { "name": "svelte-apps", + "type": "module", "private": true, "version": "0.0.1", "license": "MIT", diff --git a/frameworks/svelte/rollup.config.js b/frameworks/svelte/rollup.config.js index 067a9ac..d104c3b 100644 --- a/frameworks/svelte/rollup.config.js +++ b/frameworks/svelte/rollup.config.js @@ -1,10 +1,9 @@ -const { DEFAULT_EXTENSIONS } = require("@babel/core"); -const svelte = require("rollup-plugin-svelte"); -const babel = require("@rollup/plugin-babel").default; -const { generateConfigs } = require("../bundleHelpers"); +import { DEFAULT_EXTENSIONS } from "@babel/core"; +import svelte from "rollup-plugin-svelte"; +import babel from "@rollup/plugin-babel"; +import { generateConfigs } from "../bundleHelpers.js"; const plugins = () => [ - // @ts-expect-error Bad mixing of COMMONJS and ESM svelte({ extensions: [".html"] }), @@ -14,4 +13,4 @@ const plugins = () => [ }) ]; -module.exports = generateConfigs("svelte", plugins); +export default generateConfigs("svelte", plugins); diff --git a/frameworks/vue/package.json b/frameworks/vue/package.json index 46b9cd6..949cc70 100644 --- a/frameworks/vue/package.json +++ b/frameworks/vue/package.json @@ -1,5 +1,6 @@ { "name": "vue-apps", + "type": "module", "private": true, "version": "0.0.1", "license": "MIT", diff --git a/frameworks/vue/rollup.config.js b/frameworks/vue/rollup.config.js index 257e16c..751159f 100644 --- a/frameworks/vue/rollup.config.js +++ b/frameworks/vue/rollup.config.js @@ -1,12 +1,12 @@ -const replace = require("@rollup/plugin-replace"); -const commonjs = require("@rollup/plugin-commonjs"); -const vue = require("rollup-plugin-vue"); -const { generateConfigs } = require("../bundleHelpers"); +import replace from "@rollup/plugin-replace"; +import commonjs from "@rollup/plugin-commonjs"; +import vue from "rollup-plugin-vue"; +import { generateConfigs } from "../bundleHelpers.js"; // Guide to setting up bundler: // https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags -module.exports = generateConfigs("vue", environment => [ +export default generateConfigs("vue", environment => [ // @ts-ignore vue(), // @ts-ignore diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js index 978d534..e14146e 100644 --- a/jest-puppeteer.config.js +++ b/jest-puppeteer.config.js @@ -1,6 +1,6 @@ const isDebug = process.env.PPTR_DEBUG === "true"; -module.exports = { +export default { launch: { headless: isDebug ? false : "new", devtools: isDebug diff --git a/package-lock.json b/package-lock.json index e1bc8ed..54bcedf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "puppeteer": "^21.0.3", "rimraf": "^5.0.1", "rollup": "^3.28.0", - "rollup-plugin-visualizer": "^5.9.0" + "rollup-plugin-visualizer": "^5.9.2" } }, "frameworks/lit-html": { @@ -322,6 +322,7 @@ } }, "frameworks/solid-js": { + "name": "solid-js-apps", "version": "0.0.1", "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index c80aabe..74243df 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "framework-compare", + "type": "module", "version": "0.0.1", "private": true, "description": "Compare implementations of some basic webpages in different frameworks", @@ -55,7 +56,7 @@ "puppeteer": "^21.0.3", "rimraf": "^5.0.1", "rollup": "^3.28.0", - "rollup-plugin-visualizer": "^5.9.0" + "rollup-plugin-visualizer": "^5.9.2" }, "jest": { "preset": "jest-puppeteer", diff --git a/scripts/package.json b/scripts/package.json index d8cad7b..4dfa78a 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -1,9 +1,9 @@ { "name": "scripts", + "type": "module", "private": true, "version": "0.0.1", "license": "MIT", - "type": "module", "scripts": { "tsc": "tsc -p jsconfig.json --noEmit" }, diff --git a/sizes.json b/sizes.json index 895babb..412c149 100644 --- a/sizes.json +++ b/sizes.json @@ -185,10 +185,10 @@ "brotli": 2736 }, "7GUIs-flight-booker": { - "raw": 24511, - "minified": 10295, - "gzip": 4085, - "brotli": 3669 + "raw": 24422, + "minified": 10265, + "gzip": 4078, + "brotli": 3662 }, "7GUIs-timer": { "raw": 19713, diff --git a/tests/babelTransformer.js b/tests/babelTransformer.js index cd8cd84..2dea245 100644 --- a/tests/babelTransformer.js +++ b/tests/babelTransformer.js @@ -1,4 +1,4 @@ -const babelJest = require("babel-jest"); +import { createTransformer } from "babel-jest"; // By default, babel-jest looks for a babel.config.js to determine the configuration // to use to run tests. We don't want to add a babel.config.js at the root of this project @@ -8,7 +8,7 @@ const babelJest = require("babel-jest"); // files which didn't intuitively work (specifically the date.test.js file cuz it imports a file // outside of the "tests" directory where we could put a babel config), we are manually specifying // a Babel config here -module.exports = babelJest.createTransformer({ +export default createTransformer({ presets: [ [ "@babel/preset-env", diff --git a/tests/package.json b/tests/package.json index 58e795d..747f7db 100644 --- a/tests/package.json +++ b/tests/package.json @@ -1,5 +1,6 @@ { "name": "tests", + "type": "module", "version": "1.0.0", "private": true, "scripts": {