chore(deps): organise deps for browser-scripts (#65569)

tools/client-plugins/browser-scripts/copy-scripts.ts

@@ -0,0 +1,33 @@
+import { cpSync, mkdirSync, rmSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import { version as workerVersion } from '@freecodecamp/browser-scripts/package.json';
+import { version as helperVersion } from '@freecodecamp/curriculum-helpers/package.json';
+
+const __dirname = import.meta.dirname;
+
+const distDir = resolve(__dirname, 'dist');
+
+const destJsDir = resolve(distDir, './js');
+const destCssDir = resolve(distDir, './css');
+
+rmSync(distDir, { recursive: true, force: true });
+mkdirSync(destJsDir, { recursive: true });
+mkdirSync(destCssDir, { recursive: true });
+
+cpSync(
+  resolve(__dirname, './node_modules/sass.js/dist/sass.sync.js'),
+  resolve(destJsDir, 'workers', workerVersion, 'sass.sync.js')
+);
+cpSync(
+  resolve(__dirname, './node_modules/xterm/css/xterm.css'),
+  resolve(destCssDir, 'xterm.css')
+);
+cpSync(
+  resolve(
+    __dirname,
+    './node_modules/@freecodecamp/curriculum-helpers/dist/test-runner'
+  ),
+  resolve(destJsDir, `test-runner/${helperVersion}/`),
+  { recursive: true }
+);

tools/client-plugins/browser-scripts/package.json

@@ -29,7 +29,9 @@
   "main": "index.js",
   "scripts": {
     "lint": "eslint --max-warnings 0",
-    "build": "NODE_OPTIONS=\"--max-old-space-size=7168\" webpack -c webpack.config.cjs --env production"
+    "build": "pnpm copy-scripts && pnpm bundle",
+    "bundle": "NODE_OPTIONS=\"--max-old-space-size=7168\" webpack -c webpack.config.cjs --env production",
+    "copy-scripts": "tsx ./copy-scripts.ts"
   },
   "type": "module",
   "keywords": [],
@@ -39,14 +41,11 @@
     "@babel/preset-env": "7.23.7",
     "@babel/preset-typescript": "7.23.3",
     "@freecodecamp/eslint-config": "workspace:*",
-    "@types/copy-webpack-plugin": "^8.0.1",
     "@typescript/vfs": "1.6.1",
     "babel-loader": "8.3.0",
-    "copy-webpack-plugin": "9.1.0",
     "eslint": "^9.39.1",
     "process": "0.11.10",
-    "pyodide": "^0.23.3",
-    "sass.js": "0.11.1",
+    "tsx": "^4.21.0",
     "typescript": "5.9.3",
     "util": "0.12.5",
     "webpack": "5.90.3",
@@ -54,6 +53,8 @@
   },
   "dependencies": {
     "@freecodecamp/curriculum-helpers": "^7.2.0",
+    "pyodide": "^0.23.3",
+    "sass.js": "0.11.1",
     "xterm": "^5.2.1"
   }
 }

tools/client-plugins/browser-scripts/webpack.config.cjs

@@ -1,9 +1,6 @@
 const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const webpack = require('webpack');
-const {
-  version: helperVersion
-} = require('@freecodecamp/curriculum-helpers/package.json');
+
 const { version } = require('./package.json');
 
 module.exports = (env = {}) => {
@@ -20,8 +17,8 @@ module.exports = (env = {}) => {
     devtool: __DEV__ ? 'inline-source-map' : 'source-map',
     output: {
       chunkFilename: '[name]-[contenthash].js',
-      path: path.resolve(__dirname, `dist/artifacts/workers/${version}`),
-      clean: true
+      path: path.resolve(__dirname, `dist/js/workers/${version}`),
+      clean: false // We handle cleaning in copy-scripts.ts
     },
     stats: {
       // Display bailout reasons
@@ -53,17 +50,6 @@ module.exports = (env = {}) => {
       ]
     },
     plugins: [
-      new CopyWebpackPlugin({
-        patterns: [
-          './node_modules/sass.js/dist/sass.sync.js',
-          // TODO: copy this into the css folder, not the js folder
-          './node_modules/xterm/css/xterm.css',
-          {
-            from: './node_modules/@freecodecamp/curriculum-helpers/dist/test-runner',
-            to: `../../test-runner/${helperVersion}/`
-          }
-        ]
-      }),
       new webpack.ProvidePlugin({
         process: 'process/browser'
       }),