chore: Split DUP packages into separate webpack entry (#2224)

* Split out DUP packages into separate build. * Cleaned up README and added in static file. * Address PR feedback. * Better variable name.
mbta · Oct 3, 2024 · 63d0f85 · 63d0f85
1 parent ed4514d
commit 63d0f85
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 116 deletions.
diff --git a/assets/src/components/v2/dup/README.md b/assets/src/components/v2/dup/README.md
@@ -2,35 +2,11 @@
 
 - Ensure [Corsica](https://hexdocs.pm/corsica/Corsica.html) is used on the server to allow CORS requests (ideally limited to just the DUP-relevant routes). It should already be configured at [this line](/lib/screens_web/controllers/v2/screen_api_controller.ex#L9) in the API controller--if it is, you don't need to do anything for this step.
 - Double check that any behavior specific to the DUP screen environment happens inside of an `isDup()` check. This includes:
+
   - `buildApiPath` in use_api_response.tsx should return a full URL for the API path: prefix `apiPath` string with "https://screens.mbta.com".
   - `imagePath` in util.tsx should return relative paths (no leading `/`).
-- Create priv/static/dup-app.html if it doesn’t already exist. Copy paste the following contents in:
-
-  ```html
-  <!doctype html>
-  <html lang="en">
-    <head>
-      <meta charset="utf-8" />
-      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>Screens</title>
-      <link rel="stylesheet" href="dup_v2.css" />
-    </head>
-
-    <body>
-      <div
-        id="app"
-        data-last-refresh="2020-09-25T17:23:00Z"
-        data-environment-name="screens-prod"
-      ></div>
-      <script type="text/javascript" src="polyfills.js"></script>
-      <script type="text/javascript" src="dup_v2.js"></script>
-    </body>
-  </html>
-  ```
 
 - Set the version string in assets/src/components/v2/dup/version.tsx to `current_year.current_month.current_day.1`.
-- In assets/webpack.config.js, change `publicPath` in the font config to have value `'fonts/'`.
 - If you've renamed / removed image assets, you might want to delete the corresponding folder in `/priv/static`. The folder accumulates assets without clearing old ones out, and these will be included in the built bundle!
 - **Only if you are packaging for local testing**
   - add the following to the top of assets/src/apps/v2/dup.tsx, filling in the string values:
@@ -50,10 +26,10 @@
   for ROTATION_INDEX in {0..2}; do
     echo "export const ROTATION_INDEX = ${ROTATION_INDEX};" > ../../assets/src/components/v2/dup/rotation_index.tsx && \
     npm --prefix ../../assets run deploy && \
-    cp -r css/dup_v2.css js/polyfills.js js/dup_v2.js ../dup_preview.png . && \
+    cp -r css/packaged_dup_v2.css js/packaged_dup_polyfills.js js/packaged_dup_v2.js js/packaged_dup_v2.js.map ../dup_preview.png ../dup-app.html . && \
     cp ../dup_template.json ./template.json && \
     sed -i "" "s/DUP APP ./DUP APP ${ROTATION_INDEX}/" template.json && \
-    zip -r dup-app-${ROTATION_INDEX}.zip dup_v2.css polyfills.js dup_v2.js fonts images dup-app.html template.json dup_preview.png
+    zip -r dup-app-${ROTATION_INDEX}.zip packaged_dup_v2.css packaged_dup_polyfills.js packaged_dup_v2.js fonts images dup-app.html template.json dup_preview.png
   done
   ```
 - On completion, the packaged client apps will be saved at `priv/static/dup-app-(0|1|2).zip`.

diff --git a/assets/webpack.config.js b/assets/webpack.config.js
@@ -8,40 +8,112 @@ const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
 
+const common_export_body = {
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx"],
+    alias: {
+      // Please also update the "paths" list in tsconfig.json when you add aliases here!
+      Components: path.resolve(__dirname, "src/components"),
+      Hooks: path.resolve(__dirname, "src/hooks"),
+      Util: path.resolve(__dirname, "src/util"),
+      Constants: path.resolve(__dirname, "src/constants"),
+      Images: path.resolve(__dirname, "static/images"),
+    },
+  },
+  output: {
+    filename: "[name].js",
+    path: path.resolve(__dirname, "../priv/static/js"),
+  },
+  devtool: "source-map",
+  optimization: {
+    minimizer: [new TerserPlugin(), new OptimizeCSSAssetsPlugin()],
+  },
+};
+
+function getCommonRules(isOfmPackage) {
+  return [
+    {
+      enforce: "pre",
+      test: /\.js$/,
+      loader: "source-map-loader",
+    },
+    {
+      test: /\.s?css$/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: "css-loader",
+        },
+        {
+          loader: "sass-loader",
+        },
+      ],
+    },
+    {
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ["@svgr/webpack"],
+    },
+    {
+      test: /\.(png|jpe?g|gif|webp)$/i,
+      use: [
+        {
+          loader: "file-loader",
+          options: {
+            name: "/[folder]/[name].[ext]",
+            useRelativePaths: true,
+          },
+        },
+      ],
+    },
+    {
+      test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
+      use: [
+        {
+          loader: "file-loader",
+          options: {
+            name: "[name].[ext]",
+            outputPath: "fonts/",
+            publicPath: isOfmPackage ? "fonts/" : "../fonts/",
+            useRelativePaths: true,
+          },
+        },
+      ],
+    },
+  ];
+}
+
+const common_babel_loader_plugins = [
+  "@babel/plugin-proposal-export-default-from",
+  "@babel/plugin-proposal-logical-assignment-operators",
+  ["@babel/plugin-proposal-optional-chaining", { loose: false }],
+  ["@babel/plugin-proposal-pipeline-operator", { proposal: "minimal" }],
+  ["@babel/plugin-proposal-nullish-coalescing-operator", { loose: false }],
+  "@babel/plugin-proposal-do-expressions",
+];
+
+const common_plugins = [
+  new MiniCssExtractPlugin({ filename: "../css/[name].css" }),
+  new CopyWebpackPlugin({ patterns: [{ from: "static/", to: "../" }] }),
+];
+
 module.exports = (env, argv) => {
-  // Upload source maps to Sentry for prod builds. Must be the last plugin.
-  const appendPlugins =
+  const plugins =
     argv.mode == "production"
       ? [
+          ...common_plugins,
+          // Upload source maps to Sentry for prod builds. Must be the last plugin.
           sentryWebpackPlugin({
             authToken: env.SENTRY_AUTH_TOKEN,
             org: env.SENTRY_ORG,
             project: env.SENTRY_PROJECT,
           }),
         ]
-      : [];
+      : common_plugins;
 
   return [
     {
-      resolve: {
-        extensions: [".ts", ".tsx", ".js", ".jsx"],
-        alias: {
-          // Please also update the "paths" list in tsconfig.json when you add aliases here!
-          Components: path.resolve(__dirname, "src/components"),
-          Hooks: path.resolve(__dirname, "src/hooks"),
-          Util: path.resolve(__dirname, "src/util"),
-          Constants: path.resolve(__dirname, "src/constants"),
-          Images: path.resolve(__dirname, "static/images"),
-        },
-      },
-      output: {
-        filename: "[name].js",
-        path: path.resolve(__dirname, "../priv/static/js"),
-      },
-      devtool: "source-map",
-      optimization: {
-        minimizer: [new TerserPlugin(), new OptimizeCSSAssetsPlugin()],
-      },
+      ...common_export_body,
       entry: {
         polyfills: "./src/polyfills.js",
         bus_eink: "./src/apps/bus_eink.tsx",
@@ -71,81 +143,49 @@ module.exports = (env, argv) => {
                   "@babel/preset-react",
                   "@babel/preset-typescript",
                 ],
-                plugins: [
-                  "@babel/plugin-proposal-export-default-from",
-                  "@babel/plugin-proposal-logical-assignment-operators",
-                  [
-                    "@babel/plugin-proposal-optional-chaining",
-                    { loose: false },
-                  ],
-                  [
-                    "@babel/plugin-proposal-pipeline-operator",
-                    { proposal: "minimal" },
-                  ],
-                  [
-                    "@babel/plugin-proposal-nullish-coalescing-operator",
-                    { loose: false },
-                  ],
-                  "@babel/plugin-proposal-do-expressions",
-                ],
+                plugins: common_babel_loader_plugins,
               },
             },
           },
+          ...getCommonRules(false),
+        ],
+      },
+      plugins: plugins,
+    },
+    {
+      ...common_export_body,
+      entry: {
+        packaged_dup_polyfills: "./src/polyfills.js",
+        packaged_dup_v2: "./src/apps/v2/dup.tsx",
+      },
+      module: {
+        rules: [
           {
-            enforce: "pre",
-            test: /\.js$/,
-            loader: "source-map-loader",
-          },
-          {
-            test: /\.s?css$/,
-            use: [
-              MiniCssExtractPlugin.loader,
-              {
-                loader: "css-loader",
-              },
-              {
-                loader: "sass-loader",
-              },
-            ],
-          },
-          {
-            test: /\.svg$/i,
-            issuer: /\.[jt]sx?$/,
-            use: ["@svgr/webpack"],
-          },
-          {
-            test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
-            use: [
-              {
-                loader: "file-loader",
-                options: {
-                  name: "[name].[ext]",
-                  outputPath: "fonts/",
-                  publicPath: "../fonts/",
-                  useRelativePaths: true,
-                },
-              },
-            ],
-          },
-          {
-            test: /\.(png|jpe?g|gif|webp)$/i,
-            use: [
-              {
-                loader: "file-loader",
-                options: {
-                  name: "/[folder]/[name].[ext]",
-                  useRelativePaths: true,
-                },
+            test: /\.ts(x?)$/,
+            exclude: /node_modules/,
+            use: {
+              loader: "babel-loader",
+              options: {
+                presets: [
+                  // When no targets are specified: Babel will assume you are targeting the oldest browsers possible.
+                  [
+                    "@babel/preset-env",
+                    {
+                      corejs: { version: 3, proposals: true },
+                      useBuiltIns: "usage",
+                    },
+                  ],
+                  "@babel/preset-react",
+                  "@babel/preset-typescript",
+                ],
+                plugins: common_babel_loader_plugins,
               },
-            ],
+            },
           },
+          ...getCommonRules(true),
         ],
       },
-      plugins: [
-        new MiniCssExtractPlugin({ filename: "../css/[name].css" }),
-        new CopyWebpackPlugin({ patterns: [{ from: "static/", to: "../" }] }),
-        ...appendPlugins,
-      ],
+      plugins: plugins,
     },
   ];
 };
diff --git a/priv/dup-app.html b/priv/dup-app.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Screens</title>
+    <link rel="stylesheet" href="packaged_dup_v2.css" />
+  </head>
+
+  <body>
+    <div
+      id="app"
+      data-last-refresh="2020-09-25T17:23:00Z"
+      data-environment-name="screens-prod"
+    ></div>
+    <script type="text/javascript" src="packaged_dup_polyfills.js"></script>
+    <script type="text/javascript" src="packaged_dup_v2.js"></script>
+  </body>
+</html>