Convert build.js to mjs modules

experimental/javascript-wc-indexeddb/package.json

@@ -9,7 +9,7 @@
     "private": true,
     "scripts": {
         "dev": "http-server ./ -p 7005 -c-1 --cors -o",
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7006 -c-1 --cors -o"
     },
     "keywords": [],

experimental/javascript-wc-indexeddb/scripts/build.js → experimental/javascript-wc-indexeddb/scripts/build.mjs

@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const { dirname } = require("path");
+import fs from "fs/promises";
+import { dirname } from "path";
 
 /**
  * createDirectory

experimental/todomvc-localstorage/package.json

@@ -9,7 +9,7 @@
     "private": true,
     "scripts": {
         "dev": "http-server ./ -p 7001 -c-1 --cors",
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "dependencies": {

experimental/todomvc-localstorage/scripts/build.js → experimental/todomvc-localstorage/scripts/build.mjs

@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const path = require("path");
+import fs from "fs/promises";
+import path from "path";
 
 const rootDirectory = "./";
 const sourceDirectory = "./src";

resources/todomvc/architecture-examples/angular-complex/package.json

@@ -8,7 +8,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {

resources/todomvc/architecture-examples/angular-complex/scripts/build.js → resources/todomvc/architecture-examples/angular-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC Angular Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/architecture-examples/backbone-complex/package.json

@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {

resources/todomvc/architecture-examples/backbone-complex/scripts/build.js → resources/todomvc/architecture-examples/backbone-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC Backbone Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/architecture-examples/backbone/package.json

@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "dev": "http-server ./ -p 7001 -c-1 --cors",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },

resources/todomvc/architecture-examples/backbone/scripts/build.js → resources/todomvc/architecture-examples/backbone/scripts/build.mjs

@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const path = require("path");
+import fs from "fs/promises";
+import path from "path";
 
 const rootDirectory = "./";
 const sourceDirectory = "./src";

resources/todomvc/architecture-examples/jquery-complex/package.json

@@ -2,7 +2,7 @@
   "name": "todomvc-jquery-complex",
   "private": true,
   "scripts": {
-    "build": "node scripts/build.js",
+    "build": "node scripts/build.mjs",
     "serve": "http-server ./dist -p 7002 -c-1 --cors"
   },
   "devDependencies": {

resources/todomvc/architecture-examples/jquery-complex/scripts/build.js → resources/todomvc/architecture-examples/jquery-complex/scripts/build.mjs

@@ -1,8 +1,10 @@
 /**
  * Builds the TodoMVC jQuery Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
+
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/architecture-examples/jquery/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "http-server . -p 7001 -c-1 --cors",
-    "build": "node scripts/build.js",
+    "build": "node scripts/build.mjs",
     "serve": "http-server ./dist -p 7002 -c-1 --cors"
   },
   "dependencies": {

resources/todomvc/architecture-examples/jquery/scripts/build.js → resources/todomvc/architecture-examples/jquery/scripts/build.mjs

@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const path = require("path");
+import fs from "fs/promises";
+import path from "path";
 
 const rootDirectory = "./";
 const sourceDirectory = "./src";

resources/todomvc/architecture-examples/lit-complex/package.json

@@ -6,7 +6,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 8000 -c-1 --cors"
     },
     "devDependencies": {

resources/todomvc/architecture-examples/lit-complex/scripts/build.js → resources/todomvc/architecture-examples/lit-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC Lit Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/architecture-examples/preact-complex/package.json

@@ -8,7 +8,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {

resources/todomvc/architecture-examples/preact-complex/scripts/build.js → resources/todomvc/architecture-examples/preact-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Build the TodoMVC Preact Complex DOM example.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/architecture-examples/react-complex/package.json

@@ -8,7 +8,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {

resources/todomvc/architecture-examples/react-complex/scripts/build.js → resources/todomvc/architecture-examples/react-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Build the TodoMVC: React Complex DOM example.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/architecture-examples/react-redux-complex/package.json

@@ -8,7 +8,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {

resources/todomvc/architecture-examples/react-redux-complex/scripts/build.js → resources/todomvc/architecture-examples/react-redux-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC React-Redux Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/architecture-examples/svelte-complex/package.json

@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {

resources/todomvc/architecture-examples/svelte-complex/scripts/build.js → resources/todomvc/architecture-examples/svelte-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC Svelte Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/architecture-examples/vue-complex/package.json

@@ -8,7 +8,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {

resources/todomvc/architecture-examples/vue-complex/scripts/build.js → resources/todomvc/architecture-examples/vue-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC Vue Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/big-dom-generator/package.json

@@ -8,7 +8,7 @@
     },
     "scripts": {
         "build": "webpack --config webpack.prod.mjs",
-        "postbuild": "node dist/app.bundle.js && purgecss -css dist/big-dom.css --content dist/index.html --output=dist/big-dom.css && rm dist/app.bundle.js && rm dist/app.bundle.js.LICENSE.txt && node utils/createVariant.js",
+        "postbuild": "node dist/app.bundle.js && purgecss -css dist/big-dom.css --content dist/index.html --output=dist/big-dom.css && rm dist/app.bundle.js && rm dist/app.bundle.js.LICENSE.txt && node utils/createVariant.mjs",
         "dev": "webpack serve --open --config webpack.dev.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },

resources/todomvc/big-dom-generator/utils/buildComplex.js → resources/todomvc/big-dom-generator/utils/buildComplex.mjs

@@ -1,6 +1,10 @@
-const fs = require("fs");
-const path = require("path");
-const { execSync } = require("child_process");
+import fs from "fs";
+import path from "path";
+import { execSync } from "child_process";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+const __dirname = import.meta.dirname;
 
 /**
  * Builds the complex version of TodoMVC.
@@ -21,7 +25,7 @@ const { execSync } = require("child_process");
  * @param {string} options.standaloneDirectory - The directory of the TodoMVC standalone version.
  * @param {string} options.complexDirectory - The directory of the TodoMVC complex version.
  */
-function buildComplex(options) {
+export function buildComplex(options) {
     const {
         callerDirectory,
         sourceDirectory,
@@ -156,5 +160,3 @@ function getHtmlBodySync(filePath) {
 
     return htmlContent.substring(bodyStartIndex + 6, bodyEndIndex);
 }
-
-module.exports = { buildComplex };

resources/todomvc/big-dom-generator/utils/createVariant.js → resources/todomvc/big-dom-generator/utils/createVariant.mjs

@@ -1,12 +1,12 @@
+import fs from "fs";
+import postcss from "postcss";
+
 /**
  * Create a variant of big-dom.css by adding a property
  * that creates a CSS stacking context for the overflow scroller (<div class="tree-area">)
  * to trigger different code paths related to scrolling in browsers.
  */
 try {
-    const fs = require("fs");
-    const postcss = require("postcss");
-
     const INPUT_FILE_PATH = "./dist/big-dom.css";
     const OUTPUT_FILE_PATH = "./dist/big-dom-with-stacking-context-scrollable.css";
 

resources/todomvc/vanilla-examples/javascript-es5-complex/package.json

@@ -9,7 +9,7 @@
     "private": true,
     "scripts": {
         "dev": "http-server ./ -p 7001 -c-1 --cors",
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {

resources/todomvc/vanilla-examples/javascript-es5-complex/scripts/build.js → resources/todomvc/vanilla-examples/javascript-es5-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC JavaScript Es5 Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/vanilla-examples/javascript-es5/package.json

@@ -9,7 +9,7 @@
     "private": true,
     "scripts": {
         "dev": "http-server ./ -p 7001 -c-1 --cors",
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "dependencies": {

resources/todomvc/vanilla-examples/javascript-es5/scripts/build.js → resources/todomvc/vanilla-examples/javascript-es5/scripts/build.mjs

@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const path = require("path");
+import fs from "fs/promises";
+import path from "path";
 
 const rootDirectory = "./";
 const sourceDirectory = "./src";

resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/package.json

@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {

resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/scripts/build.js → resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC JavaScript Es6 Webpack Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),

resources/todomvc/vanilla-examples/javascript-web-components-complex/package.json

@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7006 -c-1 --cors -o"
     },
     "keywords": [],

resources/todomvc/vanilla-examples/javascript-web-components-complex/scripts/build.js → resources/todomvc/vanilla-examples/javascript-web-components-complex/scripts/build.mjs

@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC JavaScript Web Components Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),