Merge pull request #2135 from input-output-hk/ensemble/2091/client-wasm-multiple-targets

Client wasm multiple targets

Author: Alenar

.github/workflows/actions/publish-npm-package/action.yml

@@ -74,17 +74,24 @@ runs:
 
     - name: Build package
       shell: bash
+      working-directory: ${{ inputs.package }}
+      env:
+        WASM_PACK_ARGS: --release --scope ${{ inputs.scope }}
       run: |
         echo "Build '@${{ inputs.scope }}/${{ inputs.package }}' package"
-        cp ./LICENSE ./mithril-client-wasm/
-        cp -f ./mithril-client-wasm/npm/README.md ./mithril-client-wasm/
-        wasm-pack build ${{ inputs.package }} --release --target web --out-dir ./pkg --scope ${{ inputs.scope }} --out-name index
+        make build
+
+    - name: Prepare publish
+      shell: bash
+      run: |
+        cp ./LICENSE ${{ inputs.package }}
+        cp -f ${{ inputs.package }}/npm/README.md ${{ inputs.package }}/
 
     - name: List package
       shell: bash
       run: |
         echo "List '@${{ inputs.scope }}/${{ inputs.package }}' package"
-        ls -al ${{ inputs.package }}/pkg
+        ls -al -R ${{ inputs.package }}/dist
 
     - name: Publish package new version
       if: steps.check_version.outputs.deploy_mode == 'publish'
@@ -99,7 +106,7 @@ runs:
         else
           npm whoami
         fi
-        cd ${{ inputs.package }}/pkg
+        cd ${{ inputs.package }}/
         if [ "${{ inputs.dry_run }}" == "false" ]; then
           dry_run_option=""
         else
@@ -116,6 +123,6 @@ runs:
         echo "Publish '@${{ inputs.scope }}/${{ inputs.package }}' package"
         npm set "//registry.npmjs.org/:_authToken=${NPM_TOKEN}"
         npm whoami
-        cd ${{ inputs.package }}/pkg
+        cd ${{ inputs.package }}/
         npm dist-tag add @${{ inputs.scope }}/${{ inputs.package }}@${{ steps.check_version.outputs.package_version }} latest
         npm dist-tag rm @${{ inputs.scope }}/${{ inputs.package }}@${{ steps.check_version.outputs.package_version }} next

.github/workflows/ci.yml

@@ -125,15 +125,17 @@ jobs:
 
       - name: Build 'mithril-client-wasm' library
         shell: bash
-        run: |
-          cp LICENSE ./mithril-client-wasm/
-          wasm-pack build mithril-client-wasm --release --target web --out-dir ./pkg --scope mithril-dev --out-name index
+        working-directory: mithril-client-wasm
+        env:
+          WASM_PACK_ARGS: --release --scope mithril-dev
+        run: make build
 
       - name: Prepare 'mithril-client-wasm' package
         shell: bash
+        working-directory: mithril-client-wasm
         run: |
-          cp LICENSE ./mithril-client-wasm/
-          wasm-pack pack mithril-client-wasm/pkg
+          cp LICENSE ./mithril-client-wasm/ && cp npm/README.md .
+          npm pack
 
       - name: Build a fake aggregator
         shell: bash
@@ -163,7 +165,7 @@ jobs:
         with:
           name: mithril-distribution-wasm
           path: |
-            mithril-client-wasm/**/*-mithril-client-wasm-*.tgz
+            mithril-client-wasm/*-mithril-client-wasm-*.tgz
           if-no-files-found: error
   test:
     strategy:
@@ -832,7 +834,7 @@ jobs:
 
       - name: Unpack 'mithril-client-wasm' package
         working-directory: mithril-client-wasm
-        run: tar -xvzf pkg/*.tgz -C pkg/ && mv pkg/package/* pkg/
+        run: tar -xvzf *.tgz && mv package/dist .
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/test-client.yml

@@ -296,23 +296,23 @@ jobs:
 
       - name: Unpack 'mithril-client-wasm' package
         working-directory: mithril-client-wasm
-        run: tar -xvzf pkg/*.tgz -C pkg/ && mv pkg/package/* pkg/
+        run: tar -xvzf *.tgz && mv package/dist .
 
       - name: Install dependencies
         working-directory: mithril-client-wasm
-        run: make www-test-install
+        run: make ci-test-install
 
       - name: Create .env file
         working-directory: mithril-client-wasm
         run: |
-          echo "AGGREGATOR_ENDPOINT=${{ inputs.aggregator_endpoint }}" > ./www-test/.env
-          echo "GENESIS_VERIFICATION_KEY=$(curl -s ${{ inputs.genesis_verification_key }})" >> ./www-test/.env
-          echo "TRANSACTIONS_HASHES_TO_CERTIFY=${{ inputs.transactions_hashes_to_certify }}" >> ./www-test/.env
+          echo "AGGREGATOR_ENDPOINT=${{ inputs.aggregator_endpoint }}" > ./ci-test/.env
+          echo "GENESIS_VERIFICATION_KEY=$(curl -s ${{ inputs.genesis_verification_key }})" >> ./ci-test/.env
+          echo "TRANSACTIONS_HASHES_TO_CERTIFY=${{ inputs.transactions_hashes_to_certify }}" >> ./ci-test/.env
 
       - name: Start the server
         working-directory: mithril-client-wasm
         shell: bash
-        run: make www-test-serve &
+        run: make ci-test-serve &
 
       - name: Wait for the server to be ready
         shell: bash

.prettierignore

@@ -1,7 +1,6 @@
 demo/protocol-demo/artifacts/
 docs/website/.docusaurus/
 docs/website/build/
-mithril-client-wasm/pkg/
 mithril-explorer/font.css.hbs
 mithril-explorer/out/
 mithril-explorer/.next/
@@ -12,3 +11,5 @@ mithril-test-lab/mithril-end-to-end/monitor/config/grafana/provisioning/dashboar
 mithril-test-lab/mithril-aggregator-fake/default_data/
 mithril-test-lab/mithril-devnet/configuration/
 flake.lock
+**/dist/
+**/pkg/

CHANGELOG.md

@@ -15,6 +15,8 @@ As a minor extension, we have adopted a slightly different versioning convention
 
 - Deprecate the `network` field in all messages that contain a `CardanoDbBeacon` field.
 
+- Add Node.js and bundler targets to the Mithril client WASM library.
+
 - **BREAKING** Remove the `network` field from the internal `CardanoDbBeacon` struct, Certificates of types `CardanoImmutableFilesFull`
   must have their hashes recomputed in order to stay valid (procedure detailed in the [`recompute-certificates-hash`](./docs/runbook/recompute-certificates-hash) runbook).
 

Cargo.lock

@@ -84,32 +84,61 @@ chore: upgrade doc dependencies
 By running 'make upgrade' command.
 ```
 
-### Upgrade `www/` and `www-test/` dependencies
+### Upgrade client wasm `ci-test/` dependencies
 
 From the root of the repository, run:
 
-[!IMPORTANT]: This command must be run before upgrading `mithril-explorer`.
+Upgrade the `ci-test` dependencies by running:
 
 ```bash
-cd mithril-client-wasm
-make upgrade-www-deps
+make -C mithril-client-wasm upgrade-ci-test-deps
+```
+
+Create a dedicated commit, e.g.:
+
+```bash
+chore: upgrade mithril client wasm 'ci-test' dependencies
+
+By running 'make upgrade-ci-test-deps' command.
+```
+
+### Upgrade client wasm examples dependencies
+
+From the root of the repository, run:
+
+[!IMPORTANT]: This command must be run before upgrading client wasm examples.
+
+```bash
+make -C mithril-client-wasm build
+```
+
+Upgrade the examples dependencies by running:
+
+```bash
+make -C examples/client-wasm-nodejs upgrade
+make -C examples/client-wasm-web upgrade
 ```
 
 Create a dedicated commit, e.g.:
 
 ```bash
-chore: upgrade mithril client wasm 'www' and 'www-test' dependencies
+chore: upgrade mithril client wasm examples dependencies
 
-By running 'make upgrade-www-deps' command.
+By running 'make upgrade' command in 'examples/client-wasm-nodejs' and 'examples/client-wasm-web'.
 ```
 
 ### Upgrade the explorer dependencies
 
+[!IMPORTANT]: This command must be run before upgrading `mithril-explorer`.
+
+```bash
+make -C mithril-client-wasm build
+```
+
 From the root of the repository, run:
 
 ```bash
-cd mithril-explorer
-make upgrade
+make -C mithril-explorer upgrade
 ```
 
 Create a dedicated commit, e.g.:

docs/devbook/upgrade-repository-dependencies/README.md

@@ -23,26 +23,26 @@ cargo set-version --bump patch
 git commit -am "chore: bump crates versions"
 
 # Build mithril-client wasm (to have latest version used in the explorer)
-pushd mithril-client-wasm || exit
-make build
-popd || exit
+make -C mithril-client-wasm build
 
 # Upgrade the documentation website dependencies
-pushd docs/website || exit
-make upgrade
-popd || exit
+make -C docs/website upgrade
 git commit -am "chore: upgrade doc dependencies
 
 By running 'make upgrade' command."
 
-# Upgrade www/ and www-test/ dependencies
-pushd mithril-client-wasm || exit
-make upgrade-www-deps
-popd || exit
+# Upgrade ci-test/ dependencies
+make -C mithril-client-wasm upgrade-ci-test-deps
+git commit -am "chore: upgrade mithril client wasm 'ci-test' dependencies
+
+By running 'make upgrade-ci-test-deps' command."
 
-git commit -am "chore: upgrade mithril client wasm 'www' and 'www-test' dependencies
+# Upgrade client wasm examples dependencies
+make -C examples/client-wasm-nodejs upgrade
+make -C examples/client-wasm-web upgrade
+git commit -am "chore: upgrade mithril client wasm examples dependencies
 
-By running 'make upgrade-www-deps' command."
+By running 'make upgrade' command in 'examples/client-wasm-nodejs' and 'examples/client-wasm-web'."
 
 # Upgrade the explorer dependencies
 pushd mithril-explorer || exit
@@ -55,25 +55,19 @@ By running 'make upgrade' command."
 # Bump Javascript packages versions
 
 # Search all package.json files and bump the version
-# and exclude `package.json` in `node_modules` folder
-for package_json_file in $(find . -name package.json | grep -v "/node_modules/" | grep -v "/pkg/"); do
+# and exclude `package.json` in auto-generated folders
+for package_json_file in $(find . -name package.json | grep -v "/node_modules/" | grep -v "/pkg/" | grep -v "/dist/"); do
     folder="$(dirname $package_json_file)"
     pushd "$folder" || exit
     npm version patch
     popd || exit
 done
 
-pushd mithril-client-wasm || exit
-make www-install www-test-install
-popd || exit
-
-pushd mithril-explorer || exit
-make install
-popd || exit
-
-pushd docs/website || exit
-make install
-popd || exit
+make -C mithril-client-wasm ci-test-install
+make -C examples/client-wasm-nodejs ci-test-install
+make -C examples/client-wasm-web ci-test-install
+make -C mithril-explorer install
+make -C docs/website install
 
 git commit -am "chore: bump javascript packages versions
 

docs/devbook/upgrade-repository-dependencies/upgrade_dependencies.sh

@@ -0,0 +1 @@
+node_modules

examples/client-wasm-nodejs/.gitignore

@@ -0,0 +1,21 @@
+.PHONY: clean install upgrade
+
+package-lock.json:
+	npm install
+
+install: package-lock.json
+
+clean:
+	rm -rf build
+	rm package-lock.json || true
+
+upgrade: clean install
+	npm install \
+		prettier@latest \
+
+
+lint:
+	npm run pretty:check
+
+format:
+	npm run pretty:write