From 63d0f85e10246486ebaa1b1545369dd8e63eb6e6 Mon Sep 17 00:00:00 2001 From: Christian Maddox Date: Thu, 3 Oct 2024 11:40:13 -0400 Subject: [PATCH] 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. --- assets/src/components/v2/dup/README.md | 30 +--- assets/webpack.config.js | 218 +++++++++++++++---------- priv/dup-app.html | 20 +++ 3 files changed, 152 insertions(+), 116 deletions(-) create mode 100644 priv/dup-app.html diff --git a/assets/src/components/v2/dup/README.md b/assets/src/components/v2/dup/README.md index 765f1a09c..301c079cf 100644 --- 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 - - - - - - - Screens - - - - -
- - - - - ``` - 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 index 80179a8ee..46ffd9355 100644 --- 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 new file mode 100644 index 000000000..b96913b0f --- /dev/null +++ b/priv/dup-app.html @@ -0,0 +1,20 @@ + + + + + + + Screens + + + + +
+ + + +