feat: migrate from commonjs to module

Author: Rotzbua

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,23 @@
-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 +47,7 @@ module.exports = [
         {
           test: /\.css$/i,
           use: [
-            "style-loader",
+            'style-loader',
             {
               loader: 'css-loader',
               options:{url: false},
@@ -47,7 +56,7 @@ module.exports = [
         },
         // {
         //   test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/,
-        //   loader: "url-loader?limit=100000"
+        //   loader: 'url-loader?limit=100000'
         // },
       ],
     },
@@ -59,7 +68,7 @@ module.exports = [
       path: path.resolve(__dirname, 'dist'),
     },
     devServer: {
-      static: path.join(__dirname, "dist"),
+      static: path.join(__dirname, 'dist'),
       compress: true,
       port: 4000,
     },
@@ -74,9 +83,9 @@ module.exports = [
               /\.map$/,
               /^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'),
+            // 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'),
             maximumFileSizeToCacheInBytes: 200 * 1024 * 1024,
             clientsClaim: true,
             skipWaiting: true,
@@ -95,16 +104,16 @@ module.exports = [
       ] : []),
       new CopyPlugin({
         patterns: [
-          { 
+          {
             from: path.resolve(__dirname, 'public'),
             toType: 'dir',
           },
-          { 
+          {
             from: path.resolve(__dirname, 'node_modules/primeicons/fonts'),
             to: path.resolve(__dirname, 'dist/fonts'),
             toType: 'dir',
           },
-          { 
+          {
             from: path.resolve(__dirname, 'src/wasm/openscad.js'),
             from: path.resolve(__dirname, 'src/wasm/openscad.wasm'),
           },
@@ -177,3 +186,5 @@ module.exports = [
     ],
   },
 ];
+
+export default config;