Convert project to entirely es modules (#40)

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 };

frameworks/lit-html/package.json

@@ -1,5 +1,6 @@
 {
   "name": "lit-html-apps",
+  "type": "module",
   "private": true,
   "version": "0.0.1",
   "license": "MIT",

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", () => []);

frameworks/preact-hooks/package.json

@@ -1,5 +1,6 @@
 {
   "name": "preact-hooks-apps",
+  "type": "module",
   "private": true,
   "version": "0.0.1",
   "license": "MIT",

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);

frameworks/preact/package.json

@@ -1,5 +1,6 @@
 {
   "name": "preact-apps",
+  "type": "module",
   "private": true,
   "version": "0.0.1",
   "license": "MIT",

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);

frameworks/react-hooks/package.json

@@ -1,5 +1,6 @@
 {
   "name": "react-hooks-apps",
+  "type": "module",
   "private": true,
   "version": "0.0.1",
   "license": "MIT",

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);

frameworks/react/package.json

@@ -1,5 +1,6 @@
 {
   "name": "react-apps",
+  "type": "module",
   "private": true,
   "version": "0.0.1",
   "license": "MIT",

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);

frameworks/solid-js/package.json

@@ -1,5 +1,6 @@
 {
   "name": "solid-js-apps",
+  "type": "module",
   "private": true,
   "version": "0.0.1",
   "license": "MIT",

frameworks/solid-js/rollup.config.js

@@ -1,10 +1,10 @@
-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({
 		babelHelpers: "bundled"
 	})
 ];
 
-module.exports = generateConfigs("solid-js", plugins);
+export default generateConfigs("solid-js", plugins);

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) {
 			]
 		]
 	};
-};
+}

frameworks/svelte/package.json

@@ -1,5 +1,6 @@
 {
   "name": "svelte-apps",
+  "type": "module",
   "private": true,
   "version": "0.0.1",
   "license": "MIT",

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);

frameworks/vue/package.json

@@ -1,5 +1,6 @@
 {
   "name": "vue-apps",
+  "type": "module",
   "private": true,
   "version": "0.0.1",
   "license": "MIT",

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

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

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",

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"
   },

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,

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",

tests/package.json

@@ -1,5 +1,6 @@
 {
   "name": "tests",
+  "type": "module",
   "version": "1.0.0",
   "private": true,
   "scripts": {