[mercury] The Mercury implementation is divided into the @genexus/mercury-build and @genexus/mercury-cli packages. Additionally, the @genexus/vite-plugin-mercury package has been added to facilitate configuration in Vite-based environments (#646)

* Set bundle mappings in the window

This will help us to avoid issues when the Mercury dependency is duplicated. Also, this help us to set this mapping inline in the HTML.

* Add an utility to calculate the gzip size of files that are downloaded to the browser

* Improve how the bundle sizes are printed to the output

* Add the `viteMercury` plugin for Vite environments

This plugin replaces the need for using the CLI in Vite environments.

* Add tests for validating the bundle size

* Add tests for validating the gzipped size

* Add support to inline css bundles in the html head

* Improve path normalization

* Add support to preload CSS bundles

Also, inline the base/base bundle by default and preload the base/icons bundle by default.

* Add support to specify the fetch priority

Also, fix default values for mercuryOptions

* Add comment for an upcoming feature (lightningcss)

* Inline the "resets/box-sizing" css bundle by default

* Split the Mercury DS implementation into the mercury-build, mercury-cli and vite-mercury-plugin packages

Now, @genexus/mercury only contains the core of Mercury, and we have packages for bulding Mercury, using it through out a CLI, and a plugin to work with Vite.

Breaking changes:
 - The default path for the fonts is now "/assets/fonts/" instead of "./assets/fonts/"

 - The default path for the icons is now "/assets/icons/" instead of "./assets/icons/"

* Add support to build the Mercury CSS bundles

* Fix Mercury build

* More fixes for the Mercury build

* Update eslint.config.js

* Remove comments

* Copy assets when building the css

We are no longer splitting the scss build with the assets copy, so we can centralize the Mercury build process

* Improve build output style

* Improve script names

* Fixes for building the dist for Mercury

* Update validate-args.ts

* Remove bulding scripts for the showcase in the Mercury package

* Move assets file to the src folder

* Update tsconfig.json

* New dev server for the showcase

* Add missing commits

* Fix wrong placeholder values

* Add missing commit

* Refresh the showcase when rebuilding Mercury

* Improve main readme for local development

* Avoid memory leaks when the build crashes

* Fix dev server not working properly

* Build Mercury for usage

* Remove no longer required code for the mercury-cli package

* Properly build mercury for the distribution of the showcase

* Remove --outDir argument

Now, all the generated CSS files are located in the "node_modules/.genexus/mercury/assets/css" folder

* Copy the fonts and icons when building Mercury for usage

* Move Mercury plugins to the mercury-plugins folder

* Use TS GO for faster dev builds

* Force "hoisted" installs by adding bunfig.toml file

* Complete the implementation for vite-mercury-plugin

* Fix conflicts between NodeJS' threads and Vite's build process

* Don't clear fonts and icons folders to let multiple plugins add assets in those destinations

* Improvements for the React installation docs

* Add readme for the @genexus/mercury-build package

* Improve package.json description

* Fix ESM only export not working for require

* Delete unused script

* Use bun for running build-scss-and-copy-assets script and delete unused script

* Fix showcase dev server

* Fix tests not working in common package

* More fixes for running tests in the common package

* Rename "vite-mercury-plugin" to "vite-plugin-mercury"

* Try to fix workflows

* Fix missing "bun" runner in workflows

* Try to fix workflow

* Try to fix workflows again

* Comment out workflow to test ci

* Comment out workflow step

* Update install-and-deploy.yml

* Fix tests

* Fix code scanning result issue

* Remove unused "start.watch" script

* Fix typo in react docs

* Use TS and bun for all scripts

* Update NextJS installation guide

* Update installation-for-react.md

* Move the bundle-to-hash-mapping.ts file to the "node_modules/.genexus/mercury/" folder

* Improve all installation readmes

* Improve/add readmes for the new packages

* Fix image path

* More improvements for readmes

* Fix typo

* Add workflows for the new packages

* Remove "mercury" binnary from the mercury core

* Update bun.lock

* Improve the visualization of the bundle size table

Author: ncamera

.github/workflows/install-and-deploy.yml

@@ -62,7 +62,7 @@ jobs:
         uses: actions/cache@2f8e54208210a422b2efd51efaa6bd6d7ca8920f
         with:
           path: ~/.bun/install/cache
-          key: ${{ runner.os }}-bun-${{ hashFiles('''**/bun.lockb''') }}
+          key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lockb') }}
           restore-keys: |
             ${{ runner.os }}-bun-
 
@@ -76,6 +76,26 @@ jobs:
       #   if: ${{ inputs.common-tests == true }}
       #   run: bun test.common.ci
 
+      # We need to pre-build Mercury, because the mercury-build package needs it.
+      # TODO: We should eliminate this "cycle dependency" in the future.
+      - name: Prebuild Mercury
+        run: bun build.js
+        working-directory: "packages/mercury"
+
+      # Test if the @genexus/mercury-build, @genexus/mercury-cli, and @genexus/vite-plugin-mercury packages are built correctly.
+      - name: Build genexus/mercury-build
+        run: bun dev
+        working-directory: "packages/mercury-build"
+
+      - name: Build genexus/mercury-cli
+        run: bun dev
+        working-directory: "packages/mercury-cli"
+
+      - name: Build genexus/vite-plugin-mercury
+        run: bun dev
+        working-directory: "packages/mercury-plugins/vite-plugin-mercury"
+
+      # The validate.ci for Mercury needs to be run after building the three packages above.
       - name: Run tests
         run: bun validate.ci
         working-directory: ${{ inputs.package }}

.github/workflows/node.js.yml

@@ -27,6 +27,24 @@ jobs:
       publish: false
       package: "packages/mercury"
 
+  mercury-build:
+    uses: ./.github/workflows/install-and-deploy.yml
+    with:
+      node-version: "22.x"
+      cache: true
+      common-tests: false
+      publish: false
+      package: "packages/mercury-build"
+
+  mercury-cli:
+    uses: ./.github/workflows/install-and-deploy.yml
+    with:
+      node-version: "22.x"
+      cache: true
+      common-tests: false
+      publish: false
+      package: "packages/mercury-cli"
+
   svg-sass-generator:
     uses: ./.github/workflows/install-and-deploy.yml
     with:
@@ -35,3 +53,13 @@ jobs:
       common-tests: false
       publish: false
       package: "packages/svg-sass-generator"
+
+  vite-plugin-mercury:
+    uses: ./.github/workflows/install-and-deploy.yml
+    with:
+      node-version: "22.x"
+      cache: true
+      common-tests: false
+      publish: false
+      package: "packages/mercury-plugins/vite-plugin-mercury"
+

.github/workflows/npmpublish.yml

@@ -11,7 +11,10 @@ jobs:
     outputs:
       unanimo-changed: ${{ steps.check-unanimo.outputs.version-changed }}
       mercury-changed: ${{ steps.check-mercury.outputs.version-changed }}
+      mercury-build-changed: ${{ steps.check-mercury-build.outputs.version-changed }}
+      mercury-cli-changed: ${{ steps.check-mercury-cli.outputs.version-changed }}
       svg-sass-generator-changed: ${{ steps.check-svg-sass-generator.outputs.version-changed }}
+      vite-plugin-mercury-changed: ${{ steps.check-vite-plugin-mercury.outputs.version-changed }}
     steps:
       # Pinning to a specific commit hash for security reasons.
       # This hash corresponds to version 4.3.0 of the actions/checkout action.
@@ -34,18 +37,42 @@ jobs:
           LATEST_MERCURY_VERSION=$(curl -s https://registry.npmjs.org/$PACKAGE_NAME | jq -r '.["dist-tags"].latest')
           echo "latest_mercury_version=$LATEST_MERCURY_VERSION" >> $GITHUB_ENV
 
+      - name: Get the latest mercury-build version
+        id: get-latest-mercury-build-version
+        run: |
+          PACKAGE_NAME=@genexus/mercury-build
+          LATEST_MERCURY_BUILD_VERSION=$(curl -s https://registry.npmjs.org/$PACKAGE_NAME | jq -r '.["dist-tags"].latest')
+          echo "latest_mercury_build_version=$LATEST_MERCURY_BUILD_VERSION" >> $GITHUB_ENV
+
+      - name: Get the latest mercury-cli version
+        id: get-latest-mercury-cli-version
+        run: |
+          PACKAGE_NAME=@genexus/mercury-cli
+          LATEST_MERCURY_CLI_VERSION=$(curl -s https://registry.npmjs.org/$PACKAGE_NAME | jq -r '.["dist-tags"].latest')
+          echo "latest_mercury_cli_version=$LATEST_MERCURY_CLI_VERSION" >> $GITHUB_ENV
+
       - name: Get the latest SVG_Generator version
         id: get-latest-svg_generator-version
         run: |
           PACKAGE_NAME=@genexus/svg-sass-generator
           LATEST_SVG_GENERATOR_VERSION=$(curl -s https://registry.npmjs.org/$PACKAGE_NAME | jq -r '.["dist-tags"].latest')
           echo "latest_svg_generator_version=$LATEST_SVG_GENERATOR_VERSION" >> $GITHUB_ENV
 
+      - name: Get the latest vite-plugin-mercury version
+        id: get-latest-vite-plugin-mercury-version
+        run: |
+          PACKAGE_NAME=@genexus/vite-plugin-mercury
+          LATEST_VITE_PLUGIN_MERCURY_VERSION=$(curl -s https://registry.npmjs.org/$PACKAGE_NAME | jq -r '.["dist-tags"].latest')
+          echo "latest_vite_plugin_mercury_version=$LATEST_VITE_PLUGIN_MERCURY_VERSION" >> $GITHUB_ENV
+
       - name: Print last published versions
         run: |
           echo "The latest Unanimo version is ${{ env.latest_unanimo_version }}"
           echo "The latest Mercury version is ${{ env.latest_mercury_version }}"
+          echo "The latest mercury-build version is ${{ env.latest_mercury_build_version }}"
+          echo "The latest mercury-cli version is ${{ env.latest_mercury_cli_version }}"
           echo "The latest SVG Generator version is ${{ env.latest_svg_generator_version }}"
+          echo "The latest vite-plugin-mercury version is ${{ env.latest_vite_plugin_mercury_version }}"
 
       - name: Check if `unanimo` version changed
         id: check-unanimo
@@ -71,6 +98,30 @@ jobs:
             echo "version-changed=false" >> $GITHUB_OUTPUT
           fi
 
+      - name: Check if `mercury-build` version changed
+        id: check-mercury-build
+        run: |
+          CURRENT_VERSION=$(jq -r .version packages/mercury-build/package.json)
+          PREVIOUS_VERSION=${{ env.latest_mercury_build_version }}
+          if [ "$CURRENT_VERSION" != "$PREVIOUS_VERSION" ]; then
+            echo "Version changed!"
+            echo "version-changed=true" >> $GITHUB_OUTPUT
+          else
+            echo "version-changed=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Check if `mercury-cli` version changed
+        id: check-mercury-cli
+        run: |
+          CURRENT_VERSION=$(jq -r .version packages/mercury-cli/package.json)
+          PREVIOUS_VERSION=${{ env.latest_mercury_cli_version }}
+          if [ "$CURRENT_VERSION" != "$PREVIOUS_VERSION" ]; then
+            echo "Version changed!"
+            echo "version-changed=true" >> $GITHUB_OUTPUT
+          else
+            echo "version-changed=false" >> $GITHUB_OUTPUT
+          fi
+
       - name: Check if `svg-sass-generator` version changed
         id: check-svg-sass-generator
         run: |
@@ -83,6 +134,18 @@ jobs:
             echo "version-changed=false" >> $GITHUB_OUTPUT
           fi
 
+      - name: Check if `vite-plugin-mercury` version changed
+        id: check-vite-plugin-mercury
+        run: |
+          CURRENT_VERSION=$(jq -r .version packages/mercury-plugins/vite-plugin-mercury/package.json)
+          PREVIOUS_VERSION=${{ env.latest_vite_plugin_mercury_version }}
+          if [ "$CURRENT_VERSION" != "$PREVIOUS_VERSION" ]; then
+            echo "Version changed!"
+            echo "version-changed=true" >> $GITHUB_OUTPUT
+          else
+            echo "version-changed=false" >> $GITHUB_OUTPUT
+          fi
+
   publish-unanimo:
     needs: check-version
     if: needs.check-version.outputs.unanimo-changed == 'true'
@@ -107,6 +170,30 @@ jobs:
       package: "packages/mercury"
     secrets: inherit
 
+  publish-mercury-build:
+    needs: check-version
+    if: needs.check-version.outputs.mercury-build-changed == 'true'
+    uses: ./.github/workflows/install-and-deploy.yml
+    with:
+      node-version: "22.x"
+      cache: false
+      common-tests: false
+      publish: true
+      package: "packages/mercury-build"
+    secrets: inherit
+
+  publish-mercury-cli:
+    needs: check-version
+    if: needs.check-version.outputs.mercury-cli-changed == 'true'
+    uses: ./.github/workflows/install-and-deploy.yml
+    with:
+      node-version: "22.x"
+      cache: false
+      common-tests: false
+      publish: true
+      package: "packages/mercury-cli"
+    secrets: inherit
+
   publish-svg-sass-generator:
     needs: check-version
     if: needs.check-version.outputs.svg-sass-generator-changed == 'true'
@@ -118,3 +205,16 @@ jobs:
       publish: true
       package: "packages/svg-sass-generator"
     secrets: inherit
+
+  publish-vite-plugin-mercury:
+    needs: check-version
+    if: needs.check-version.outputs.vite-plugin-mercury-changed == 'true'
+    uses: ./.github/workflows/install-and-deploy.yml
+    with:
+      node-version: "22.x"
+      cache: false
+      common-tests: false
+      publish: true
+      package: "packages/mercury-plugins/vite-plugin-mercury"
+    secrets: inherit
+

README.md

@@ -24,16 +24,10 @@ To see the documentation and examples of how to use Mercury, visit the [showcase
   npm i bun -g
   ```
 
-- To start the showcase, run:
+- To start the showcase which automatically rebuilds Mercury, run:
 
   ```bash
-  bun start.watch
-  ```
-
-- To automatically build Mercury, run:
-
-  ```bash
-  bun build.mer.watch
+  bun start
   ```
 
 - To automatically build Unanimo, run: