feat(tools): modularize browser-scripts (#65399)

tools/client-plugins/browser-scripts/.gitignore

@@ -0,0 +1 @@
+dist

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

@@ -8,6 +8,13 @@
     "node": ">=24",
     "pnpm": ">=10"
   },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./test-runner": "./test-runner.ts",
+    "./package.json": "./package.json"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/freeCodeCamp/freeCodeCamp.git"

tools/client-plugins/browser-scripts/sass-compile.ts

@@ -1,3 +1,4 @@
+import { version } from '@freecodecamp/browser-scripts/package.json';
 // work around for SASS error in Edge
 // https://github.com/medialize/sass.js/issues/96#issuecomment-424386171
 interface WorkerWithSass extends Worker {
@@ -20,7 +21,7 @@ if (!ctx.crypto) {
   };
 }
 
-ctx.importScripts('/js/sass.sync.js');
+ctx.importScripts(`/js/workers/${version}/sass.sync.js`);
 
 ctx.onmessage = e => {
   const data: unknown = e.data;

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

@@ -1,18 +1,14 @@
-const { writeFileSync } = require('fs');
 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 = {}) => {
   const __DEV__ = env.production !== true;
-  const staticPath = path.join(__dirname, '../../../client/static/js');
-  const configPath = path.join(
-    __dirname,
-    '../../../client/config/browser-scripts/'
-  );
+
   return {
     cache: __DEV__ ? { type: 'filesystem' } : false,
     mode: __DEV__ ? 'development' : 'production',
@@ -23,19 +19,9 @@ module.exports = (env = {}) => {
     },
     devtool: __DEV__ ? 'inline-source-map' : 'source-map',
     output: {
-      publicPath: '/js/',
-      filename: chunkData => {
-        // construct and output the filename here, so the client can use the
-        // json to find the file.
-        const filename = `${chunkData.chunk.name}-${chunkData.chunk.contentHash.javascript}`;
-        writeFileSync(
-          path.join(configPath, `${chunkData.chunk.name}.json`),
-          `{"filename": "${filename}"}`
-        );
-        return filename + '.js';
-      },
       chunkFilename: '[name]-[contenthash].js',
-      path: staticPath
+      path: path.resolve(__dirname, `dist/artifacts/workers/${version}`),
+      clean: true
     },
     stats: {
       // Display bailout reasons
@@ -74,7 +60,7 @@ module.exports = (env = {}) => {
           './node_modules/xterm/css/xterm.css',
           {
             from: './node_modules/@freecodecamp/curriculum-helpers/dist/test-runner',
-            to: `test-runner/${helperVersion}/`
+            to: `../../test-runner/${helperVersion}/`
           }
         ]
       }),