🔧 chore: use utility function to build webpack config

UPSTREAM

@@ -8,3 +8,4 @@ scratch-storage 80b258d
 scratch-parser 7244904
 scratch-audio 50b7ade
 eslint-config-scratch 87ee420
+scratch-webpack-configuration 31aad55

package.json

@@ -13,7 +13,7 @@
     "start": "pnpm run gui start",
     "prepare": "husky",
     "build:dist": "cross-env NODE_ENV=production pnpm run build:full",
-    "build:full": "pnpm l10n build && pnpm audio build && pnpm storage build && pnpm render build && pnpm block build && pnpm vm build && pnpm paint build && node packages/gui/scripts/prepublish.mjs && pnpm gui build",
+    "build:full": "pnpm infra build && pnpm l10n build && pnpm audio build && pnpm storage build && pnpm render build && pnpm block build && pnpm vm build && pnpm paint build && node packages/gui/scripts/prepublish.mjs && pnpm gui build",
     "build": "pnpm block build && pnpm gui build",
     "test": "pnpm gui test:unit && pnpm block test && pnpm vm test",
     "performance": "pnpm vm performance",
@@ -32,7 +32,8 @@
     "storage": "pnpm --filter clipcc-storage",
     "paint": "pnpm --filter clipcc-paint",
     "parser": "pnpm --filter clipcc-parser",
-    "audio": "pnpm --filter clipcc-audio"
+    "audio": "pnpm --filter clipcc-audio",
+    "infra": "pnpm --filter clipcc-infra"
   },
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.1",

packages/audio/package.json

@@ -2,7 +2,7 @@
   "name": "clipcc-audio",
   "version": "3.2.0",
   "description": "audio engine for scratch 3.0",
-  "main": "dist.js",
+  "main": "dist/dist.js",
   "browser": "./src/index.js",
   "types": "./dist/types/index.d.ts",
   "scripts": {
@@ -35,6 +35,7 @@
     "@babel/eslint-parser": "7.28.6",
     "@babel/preset-env": "7.29.0",
     "babel-eslint": "10.0.3",
+    "clipcc-infra": "workspace:*",
     "eslint": "^9.39.2",
     "eslint-config-clipcc": "workspace:*",
     "tap": "21.0.1",

packages/audio/webpack.config.js

@@ -1,45 +1,16 @@
-const path = require('path');
+const manifest = require('./webpack.manifest');
+const WebpackConfigBuilder = require('../infra');
 
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
-
-module.exports = {
-    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
-    devtool: 'cheap-module-source-map',
+const config = new WebpackConfigBuilder({
+    ...manifest,
     entry: {
-        dist: './src/index.js'
-    },
-    output: {
-        path: __dirname,
-        library: 'AudioEngine',
-        libraryTarget: 'umd',
-        filename: '[name].js'
-    },
-    module: {
-        rules: [{
-            include: [
-                path.resolve('src')
-            ],
-            test: /\.([cm]?ts|tsx)$/,
-            loader: 'ts-loader',
-            options: {
-                transpileOnly: true,
-                allowTsInNodeModules: true
-            }
-        }, {
-            test: /\.js$/,
-            include: path.resolve(__dirname, 'src'),
-            loader: 'babel-loader',
-            options: {
-                presets: [['@babel/preset-env', {targets: {browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']}}]]
-            }
-        }]
+        dist: manifest.entry
     },
     externals: {
         'audio-context': true,
         '@turbowarp/nanolog': true,
         'startaudiocontext': true
-    },
-    plugins: [
-        new NodePolyfillPlugin()
-    ]
-};
+    }
+}).get();
+
+module.exports = config;

packages/audio/webpack.manifest.js

@@ -0,0 +1,20 @@
+// @ts-check
+/**
+ * @import { WebpackManifest } from 'clipcc-infra';
+ */
+
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+
+/** @satisfies {WebpackManifest} */
+const manifest = {
+    entry: './src/index.js',
+    libraryName: 'AudioEngine',
+    rootPath: __dirname,
+    plugins: [
+        new NodePolyfillPlugin({
+            includeAliases: ['events']
+        })
+    ]
+};
+
+module.exports = manifest;

packages/block/eslint.config.mjs

@@ -62,6 +62,7 @@ export default [
       'scripts/**/*.js',
       'tests/**/*.js',
       'webpack.config.js',
+      'webpack.manifest.js',
       'jest.config.js'
     ],
     languageOptions: {

packages/block/package.json

@@ -28,6 +28,7 @@
     "@jest/environment": "^30.3.0",
     "@jest/environment-jsdom-abstract": "^30.3.0",
     "@jest/globals": "^30.3.0",
+    "clipcc-infra": "workspace:*",
     "clipcc-l10n": "workspace:~",
     "copy-webpack-plugin": "^14.0.0",
     "eslint": "^9.39.2",
@@ -38,7 +39,6 @@
     "jest-canvas-mock": "^2.5.2",
     "jsdom": "^28.1.0",
     "lodash.defaultsdeep": "^4.6.1",
-    "raw-loader": "^4.0.2",
     "source-map-loader": "^5.0.0",
     "ts-jest": "^29.4.5",
     "ts-loader": "^9.5.4",

packages/block/webpack.config.js

@@ -1,90 +1,67 @@
 const path = require('path');
-const defaultsDeep = require('lodash.defaultsdeep');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const WebpackConfigBuilder = require('../infra');
+const manifest = require('./webpack.manifest');
 
-const baseConfig = {
-  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
-  devtool: process.env.NODE_ENV === 'production' ? false : 'eval-cheap-module-source-map',
-  entry: './src/index.ts',
-  output: {
-    library: 'ScratchBlocks',
-    filename: '[name].js'
-  },
-  resolve: {
-    extensions: ['.ts', '.js']
-  },
-  module: {
-    rules: [{
-      test: /\.css$/,
-      use: 'raw-loader',
-      include: path.resolve(__dirname, 'src')
-    }, {
-      test: /\.ts$/,
-      use: 'ts-loader',
-      exclude: /node_modules/
-    }, {
-      test: /_compressed\.js$/,
-      enforce: 'pre',
-      use: 'source-map-loader',
-      include: /blockly/
-    }]
-  },
-  ignoreWarnings: [/Failed to parse source map/]
+
+const createConfig = (overrideManifest) => {
+  const config = new WebpackConfigBuilder({
+    ...manifest,
+    ...overrideManifest
+  }).get();
+
+  config.ignoreWarnings = [/Failed to parse source map/];
+
+  return config;
 };
 
+// Playground
+const playground = createConfig({
+  distPath: './build',
+  playground: 8071,
+  target: 'web',
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [{
+        from: path.resolve(require.resolve('blockly'), '../media'),
+        to: 'media'
+      }, {
+        from: 'media',
+        to: 'media',
+        force: true
+      }, {
+        from: 'tests/playground.html',
+        to: 'index.html'
+      }, {
+        from: 'tests/toolbox.json',
+        to: 'toolbox.json'
+      }, {
+        from: 'msg/messages.js'
+      }]
+    })
+  ]
+});
+playground.devServer.static = false;
+
+// Node-compatible
+const node = createConfig({
+  distPath: './dist/node',
+  target: 'node',
+  externals: {
+    bufferutil: true,
+    'utf-8-validate': true,
+    canvas: true
+  }
+});
+
+// Web-compatible
+const web = createConfig({
+  distPath: './dist/web',
+  target: 'web'
+});
+
 module.exports = [
-  // Playground
-  defaultsDeep({}, baseConfig, {
-    target: 'web',
-    devServer: {
-      static: false,
-      host: '0.0.0.0',
-      port: process.env.PORT || 8071
-    },
-    output: {
-      libraryTarget: 'umd',
-      path: path.resolve(__dirname, 'build')
-    },
-    plugins: [
-      new CopyWebpackPlugin({
-        patterns: [{
-          from: path.resolve(require.resolve('blockly'), '../media'),
-          to: 'media'
-        }, {
-          from: 'media',
-          to: 'media',
-          force: true
-        }, {
-          from: 'tests/playground.html',
-          to: 'index.html'
-        }, {
-          from: 'tests/toolbox.json',
-          to: 'toolbox.json'
-        }, {
-          from: 'msg/messages.js'
-        }]
-      })
-    ]
-  }),
-  // Node-compatible
-  defaultsDeep({}, baseConfig, {
-    target: 'node',
-    output: {
-      libraryTarget: 'commonjs2',
-      path: path.resolve(__dirname, 'dist', 'node')
-    },
-    externals: {
-      bufferutil: true,
-      'utf-8-validate': true,
-      canvas: true
-    }
-  }),
-  // Web-comptible
-  defaultsDeep({}, baseConfig, {
-    target: 'web',
-    output: {
-      libraryTarget: 'umd',
-      path: path.resolve(__dirname, 'dist', 'web')
-    }
-  })
+  playground,
+  node,
+  web
 ];

packages/block/webpack.manifest.js

@@ -0,0 +1,25 @@
+// @ts-check
+/**
+ * @import { WebpackManifest } from '../infra';
+ */
+
+/** @satisfies {WebpackManifest} */
+const manifest = {
+  libraryName: 'ScratchBlocks',
+  rootPath: __dirname,
+  devTool: process.env.NODE_ENV === 'production' ? false : 'eval-cheap-module-source-map',
+  entry: './src/index.ts',
+  enableTs: true,
+  rules: [{
+    test: /\.css$/,
+    type: 'asset/source',
+    include: 'src'
+  }, {
+    test: /_compressed\.js$/,
+    enforce: 'pre',
+    use: 'source-map-loader',
+    include: /blockly/
+  }]
+};
+
+module.exports = manifest;

packages/gui/package.json

@@ -104,6 +104,7 @@
     "babel-jest": "23.6.0",
     "babel-loader": "^10.1.0",
     "chromedriver": "146.0.1",
+    "clipcc-infra": "workspace:*",
     "cross-fetch": "^3.1.8",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.7",