feat: migrate from commonjs to module

.github/workflows/test.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     strategy:
       fail-fast: false
       matrix:

jest-puppeteer.config.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('jest-environment-puppeteer').JestPuppeteerConfig} */
+const config = {
   launch: {
     headless: process.env.CI === "true",
   },
@@ -8,3 +9,5 @@ module.exports = {
     launchTimeout: 180000,
   },
 };
+
+export default config;

jest.config.js

@@ -1,6 +1,9 @@
-module.exports = {
+/** @type {import('jest').Config} */
+const config = {
   preset: "jest-puppeteer",
   testMatch: [
     "**/tests/**/*.js",
   ],
 };
+
+export default config;

package.json

@@ -2,6 +2,7 @@
   "name": "openscad-playground",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "homepage": "https://ochafik.com/openscad2/",
   "dependencies": {
     "@gltf-transform/core": "^4.1.1",
@@ -63,7 +64,7 @@
     "@types/react-dom": "^18.3.5",
     "@types/uzip": "^0.20201231.2",
     "@types/web": "^0.0.140",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "jest": "^29.7.0",
     "jest-puppeteer": "^11.0.0",

webpack.config.js

@@ -1,14 +1,21 @@
-const webpack = require('webpack');
-const CopyPlugin = require("copy-webpack-plugin");
-const WorkboxPlugin = require('workbox-webpack-plugin');
-const path = require('path');
-const packageConfig = require('./package.json');
+import CopyPlugin from 'copy-webpack-plugin';
+import WorkboxPlugin from 'workbox-webpack-plugin';
+import webpack from 'webpack';
+import packageConfig from './package.json' with {type: 'json'};
+
+import path, {dirname} from 'path';
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const LOCAL_URL = process.env.LOCAL_URL ?? 'http://localhost:4000/';
 const PUBLIC_URL = process.env.PUBLIC_URL ?? packageConfig.homepage;
 const isDev = process.env.NODE_ENV !== 'production';
 
-module.exports = [
+
+/** @type {import('webpack').Configuration[]} */
+const config = [
   {
     entry: './src/index.tsx',
     devtool: isDev ? 'source-map' : 'nosources-source-map',
@@ -38,7 +45,7 @@ module.exports = [
         {
           test: /\.css$/i,
           use: [
-            "style-loader",
+            'style-loader',
             {
               loader: 'css-loader',
               options:{url: false},
@@ -47,7 +54,7 @@ module.exports = [
         },
         // {
         //   test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/,
-        //   loader: "url-loader?limit=100000"
+        //   loader: 'url-loader?limit=100000'
         // },
       ],
     },
@@ -59,7 +66,7 @@ module.exports = [
       path: path.resolve(__dirname, 'dist'),
     },
     devServer: {
-      static: path.join(__dirname, "dist"),
+      static: path.join(__dirname, 'dist'),
       compress: true,
       port: 4000,
     },
@@ -75,8 +82,8 @@ module.exports = [
               /^manifest.*\.js$/,
             ],
             // these options encourage the ServiceWorkers to get in there fast
-            // and not allow any straggling "old" SWs to hang around     
-            swDest: path.join(__dirname, "dist", 'sw.js'),
+            // and not allow any straggling 'old' SWs to hang around
+            swDest: path.join(__dirname, 'dist', 'sw.js'),
             maximumFileSizeToCacheInBytes: 200 * 1024 * 1024,
             clientsClaim: true,
             skipWaiting: true,
@@ -177,3 +184,5 @@ module.exports = [
     ],
   },
 ];
+
+export default config;