From 7c84f703938de3153e4162cb7264e5cdcc207a75 Mon Sep 17 00:00:00 2001 From: Ivan Devat Date: Wed, 17 Jul 2024 16:41:56 +0200 Subject: [PATCH 01/44] refactor: not prepare node_modules in build script --- packages/app/.bin/build.sh | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/packages/app/.bin/build.sh b/packages/app/.bin/build.sh index ce72dfdb..a2316625 100755 --- a/packages/app/.bin/build.sh +++ b/packages/app/.bin/build.sh @@ -1,5 +1,6 @@ #!/bin/sh +set -e bin="$(dirname "$0")" # load scripts: get_path @@ -112,29 +113,16 @@ adapt_for_environment() { # Expression `eval echo $dir` is there to expand any `~` character. project_dir=$(realpath "$(eval echo "${1:-"$(pwd)"}")") -use_current_node_modules=${BUILD_USE_CURRENT_NODE_MODULES:-"false"} build_for_cockpit=${BUILD_FOR_COCKPIT:-"false"} if [ "$build_for_cockpit" != "true" ]; then url_prefix=${PCSD_BUILD_URL_PREFIX:-"/ui"} else url_prefix=${PCSD_BUILD_URL_PREFIX:-"."} fi -node_modules=$(get_path "appNodeModules") export BUILD_DIR="${BUILD_DIR:-"$project_dir"/build}" -if [ "$use_current_node_modules" = "true" ] && [ ! -d "$node_modules" ]; then - echo "Current node modules should be used but directory $node_modules does" \ - "not exist" - exit 1 -fi - echo "Starting build" -if [ "$use_current_node_modules" != "true" ]; then - "$bin"/modules-prepare.sh "$node_modules" -fi - -echo "Node modules prepared: ${node_modules}." prepare_build_dir "$BUILD_DIR" "$(get_path "appPublic")" @@ -181,8 +169,4 @@ node "$bin"/merge-test-marks.js \ echo "Marks prepared" -if [ "$use_current_node_modules" != "true" ]; then - "$bin"/modules-restore.sh "$node_modules" -fi - printf "\n%s\n" "$(print_bundle_sizes "$BUILD_DIR")" From a7986e3dcbb3efac33cd4c39726dfc7af7043471 Mon Sep 17 00:00:00 2001 From: Ivan Devat Date: Thu, 18 Jul 2024 16:15:54 +0200 Subject: [PATCH 02/44] refactor: use explicit NODE_PATH for terser --- packages/app/.bin/build.sh | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/app/.bin/build.sh b/packages/app/.bin/build.sh index a2316625..43ac85ee 100755 --- a/packages/app/.bin/build.sh +++ b/packages/app/.bin/build.sh @@ -74,9 +74,10 @@ fix_asset_paths() { } minimize_adapter() { - adapter_path=$1 + node_path=$1 + adapter_path=$2 - npx terser "$adapter_path" \ + "$node_path"/.bin/terser "$adapter_path" \ --compress ecma=5,warnings=false,comparisons=false,inline=2 \ --output "$adapter_path" } @@ -123,7 +124,6 @@ export BUILD_DIR="${BUILD_DIR:-"$project_dir"/build}" echo "Starting build" - prepare_build_dir "$BUILD_DIR" "$(get_path "appPublic")" echo "Build dir prepared: ${BUILD_DIR}." @@ -159,7 +159,8 @@ fix_asset_paths "$BUILD_DIR"/index.html "$url_prefix" \ echo "Prefixed asset paths: '${url_prefix}'." -minimize_adapter "$BUILD_DIR"/static/js/adapter.js +NODE_PATH="$project_dir/packages/app/node_modules" +minimize_adapter "$NODE_PATH" "$BUILD_DIR"/static/js/adapter.js echo "Environment adapter minimized" From 69b1296434d8c6976690d24b35cdf12c54fdd07d Mon Sep 17 00:00:00 2001 From: Ivan Devat Date: Thu, 18 Jul 2024 19:45:51 +0200 Subject: [PATCH 03/44] refactor: centralize sources + modules paths --- packages/app/.bin/build.js | 21 ++++++++++ packages/app/.bin/build.sh | 2 +- packages/app/.bin/config/env.js | 16 +++---- packages/app/.bin/config/paths.json | 5 +-- packages/app/.bin/config/webpack.config.js | 46 +++++++++++++++------ packages/app/.bin/config/webpack.plugins.js | 30 +++++++------- packages/app/.bin/config/webpack.rules.js | 10 +++-- 7 files changed, 86 insertions(+), 44 deletions(-) diff --git a/packages/app/.bin/build.js b/packages/app/.bin/build.js index 4336b9a6..7a39fe93 100644 --- a/packages/app/.bin/build.js +++ b/packages/app/.bin/build.js @@ -15,8 +15,19 @@ process.on("unhandledRejection", err => { // Ensure environment variables are read. require("./config/env"); +const path = require("path"); const webpack = require("webpack"); +let paths = Object.entries(require("./config/paths.json")).reduce( + (allPaths, [key, relativePath]) => { + return { + ...allPaths, + [key]: path.resolve(`${__dirname}/../${relativePath}`), + }; + }, + {}, +); + const webpackConfig = require("./config/webpack.config"); const postcssSuffix = err => @@ -24,6 +35,8 @@ const postcssSuffix = err => ? "\nCompileError: Begins at CSS selector " + err["postcssNode"].selector : ""; +const appNodeModules = process.env.NODE_PATH; + webpack( webpackConfig({ // webpack needs to know it to put the right in index.html. - # This function: - # * append link to built css after the tag - # * change source of the tag to built javascript - build_dir=$1 - html="$build_dir/$2" - js_path=$3 - css_path=$4 - name=$5 - - make_asset() { - path=$1 - ext=$2 - - echo "/$path/$(basename "$(ls "$build_dir/$path/$name".*"$ext")")" - } - - # Find script tag by src attribute. - script_src=$(echo "src=\"/$js_path/$name.js\"" | sed 's#/#\\/#g') - - # Append css link. - css_link="" - sed --in-place "/$script_src/a \ $css_link" "$html" - - # Set correct correct src. - sed --in-place "s#$script_src#src=\"$(make_asset "$js_path" .js)\"#" "$html" -} - -fix_asset_paths() { - # All assets in index.html uses absolute path. The index.html is also used by - # development server which needs absolute paths. There is no copy/edit phase - # in development server, so it is done here. - # Here is the absolute path prefixed according to pcsd url namespace for - # webui. - # WARNING: Don't use relative path. It works well in dashboard but in the - # cluster detail the resulting url contains word "cluster" inside, so instead - # of "/ui/static/..." we get "/ui/cluster/static" and asset loading fails. - # see: https://bugzilla.redhat.com/show_bug.cgi?id=2222788 - html=$1 - path_prefix=$2 - js_path="$3/" - css_path="$4/" - manifest=$5 - ico=$6 - - paths="$js_path|$css_path|$manifest|$ico" - sed --regexp-extended --in-place \ - "s#(src|href)=\"/($paths)#\1=\"$path_prefix/\2#" \ - "$html" -} - -minimize_adapter() { - node_modules=$1 - adapter_path=$2 - - "$node_modules"/.bin/terser "$adapter_path" \ - --compress ecma=5,warnings=false,comparisons=false,inline=2 \ - --output "$adapter_path" -} - -adapt_for_environment() { - for_cockpit=$1 - build_dir=$2 - html="$build_dir/$3" - manifest="$build_dir/$4" - manifest_cockpit="$build_dir/$5" - adapter="$build_dir/$6" - adapter_cockpit="$build_dir/$7" - pcsd_socket=$8 - - if [ "$for_cockpit" = "true" ]; then - echo "Adapting for usage inside cockpit." - - mv "$manifest_cockpit" "$manifest" - - sed --in-place \ - "s#^var pcsdSocket = \".*\";#var pcsdSocket = \"$pcsd_socket\";#" \ - "$adapter_cockpit" - mv "$adapter_cockpit" "$adapter" - - sed --in-place \ - '/' \ - "$html" - else - echo "Adapting for standalone usage." - rm "$adapter_cockpit" - rm "$manifest_cockpit" - fi -} - -# Expression `eval echo $dir` is there to expand any `~` character. -build_for_cockpit=${BUILD_FOR_COCKPIT:-"false"} -if [ "$build_for_cockpit" != "true" ]; then - url_prefix=${PCSD_BUILD_URL_PREFIX:-"/ui"} -else - url_prefix=${PCSD_BUILD_URL_PREFIX:-"."} -fi - -"$bin"/check-assumptions.sh "$src_dir" - -echo "Starting build" - -prepare_build_dir "$build_dir" "$src_dir"/"$(get_path "appPublic")" - -echo "Build dir prepared: ${build_dir}." -echo "Going to build assets." - -node "$bin"/build.js "$src_dir" "$build_dir" -node "$bin"/minify-css.js "$(ls "$build_dir"/static/css/main.*.css)" - -echo "Assets compiled." - -inject_built_assets "$build_dir" index.html static/js static/css main - -echo "Compiled assets injected to html page." - -adapt_for_environment \ - "$build_for_cockpit" \ - "$build_dir" \ - index.html \ - manifest.json \ - manifestCockpit.json \ - static/js/adapter.js \ - static/js/adapterCockpit.js \ - "${PCSD_UINIX_SOCKET:-"/var/run/pcsd.socket"}" - -echo "Adapted for environment" - -fix_asset_paths "$build_dir"/index.html "$url_prefix" \ - static/js \ - static/css \ - manifest.json \ - static/media/favicon.png - -echo "Prefixed asset paths: '${url_prefix}'." - -minimize_adapter "$node_modules" "$build_dir"/static/js/adapter.js - -echo "Environment adapter minimized" - -node "$bin"/merge-test-marks.js \ - "$(realpath "$bin"/../src/app/view/dataTest/json)" \ - > "$build_dir"/manifest_test_marks.json - -echo "Marks prepared" - -printf "\n%s\n" "$(print_bundle_sizes "$build_dir")" diff --git a/packages/app/.bin/build/adapter-cockpit.sh b/packages/app/.bin/build/adapter-cockpit.sh new file mode 100755 index 00000000..8d8309b6 --- /dev/null +++ b/packages/app/.bin/build/adapter-cockpit.sh @@ -0,0 +1,18 @@ +#!/bin/sh + +set -e + +build_dir=$1 +pcsd_socket=$2 + +mv "$build_dir"/manifestCockpit.json "$build_dir"/manifest.json + +sed --in-place \ + "s#^var pcsdSocket = \".*\";#var pcsdSocket = \"$pcsd_socket\";#" \ + "$build_dir"/static/js/adapterCockpit.js + +mv "$build_dir"/static/js/adapterCockpit.js "$build_dir"/static/js/adapter.js + +sed --in-place \ + '/' \ + "$build_dir"/index.html diff --git a/packages/app/.bin/build/adapter-standalone.sh b/packages/app/.bin/build/adapter-standalone.sh new file mode 100755 index 00000000..f6bacc69 --- /dev/null +++ b/packages/app/.bin/build/adapter-standalone.sh @@ -0,0 +1,8 @@ +#!/bin/sh + +set -e + +build_dir=$1 + +rm "$build_dir"/static/js/adapterCockpit.js +rm "$build_dir"/manifestCockpit.json diff --git a/packages/app/.bin/build/assets-compile.sh b/packages/app/.bin/build/assets-compile.sh new file mode 100755 index 00000000..d7033f4d --- /dev/null +++ b/packages/app/.bin/build/assets-compile.sh @@ -0,0 +1,11 @@ +#!/bin/sh + +set -e +exec="$(dirname "$0")" + +src_dir=$1 +build_dir=$2 + +mkdir -p "$build_dir" +node "$exec"/build.js "$src_dir" "$build_dir" +node "$exec"/minify-css.js "$(ls "$build_dir"/static/css/main.*.css)" diff --git a/packages/app/.bin/build/assets-sizes.sh b/packages/app/.bin/build/assets-sizes.sh new file mode 100755 index 00000000..a3f734ed --- /dev/null +++ b/packages/app/.bin/build/assets-sizes.sh @@ -0,0 +1,34 @@ +#!/bin/sh + +static_dir=$1/static + +if [ ! -d "$static_dir" ]; then + echo "Error: $static_dir is not a directory" + exit 1 +fi + +files_to_measure() { + find "$static_dir" -type f \ + -not -path "$static_dir/media/*" \ + -not -name "*.txt" \ + -not -name "*.map" +} + +max_size=$((512 * 1024)) + +files_to_measure | while read -r file; do + size=$(gzip -c "$file" | wc -c) + working_directory="$(pwd)"/ + + if [ "${file#"$working_directory"}" != "$file" ]; then + print_name="${file#"$working_directory"}" + else + print_name="$file" + fi + + if [ "$size" -gt "$max_size" ]; then + echo "$print_name: $size !!! TOO BIG !!!" + else + echo "$print_name: $size" + fi +done diff --git a/packages/app/.bin/build/build-dir-prepare.sh b/packages/app/.bin/build/build-dir-prepare.sh new file mode 100755 index 00000000..41f2c269 --- /dev/null +++ b/packages/app/.bin/build/build-dir-prepare.sh @@ -0,0 +1,22 @@ +#!/bin/sh + +set -e +exec="$(dirname "$0")" + +# load scripts: get_path +# shellcheck source=./tools.sh +. "$exec"/tools.sh + +src_dir=$1/"$(get_path "appPublic")" +compiled_assets_dir=$2 +build_dir=$3 + +# Using :? will cause the command to fail if the variable is null or unset. +# This prevents deleting everything in the system's root directory when +# `build_dir/compile_dir` variable is empty. +rm -rf "${build_dir:?}/"* +cp -r "${src_dir:?}/"* "$build_dir" +cp -r "${compiled_assets_dir:?}/"* "$build_dir" + +# dirs/files copied from src_dir can be readonly (e.g. when `make distcheck`) +chmod --recursive ug+w "$build_dir" diff --git a/packages/app/.bin/build.js b/packages/app/.bin/build/build.js similarity index 100% rename from packages/app/.bin/build.js rename to packages/app/.bin/build/build.js diff --git a/packages/app/.bin/config/env.js b/packages/app/.bin/build/config/env.js similarity index 100% rename from packages/app/.bin/config/env.js rename to packages/app/.bin/build/config/env.js diff --git a/packages/app/.bin/config/paths.json b/packages/app/.bin/build/config/paths.json similarity index 100% rename from packages/app/.bin/config/paths.json rename to packages/app/.bin/build/config/paths.json diff --git a/packages/app/.bin/config/webpack.config.js b/packages/app/.bin/build/config/webpack.config.js similarity index 100% rename from packages/app/.bin/config/webpack.config.js rename to packages/app/.bin/build/config/webpack.config.js diff --git a/packages/app/.bin/config/webpack.plugins.js b/packages/app/.bin/build/config/webpack.plugins.js similarity index 100% rename from packages/app/.bin/config/webpack.plugins.js rename to packages/app/.bin/build/config/webpack.plugins.js diff --git a/packages/app/.bin/config/webpack.rules.js b/packages/app/.bin/build/config/webpack.rules.js similarity index 100% rename from packages/app/.bin/config/webpack.rules.js rename to packages/app/.bin/build/config/webpack.rules.js diff --git a/packages/app/.bin/build/link.sh b/packages/app/.bin/build/link.sh new file mode 100755 index 00000000..c9fd1528 --- /dev/null +++ b/packages/app/.bin/build/link.sh @@ -0,0 +1,72 @@ +#!/bin/sh + +set -e + +src_dir=$1 +node_modules=$2 +build_dir=$3 +path_prefix=$4 + +bin="$(dirname "$0")" + +# TODO extract this info so that webpack is able to read it as well +html="$build_dir"/index.html +js_path=static/js +css_path=static/css +main=main +manifest=manifest.json +ico=static/media/favicon.png + +adapter="$build_dir"/static/js/adapter.js +marks_src="$src_dir"/src/app/view/dataTest/json +marks_build="$build_dir"/manifest_test_marks.json + +make_asset() { + _path=$1 + _ext=$2 + + echo "/$_path/$(basename "$(ls "$build_dir/$_path/$main".*"$_ext")")" +} + +# > Inject compiled assets +# ------------------------------------------------------------------------------ +# There is a tag in index.html. +# This function: +# * append link to built css after the tag +# * change source of the tag to built javascript + +# Find script tag by src attribute. +script_src=$(echo "src=\"/$js_path/$main.js\"" | sed 's#/#\\/#g') + +# Append css link. +css_link="" +sed --in-place "/$script_src/a \ $css_link" "$html" + +# Set correct correct src. +sed --in-place "s#$script_src#src=\"$(make_asset "$js_path" .js)\"#" "$html" + +# Fix assets path +# ------------------------------------------------------------------------------ +# All assets in index.html uses absolute path. The index.html is also used by +# development server which needs absolute paths. There is no copy/edit phase +# in development server, so it is done here. +# Here is the absolute path prefixed according to pcsd url namespace for +# webui. +# WARNING: Don't use relative path. It works well in dashboard but in the +# cluster detail the resulting url contains word "cluster" inside, so instead +# of "/ui/static/..." we get "/ui/cluster/static" and asset loading fails. +# see: https://bugzilla.redhat.com/show_bug.cgi?id=2222788 +paths="$js_path|$css_path|$manifest|$ico" +sed --regexp-extended --in-place \ + "s#(src|href)=\"/($paths)#\1=\"$path_prefix/\2#" \ + "$html" + +# Minimize adapter +# ------------------------------------------------------------------------------ +"$node_modules"/.bin/terser "$adapter" \ + --compress ecma=5,warnings=false,comparisons=false,inline=2 \ + --output "$adapter" + +# Build marks +# ------------------------------------------------------------------------------ +node "$bin"/merge-test-marks.js "$marks_src" > "$marks_build" diff --git a/packages/app/.bin/build/main.sh b/packages/app/.bin/build/main.sh new file mode 100755 index 00000000..0ecfc7bf --- /dev/null +++ b/packages/app/.bin/build/main.sh @@ -0,0 +1,38 @@ +#!/bin/sh + +set -e +exec="$(dirname "$0")" + +src_dir=$(realpath "$(eval echo "${1:-"$(realpath "$exec"/..)"}")") +"$exec"/src-check.sh "$src_dir" + +node_modules=$(realpath "$(eval echo "${2}")") +# export node_modules location for js files +export NODE_PATH="$node_modules" + +output_dir=$(realpath "$(eval echo "${3:-"$(pwd)"/build}")") + +pcsd_unix_socket="${4:-"/var/run/pcsd.socket"}" + +mkdir -p "$output_dir" +rm -rf "${output_dir:?}/"* + +echo "Starting build" +webpack_out_dir="$output_dir"/webpack-output +"$exec"/assets-compile.sh "$src_dir" "$webpack_out_dir" +"$exec"/assets-sizes.sh "$webpack_out_dir" +echo + +standalone_dir="$output_dir"/for-pcsd +mkdir -p "$standalone_dir" +"$exec"/build-dir-prepare.sh "$src_dir" "$webpack_out_dir" "$standalone_dir" +"$exec"/adapter-standalone.sh "$standalone_dir" +"$exec"/link.sh "$src_dir" "$node_modules" "$standalone_dir" "/ui" +echo "Build prepared: ${standalone_dir}." + +cockpit_dir="$output_dir"/for-cockpit +mkdir -p "$cockpit_dir" +"$exec"/build-dir-prepare.sh "$src_dir" "$webpack_out_dir" "$cockpit_dir" +"$exec"/adapter-cockpit.sh "$cockpit_dir" "$pcsd_unix_socket" +"$exec"/link.sh "$src_dir" "$node_modules" "$cockpit_dir" "." +echo "Build prepared: ${cockpit_dir}." diff --git a/packages/app/.bin/merge-test-marks.js b/packages/app/.bin/build/merge-test-marks.js similarity index 100% rename from packages/app/.bin/merge-test-marks.js rename to packages/app/.bin/build/merge-test-marks.js diff --git a/packages/app/.bin/minify-css.js b/packages/app/.bin/build/minify-css.js similarity index 100% rename from packages/app/.bin/minify-css.js rename to packages/app/.bin/build/minify-css.js diff --git a/packages/app/.bin/check-assumptions.sh b/packages/app/.bin/build/src-check.sh similarity index 100% rename from packages/app/.bin/check-assumptions.sh rename to packages/app/.bin/build/src-check.sh diff --git a/packages/app/.bin/tools.sh b/packages/app/.bin/build/tools.sh similarity index 100% rename from packages/app/.bin/tools.sh rename to packages/app/.bin/build/tools.sh diff --git a/packages/app/.bin/get-build-sizes.sh b/packages/app/.bin/get-build-sizes.sh deleted file mode 100755 index b856418a..00000000 --- a/packages/app/.bin/get-build-sizes.sh +++ /dev/null @@ -1,36 +0,0 @@ -#!/bin/sh - -print_bundle_sizes() { - static_dir=$1/static - - if [ ! -d "$static_dir" ]; then - echo "Error: $static_dir is not a directory" - exit 1 - fi - - files_to_measure() { - find "$static_dir" -type f \ - -not -path "$static_dir/media/*" \ - -not -name "*.txt" \ - -not -name "*.map" - } - - max_size=$((512 * 1024)) - - files_to_measure | while read -r file; do - size=$(gzip -c "$file" | wc -c) - working_directory="$(pwd)"/ - - if [ "${file#"$working_directory"}" != "$file" ]; then - print_name="${file#"$working_directory"}" - else - print_name="$file" - fi - - if [ "$size" -gt "$max_size" ]; then - echo "$print_name: $size !!! TOO BIG !!!" - else - echo "$print_name: $size" - fi - done -} From 794e5865fb938c0ac9a5d97ef0690c03b33067ef Mon Sep 17 00:00:00 2001 From: Ivan Devat Date: Wed, 28 Aug 2024 13:24:59 +0200 Subject: [PATCH 15/44] refactor: cleanup build scripts --- ...dapter-cockpit.sh => app-adapt-cockpit.sh} | 0 ...-standalone.sh => app-adapt-standalone.sh} | 0 packages/app/.bin/build/app-dir-init.sh | 26 ++++++++++++ .../app/.bin/build/{link.sh => app-link.sh} | 4 +- packages/app/.bin/build/assets-compile.sh | 11 ----- packages/app/.bin/build/assets-sizes.sh | 34 --------------- packages/app/.bin/build/build-dir-prepare.sh | 22 ---------- packages/app/.bin/build/main.sh | 39 +++++++++-------- packages/app/.bin/build/paths.sh | 16 +++++++ packages/app/.bin/build/src-check.sh | 29 +++++++------ packages/app/.bin/build/tools.sh | 14 ------- packages/app/.bin/build/webpack-compile.sh | 36 ++++++++++++++++ packages/app/Makefile.am | 42 +++++++++++-------- 13 files changed, 142 insertions(+), 131 deletions(-) rename packages/app/.bin/build/{adapter-cockpit.sh => app-adapt-cockpit.sh} (100%) rename packages/app/.bin/build/{adapter-standalone.sh => app-adapt-standalone.sh} (100%) create mode 100755 packages/app/.bin/build/app-dir-init.sh rename packages/app/.bin/build/{link.sh => app-link.sh} (96%) delete mode 100755 packages/app/.bin/build/assets-compile.sh delete mode 100755 packages/app/.bin/build/assets-sizes.sh delete mode 100755 packages/app/.bin/build/build-dir-prepare.sh create mode 100755 packages/app/.bin/build/paths.sh delete mode 100755 packages/app/.bin/build/tools.sh create mode 100755 packages/app/.bin/build/webpack-compile.sh diff --git a/packages/app/.bin/build/adapter-cockpit.sh b/packages/app/.bin/build/app-adapt-cockpit.sh similarity index 100% rename from packages/app/.bin/build/adapter-cockpit.sh rename to packages/app/.bin/build/app-adapt-cockpit.sh diff --git a/packages/app/.bin/build/adapter-standalone.sh b/packages/app/.bin/build/app-adapt-standalone.sh similarity index 100% rename from packages/app/.bin/build/adapter-standalone.sh rename to packages/app/.bin/build/app-adapt-standalone.sh diff --git a/packages/app/.bin/build/app-dir-init.sh b/packages/app/.bin/build/app-dir-init.sh new file mode 100755 index 00000000..263bba80 --- /dev/null +++ b/packages/app/.bin/build/app-dir-init.sh @@ -0,0 +1,26 @@ +#!/bin/sh + +set -e +exec="$(dirname "$0")" + +src_dir=$1 +template_dir="$src_dir"/"$("$exec"/paths.sh "appPublic")" +webpack_output_dir=$2 +app_dir=$3 + +# Maybe app_dir does not exists. +mkdir -p "$app_dir" + +# Maybe there is an obsolete content. +# Using :? will cause the command to fail if the variable is null or unset. +# This prevents deleting everything in the system's root directory when +# `build_dir/compile_dir` variable is empty. +rm -rf "${app_dir:?}/"* + +# Copy src "template" dir +cp -r "${template_dir:?}/"* "$app_dir" +# Dirs/files copied from src_dir can be readonly (e.g. when `make distcheck`). +chmod --recursive ug+w "$app_dir" + +# Copy compiled assets +cp -r "${webpack_output_dir:?}/"* "$app_dir" diff --git a/packages/app/.bin/build/link.sh b/packages/app/.bin/build/app-link.sh similarity index 96% rename from packages/app/.bin/build/link.sh rename to packages/app/.bin/build/app-link.sh index c9fd1528..26d048dd 100755 --- a/packages/app/.bin/build/link.sh +++ b/packages/app/.bin/build/app-link.sh @@ -7,7 +7,7 @@ node_modules=$2 build_dir=$3 path_prefix=$4 -bin="$(dirname "$0")" +exec="$(dirname "$0")" # TODO extract this info so that webpack is able to read it as well html="$build_dir"/index.html @@ -69,4 +69,4 @@ sed --regexp-extended --in-place \ # Build marks # ------------------------------------------------------------------------------ -node "$bin"/merge-test-marks.js "$marks_src" > "$marks_build" +node "$exec"/merge-test-marks.js "$marks_src" > "$marks_build" diff --git a/packages/app/.bin/build/assets-compile.sh b/packages/app/.bin/build/assets-compile.sh deleted file mode 100755 index d7033f4d..00000000 --- a/packages/app/.bin/build/assets-compile.sh +++ /dev/null @@ -1,11 +0,0 @@ -#!/bin/sh - -set -e -exec="$(dirname "$0")" - -src_dir=$1 -build_dir=$2 - -mkdir -p "$build_dir" -node "$exec"/build.js "$src_dir" "$build_dir" -node "$exec"/minify-css.js "$(ls "$build_dir"/static/css/main.*.css)" diff --git a/packages/app/.bin/build/assets-sizes.sh b/packages/app/.bin/build/assets-sizes.sh deleted file mode 100755 index a3f734ed..00000000 --- a/packages/app/.bin/build/assets-sizes.sh +++ /dev/null @@ -1,34 +0,0 @@ -#!/bin/sh - -static_dir=$1/static - -if [ ! -d "$static_dir" ]; then - echo "Error: $static_dir is not a directory" - exit 1 -fi - -files_to_measure() { - find "$static_dir" -type f \ - -not -path "$static_dir/media/*" \ - -not -name "*.txt" \ - -not -name "*.map" -} - -max_size=$((512 * 1024)) - -files_to_measure | while read -r file; do - size=$(gzip -c "$file" | wc -c) - working_directory="$(pwd)"/ - - if [ "${file#"$working_directory"}" != "$file" ]; then - print_name="${file#"$working_directory"}" - else - print_name="$file" - fi - - if [ "$size" -gt "$max_size" ]; then - echo "$print_name: $size !!! TOO BIG !!!" - else - echo "$print_name: $size" - fi -done diff --git a/packages/app/.bin/build/build-dir-prepare.sh b/packages/app/.bin/build/build-dir-prepare.sh deleted file mode 100755 index 41f2c269..00000000 --- a/packages/app/.bin/build/build-dir-prepare.sh +++ /dev/null @@ -1,22 +0,0 @@ -#!/bin/sh - -set -e -exec="$(dirname "$0")" - -# load scripts: get_path -# shellcheck source=./tools.sh -. "$exec"/tools.sh - -src_dir=$1/"$(get_path "appPublic")" -compiled_assets_dir=$2 -build_dir=$3 - -# Using :? will cause the command to fail if the variable is null or unset. -# This prevents deleting everything in the system's root directory when -# `build_dir/compile_dir` variable is empty. -rm -rf "${build_dir:?}/"* -cp -r "${src_dir:?}/"* "$build_dir" -cp -r "${compiled_assets_dir:?}/"* "$build_dir" - -# dirs/files copied from src_dir can be readonly (e.g. when `make distcheck`) -chmod --recursive ug+w "$build_dir" diff --git a/packages/app/.bin/build/main.sh b/packages/app/.bin/build/main.sh index 0ecfc7bf..34e15d2c 100755 --- a/packages/app/.bin/build/main.sh +++ b/packages/app/.bin/build/main.sh @@ -1,16 +1,22 @@ #!/bin/sh set -e + +if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then + echo "Usage: $0 src_dir node_modules output_dir [pcsd_unix_socket]" >&2 + exit 1 +fi + exec="$(dirname "$0")" -src_dir=$(realpath "$(eval echo "${1:-"$(realpath "$exec"/..)"}")") -"$exec"/src-check.sh "$src_dir" +src_dir=$(realpath "$1") +node_modules=$(realpath "$2") +output_dir=$(realpath "$3") -node_modules=$(realpath "$(eval echo "${2}")") -# export node_modules location for js files +# Export node_modules location for js files. Not only webpack.js but also +# minify-css.js etc. export NODE_PATH="$node_modules" - -output_dir=$(realpath "$(eval echo "${3:-"$(pwd)"/build}")") +"$exec"/src-check.sh "$src_dir" pcsd_unix_socket="${4:-"/var/run/pcsd.socket"}" @@ -18,21 +24,18 @@ mkdir -p "$output_dir" rm -rf "${output_dir:?}/"* echo "Starting build" -webpack_out_dir="$output_dir"/webpack-output -"$exec"/assets-compile.sh "$src_dir" "$webpack_out_dir" -"$exec"/assets-sizes.sh "$webpack_out_dir" +webpack_output_dir="$output_dir"/webpack-output +"$exec"/webpack-compile.sh "$src_dir" "$webpack_output_dir" echo -standalone_dir="$output_dir"/for-pcsd -mkdir -p "$standalone_dir" -"$exec"/build-dir-prepare.sh "$src_dir" "$webpack_out_dir" "$standalone_dir" -"$exec"/adapter-standalone.sh "$standalone_dir" -"$exec"/link.sh "$src_dir" "$node_modules" "$standalone_dir" "/ui" +standalone_dir="$output_dir"/for-standalone +"$exec"/app-dir-init.sh "$src_dir" "$webpack_output_dir" "$standalone_dir" +"$exec"/app-adapt-standalone.sh "$standalone_dir" +"$exec"/app-link.sh "$src_dir" "$node_modules" "$standalone_dir" "/ui" echo "Build prepared: ${standalone_dir}." cockpit_dir="$output_dir"/for-cockpit -mkdir -p "$cockpit_dir" -"$exec"/build-dir-prepare.sh "$src_dir" "$webpack_out_dir" "$cockpit_dir" -"$exec"/adapter-cockpit.sh "$cockpit_dir" "$pcsd_unix_socket" -"$exec"/link.sh "$src_dir" "$node_modules" "$cockpit_dir" "." +"$exec"/app-dir-init.sh "$src_dir" "$webpack_output_dir" "$cockpit_dir" +"$exec"/app-adapt-cockpit.sh "$cockpit_dir" "$pcsd_unix_socket" +"$exec"/app-link.sh "$src_dir" "$node_modules" "$cockpit_dir" "." echo "Build prepared: ${cockpit_dir}." diff --git a/packages/app/.bin/build/paths.sh b/packages/app/.bin/build/paths.sh new file mode 100755 index 00000000..89abb89b --- /dev/null +++ b/packages/app/.bin/build/paths.sh @@ -0,0 +1,16 @@ +#!/bin/sh + +exec="$(dirname "$0")" + +if [ "$#" -eq 2 ]; then + json=$1 + key=$2 +elif [ "$#" -eq 1 ]; then + json="$exec"/config/paths.json + key=$1 +else + echo "Usage: $0 [json-file] key" >&2 + exit 1 +fi + +node --print --eval="JSON.parse(process.argv[1]).$key" "$(cat "$json")" diff --git a/packages/app/.bin/build/src-check.sh b/packages/app/.bin/build/src-check.sh index 5f7e7987..9dad3ffc 100755 --- a/packages/app/.bin/build/src-check.sh +++ b/packages/app/.bin/build/src-check.sh @@ -3,16 +3,21 @@ # If assumptions are not met, build and dev server fails even so. But it can # be harder to realize where the root cause is. -# shellcheck disable=SC1090 -. "$(dirname "$0")/tools.sh" +set -e -bin="$(dirname "$0")" -src_dir=$(realpath "$(eval echo "${1:-"$(realpath "$bin"/..)"}")") +exec="$(dirname "$0")" +src_dir=$(realpath "$(eval echo "${1:-"$(realpath "$exec"/..)"}")") -required_files="\ - $src_dir/$(get_path "appHtml") - $src_dir/$(get_path "appIndexJs") \ -" +path() { + # shellcheck disable=SC2086 + echo "$src_dir"/"$("$exec"/paths.sh $1 $2)" +} + +tsconfig() { + path "$(path "appTsConfig")" "$1" +} + +required_files="$(path "appHtml") $(path "appIndexJs")" for f in $required_files; do if [ ! -f "$f" ]; then @@ -21,16 +26,14 @@ for f in $required_files; do fi done -tsconfig="$src_dir"/"$(get_path "appTsConfig")" - -ts_base_url="$src_dir"/$(query_json "$tsconfig" "compilerOptions.baseUrl") -base_url="$src_dir"/"$(get_path "appSrc")" +ts_base_url=$(tsconfig "compilerOptions.baseUrl") +base_url=$(path "appSrc") if [ "$ts_base_url" != "$base_url" ]; then echo "Option baseUrl in .tsconfig should be the same as appSrc in paths.json." echo "(But they are: $ts_base_url vs $base_url)" echo "In other words, typescript and webpack should work with the same dir." - echo "Please, check it especialy in config/webpack.config.js." + echo "Please, check it especialy in webpack.config.js." echo "(Look at the sections resolve.module and resolve.alias)" echo "If this check is not appropriate anymore you can change it." exit 1 diff --git a/packages/app/.bin/build/tools.sh b/packages/app/.bin/build/tools.sh deleted file mode 100755 index 0cdeb542..00000000 --- a/packages/app/.bin/build/tools.sh +++ /dev/null @@ -1,14 +0,0 @@ -#!/bin/sh - -query_json() { - json_file=$1 - query=$2 - - node -pe "JSON.parse(process.argv[1]).$query" "$(cat "$json_file")" -} - -get_path() { - path_key=$1 - - query_json "$(dirname "$0")"/config/paths.json "$path_key" -} diff --git a/packages/app/.bin/build/webpack-compile.sh b/packages/app/.bin/build/webpack-compile.sh new file mode 100755 index 00000000..5318567c --- /dev/null +++ b/packages/app/.bin/build/webpack-compile.sh @@ -0,0 +1,36 @@ +#!/bin/sh + +set -e +exec="$(dirname "$0")" + +src_dir=$1 +webpack_output_dir=$2 + +# compile +mkdir -p "$webpack_output_dir" +node "$exec"/build.js "$src_dir" "$webpack_output_dir" + +static_dir="$webpack_output_dir"/static +node "$exec"/minify-css.js "$(ls "$static_dir"/css/main.*.css)" + +# measure sizes of compiled assets +find "$static_dir" -type f \ + -not -path "$static_dir/media/*" \ + -not -name "*.txt" \ + -not -name "*.map" | + while read -r file; do + size=$(gzip -c "$file" | wc -c) + working_directory="$(pwd)"/ + + if [ "${file#"$working_directory"}" != "$file" ]; then + print_name="${file#"$working_directory"}" + else + print_name="$file" + fi + + if [ "$size" -gt "$((512 * 1024))" ]; then + echo "$print_name: $size !!! TOO BIG !!!" + else + echo "$print_name: $size" + fi + done diff --git a/packages/app/Makefile.am b/packages/app/Makefile.am index 20699db2..7bf1d9ea 100644 --- a/packages/app/Makefile.am +++ b/packages/app/Makefile.am @@ -1,22 +1,30 @@ MAINTAINERCLEANFILES = Makefile.in EXTRA_DIST = \ - .bin/build.js \ - .bin/build.sh \ - .bin/check-assumptions.sh \ - .bin/config/env.js \ - .bin/config/paths.json \ - .bin/config/webpack.config.js \ - .bin/config/webpack.plugins.js \ - .bin/config/webpack.rules.js \ - .bin/get-build-sizes.sh \ - .bin/last-commit-mark.sh \ - .bin/merge-test-marks.js \ - .bin/minify-css.js \ - .bin/modules-patch.sh \ - .bin/modules-prepare.sh \ - .bin/modules-restore.sh \ - .bin/modules-tar.sh \ - .bin/tools.sh \ + .bin/build/app-adapt-cockpit.sh \ + .bin/build/app-adapt-standalone.sh \ + .bin/build/app-dir-init.sh \ + .bin/build/app-link.sh \ + .bin/build/build.js \ + .bin/build/config/env.js \ + .bin/build/config/paths.json \ + .bin/build/config/webpack.config.js \ + .bin/build/config/webpack.plugins.js \ + .bin/build/config/webpack.rules.js \ + .bin/build/main.sh \ + .bin/build/merge-test-marks.js \ + .bin/build/minify-css.js \ + .bin/build/paths.sh \ + .bin/build/src-check.sh \ + .bin/build/webpack-compile.sh \ + .bin/last-commit-mark.sh \ + .bin/modules-patch.sh \ + .bin/modules-prepare.sh \ + .bin/modules-restore.sh \ + .bin/modules-tar.sh \ + .bin/package-build-check.sh \ + .bin/package-build-fname.sh \ + .bin/package-build-gen.sh \ + .bin/package-build-remove-eslint.js \ .eslintrc.common.js \ .eslintrc.import.js \ .eslintrc.js \ From 95944fd9eb5cce16ae7c14837386de89bb8a279f Mon Sep 17 00:00:00 2001 From: Ivan Devat Date: Thu, 29 Aug 2024 17:49:40 +0200 Subject: [PATCH 16/44] refactor: cleanup build javascripts --- packages/app/.bin/build/config/env.js | 45 ------------------- .../app/.bin/build/{config => }/paths.json | 0 packages/app/.bin/build/paths.sh | 2 +- packages/app/.bin/build/webpack-compile.sh | 2 +- .../.bin/build/{config => }/webpack.config.js | 14 +++--- .../app/.bin/build/{build.js => webpack.js} | 14 +++--- .../build/{config => }/webpack.plugins.js | 23 +++++----- .../.bin/build/{config => }/webpack.rules.js | 0 packages/app/Makefile.am | 11 +++-- 9 files changed, 34 insertions(+), 77 deletions(-) delete mode 100644 packages/app/.bin/build/config/env.js rename packages/app/.bin/build/{config => }/paths.json (100%) rename packages/app/.bin/build/{config => }/webpack.config.js (96%) rename packages/app/.bin/build/{build.js => webpack.js} (86%) rename packages/app/.bin/build/{config => }/webpack.plugins.js (89%) rename packages/app/.bin/build/{config => }/webpack.rules.js (100%) diff --git a/packages/app/.bin/build/config/env.js b/packages/app/.bin/build/config/env.js deleted file mode 100644 index 94720f93..00000000 --- a/packages/app/.bin/build/config/env.js +++ /dev/null @@ -1,45 +0,0 @@ -// const fs = require("fs"); -// const path = require("path"); - -const NODE_ENV = process.env.NODE_ENV; -if (!NODE_ENV) { - throw new Error( - "The NODE_ENV environment variable is required but was not specified.", - ); -} - -// We support resolving modules according to `NODE_PATH`. -// This lets you use absolute paths in imports inside large monorepos: -// https://github.com/facebook/create-react-app/issues/253. -// It works similar to `NODE_PATH` in Node itself: -// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders -// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. -// Otherwise, we risk importing Node.js core modules into an app instead of -// webpack shims. -// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421 -// We also resolve them to make sure all tools using them work consistently. -// const appDirectory = fs.realpathSync(process.cwd()); -// process.env.NODE_PATH = (process.env.NODE_PATH || "") -// .split(path.delimiter) -// .filter(folder => folder && !path.isAbsolute(folder)) -// .map(folder => path.resolve(appDirectory, folder)) -// .join(path.delimiter); - -// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be -// injected into the application via DefinePlugin in webpack configuration. - -module.exports = Object.keys(process.env) - .filter(key => key.startsWith("REACT_APP_")) - .reduce((env, key) => ({...env, [key]: process.env[key]}), { - // Useful for determining whether we’re running in production mode. - // Most importantly, it switches React into the correct mode. - NODE_ENV: process.env.NODE_ENV || "development", - // We support configuring the sockjs pathname during development. - // These settings let a developer run multiple simultaneous projects. - // They are used as the connection `hostname`, `pathname` and `port` in - // webpackHotDevClient. They are used as the `sockHost`, `sockPath` and - // `sockPort` options in webpack-dev-server. - WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST, - WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH, - WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT, - }); diff --git a/packages/app/.bin/build/config/paths.json b/packages/app/.bin/build/paths.json similarity index 100% rename from packages/app/.bin/build/config/paths.json rename to packages/app/.bin/build/paths.json diff --git a/packages/app/.bin/build/paths.sh b/packages/app/.bin/build/paths.sh index 89abb89b..ab7e5741 100755 --- a/packages/app/.bin/build/paths.sh +++ b/packages/app/.bin/build/paths.sh @@ -6,7 +6,7 @@ if [ "$#" -eq 2 ]; then json=$1 key=$2 elif [ "$#" -eq 1 ]; then - json="$exec"/config/paths.json + json="$exec"/paths.json key=$1 else echo "Usage: $0 [json-file] key" >&2 diff --git a/packages/app/.bin/build/webpack-compile.sh b/packages/app/.bin/build/webpack-compile.sh index 5318567c..85af7cb6 100755 --- a/packages/app/.bin/build/webpack-compile.sh +++ b/packages/app/.bin/build/webpack-compile.sh @@ -8,7 +8,7 @@ webpack_output_dir=$2 # compile mkdir -p "$webpack_output_dir" -node "$exec"/build.js "$src_dir" "$webpack_output_dir" +node "$exec"/webpack.js "$src_dir" "$webpack_output_dir" static_dir="$webpack_output_dir"/static node "$exec"/minify-css.js "$(ls "$static_dir"/css/main.*.css)" diff --git a/packages/app/.bin/build/config/webpack.config.js b/packages/app/.bin/build/webpack.config.js similarity index 96% rename from packages/app/.bin/build/config/webpack.config.js rename to packages/app/.bin/build/webpack.config.js index 2bc87249..2a7c9b70 100644 --- a/packages/app/.bin/build/config/webpack.config.js +++ b/packages/app/.bin/build/webpack.config.js @@ -3,13 +3,14 @@ const {createHash} = require("crypto"); const TerserPlugin = require("terser-webpack-plugin"); -const env = require("./env"); const plugins = require("./webpack.plugins"); const rules = require("./webpack.rules"); -const hash = createHash("sha256"); -hash.update(JSON.stringify(env)); -const envHash = hash.digest("hex"); +const envHash = env => { + const hash = createHash("sha256"); + hash.update(JSON.stringify(env)); + return hash.digest("hex"); +}; // Source maps are resource heavy and can cause out of memory issue for large // source files. @@ -28,6 +29,7 @@ module.exports = ({ nodeModules, tsBuildInfoFile, tsConfigPathsContext, + envForApp, }) => ({ target: ["browserslist"], // Webpack noise constrained to errors and warnings @@ -60,7 +62,7 @@ module.exports = ({ }, cache: { type: "filesystem", - version: envHash, + version: envHash(envForApp), cacheDirectory, store: "pack", buildDependencies: { @@ -179,7 +181,7 @@ module.exports = ({ ], }, plugins: [ - plugins.environmentVariables, + plugins.environmentVariables(envForApp), plugins.miniCssExtract, plugins.forkTsChecker({ async: false, diff --git a/packages/app/.bin/build/build.js b/packages/app/.bin/build/webpack.js similarity index 86% rename from packages/app/.bin/build/build.js rename to packages/app/.bin/build/webpack.js index 8bfc0954..04831f66 100644 --- a/packages/app/.bin/build/build.js +++ b/packages/app/.bin/build/webpack.js @@ -14,7 +14,11 @@ const buildDir = process.argv[3]; // Do this as the first thing so that any code reading it knows the right env. process.env.BABEL_ENV = "production"; -process.env.NODE_ENV = "production"; +// It is absolutely essential that NODE_ENV is set to production during a +// production build. Otherwise React will be compiled in the very slow +// development mode. +const NODE_ENV = "production"; +process.env.NODE_ENV = NODE_ENV; // Makes the script crash on unhandled rejections instead of silently // ignoring them. In the future, promise rejections that are not handled will @@ -23,14 +27,11 @@ process.on("unhandledRejection", err => { throw err; }); -// Ensure environment variables are read. -require("./config/env"); - const path = require("path"); const webpack = require("webpack"); -let paths = Object.entries(require("./config/paths.json")).reduce( +let paths = Object.entries(require("./paths.json")).reduce( (allPaths, [key, relativePath]) => { return { ...allPaths, @@ -40,7 +41,7 @@ let paths = Object.entries(require("./config/paths.json")).reduce( {}, ); -const webpackConfig = require("./config/webpack.config"); +const webpackConfig = require("./webpack.config"); const postcssSuffix = err => Object.prototype.hasOwnProperty.call(err, "postcssNode") @@ -64,6 +65,7 @@ webpack( nodeModules: appNodeModules, tsBuildInfoFile: `${appNodeModules}/.cache/tsconfig.tsbuildinfo`, tsConfigPathsContext: paths.appPath, + envForApp: {NODE_ENV}, }), (err, stats) => { if (err) { diff --git a/packages/app/.bin/build/config/webpack.plugins.js b/packages/app/.bin/build/webpack.plugins.js similarity index 89% rename from packages/app/.bin/build/config/webpack.plugins.js rename to packages/app/.bin/build/webpack.plugins.js index 71fe7636..e2d5113e 100644 --- a/packages/app/.bin/build/config/webpack.plugins.js +++ b/packages/app/.bin/build/webpack.plugins.js @@ -3,8 +3,6 @@ const webpack = require("webpack"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin"); -const env = require("./env"); - class ForkTsCheckerPlugin extends ForkTsCheckerWebpackPlugin { apply(compiler) { new ForkTsCheckerWebpackPlugin(this.options).apply(compiler); @@ -24,15 +22,16 @@ module.exports = { // It is absolutely essential that NODE_ENV is set to production // during a production build. // Otherwise React will be compiled in the very slow development mode. - environmentVariables: new webpack.DefinePlugin({ - "process.env": Object.entries(env).reduce( - (processEnv, [key, value]) => ({ - ...processEnv, - [key]: JSON.stringify(value), - }), - {}, - ), - }), + environmentVariables: envForApp => + new webpack.DefinePlugin({ + "process.env": Object.entries(envForApp).reduce( + (processEnv, [key, value]) => ({ + ...processEnv, + [key]: JSON.stringify(value), + }), + {}, + ), + }), miniCssExtract: new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output @@ -66,7 +65,7 @@ module.exports = { tsBuildInfoFile, }, }, - context:tsConfigPathsContext, + context: tsConfigPathsContext, diagnosticOptions: { syntactic: true, }, diff --git a/packages/app/.bin/build/config/webpack.rules.js b/packages/app/.bin/build/webpack.rules.js similarity index 100% rename from packages/app/.bin/build/config/webpack.rules.js rename to packages/app/.bin/build/webpack.rules.js diff --git a/packages/app/Makefile.am b/packages/app/Makefile.am index 7bf1d9ea..93c162ff 100644 --- a/packages/app/Makefile.am +++ b/packages/app/Makefile.am @@ -4,18 +4,17 @@ EXTRA_DIST = \ .bin/build/app-adapt-standalone.sh \ .bin/build/app-dir-init.sh \ .bin/build/app-link.sh \ - .bin/build/build.js \ - .bin/build/config/env.js \ - .bin/build/config/paths.json \ - .bin/build/config/webpack.config.js \ - .bin/build/config/webpack.plugins.js \ - .bin/build/config/webpack.rules.js \ .bin/build/main.sh \ .bin/build/merge-test-marks.js \ .bin/build/minify-css.js \ + .bin/build/paths.json \ .bin/build/paths.sh \ .bin/build/src-check.sh \ .bin/build/webpack-compile.sh \ + .bin/build/webpack.config.js \ + .bin/build/webpack.js \ + .bin/build/webpack.plugins.js \ + .bin/build/webpack.rules.js \ .bin/last-commit-mark.sh \ .bin/modules-patch.sh \ .bin/modules-prepare.sh \ From e3f6c6164ec52149e27406345d1110e01be30aa1 Mon Sep 17 00:00:00 2001 From: Ivan Devat Date: Tue, 3 Sep 2024 17:49:08 +0200 Subject: [PATCH 17/44] refactor: put sources structure to main.sh --- packages/app/.bin/build/app-dir-init.sh | 7 +-- packages/app/.bin/build/app-link.sh | 2 +- ...-test-marks.js => app-merge-test-marks.js} | 0 packages/app/.bin/build/main.sh | 55 ++++++++++++++++--- packages/app/.bin/build/paths.json | 8 --- packages/app/.bin/build/paths.sh | 16 ------ packages/app/.bin/build/src-check.sh | 40 -------------- .../{minify-css.js => webpack-minify-css.js} | 0 .../{webpack-compile.sh => webpack-sizes.sh} | 9 +-- packages/app/.bin/build/webpack.js | 45 ++++++--------- packages/app/Makefile.am | 9 +-- 11 files changed, 72 insertions(+), 119 deletions(-) rename packages/app/.bin/build/{merge-test-marks.js => app-merge-test-marks.js} (100%) delete mode 100644 packages/app/.bin/build/paths.json delete mode 100755 packages/app/.bin/build/paths.sh delete mode 100755 packages/app/.bin/build/src-check.sh rename packages/app/.bin/build/{minify-css.js => webpack-minify-css.js} (100%) rename packages/app/.bin/build/{webpack-compile.sh => webpack-sizes.sh} (76%) diff --git a/packages/app/.bin/build/app-dir-init.sh b/packages/app/.bin/build/app-dir-init.sh index 263bba80..01b8f800 100755 --- a/packages/app/.bin/build/app-dir-init.sh +++ b/packages/app/.bin/build/app-dir-init.sh @@ -1,10 +1,8 @@ #!/bin/sh set -e -exec="$(dirname "$0")" -src_dir=$1 -template_dir="$src_dir"/"$("$exec"/paths.sh "appPublic")" +template_dir=$1 webpack_output_dir=$2 app_dir=$3 @@ -19,7 +17,8 @@ rm -rf "${app_dir:?}/"* # Copy src "template" dir cp -r "${template_dir:?}/"* "$app_dir" -# Dirs/files copied from src_dir can be readonly (e.g. when `make distcheck`). +# Dirs/files copied from src_dir (i.e. template_dir) can be readonly (e.g. when +# `make distcheck`). chmod --recursive ug+w "$app_dir" # Copy compiled assets diff --git a/packages/app/.bin/build/app-link.sh b/packages/app/.bin/build/app-link.sh index 26d048dd..5644c387 100755 --- a/packages/app/.bin/build/app-link.sh +++ b/packages/app/.bin/build/app-link.sh @@ -69,4 +69,4 @@ sed --regexp-extended --in-place \ # Build marks # ------------------------------------------------------------------------------ -node "$exec"/merge-test-marks.js "$marks_src" > "$marks_build" +node "$exec"/app-merge-test-marks.js "$marks_src" > "$marks_build" diff --git a/packages/app/.bin/build/merge-test-marks.js b/packages/app/.bin/build/app-merge-test-marks.js similarity index 100% rename from packages/app/.bin/build/merge-test-marks.js rename to packages/app/.bin/build/app-merge-test-marks.js diff --git a/packages/app/.bin/build/main.sh b/packages/app/.bin/build/main.sh index 34e15d2c..83e33da1 100755 --- a/packages/app/.bin/build/main.sh +++ b/packages/app/.bin/build/main.sh @@ -8,34 +8,73 @@ if [ "$#" -ne 3 ] && [ "$#" -ne 4 ]; then fi exec="$(dirname "$0")" - src_dir=$(realpath "$1") node_modules=$(realpath "$2") output_dir=$(realpath "$3") +pcsd_unix_socket="${4:-"/var/run/pcsd.socket"}" -# Export node_modules location for js files. Not only webpack.js but also -# minify-css.js etc. +# Export node_modules location for js files. E.g. webpack-minify-css.js etc. export NODE_PATH="$node_modules" -"$exec"/src-check.sh "$src_dir" -pcsd_unix_socket="${4:-"/var/run/pcsd.socket"}" +# Sources structure +# ------------------------------------------------------------------------------ +app_html="$src_dir"/public/index.html +app_index_js="$src_dir"/src/index.tsx +app_ts_config_paths_context=$src_dir +app_ts_config="$src_dir"/tsconfig.json +app_src="$src_dir"/src +app_public="$src_dir"/public + +# Check sources assumptions +# ------------------------------------------------------------------------------ +# If assumptions are not met, build and dev server fails even so. But it can +# be harder to realize where the root cause is. +for f in $app_html $app_index_js; do + if [ ! -f "$f" ]; then + echo "Could not find required file: '$f'" + exit 1 + fi +done + +ts_base_url="$src_dir"/$( + node --print --eval="JSON.parse(process.argv[1]).compilerOptions.baseUrl" \ + "$(cat "$app_ts_config")" +) +if [ "$ts_base_url" != "$app_src" ]; then + echo "baseUrl in .tsconfig should be the same as app_src in main.sh." + echo "(But they are: $ts_base_url vs $app_src)" + echo "In other words, typescript and webpack should work with the same dir." + echo "Please, check it especialy in webpack.config.js." + echo "(Look at the sections resolve.module and resolve.alias)" + echo "If this check is not appropriate anymore you can change it." + exit 1 +fi +# Main build +# ------------------------------------------------------------------------------ mkdir -p "$output_dir" rm -rf "${output_dir:?}/"* echo "Starting build" webpack_output_dir="$output_dir"/webpack-output -"$exec"/webpack-compile.sh "$src_dir" "$webpack_output_dir" +mkdir -p "$webpack_output_dir" +node "$exec"/webpack.js \ + "$app_index_js" \ + "$app_src" \ + "$app_ts_config" \ + "$app_ts_config_paths_context" \ + "$webpack_output_dir" +"$exec"/webpack-sizes.sh "$webpack_output_dir" echo standalone_dir="$output_dir"/for-standalone -"$exec"/app-dir-init.sh "$src_dir" "$webpack_output_dir" "$standalone_dir" +"$exec"/app-dir-init.sh "$app_public" "$webpack_output_dir" "$standalone_dir" "$exec"/app-adapt-standalone.sh "$standalone_dir" "$exec"/app-link.sh "$src_dir" "$node_modules" "$standalone_dir" "/ui" echo "Build prepared: ${standalone_dir}." cockpit_dir="$output_dir"/for-cockpit -"$exec"/app-dir-init.sh "$src_dir" "$webpack_output_dir" "$cockpit_dir" +"$exec"/app-dir-init.sh "$app_public" "$webpack_output_dir" "$cockpit_dir" "$exec"/app-adapt-cockpit.sh "$cockpit_dir" "$pcsd_unix_socket" "$exec"/app-link.sh "$src_dir" "$node_modules" "$cockpit_dir" "." echo "Build prepared: ${cockpit_dir}." diff --git a/packages/app/.bin/build/paths.json b/packages/app/.bin/build/paths.json deleted file mode 100644 index 168b5c89..00000000 --- a/packages/app/.bin/build/paths.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "appPath": ".", - "appPublic": "public", - "appHtml": "public/index.html", - "appIndexJs": "src/index.tsx", - "appSrc": "src", - "appTsConfig": "tsconfig.json" -} diff --git a/packages/app/.bin/build/paths.sh b/packages/app/.bin/build/paths.sh deleted file mode 100755 index ab7e5741..00000000 --- a/packages/app/.bin/build/paths.sh +++ /dev/null @@ -1,16 +0,0 @@ -#!/bin/sh - -exec="$(dirname "$0")" - -if [ "$#" -eq 2 ]; then - json=$1 - key=$2 -elif [ "$#" -eq 1 ]; then - json="$exec"/paths.json - key=$1 -else - echo "Usage: $0 [json-file] key" >&2 - exit 1 -fi - -node --print --eval="JSON.parse(process.argv[1]).$key" "$(cat "$json")" diff --git a/packages/app/.bin/build/src-check.sh b/packages/app/.bin/build/src-check.sh deleted file mode 100755 index 9dad3ffc..00000000 --- a/packages/app/.bin/build/src-check.sh +++ /dev/null @@ -1,40 +0,0 @@ -#!/bin/sh - -# If assumptions are not met, build and dev server fails even so. But it can -# be harder to realize where the root cause is. - -set -e - -exec="$(dirname "$0")" -src_dir=$(realpath "$(eval echo "${1:-"$(realpath "$exec"/..)"}")") - -path() { - # shellcheck disable=SC2086 - echo "$src_dir"/"$("$exec"/paths.sh $1 $2)" -} - -tsconfig() { - path "$(path "appTsConfig")" "$1" -} - -required_files="$(path "appHtml") $(path "appIndexJs")" - -for f in $required_files; do - if [ ! -f "$f" ]; then - echo "Could not find required file: '$f'" - exit 1 - fi -done - -ts_base_url=$(tsconfig "compilerOptions.baseUrl") -base_url=$(path "appSrc") - -if [ "$ts_base_url" != "$base_url" ]; then - echo "Option baseUrl in .tsconfig should be the same as appSrc in paths.json." - echo "(But they are: $ts_base_url vs $base_url)" - echo "In other words, typescript and webpack should work with the same dir." - echo "Please, check it especialy in webpack.config.js." - echo "(Look at the sections resolve.module and resolve.alias)" - echo "If this check is not appropriate anymore you can change it." - exit 1 -fi diff --git a/packages/app/.bin/build/minify-css.js b/packages/app/.bin/build/webpack-minify-css.js similarity index 100% rename from packages/app/.bin/build/minify-css.js rename to packages/app/.bin/build/webpack-minify-css.js diff --git a/packages/app/.bin/build/webpack-compile.sh b/packages/app/.bin/build/webpack-sizes.sh similarity index 76% rename from packages/app/.bin/build/webpack-compile.sh rename to packages/app/.bin/build/webpack-sizes.sh index 85af7cb6..d5e170e8 100755 --- a/packages/app/.bin/build/webpack-compile.sh +++ b/packages/app/.bin/build/webpack-sizes.sh @@ -3,15 +3,10 @@ set -e exec="$(dirname "$0")" -src_dir=$1 -webpack_output_dir=$2 - -# compile -mkdir -p "$webpack_output_dir" -node "$exec"/webpack.js "$src_dir" "$webpack_output_dir" +webpack_output_dir=$1 static_dir="$webpack_output_dir"/static -node "$exec"/minify-css.js "$(ls "$static_dir"/css/main.*.css)" +node "$exec"/webpack-minify-css.js "$(ls "$static_dir"/css/main.*.css)" # measure sizes of compiled assets find "$static_dir" -type f \ diff --git a/packages/app/.bin/build/webpack.js b/packages/app/.bin/build/webpack.js index 04831f66..0176480a 100644 --- a/packages/app/.bin/build/webpack.js +++ b/packages/app/.bin/build/webpack.js @@ -1,16 +1,19 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -/* eslint-disable import/no-extraneous-dependencies */ - -if (process.argv.length !== 4) { +if (process.argv.length !== 7) { + console.log(process.argv.length); console.error( - `Usage: ${process.argv[0]} ${process.argv[1]} `, + `Usage: ${process.argv[0]} ${process.argv[1]}` + + " ", ); process.exit(1); } const appNodeModules = process.env.NODE_PATH; -const srcDir = process.argv[2]; -const buildDir = process.argv[3]; + +const appIndexJs = process.argv[2]; +const appSrc = process.argv[3]; +const appTsConfig = process.argv[4]; +const appTsConfigPathsContext = process.argv[5]; +const buildDir = process.argv[6]; // Do this as the first thing so that any code reading it knows the right env. process.env.BABEL_ENV = "production"; @@ -27,29 +30,13 @@ process.on("unhandledRejection", err => { throw err; }); -const path = require("path"); - -const webpack = require("webpack"); - -let paths = Object.entries(require("./paths.json")).reduce( - (allPaths, [key, relativePath]) => { - return { - ...allPaths, - [key]: path.resolve(`${srcDir}/${relativePath}`), - }; - }, - {}, -); - -const webpackConfig = require("./webpack.config"); - const postcssSuffix = err => Object.prototype.hasOwnProperty.call(err, "postcssNode") ? "\nCompileError: Begins at CSS selector " + err["postcssNode"].selector : ""; -webpack( - webpackConfig({ +require("webpack")( + require("./webpack.config")({ buildDir, // webpack needs to know it to put the right ' \ - "$build_dir"/index.html + '/' "$html" diff --git a/packages/app/.bin/build/app-adapt-standalone.sh b/packages/app/.bin/build/app-adapt-standalone.sh index f6bacc69..b2bf4911 100755 --- a/packages/app/.bin/build/app-adapt-standalone.sh +++ b/packages/app/.bin/build/app-adapt-standalone.sh @@ -3,6 +3,7 @@ set -e build_dir=$1 +out_js=$2 -rm "$build_dir"/static/js/adapterCockpit.js +rm "$build_dir"/"$out_js"/adapterCockpit.js rm "$build_dir"/manifestCockpit.json diff --git a/packages/app/.bin/build/app-link.sh b/packages/app/.bin/build/app-link.sh index 5644c387..b00f8bef 100755 --- a/packages/app/.bin/build/app-link.sh +++ b/packages/app/.bin/build/app-link.sh @@ -5,17 +5,18 @@ set -e src_dir=$1 node_modules=$2 build_dir=$3 -path_prefix=$4 +out_js=$4 +out_css=$5 +out_media=$6 +out_main=$7 +out_html=$8 +path_prefix=$9 exec="$(dirname "$0")" -# TODO extract this info so that webpack is able to read it as well -html="$build_dir"/index.html -js_path=static/js -css_path=static/css -main=main +html="$build_dir"/"$out_html" manifest=manifest.json -ico=static/media/favicon.png +ico="$out_media"/favicon.png adapter="$build_dir"/static/js/adapter.js marks_src="$src_dir"/src/app/view/dataTest/json @@ -25,7 +26,7 @@ make_asset() { _path=$1 _ext=$2 - echo "/$_path/$(basename "$(ls "$build_dir/$_path/$main".*"$_ext")")" + echo "/$_path/$(basename "$(ls "$build_dir/$_path/$out_main".*"$_ext")")" } # > Inject compiled assets @@ -36,14 +37,14 @@ make_asset() { # * change source of the tag to built javascript # Find script tag by src attribute. -script_src=$(echo "src=\"/$js_path/$main.js\"" | sed 's#/#\\/#g') +script_src=$(echo "src=\"/$out_js/$out_main.js\"" | sed 's#/#\\/#g') # Append css link. -css_link="" +css_link="" sed --in-place "/$script_src/a \ $css_link" "$html" # Set correct correct src. -sed --in-place "s#$script_src#src=\"$(make_asset "$js_path" .js)\"#" "$html" +sed --in-place "s#$script_src#src=\"$(make_asset "$out_js" .js)\"#" "$html" # Fix assets path # ------------------------------------------------------------------------------ @@ -56,7 +57,7 @@ sed --in-place "s#$script_src#src=\"$(make_asset "$js_path" .js)\"#" "$html" # cluster detail the resulting url contains word "cluster" inside, so instead # of "/ui/static/..." we get "/ui/cluster/static" and asset loading fails. # see: https://bugzilla.redhat.com/show_bug.cgi?id=2222788 -paths="$js_path|$css_path|$manifest|$ico" +paths="$out_js|$out_css|$manifest|$ico" sed --regexp-extended --in-place \ "s#(src|href)=\"/($paths)#\1=\"$path_prefix/\2#" \ "$html" diff --git a/packages/app/.bin/build/main.sh b/packages/app/.bin/build/main.sh index 83e33da1..29378112 100755 --- a/packages/app/.bin/build/main.sh +++ b/packages/app/.bin/build/main.sh @@ -16,7 +16,7 @@ pcsd_unix_socket="${4:-"/var/run/pcsd.socket"}" # Export node_modules location for js files. E.g. webpack-minify-css.js etc. export NODE_PATH="$node_modules" -# Sources structure +# Sources structure (multiple parts needs to agree on this) # ------------------------------------------------------------------------------ app_html="$src_dir"/public/index.html app_index_js="$src_dir"/src/index.tsx @@ -25,6 +25,14 @@ app_ts_config="$src_dir"/tsconfig.json app_src="$src_dir"/src app_public="$src_dir"/public +# Output structure (multiple parts needs to agree on this) +# ------------------------------------------------------------------------------ +out_js="static/js" +out_css="static/css" +out_media="static/media" +out_main="main" +out_html="index.html" + # Check sources assumptions # ------------------------------------------------------------------------------ # If assumptions are not met, build and dev server fails even so. But it can @@ -50,7 +58,7 @@ if [ "$ts_base_url" != "$app_src" ]; then exit 1 fi -# Main build +# Webpack compiles assets for all apps # ------------------------------------------------------------------------------ mkdir -p "$output_dir" rm -rf "${output_dir:?}/"* @@ -63,18 +71,52 @@ node "$exec"/webpack.js \ "$app_src" \ "$app_ts_config" \ "$app_ts_config_paths_context" \ - "$webpack_output_dir" -"$exec"/webpack-sizes.sh "$webpack_output_dir" + "$webpack_output_dir" \ + "$out_js" \ + "$out_css" \ + "$out_media" \ + "$out_main" +"$exec"/webpack-sizes.sh \ + "$webpack_output_dir" \ + "$out_css" \ + "$out_media" \ + "$out_main" echo +# Make standalone application from webpack output +# ------------------------------------------------------------------------------ standalone_dir="$output_dir"/for-standalone "$exec"/app-dir-init.sh "$app_public" "$webpack_output_dir" "$standalone_dir" -"$exec"/app-adapt-standalone.sh "$standalone_dir" -"$exec"/app-link.sh "$src_dir" "$node_modules" "$standalone_dir" "/ui" +"$exec"/app-adapt-standalone.sh "$standalone_dir" "$out_js" +"$exec"/app-link.sh \ + "$src_dir" \ + "$node_modules" \ + "$standalone_dir" \ + "$out_js" \ + "$out_css" \ + "$out_media" \ + "$out_main" \ + "$out_html" \ + "/ui" echo "Build prepared: ${standalone_dir}." +# Make cockpit application from webpack output +# ------------------------------------------------------------------------------ cockpit_dir="$output_dir"/for-cockpit "$exec"/app-dir-init.sh "$app_public" "$webpack_output_dir" "$cockpit_dir" -"$exec"/app-adapt-cockpit.sh "$cockpit_dir" "$pcsd_unix_socket" -"$exec"/app-link.sh "$src_dir" "$node_modules" "$cockpit_dir" "." +"$exec"/app-adapt-cockpit.sh \ + "$cockpit_dir" \ + "$out_js" \ + "$out_html" \ + "$pcsd_unix_socket" +"$exec"/app-link.sh \ + "$src_dir" \ + "$node_modules" \ + "$cockpit_dir" \ + "$out_js" \ + "$out_css" \ + "$out_media" \ + "$out_main" \ + "$out_html" \ + "." echo "Build prepared: ${cockpit_dir}." diff --git a/packages/app/.bin/build/webpack-sizes.sh b/packages/app/.bin/build/webpack-sizes.sh index d5e170e8..7225a5ee 100755 --- a/packages/app/.bin/build/webpack-sizes.sh +++ b/packages/app/.bin/build/webpack-sizes.sh @@ -4,13 +4,16 @@ set -e exec="$(dirname "$0")" webpack_output_dir=$1 +out_css=$2 +out_media=$3 +out_main=$4 -static_dir="$webpack_output_dir"/static -node "$exec"/webpack-minify-css.js "$(ls "$static_dir"/css/main.*.css)" +node "$exec"/webpack-minify-css.js \ + "$(ls "$webpack_output_dir"/"$out_css"/"$out_main".*.css)" # measure sizes of compiled assets -find "$static_dir" -type f \ - -not -path "$static_dir/media/*" \ +find "$webpack_output_dir" -type f \ + -not -path "$webpack_output_dir/$out_media/*" \ -not -name "*.txt" \ -not -name "*.map" | while read -r file; do diff --git a/packages/app/.bin/build/webpack.config.js b/packages/app/.bin/build/webpack.config.js index 2a7c9b70..911a82fb 100644 --- a/packages/app/.bin/build/webpack.config.js +++ b/packages/app/.bin/build/webpack.config.js @@ -30,6 +30,10 @@ module.exports = ({ tsBuildInfoFile, tsConfigPathsContext, envForApp, + outJs, + outCss, + outMedia, + outMain, }) => ({ target: ["browserslist"], // Webpack noise constrained to errors and warnings @@ -49,10 +53,10 @@ module.exports = ({ pathinfo: false, // There will be one main bundle, and one file per asynchronous chunk. // In development, it does not produce real files. - filename: "static/js/[name].[contenthash:8].js", + filename: `${outJs}/${outMain}.[contenthash:8].js`, // There are also additional JS chunk files if you use code splitting. - chunkFilename: "static/js/[name].[contenthash:8].chunk.js", - assetModuleFilename: "static/media/[name].[hash][ext]", + chunkFilename: `${outJs}/${outMain}.[contenthash:8].chunk.js`, + assetModuleFilename: `${outMedia}/${outMain}.[hash][ext]`, // To determine where the app is being served from. It requires a trailing // slash, or the file assets will get an incorrect path. publicPath, @@ -182,7 +186,7 @@ module.exports = ({ }, plugins: [ plugins.environmentVariables(envForApp), - plugins.miniCssExtract, + plugins.miniCssExtract({outCss, outMain}), plugins.forkTsChecker({ async: false, sourceMap: shouldUseSourceMap, diff --git a/packages/app/.bin/build/webpack.js b/packages/app/.bin/build/webpack.js index 0176480a..0b894cab 100644 --- a/packages/app/.bin/build/webpack.js +++ b/packages/app/.bin/build/webpack.js @@ -1,8 +1,9 @@ -if (process.argv.length !== 7) { +if (process.argv.length !== 11) { console.log(process.argv.length); console.error( `Usage: ${process.argv[0]} ${process.argv[1]}` - + " ", + + " " + + " ", ); process.exit(1); } @@ -14,6 +15,10 @@ const appSrc = process.argv[3]; const appTsConfig = process.argv[4]; const appTsConfigPathsContext = process.argv[5]; const buildDir = process.argv[6]; +const outJs = process.argv[7]; +const outCss = process.argv[8]; +const outMedia = process.argv[9]; +const outMain = process.argv[10]; // Do this as the first thing so that any code reading it knows the right env. process.env.BABEL_ENV = "production"; @@ -53,6 +58,10 @@ require("webpack")( tsBuildInfoFile: `${appNodeModules}/.cache/tsconfig.tsbuildinfo`, tsConfigPathsContext: appTsConfigPathsContext, envForApp: {NODE_ENV}, + outJs, + outCss, + outMedia, + outMain, }), (err, stats) => { if (err) { diff --git a/packages/app/.bin/build/webpack.plugins.js b/packages/app/.bin/build/webpack.plugins.js index e2d5113e..db3942db 100644 --- a/packages/app/.bin/build/webpack.plugins.js +++ b/packages/app/.bin/build/webpack.plugins.js @@ -33,12 +33,13 @@ module.exports = { ), }), - miniCssExtract: new MiniCssExtractPlugin({ - // Options similar to the same options in webpackOptions.output - // both options are optional - filename: "static/css/[name].[contenthash:8].css", - chunkFilename: "static/css/[name].[contenthash:8].chunk.css", - }), + miniCssExtract: ({outCss, outMain}) => + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: `${outCss}/${outMain}.[contenthash:8].css`, + chunkFilename: `${outCss}/${outMain}.[contenthash:8].chunk.css`, + }), // TypeScript type checking forkTsChecker: ({ From fffe8d046810ed223522cb60633fd78783a3ad8d Mon Sep 17 00:00:00 2001 From: Ivan Devat Date: Mon, 9 Sep 2024 09:06:16 +0200 Subject: [PATCH 19/44] fix: adapt dev-server for previous build changes --- Makefile.am | 9 ++- packages/app/.bin/build/webpack.js | 2 +- packages/dev/.bin/config/webpack.config.js | 87 ++++++++++++++++------ packages/dev/.bin/dev-server.sh | 42 ++++++++++- packages/dev/.bin/start.js | 57 +++++++++++--- 5 files changed, 159 insertions(+), 38 deletions(-) diff --git a/Makefile.am b/Makefile.am index 6c359954..031710b8 100644 --- a/Makefile.am +++ b/Makefile.am @@ -45,8 +45,13 @@ APP_SRC = $(abs_top_srcdir)/packages/app APP_BUILD = $(abs_top_builddir)/packages/app app: - @./packages/app/.bin/check-assumptions.sh - @./packages/dev/.bin/dev-server.sh + if [ ! -d $(APP_BUILD)/node_modules ]; then \ + npm ci --no-progress --prefix $(APP_BUILD); \ + fi + @$(abs_top_srcdir)/packages/dev/.bin/dev-server.sh \ + ${APP_SRC} \ + $(APP_BUILD)/node_modules \ + ${abs_top_builddir}/build build: if [ "${abs_top_builddir}" != "${abs_top_srcdir}" ]; then \ diff --git a/packages/app/.bin/build/webpack.js b/packages/app/.bin/build/webpack.js index 0b894cab..6bba775f 100644 --- a/packages/app/.bin/build/webpack.js +++ b/packages/app/.bin/build/webpack.js @@ -50,7 +50,7 @@ require("webpack")( // know the root. publicPath: "./", enableProfiling: process.argv.includes("--profile"), - appIndexJs: appIndexJs, + appIndexJs, srcDir: appSrc, cacheDirectory: `${appNodeModules}/.cache`, tsConfig: appTsConfig, diff --git a/packages/dev/.bin/config/webpack.config.js b/packages/dev/.bin/config/webpack.config.js index f2902edd..c3ed9e38 100644 --- a/packages/dev/.bin/config/webpack.config.js +++ b/packages/dev/.bin/config/webpack.config.js @@ -2,33 +2,54 @@ const path = require("path"); const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin"); +const ESLintPlugin = require("eslint-webpack-plugin"); -const appConfigPath = "../../../app/.bin/config"; +const appWebpackPath = "../../../app/.bin/build"; -const plugins = require(`${appConfigPath}/webpack.plugins`); -const rules = require(`${appConfigPath}/webpack.rules`); -const config = require(`${appConfigPath}/webpack.config`); +const plugins = require(`${appWebpackPath}/webpack.plugins`); +const rules = require(`${appWebpackPath}/webpack.rules`); +const config = require(`${appWebpackPath}/webpack.config`); // Source maps are resource heavy and can cause out of memory issue for large // source files. const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false"; const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === "true"; -const buildDir = process.env.BUILD_DIR; -if (!buildDir) { - throw new Error("Required environment variable BUILD_DIR is not set"); -} - -// This is the production and development configuration. -// It is focused on developer experience, fast rebuilds, and a minimal bundle. -module.exports = ( - {publicPath, enableProfiling} = { - publicPath: "/", - enableProfiling: false, - }, -) => { - const appConfig = config({publicPath, enableProfiling}); +module.exports = ({ + buildDir, + publicPath, + enableProfiling, + appIndexJs, + srcDir, + cacheDirectory, + tsConfig, + nodeModules, + tsBuildInfoFile, + tsConfigPathsContext, + envForApp, + outJs, + outCss, + outMedia, + outMain, +}) => { + const appConfig = config({ + buildDir, + publicPath, + enableProfiling, + appIndexJs, + srcDir, + cacheDirectory, + tsConfig, + nodeModules, + tsBuildInfoFile, + tsConfigPathsContext, + envForApp, + outJs, + outCss, + outMedia, + outMain, + }); return { ...appConfig, mode: "development", @@ -41,9 +62,9 @@ module.exports = ( pathinfo: true, // There will be one main bundle, and one file per asynchronous chunk. // In development, it does not produce real files. - filename: "static/js/[name].js", + filename: `${outJs}/${outMain}.js`, // There are also additional JS chunk files if you use code splitting. - chunkFilename: "static/js/[name].chunk.js", + chunkFilename: `${outJs}/${outMain}.chunk.js`, // Point sourcemap entries to original disk location. devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/"), @@ -80,7 +101,7 @@ module.exports = ( ], }, plugins: [ - plugins.environmentVariables, + plugins.environmentVariables(envForApp), // Experimental hot reloading for React . // https://github.com/facebook/react/tree/main/packages/react-refresh new ReactRefreshWebpackPlugin({overlay: false}), @@ -88,8 +109,28 @@ module.exports = ( // a plugin that prints an error when you attempt to do this. // See https://github.com/facebook/create-react-app/issues/240 new CaseSensitivePathsPlugin(), - plugins.forkTsChecker({async: true, sourceMap: true}), - plugins.eslint({failOnError: !emitErrorsAsWarnings}), + plugins.forkTsChecker({ + async: true, + sourceMap: true, + nodeModules, + configFile: tsConfig, + tsBuildInfoFile, + tsConfigPathsContext, + }), + new ESLintPlugin({ + extensions: ["js", "jsx", "ts", "tsx"], + eslintPath: require.resolve("eslint"), + failOnError: !emitErrorsAsWarnings, + context: srcDir, + cache: true, + cacheLocation: path.resolve(nodeModules, ".cache/.eslintcache"), + // ESLint class options + cwd: tsConfigPathsContext, + resolvePluginsRelativeTo: __dirname, + // baseConfig: { + // extends: [require.resolve("eslint-config-react-app/base")], + // }, + }), ], // Turn off performance processing because we utilize // our own hints via the FileSizeReporter diff --git a/packages/dev/.bin/dev-server.sh b/packages/dev/.bin/dev-server.sh index fcd84174..950bbbcc 100755 --- a/packages/dev/.bin/dev-server.sh +++ b/packages/dev/.bin/dev-server.sh @@ -1,5 +1,34 @@ #!/bin/sh +set -e + +if [ "$#" -ne 3 ]; then + echo "Usage: $0 src_dir node_modules output_dir" >&2 + exit 1 +fi + +exec="$(dirname "$0")" +src_dir=$(realpath "$1") +node_modules=$(realpath "$2") +output_dir=$(realpath "$3") + +export NODE_PATH="$node_modules" + +# Sources structure (multiple parts needs to agree on this) +# ------------------------------------------------------------------------------ +app_index_js="$src_dir"/src/index.tsx +app_ts_config_paths_context=$src_dir +app_ts_config="$src_dir"/tsconfig.json +app_src="$src_dir"/src +app_public="$src_dir"/public + +# Output structure (multiple parts needs to agree on this) +# ------------------------------------------------------------------------------ +out_js="static/js" +out_css="static/css" +out_media="static/media" +out_main="main" + # Dev server will be started on this HOST and PORT export HOST="${HOST:-0.0.0.0}" export PORT="${PORT:-3000}" @@ -23,4 +52,15 @@ fi BUILD_DIR=$(realpath "$(dirname "$0")"/../build) export BUILD_DIR -node "$(dirname "$0")"/start.js +webpack_output_dir="$output_dir"/webpack-output +node "$exec"/start.js \ + "$app_public" \ + "$app_index_js" \ + "$app_src" \ + "$app_ts_config" \ + "$app_ts_config_paths_context" \ + "$webpack_output_dir" \ + "$out_js" \ + "$out_css" \ + "$out_media" \ + "$out_main" diff --git a/packages/dev/.bin/start.js b/packages/dev/.bin/start.js index 22a1d3f9..3cfd139b 100644 --- a/packages/dev/.bin/start.js +++ b/packages/dev/.bin/start.js @@ -1,6 +1,30 @@ +if (process.argv.length !== 12) { + console.log(process.argv.length); + console.error( + `Usage: ${process.argv[0]} ${process.argv[1]}` + + " " + + " ", + ); + process.exit(1); +} + +const appNodeModules = process.env.NODE_PATH; + +const appPublic = process.argv[2]; +const appIndexJs = process.argv[3]; +const appSrc = process.argv[4]; +const appTsConfig = process.argv[5]; +const appTsConfigPathsContext = process.argv[6]; +const buildDir = process.argv[7]; +const outJs = process.argv[8]; +const outCss = process.argv[9]; +const outMedia = process.argv[10]; +const outMain = process.argv[11]; + // Do this as the first thing so that any code reading it knows the right env. process.env.BABEL_ENV = "development"; -process.env.NODE_ENV = "development"; +const NODE_ENV = "development"; +process.env.NODE_ENV = NODE_ENV; // Makes the script crash on unhandled rejections instead of silently // ignoring them. In the future, promise rejections that are not handled will @@ -9,19 +33,12 @@ process.on("unhandledRejection", err => { throw err; }); -const appConfigPath = "../../app/.bin/config"; -// Ensure environment variables are read. -require(`${appConfigPath}/env`); - const fs = require("fs"); const path = require("path"); -const webpack = require("webpack"); const WebpackDevServer = require("webpack-dev-server"); var forkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin"); -const paths = require(`${appConfigPath}/paths`); -const webpackConfig = require("./config/webpack.config"); const createDevServerConfig = require("./config/webpackDevServer.config"); // Tools like Cloud9 rely on this. @@ -41,7 +58,25 @@ const publicPath = "/"; const allowedLanHost = process.env.ALLOWED_HOST; -const compiler = webpack(webpackConfig({publicPath})); +const compiler = require("webpack")( + require("./config/webpack.config")({ + buildDir, + publicPath, + enableProfiling: false, + appIndexJs, + srcDir: appSrc, + cacheDirectory: `${appNodeModules}/.cache`, + tsConfig: appTsConfig, + nodeModules: appNodeModules, + tsBuildInfoFile: `${appNodeModules}/.cache/tsconfig.tsbuildinfo`, + tsConfigPathsContext: appTsConfigPathsContext, + envForApp: {NODE_ENV}, + outJs, + outCss, + outMedia, + outMain, + }), +); compiler.hooks.invalid.tap("invalid", () => { // "invalid" is short for "bundle invalidated", it doesn't imply any errors. @@ -88,7 +123,7 @@ const proxyConfig = [ // method, we can proxy all non-GET requests. const isStaticAsset = fs.existsSync( path.resolve( - paths.appPublic, + appPublic, pathname.replace(new RegExp(`^${publicPath}`), ""), ), ); @@ -137,7 +172,7 @@ const devServer = new WebpackDevServer( ...createDevServerConfig( proxyConfig, allowedLanHost, - paths.appPublic, + appPublic, publicPath, ), host, From 83130fc88b15622c0c11778e33d8db6b79b31ab5 Mon Sep 17 00:00:00 2001 From: Ivan Devat Date: Wed, 11 Sep 2024 18:26:26 +0200 Subject: [PATCH 20/44] refactor: reuse fs structure; reduce build scripts --- packages/app/.bin/build/app-adapt-cockpit.sh | 21 -- .../app/.bin/build/app-adapt-standalone.sh | 9 - packages/app/.bin/build/app-dir-init.sh | 25 --- packages/app/.bin/build/app-link.sh | 73 ------ packages/app/.bin/build/in-json.sh | 3 + packages/app/.bin/build/main.sh | 208 +++++++++++++----- packages/app/.bin/build/structure.json | 23 ++ packages/app/.bin/build/webpack-sizes.sh | 34 --- packages/app/Makefile.am | 15 +- packages/dev/.bin/dev-server.sh | 30 ++- packages/dev/.bin/start.js | 6 +- 11 files changed, 202 insertions(+), 245 deletions(-) delete mode 100755 packages/app/.bin/build/app-adapt-cockpit.sh delete mode 100755 packages/app/.bin/build/app-adapt-standalone.sh delete mode 100755 packages/app/.bin/build/app-dir-init.sh delete mode 100755 packages/app/.bin/build/app-link.sh create mode 100755 packages/app/.bin/build/in-json.sh create mode 100644 packages/app/.bin/build/structure.json delete mode 100755 packages/app/.bin/build/webpack-sizes.sh diff --git a/packages/app/.bin/build/app-adapt-cockpit.sh b/packages/app/.bin/build/app-adapt-cockpit.sh deleted file mode 100755 index 2ee32c66..00000000 --- a/packages/app/.bin/build/app-adapt-cockpit.sh +++ /dev/null @@ -1,21 +0,0 @@ -#!/bin/sh - -set -e - -build_dir=$1 -out_js=$2 -out_html=$3 -pcsd_socket=$4 - -html="$build_dir"/"$out_html" - -mv "$build_dir"/manifestCockpit.json "$build_dir"/manifest.json - -sed --in-place \ - "s#^var pcsdSocket = \".*\";#var pcsdSocket = \"$pcsd_socket\";#" \ - "$build_dir"/"$out_js"/adapterCockpit.js - -mv "$build_dir"/"$out_js"/adapterCockpit.js "$build_dir"/"$out_js"/adapter.js - -sed --in-place \ - '/' "$html" diff --git a/packages/app/.bin/build/app-adapt-standalone.sh b/packages/app/.bin/build/app-adapt-standalone.sh deleted file mode 100755 index b2bf4911..00000000 --- a/packages/app/.bin/build/app-adapt-standalone.sh +++ /dev/null @@ -1,9 +0,0 @@ -#!/bin/sh - -set -e - -build_dir=$1 -out_js=$2 - -rm "$build_dir"/"$out_js"/adapterCockpit.js -rm "$build_dir"/manifestCockpit.json diff --git a/packages/app/.bin/build/app-dir-init.sh b/packages/app/.bin/build/app-dir-init.sh deleted file mode 100755 index 01b8f800..00000000 --- a/packages/app/.bin/build/app-dir-init.sh +++ /dev/null @@ -1,25 +0,0 @@ -#!/bin/sh - -set -e - -template_dir=$1 -webpack_output_dir=$2 -app_dir=$3 - -# Maybe app_dir does not exists. -mkdir -p "$app_dir" - -# Maybe there is an obsolete content. -# Using :? will cause the command to fail if the variable is null or unset. -# This prevents deleting everything in the system's root directory when -# `build_dir/compile_dir` variable is empty. -rm -rf "${app_dir:?}/"* - -# Copy src "template" dir -cp -r "${template_dir:?}/"* "$app_dir" -# Dirs/files copied from src_dir (i.e. template_dir) can be readonly (e.g. when -# `make distcheck`). -chmod --recursive ug+w "$app_dir" - -# Copy compiled assets -cp -r "${webpack_output_dir:?}/"* "$app_dir" diff --git a/packages/app/.bin/build/app-link.sh b/packages/app/.bin/build/app-link.sh deleted file mode 100755 index b00f8bef..00000000 --- a/packages/app/.bin/build/app-link.sh +++ /dev/null @@ -1,73 +0,0 @@ -#!/bin/sh - -set -e - -src_dir=$1 -node_modules=$2 -build_dir=$3 -out_js=$4 -out_css=$5 -out_media=$6 -out_main=$7 -out_html=$8 -path_prefix=$9 - -exec="$(dirname "$0")" - -html="$build_dir"/"$out_html" -manifest=manifest.json -ico="$out_media"/favicon.png - -adapter="$build_dir"/static/js/adapter.js -marks_src="$src_dir"/src/app/view/dataTest/json -marks_build="$build_dir"/manifest_test_marks.json - -make_asset() { - _path=$1 - _ext=$2 - - echo "/$_path/$(basename "$(ls "$build_dir/$_path/$out_main".*"$_ext")")" -} - -# > Inject compiled assets -# ------------------------------------------------------------------------------ -# There is a tag in index.html. -# This function: -# * append link to built css after the tag -# * change source of the tag to built javascript - -# Find script tag by src attribute. -script_src=$(echo "src=\"/$out_js/$out_main.js\"" | sed 's#/#\\/#g') - -# Append css link. -css_link="" -sed --in-place "/$script_src/a \ $css_link" "$html" - -# Set correct correct src. -sed --in-place "s#$script_src#src=\"$(make_asset "$out_js" .js)\"#" "$html" - -# Fix assets path -# ------------------------------------------------------------------------------ -# All assets in index.html uses absolute path. The index.html is also used by -# development server which needs absolute paths. There is no copy/edit phase -# in development server, so it is done here. -# Here is the absolute path prefixed according to pcsd url namespace for -# webui. -# WARNING: Don't use relative path. It works well in dashboard but in the -# cluster detail the resulting url contains word "cluster" inside, so instead -# of "/ui/static/..." we get "/ui/cluster/static" and asset loading fails. -# see: https://bugzilla.redhat.com/show_bug.cgi?id=2222788 -paths="$out_js|$out_css|$manifest|$ico" -sed --regexp-extended --in-place \ - "s#(src|href)=\"/($paths)#\1=\"$path_prefix/\2#" \ - "$html" - -# Minimize adapter -# ------------------------------------------------------------------------------ -"$node_modules"/.bin/terser "$adapter" \ - --compress ecma=5,warnings=false,comparisons=false,inline=2 \ - --output "$adapter" - -# Build marks -# ------------------------------------------------------------------------------ -node "$exec"/app-merge-test-marks.js "$marks_src" > "$marks_build" diff --git a/packages/app/.bin/build/in-json.sh b/packages/app/.bin/build/in-json.sh new file mode 100755 index 00000000..0482a514 --- /dev/null +++ b/packages/app/.bin/build/in-json.sh @@ -0,0 +1,3 @@ +#!/bin/sh + +node --print --eval="JSON.parse(process.argv[1]).$2" "$(cat "$1")" diff --git a/packages/app/.bin/build/main.sh b/packages/app/.bin/build/main.sh index 29378112..30cdcf8c 100755 --- a/packages/app/.bin/build/main.sh +++ b/packages/app/.bin/build/main.sh @@ -13,51 +13,52 @@ node_modules=$(realpath "$2") output_dir=$(realpath "$3") pcsd_unix_socket="${4:-"/var/run/pcsd.socket"}" +in_json="$exec"/in-json.sh + # Export node_modules location for js files. E.g. webpack-minify-css.js etc. export NODE_PATH="$node_modules" -# Sources structure (multiple parts needs to agree on this) +structure() { + "$in_json" "$exec"/structure.json "$1"."$2" +} + +# Js application structure (multiple parts needs to agree on this) # ------------------------------------------------------------------------------ -app_html="$src_dir"/public/index.html -app_index_js="$src_dir"/src/index.tsx +app_index_js="$src_dir"/$(structure app index) +app_ts_config="$src_dir"/$(structure app tsConfig) app_ts_config_paths_context=$src_dir -app_ts_config="$src_dir"/tsconfig.json -app_src="$src_dir"/src -app_public="$src_dir"/public +app_src="$src_dir"/$("$in_json" "$app_ts_config" "compilerOptions.baseUrl") +app_marks="$src_dir"/$(structure app marks) + +# Website template structure (multiple parts needs to agree on this) +# ------------------------------------------------------------------------------ +template_dir=$src_dir/$(structure template dir) +template_index=$(structure template index) +template_adapter=$(structure template adapter) +template_adapter_cockpit=$(structure template adapterCockpit) +template_manifest=$(structure template manifest) +template_manifest_cockpit=$(structure template manifestCockpit) +template_ico=$(structure template ico) # Output structure (multiple parts needs to agree on this) # ------------------------------------------------------------------------------ -out_js="static/js" -out_css="static/css" -out_media="static/media" -out_main="main" -out_html="index.html" +out_js=$(structure output js) +out_css=$(structure output css) +out_media=$(structure output media) +out_main=$(structure output main) +out_marks=$(structure output marks) # Check sources assumptions # ------------------------------------------------------------------------------ # If assumptions are not met, build and dev server fails even so. But it can # be harder to realize where the root cause is. -for f in $app_html $app_index_js; do +for f in "$template_dir"/"$template_index" $app_index_js; do if [ ! -f "$f" ]; then echo "Could not find required file: '$f'" exit 1 fi done -ts_base_url="$src_dir"/$( - node --print --eval="JSON.parse(process.argv[1]).compilerOptions.baseUrl" \ - "$(cat "$app_ts_config")" -) -if [ "$ts_base_url" != "$app_src" ]; then - echo "baseUrl in .tsconfig should be the same as app_src in main.sh." - echo "(But they are: $ts_base_url vs $app_src)" - echo "In other words, typescript and webpack should work with the same dir." - echo "Please, check it especialy in webpack.config.js." - echo "(Look at the sections resolve.module and resolve.alias)" - echo "If this check is not appropriate anymore you can change it." - exit 1 -fi - # Webpack compiles assets for all apps # ------------------------------------------------------------------------------ mkdir -p "$output_dir" @@ -76,47 +77,136 @@ node "$exec"/webpack.js \ "$out_css" \ "$out_media" \ "$out_main" -"$exec"/webpack-sizes.sh \ - "$webpack_output_dir" \ - "$out_css" \ - "$out_media" \ - "$out_main" + +node "$exec"/webpack-minify-css.js \ + "$(ls "$webpack_output_dir"/"$out_css"/"$out_main".*.css)" + +# measure sizes of compiled assets +find "$webpack_output_dir" -type f \ + -not -path "$webpack_output_dir/$out_media/*" \ + -not -name "*.txt" \ + -not -name "*.map" | + while read -r file; do + size=$(gzip -c "$file" | wc -c) + working_directory="$(pwd)"/ + + if [ "${file#"$working_directory"}" != "$file" ]; then + print_name="${file#"$working_directory"}" + else + print_name="$file" + fi + + if [ "$size" -gt "$((512 * 1024))" ]; then + echo "$print_name: $size !!! TOO BIG !!!" + else + echo "$print_name: $size" + fi + done echo +# Make all applications +# ------------------------------------------------------------------------------ +app_dir_init() { + _app_dir=$1 + # Maybe app_dir does not exists. + mkdir -p "$_app_dir" + + # Maybe there is an obsolete content. + # Using :? will cause the command to fail if the variable is null or unset. + # This prevents deleting everything in the system's root directory when + # `build_dir/compile_dir` variable is empty. + rm -rf "${_app_dir:?}/"* + + # Copy src "template" dir + cp -r "${template_dir:?}/"* "$_app_dir" + # Dirs/files copied from src_dir (i.e. template_dir) can be readonly (e.g. + # when `make distcheck`). + chmod --recursive ug+w "$_app_dir" + + # Copy compiled assets + cp -r "${webpack_output_dir:?}/"* "$_app_dir" +} +app_link() { + _build_dir=$1 + _path_prefix=$2 + make_asset() { + _path=$1 + _ext=$2 + + echo "/$_path/$(basename "$(ls "$_build_dir/$_path/$out_main".*"$_ext")")" + } + # Inject compiled assets + # -------------------------------------------------------------------------- + # There is a tag in index.html. + # This function: + # * append link to built css after the tag + # * change source of the tag to built javascript + + # Find script tag by src attribute. + script_src=$(echo "src=\"/$out_js/$out_main.js\"" | sed 's#/#\\/#g') + + # Append css link. + css_link="" + sed --in-place \ + "/$script_src/a \ $css_link" \ + "$_build_dir"/"$template_index" + + # Set correct correct src. + sed --in-place \ + "s#$script_src#src=\"$(make_asset "$out_js" .js)\"#" \ + "$_build_dir"/"$template_index" + + # Fix assets path + # -------------------------------------------------------------------------- + # All assets in index.html uses absolute path. The index.html is also used by + # development server which needs absolute paths. There is no copy/edit phase + # in development server, so it is done here. + # Here is the absolute path prefixed according to pcsd url namespace for + # webui. + # WARNING: Don't use relative path. It works well in dashboard but in the + # cluster detail the resulting url contains word "cluster" inside, so instead + # of "/ui/static/..." we get "/ui/cluster/static" and asset loading fails. + # see: https://bugzilla.redhat.com/show_bug.cgi?id=2222788 + paths="$out_js|$out_css|$template_manifest|$template_ico" + sed --regexp-extended --in-place \ + "s#(src|href)=\"/($paths)#\1=\"$_path_prefix/\2#" \ + "$_build_dir"/"$template_index" + + # Minimize adapter + # -------------------------------------------------------------------------- + "$node_modules"/.bin/terser "$_build_dir"/"$template_adapter" \ + --compress ecma=5,warnings=false,comparisons=false,inline=2 \ + --output "$_build_dir"/"$template_adapter" + + # Build marks + # -------------------------------------------------------------------------- + node "$exec"/app-merge-test-marks.js "$app_marks" > "$_build_dir"/"$out_marks" +} + # Make standalone application from webpack output # ------------------------------------------------------------------------------ standalone_dir="$output_dir"/for-standalone -"$exec"/app-dir-init.sh "$app_public" "$webpack_output_dir" "$standalone_dir" -"$exec"/app-adapt-standalone.sh "$standalone_dir" "$out_js" -"$exec"/app-link.sh \ - "$src_dir" \ - "$node_modules" \ - "$standalone_dir" \ - "$out_js" \ - "$out_css" \ - "$out_media" \ - "$out_main" \ - "$out_html" \ - "/ui" +app_dir_init "$standalone_dir" +rm "$standalone_dir"/"$template_adapter_cockpit" +rm "$standalone_dir"/"$template_manifest_cockpit" +app_link "$standalone_dir" "/ui" echo "Build prepared: ${standalone_dir}." # Make cockpit application from webpack output # ------------------------------------------------------------------------------ cockpit_dir="$output_dir"/for-cockpit -"$exec"/app-dir-init.sh "$app_public" "$webpack_output_dir" "$cockpit_dir" -"$exec"/app-adapt-cockpit.sh \ - "$cockpit_dir" \ - "$out_js" \ - "$out_html" \ - "$pcsd_unix_socket" -"$exec"/app-link.sh \ - "$src_dir" \ - "$node_modules" \ - "$cockpit_dir" \ - "$out_js" \ - "$out_css" \ - "$out_media" \ - "$out_main" \ - "$out_html" \ - "." +app_dir_init "$cockpit_dir" +sed --in-place \ + '/' \ + "$cockpit_dir"/"$template_index" +sed --in-place \ + "s#^var pcsdSocket = \".*\";#var pcsdSocket = \"$pcsd_unix_socket\";#" \ + "$cockpit_dir"/"$template_adapter_cockpit" +mv \ + "$cockpit_dir"/"$template_adapter_cockpit" \ + "$cockpit_dir"/"$template_adapter" +mv \ + "$cockpit_dir"/"$template_manifest_cockpit" \ + "$cockpit_dir"/"$template_manifest" +app_link "$cockpit_dir" "." echo "Build prepared: ${cockpit_dir}." diff --git a/packages/app/.bin/build/structure.json b/packages/app/.bin/build/structure.json new file mode 100644 index 00000000..5fb15aed --- /dev/null +++ b/packages/app/.bin/build/structure.json @@ -0,0 +1,23 @@ +{ + "app": { + "index": "src/index.tsx", + "tsConfig": "tsconfig.json", + "marks": "src/app/view/dataTest/json" + }, + "template": { + "dir": "public", + "index": "index.html", + "adapter": "static/js/adapter.js", + "adapterCockpit": "static/js/adapterCockpit.js", + "manifest": "manifest.json", + "manifestCockpit": "manifestCockpit.json", + "ico": "static/media/favicon.png" + }, + "output": { + "js": "static/js", + "css": "static/css", + "media": "static/media", + "main": "main", + "marks": "manifest_test_marks.json" + } +} diff --git a/packages/app/.bin/build/webpack-sizes.sh b/packages/app/.bin/build/webpack-sizes.sh deleted file mode 100755 index 7225a5ee..00000000 --- a/packages/app/.bin/build/webpack-sizes.sh +++ /dev/null @@ -1,34 +0,0 @@ -#!/bin/sh - -set -e -exec="$(dirname "$0")" - -webpack_output_dir=$1 -out_css=$2 -out_media=$3 -out_main=$4 - -node "$exec"/webpack-minify-css.js \ - "$(ls "$webpack_output_dir"/"$out_css"/"$out_main".*.css)" - -# measure sizes of compiled assets -find "$webpack_output_dir" -type f \ - -not -path "$webpack_output_dir/$out_media/*" \ - -not -name "*.txt" \ - -not -name "*.map" | - while read -r file; do - size=$(gzip -c "$file" | wc -c) - working_directory="$(pwd)"/ - - if [ "${file#"$working_directory"}" != "$file" ]; then - print_name="${file#"$working_directory"}" - else - print_name="$file" - fi - - if [ "$size" -gt "$((512 * 1024))" ]; then - echo "$print_name: $size !!! TOO BIG !!!" - else - echo "$print_name: $size" - fi - done diff --git a/packages/app/Makefile.am b/packages/app/Makefile.am index e9943d7d..3e046a5a 100644 --- a/packages/app/Makefile.am +++ b/packages/app/Makefile.am @@ -1,17 +1,14 @@ MAINTAINERCLEANFILES = Makefile.in EXTRA_DIST = \ - .bin/build/app-adapt-cockpit.sh \ - .bin/build/app-adapt-standalone.sh \ - .bin/build/app-dir-init.sh \ - .bin/build/app-link.sh \ - .bin/build/app-merge-test-marks.js \ + .bin/build/webpack.rules.js \ + .bin/build/webpack-minify-css.js \ .bin/build/main.sh \ - .bin/build/webpack.config.js \ + .bin/build/app-merge-test-marks.js \ + .bin/build/in-json.sh \ .bin/build/webpack.js \ - .bin/build/webpack-minify-css.js \ + .bin/build/structure.json \ + .bin/build/webpack.config.js \ .bin/build/webpack.plugins.js \ - .bin/build/webpack.rules.js \ - .bin/build/webpack-sizes.sh \ .bin/last-commit-mark.sh \ .bin/modules-patch.sh \ .bin/modules-prepare.sh \ diff --git a/packages/dev/.bin/dev-server.sh b/packages/dev/.bin/dev-server.sh index 950bbbcc..892ffadd 100755 --- a/packages/dev/.bin/dev-server.sh +++ b/packages/dev/.bin/dev-server.sh @@ -8,26 +8,35 @@ if [ "$#" -ne 3 ]; then fi exec="$(dirname "$0")" + +build_system="$(realpath "$exec"/../../app/.bin/build)" +in_json="$build_system"/in-json.sh + src_dir=$(realpath "$1") node_modules=$(realpath "$2") output_dir=$(realpath "$3") export NODE_PATH="$node_modules" +structure() { + "$in_json" "$build_system"/structure.json "$1"."$2" +} + # Sources structure (multiple parts needs to agree on this) # ------------------------------------------------------------------------------ -app_index_js="$src_dir"/src/index.tsx +app_index_js="$src_dir"/$(structure app index) +app_ts_config="$src_dir"/$(structure app tsConfig) app_ts_config_paths_context=$src_dir -app_ts_config="$src_dir"/tsconfig.json -app_src="$src_dir"/src -app_public="$src_dir"/public +app_src="$src_dir"/$("$in_json" "$app_ts_config" "compilerOptions.baseUrl") + +template_dir=$src_dir/$(structure template dir) # Output structure (multiple parts needs to agree on this) # ------------------------------------------------------------------------------ -out_js="static/js" -out_css="static/css" -out_media="static/media" -out_main="main" +out_js=$(structure output js) +out_css=$(structure output css) +out_media=$(structure output media) +out_main=$(structure output main) # Dev server will be started on this HOST and PORT export HOST="${HOST:-0.0.0.0}" @@ -49,12 +58,9 @@ if lsof -i :"$PORT" > /dev/null; then exit 1 fi -BUILD_DIR=$(realpath "$(dirname "$0")"/../build) -export BUILD_DIR - webpack_output_dir="$output_dir"/webpack-output node "$exec"/start.js \ - "$app_public" \ + "$template_dir" \ "$app_index_js" \ "$app_src" \ "$app_ts_config" \ diff --git a/packages/dev/.bin/start.js b/packages/dev/.bin/start.js index 3cfd139b..8d21c51c 100644 --- a/packages/dev/.bin/start.js +++ b/packages/dev/.bin/start.js @@ -10,7 +10,7 @@ if (process.argv.length !== 12) { const appNodeModules = process.env.NODE_PATH; -const appPublic = process.argv[2]; +const appTemplate = process.argv[2]; const appIndexJs = process.argv[3]; const appSrc = process.argv[4]; const appTsConfig = process.argv[5]; @@ -123,7 +123,7 @@ const proxyConfig = [ // method, we can proxy all non-GET requests. const isStaticAsset = fs.existsSync( path.resolve( - appPublic, + appTemplate, pathname.replace(new RegExp(`^${publicPath}`), ""), ), ); @@ -172,7 +172,7 @@ const devServer = new WebpackDevServer( ...createDevServerConfig( proxyConfig, allowedLanHost, - appPublic, + appTemplate, publicPath, ), host, From 72f19ad3dd1f416cd51f1f4b3b8c8224b78308b8 Mon Sep 17 00:00:00 2001 From: Ivan Devat Date: Thu, 12 Sep 2024 14:09:09 +0200 Subject: [PATCH 21/44] refactor: reformat to be following changes visible --- packages/app/.bin/build/webpack.config.js | 324 +++++++++++----------- 1 file changed, 163 insertions(+), 161 deletions(-) diff --git a/packages/app/.bin/build/webpack.config.js b/packages/app/.bin/build/webpack.config.js index 911a82fb..c5b270fc 100644 --- a/packages/app/.bin/build/webpack.config.js +++ b/packages/app/.bin/build/webpack.config.js @@ -34,169 +34,171 @@ module.exports = ({ outCss, outMedia, outMain, -}) => ({ - target: ["browserslist"], - // Webpack noise constrained to errors and warnings - stats: "errors-warnings", - mode: "production", - // Stop compilation early in production - bail: true, - devtool: shouldUseSourceMap ? "source-map" : false, - // An entry point indicates which module webpack should use to begin - entry: appIndexJs, - // Where to emit the bundles it creates and how to name these files. - output: { - // Place to write generated assets. No files are written in the case of dev - // server if it is not explicitly set by `writeToDisk` option. - path: buildDir, - // Include comments in bundles with info about the contained modules. - pathinfo: false, - // There will be one main bundle, and one file per asynchronous chunk. - // In development, it does not produce real files. - filename: `${outJs}/${outMain}.[contenthash:8].js`, - // There are also additional JS chunk files if you use code splitting. - chunkFilename: `${outJs}/${outMain}.[contenthash:8].chunk.js`, - assetModuleFilename: `${outMedia}/${outMain}.[hash][ext]`, - // To determine where the app is being served from. It requires a trailing - // slash, or the file assets will get an incorrect path. - publicPath, - // Point sourcemap entries to original disk location. - devtoolModuleFilenameTemplate: info => - path.relative(srcDir, info.absoluteResourcePath).replace(/\\/g, "/"), - }, - cache: { - type: "filesystem", - version: envHash(envForApp), - cacheDirectory, - store: "pack", - buildDependencies: { - defaultWebpack: ["webpack/lib/"], - config: [__filename], - tsconfig: [tsConfig], +}) => { + return { + target: ["browserslist"], + // Webpack noise constrained to errors and warnings + stats: "errors-warnings", + mode: "production", + // Stop compilation early in production + bail: true, + devtool: shouldUseSourceMap ? "source-map" : false, + // An entry point indicates which module webpack should use to begin + entry: appIndexJs, + // Where to emit the bundles it creates and how to name these files. + output: { + // Place to write generated assets. No files are written in the case of + // dev server if it is not explicitly set by `writeToDisk` option. + path: buildDir, + // Include comments in bundles with info about the contained modules. + pathinfo: false, + // There will be one main bundle, and one file per asynchronous chunk. + // In development, it does not produce real files. + filename: `${outJs}/${outMain}.[contenthash:8].js`, + // There are also additional JS chunk files if you use code splitting. + chunkFilename: `${outJs}/${outMain}.[contenthash:8].chunk.js`, + assetModuleFilename: `${outMedia}/${outMain}.[hash][ext]`, + // To determine where the app is being served from. It requires a trailing + // slash, or the file assets will get an incorrect path. + publicPath, + // Point sourcemap entries to original disk location. + devtoolModuleFilenameTemplate: info => + path.relative(srcDir, info.absoluteResourcePath).replace(/\\/g, "/"), }, - }, - infrastructureLogging: { - level: "none", - }, - optimization: { - minimize: true, - minimizer: [ - // This is only used in production mode - new TerserPlugin({ - terserOptions: { - parse: { - // We want terser to parse ecma 8 code. However, we don't want it to - // apply any minification steps that turns valid ecma 5 code into - // invalid ecma 5 code. This is why the 'compress' and 'output' - // sections only apply transformations that are ecma 5 safe - // https://github.com/facebook/create-react-app/pull/4234 - ecma: 8, - }, - compress: { - ecma: 5, - warnings: false, - // Disabled because of an issue with Uglify breaking seemingly - // valid code: - // https://github.com/facebook/create-react-app/issues/2376 - // Pending further investigation: - // https://github.com/mishoo/UglifyJS2/issues/2011 - comparisons: false, - // Disabled because of an issue with Terser breaking valid code: - // https://github.com/facebook/create-react-app/issues/5250 - // Pending further investigation: - // https://github.com/terser-js/terser/issues/120 - inline: 2, - }, - mangle: { - safari10: true, - }, - // Added for profiling in devtools - keep_classnames: enableProfiling, - keep_fnames: enableProfiling, - output: { - ecma: 5, - comments: false, - // Turned on because emoji and regex is not minified properly using - // default - // https://github.com/facebook/create-react-app/issues/2488 - ascii_only: true, + cache: { + type: "filesystem", + version: envHash(envForApp), + cacheDirectory, + store: "pack", + buildDependencies: { + defaultWebpack: ["webpack/lib/"], + config: [__filename], + tsconfig: [tsConfig], + }, + }, + infrastructureLogging: { + level: "none", + }, + optimization: { + minimize: true, + minimizer: [ + // This is only used in production mode + new TerserPlugin({ + terserOptions: { + parse: { + // We want terser to parse ecma 8 code. However, we don't want it + // to apply any minification steps that turns valid ecma 5 code + // into invalid ecma 5 code. This is why the 'compress' and + // 'output' sections only apply transformations that are ecma 5 + // safe https://github.com/facebook/create-react-app/pull/4234 + ecma: 8, + }, + compress: { + ecma: 5, + warnings: false, + // Disabled because of an issue with Uglify breaking seemingly + // valid code: + // https://github.com/facebook/create-react-app/issues/2376 + // Pending further investigation: + // https://github.com/mishoo/UglifyJS2/issues/2011 + comparisons: false, + // Disabled because of an issue with Terser breaking valid code: + // https://github.com/facebook/create-react-app/issues/5250 + // Pending further investigation: + // https://github.com/terser-js/terser/issues/120 + inline: 2, + }, + mangle: { + safari10: true, + }, + // Added for profiling in devtools + keep_classnames: enableProfiling, + keep_fnames: enableProfiling, + output: { + ecma: 5, + comments: false, + // Turned on because emoji and regex is not minified properly + // using default + // https://github.com/facebook/create-react-app/issues/2488 + ascii_only: true, + }, }, - }, - extractComments: false, - }), - // This is only used in production mode - ], - }, - resolve: { - // This allows you to set a fallback for where webpack should look for - // modules. - // We placed these paths second because we want `node_modules` to "win" - // if there are any conflicts. This matches Node resolution mechanism. - // https://github.com/facebook/create-react-app/issues/253 - modules: ["node_modules", nodeModules, srcDir], - extensions: [".js", ".ts", ".tsx", ".json", ".jsx"], - alias: { - src: srcDir, - // Allows for better profiling with ReactDevTools - ...(enableProfiling && { - "react-dom$": "react-dom/profiling", - "scheduler/tracing": "scheduler/tracing-profiling", - }), + extractComments: false, + }), + // This is only used in production mode + ], }, - }, - module: { - // Makes missing exports an error instead of warning. - strictExportPresence: true, - - rules: [ - shouldUseSourceMap && rules.sourceMaps, - { - // Only the first matching is used when the it matches. When no match - // it will fall back to the "file" loader at the end of the loaders. - oneOf: [ - rules.images( - publicPath.startsWith(".") - ? {generator: {publicPath: "../../"}} - : {}, - ), - rules.scripts({ - plugins: [], - compact: true, - include: srcDir, - cacheDirectory, - }), - rules.outsideScripts({ - sourceMaps: shouldUseSourceMap, - inputSourceMap: shouldUseSourceMap, - cacheDirectory, - }), - rules.css({ - // css is located in `static/css`, use '../../' to locate - // index.html folder in production `publicPath` can be a - // relative path - defaultStyleLoaderOptions: publicPath.startsWith(".") - ? {publicPath: "../../"} - : {}, - sourceMap: shouldUseSourceMap, - }), - rules.fallback, - ], + resolve: { + // This allows you to set a fallback for where webpack should look for + // modules. + // We placed these paths second because we want `node_modules` to "win" + // if there are any conflicts. This matches Node resolution mechanism. + // https://github.com/facebook/create-react-app/issues/253 + modules: ["node_modules", nodeModules, srcDir], + extensions: [".js", ".ts", ".tsx", ".json", ".jsx"], + alias: { + src: srcDir, + // Allows for better profiling with ReactDevTools + ...(enableProfiling && { + "react-dom$": "react-dom/profiling", + "scheduler/tracing": "scheduler/tracing-profiling", + }), }, + }, + module: { + // Makes missing exports an error instead of warning. + strictExportPresence: true, + + rules: [ + shouldUseSourceMap && rules.sourceMaps, + { + // Only the first matching is used when the it matches. When no match + // it will fall back to the "file" loader at the end of the loaders. + oneOf: [ + rules.images( + publicPath.startsWith(".") + ? {generator: {publicPath: "../../"}} + : {}, + ), + rules.scripts({ + plugins: [], + compact: true, + include: srcDir, + cacheDirectory, + }), + rules.outsideScripts({ + sourceMaps: shouldUseSourceMap, + inputSourceMap: shouldUseSourceMap, + cacheDirectory, + }), + rules.css({ + // css is located in `static/css`, use '../../' to locate + // index.html folder in production `publicPath` can be a + // relative path + defaultStyleLoaderOptions: publicPath.startsWith(".") + ? {publicPath: "../../"} + : {}, + sourceMap: shouldUseSourceMap, + }), + rules.fallback, + ], + }, + ], + }, + plugins: [ + plugins.environmentVariables(envForApp), + plugins.miniCssExtract({outCss, outMain}), + plugins.forkTsChecker({ + async: false, + sourceMap: shouldUseSourceMap, + nodeModules, + configFile: tsConfig, + tsBuildInfoFile, + tsConfigPathsContext, + }), ], - }, - plugins: [ - plugins.environmentVariables(envForApp), - plugins.miniCssExtract({outCss, outMain}), - plugins.forkTsChecker({ - async: false, - sourceMap: shouldUseSourceMap, - nodeModules, - configFile: tsConfig, - tsBuildInfoFile, - tsConfigPathsContext, - }), - ], - // Turn off performance processing because we utilize - // our own hints via the FileSizeReporter - performance: false, -}); + // Turn off performance processing because we utilize + // our own hints via the FileSizeReporter + performance: false, + }; +}; From 9abeda45c27836c6aaea8bad41b600e5d0cd8997 Mon Sep 17 00:00:00 2001 From: Ivan Devat Date: Thu, 12 Sep 2024 14:09:16 +0200 Subject: [PATCH 22/44] refactor: let webpack.config load some info itself --- packages/app/.bin/build/main.sh | 27 ++----------- packages/app/.bin/build/structure.json | 1 + packages/app/.bin/build/webpack.config.js | 42 ++++++++++----------- packages/app/.bin/build/webpack.js | 39 ++++++------------- packages/dev/.bin/config/webpack.config.js | 30 +++++---------- packages/dev/.bin/dev-server.sh | 14 +------ packages/dev/.bin/start.js | 44 ++++++++-------------- 7 files changed, 62 insertions(+), 135 deletions(-) diff --git a/packages/app/.bin/build/main.sh b/packages/app/.bin/build/main.sh index 30cdcf8c..36df0fdc 100755 --- a/packages/app/.bin/build/main.sh +++ b/packages/app/.bin/build/main.sh @@ -22,16 +22,10 @@ structure() { "$in_json" "$exec"/structure.json "$1"."$2" } -# Js application structure (multiple parts needs to agree on this) +# Source / output files structure # ------------------------------------------------------------------------------ -app_index_js="$src_dir"/$(structure app index) -app_ts_config="$src_dir"/$(structure app tsConfig) -app_ts_config_paths_context=$src_dir -app_src="$src_dir"/$("$in_json" "$app_ts_config" "compilerOptions.baseUrl") app_marks="$src_dir"/$(structure app marks) -# Website template structure (multiple parts needs to agree on this) -# ------------------------------------------------------------------------------ template_dir=$src_dir/$(structure template dir) template_index=$(structure template index) template_adapter=$(structure template adapter) @@ -40,25 +34,12 @@ template_manifest=$(structure template manifest) template_manifest_cockpit=$(structure template manifestCockpit) template_ico=$(structure template ico) -# Output structure (multiple parts needs to agree on this) -# ------------------------------------------------------------------------------ out_js=$(structure output js) out_css=$(structure output css) out_media=$(structure output media) out_main=$(structure output main) out_marks=$(structure output marks) -# Check sources assumptions -# ------------------------------------------------------------------------------ -# If assumptions are not met, build and dev server fails even so. But it can -# be harder to realize where the root cause is. -for f in "$template_dir"/"$template_index" $app_index_js; do - if [ ! -f "$f" ]; then - echo "Could not find required file: '$f'" - exit 1 - fi -done - # Webpack compiles assets for all apps # ------------------------------------------------------------------------------ mkdir -p "$output_dir" @@ -68,10 +49,7 @@ echo "Starting build" webpack_output_dir="$output_dir"/webpack-output mkdir -p "$webpack_output_dir" node "$exec"/webpack.js \ - "$app_index_js" \ - "$app_src" \ - "$app_ts_config" \ - "$app_ts_config_paths_context" \ + "$src_dir" \ "$webpack_output_dir" \ "$out_js" \ "$out_css" \ @@ -126,6 +104,7 @@ app_dir_init() { # Copy compiled assets cp -r "${webpack_output_dir:?}/"* "$_app_dir" } + app_link() { _build_dir=$1 _path_prefix=$2 diff --git a/packages/app/.bin/build/structure.json b/packages/app/.bin/build/structure.json index 5fb15aed..4b779493 100644 --- a/packages/app/.bin/build/structure.json +++ b/packages/app/.bin/build/structure.json @@ -2,6 +2,7 @@ "app": { "index": "src/index.tsx", "tsConfig": "tsconfig.json", + "tsConfigPathsContext": ".", "marks": "src/app/view/dataTest/json" }, "template": { diff --git a/packages/app/.bin/build/webpack.config.js b/packages/app/.bin/build/webpack.config.js index c5b270fc..7b14f40f 100644 --- a/packages/app/.bin/build/webpack.config.js +++ b/packages/app/.bin/build/webpack.config.js @@ -5,6 +5,7 @@ const TerserPlugin = require("terser-webpack-plugin"); const plugins = require("./webpack.plugins"); const rules = require("./webpack.rules"); +const {app: src} = require("./structure.json"); const envHash = env => { const hash = createHash("sha256"); @@ -19,22 +20,22 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false"; // This is the production and development configuration. // It is focused on developer experience, fast rebuilds, and a minimal bundle. module.exports = ({ - buildDir, - publicPath, - enableProfiling, - appIndexJs, srcDir, - cacheDirectory, - tsConfig, - nodeModules, - tsBuildInfoFile, - tsConfigPathsContext, - envForApp, + outputDir, + publicPath, outJs, outCss, outMedia, outMain, }) => { + const appIndexJs = path.join(srcDir, src.index); + const tsConfig = path.join(srcDir, src.tsConfig); + const tsConfigPathsContext = path.join(srcDir, src.tsConfigPathsContext); + const appSrc = path.join(srcDir, require(tsConfig).compilerOptions.baseUrl); + const nodeModules = process.env.NODE_PATH; + const cacheDirectory = path.join(nodeModules, ".cache"); + const envForApp = {NODE_ENV: process.env.NODE_ENV}; + return { target: ["browserslist"], // Webpack noise constrained to errors and warnings @@ -49,7 +50,7 @@ module.exports = ({ output: { // Place to write generated assets. No files are written in the case of // dev server if it is not explicitly set by `writeToDisk` option. - path: buildDir, + path: outputDir, // Include comments in bundles with info about the contained modules. pathinfo: false, // There will be one main bundle, and one file per asynchronous chunk. @@ -63,7 +64,7 @@ module.exports = ({ publicPath, // Point sourcemap entries to original disk location. devtoolModuleFilenameTemplate: info => - path.relative(srcDir, info.absoluteResourcePath).replace(/\\/g, "/"), + path.relative(appSrc, info.absoluteResourcePath).replace(/\\/g, "/"), }, cache: { type: "filesystem", @@ -112,8 +113,8 @@ module.exports = ({ safari10: true, }, // Added for profiling in devtools - keep_classnames: enableProfiling, - keep_fnames: enableProfiling, + keep_classnames: false, + keep_fnames: false, output: { ecma: 5, comments: false, @@ -134,15 +135,10 @@ module.exports = ({ // We placed these paths second because we want `node_modules` to "win" // if there are any conflicts. This matches Node resolution mechanism. // https://github.com/facebook/create-react-app/issues/253 - modules: ["node_modules", nodeModules, srcDir], + modules: ["node_modules", nodeModules, appSrc], extensions: [".js", ".ts", ".tsx", ".json", ".jsx"], alias: { - src: srcDir, - // Allows for better profiling with ReactDevTools - ...(enableProfiling && { - "react-dom$": "react-dom/profiling", - "scheduler/tracing": "scheduler/tracing-profiling", - }), + src: appSrc, }, }, module: { @@ -163,7 +159,7 @@ module.exports = ({ rules.scripts({ plugins: [], compact: true, - include: srcDir, + include: appSrc, cacheDirectory, }), rules.outsideScripts({ @@ -193,7 +189,7 @@ module.exports = ({ sourceMap: shouldUseSourceMap, nodeModules, configFile: tsConfig, - tsBuildInfoFile, + tsBuildInfoFile: path.join(cacheDirectory, "tsconfig.tsbuildinfo"), tsConfigPathsContext, }), ], diff --git a/packages/app/.bin/build/webpack.js b/packages/app/.bin/build/webpack.js index 6bba775f..037518cf 100644 --- a/packages/app/.bin/build/webpack.js +++ b/packages/app/.bin/build/webpack.js @@ -1,32 +1,25 @@ -if (process.argv.length !== 11) { - console.log(process.argv.length); +if (process.argv.length !== 8) { + console.log(process.argv); console.error( `Usage: ${process.argv[0]} ${process.argv[1]}` - + " " - + " ", + + " ", ); process.exit(1); } -const appNodeModules = process.env.NODE_PATH; - -const appIndexJs = process.argv[2]; -const appSrc = process.argv[3]; -const appTsConfig = process.argv[4]; -const appTsConfigPathsContext = process.argv[5]; -const buildDir = process.argv[6]; -const outJs = process.argv[7]; -const outCss = process.argv[8]; -const outMedia = process.argv[9]; -const outMain = process.argv[10]; +const srcDir = process.argv[2]; +const outputDir = process.argv[3]; +const outJs = process.argv[4]; +const outCss = process.argv[5]; +const outMedia = process.argv[6]; +const outMain = process.argv[7]; // Do this as the first thing so that any code reading it knows the right env. process.env.BABEL_ENV = "production"; // It is absolutely essential that NODE_ENV is set to production during a // production build. Otherwise React will be compiled in the very slow // development mode. -const NODE_ENV = "production"; -process.env.NODE_ENV = NODE_ENV; +process.env.NODE_ENV = "production"; // Makes the script crash on unhandled rejections instead of silently // ignoring them. In the future, promise rejections that are not handled will @@ -42,22 +35,14 @@ const postcssSuffix = err => require("webpack")( require("./webpack.config")({ - buildDir, + srcDir, + outputDir, // webpack needs to know it to put the right