fix: upgrade packages, add workflow for testing (#113)

* fix: improve upgrade script

* fix: broken examples

* fix: remove qwik and add concurrency

* fix: concurrency adjusted

* fix adding manual types to overcome pnpm catalog react resolution

* feat: proper scripts packages

* chore: partial ts migration

* chore: tests in ts

* fix: adjust optional version parameter to update

* fix: adjust test timeouts

* fix: test validations

* test: unifying tests

* test: adjusting last tests

* test: adjusting turbo and remaining test cases

* fix: build packages inputs and build test workflow

* fix: add setup action

* fix: linting

* fix: angular vite deps

* fix: adjusting windows execution and Nx version issues

* fix: adjusting dependencies

* fix: more dependency issues

* fix: deps

* fix: moooooar dep issues

* fix: final deps fixes

* fix: last deps issues

* fix: last cross-env missing

* fix: allow missing validation to pass by skipping

* fix: disable nx license

Author: ryok90

.github/actions/setup/action.yml

@@ -0,0 +1,38 @@
+name: Setup Node and PNPM
+description: Sets up Node.js and PNPM with caching
+
+inputs:
+  os:
+    required: true
+    description: 'Operating system'
+    default: ubuntu-latest
+  node-version:
+    required: true
+    description: 'Node.js version'
+    default: '24'
+
+runs:
+  using: 'composite'
+  steps:
+    - uses: pnpm/action-setup@v4
+      with:
+        version: 10
+        run_install: false
+    - uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: 'pnpm'
+        cache-dependency-path: '**/pnpm-lock.yaml'
+        registry-url: 'https://registry.npmjs.org'
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+    - uses: actions/cache@v4
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+    - run: pnpm install --prefer-offline
+      shell: bash

.github/workflows/build-deploy-test.yml

@@ -0,0 +1,98 @@
+name: Build, Deploy, and Test All Examples
+
+on:
+  workflow_dispatch:
+    inputs:
+      skip_cache:
+        description: "Skip build cache and force rebuild all packages"
+        required: false
+        default: true
+        type: boolean
+      plugin_version:
+        description: "Zephyr plugin version to upgrade to (default: next)"
+        required: false
+        default: "next"
+        type: string
+  repository_dispatch:
+    types: [build-deploy-test]
+
+env:
+  NODE_VERSION: "20"
+
+jobs:
+  build-deploy-test:
+    name: Build, Deploy, and Test All Examples
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: ./.github/actions/setup
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Upgrade Zephyr plugins
+        run: |
+          cd scripts
+          if [ -n "${{ github.event.inputs.plugin_version }}" ]; then
+            echo "Upgrading plugins to version: ${{ github.event.inputs.plugin_version }}"
+            pnpm upgrade-plugins --version=${{ github.event.inputs.plugin_version }}
+          elif [ -n "${{ github.event.client_payload.plugin_version }}" ]; then
+            echo "Upgrading plugins to version: ${{ github.event.client_payload.plugin_version }}"
+            pnpm upgrade-plugins --version=${{ github.event.client_payload.plugin_version }}
+          else
+            echo "Upgrading plugins to latest (next)"
+            pnpm upgrade-plugins
+          fi
+
+      - name: Install dependencies after upgrade
+        run: pnpm install --prefer-offline
+
+      - name: Build all examples
+        run: |
+          cd scripts
+          if [ "${{ github.event.inputs.skip_cache }}" == "true" ] || [ "${{ github.event.client_payload.skip_cache }}" == "true" ]; then
+            echo "Building with --skip-cache flag"
+            pnpm build-packages:force
+          else
+            echo "Building with cache enabled"
+            pnpm build-packages
+          fi
+        env:
+          NODE_ENV: production
+
+      - name: Wait for deployments to be ready
+        run: |
+          echo "Waiting 60 seconds for all deployments to propagate..."
+          sleep 60
+
+      - name: Install Playwright browsers
+        run: |
+          cd scripts
+          npx playwright install chromium
+
+      - name: Run deployment validation tests
+        run: |
+          cd scripts
+          pnpm test
+        env:
+          CI: true
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: test-results
+          path: |
+            scripts/test-results/
+            scripts/playwright-report/
+          retention-days: 7
+
+      - name: Upload build logs
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: build-logs
+          path: |
+            scripts/tmp/build/
+          retention-days: 3

.gitignore

@@ -23,3 +23,11 @@ dist
 */**/.__mf__temp
 
 .parcel-cache
+*.tsbuildinfo
+tmp
+
+# Playwright test results
+scripts/test-results/
+scripts/playwright-report/
+test-results/
+playwright-report/

README.md

@@ -22,8 +22,6 @@ Once you've forked this repository, you can clone it and follow the instructions
     A monorepo using Nx, Angular v15, and Webpack as the bundler.
 *   __[`parce-react`](./examples/parcel-react)__  
     A parcel and react application.
-*   __[`qwik-1.5`](./examples/qwik-1.5)__  
-    A Qwik v1.5 app using Vite as the bundler.
 *   __[`react-airbnb-clone`](./examples/react-airbnb-clone)__  
     An AirBnb clone using React, Module Federation and Rspack as the bundler.
 *   __[`react-rollup-ts`](./examples/react-rollup-ts)__  
@@ -85,7 +83,6 @@ For more information on using Zephyr Cloud, visit the [official documentation][d
 :white_check_mark: `create-nx-rspack-workspace-mf`  
 :white_check_mark: `create-nx-workspace-mf`  
 :white_check_mark: `nx-ng`  
-:x: `qwik-1.5` - rework plugin support   
 :white_check_mark: `react-airbnb-clone`  
 :white_check_mark: `react-rollup-ts`  
 :white_check_mark: `react-rspack-tractor-2.0`  

examples/angular-vite/package.json

@@ -26,6 +26,6 @@
     "@angular/build": "catalog:angular19",
     "@angular/compiler-cli": "catalog:angular19",
     "typescript": "catalog:typescript",
-    "vite": "catalog:vite5"
+    "vite": "catalog:vite6"
   }
 }

examples/basehref-examples/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "basehref-examples",
+  "version": "1.0.0",
+  "description": "Examples demonstrating base href configuration with different bundlers",
+  "private": true,
+  "scripts": {
+    "build": "pnpm --filter basehref-rspack-app build && pnpm --filter basehref-vite-app build && pnpm --filter basehref-webpack-app build",
+    "build:rspack": "pnpm --filter basehref-rspack-app build",
+    "build:vite": "pnpm --filter basehref-vite-app build", 
+    "build:webpack": "pnpm --filter basehref-webpack-app build",
+    "build:base": "pnpm --filter basehref-rspack-app build:base && pnpm --filter basehref-vite-app build:base && pnpm --filter basehref-webpack-app build:base",
+    "build:base:rspack": "pnpm --filter basehref-rspack-app build:base",
+    "build:base:vite": "pnpm --filter basehref-vite-app build:base",
+    "build:base:webpack": "pnpm --filter basehref-webpack-app build:base"
+  },
+  "keywords": [
+    "basehref",
+    "rspack", 
+    "vite",
+    "webpack",
+    "react",
+    "zephyr"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zephyrcloud/zephyr-examples",
+    "directory": "examples/basehref-examples"
+  }
+}

examples/basehref-examples/rspack-app/package.json

@@ -14,8 +14,8 @@
     "zephyr-rspack-plugin": "catalog:zephyr"
   },
   "devDependencies": {
-    "@rspack/cli": "catalog:rspack",
-    "@rspack/core": "catalog:rspack",
+    "@rspack/cli": "1.5.5",
+    "@rspack/core": "1.5.5",
     "@rspack/plugin-react-refresh": "catalog:rspack",
     "@types/react": "catalog:react19",
     "@types/react-dom": "catalog:react19",

examples/basehref-examples/rspack-app/rspack.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from "@rspack/cli";
+import type { Configuration } from "@rspack/cli";
 import { rspack } from "@rspack/core";
 import * as RefreshPlugin from "@rspack/plugin-react-refresh";
 import { withZephyr } from "zephyr-rspack-plugin";
@@ -9,67 +9,67 @@ const publicPath = process.env.PUBLIC_PATH || "/";
 
 const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
 
-export default withZephyr()(
-  defineConfig({
-    output: {
-      publicPath,
-    },
-    context: __dirname,
-    entry: {
-      main: "./src/main.tsx",
-    },
-    resolve: {
-      extensions: ["...", ".ts", ".tsx", ".jsx"],
-    },
-    module: {
-      rules: [
-        {
-          test: /\.svg$/,
-          type: "asset",
-        },
-        {
-          test: /\.(jsx?|tsx?)$/,
-          use: [
-            {
-              loader: "builtin:swc-loader",
-              options: {
-                jsc: {
-                  parser: {
-                    syntax: "typescript",
-                    tsx: true,
-                  },
-                  transform: {
-                    react: {
-                      runtime: "automatic",
-                      development: isDev,
-                      refresh: isDev,
-                    },
+const config: Configuration = {
+  output: {
+    publicPath,
+  },
+  context: __dirname,
+  entry: {
+    main: "./src/main.tsx",
+  },
+  resolve: {
+    extensions: ["...", ".ts", ".tsx", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        type: "asset",
+      },
+      {
+        test: /\.(jsx?|tsx?)$/,
+        use: [
+          {
+            loader: "builtin:swc-loader",
+            options: {
+              jsc: {
+                parser: {
+                  syntax: "typescript",
+                  tsx: true,
+                },
+                transform: {
+                  react: {
+                    runtime: "automatic",
+                    development: isDev,
+                    refresh: isDev,
                   },
                 },
-                env: { targets },
               },
+              env: { targets },
             },
-          ],
-        },
-      ],
-    },
-    plugins: [
-      new rspack.HtmlRspackPlugin({
-        template: "./index.html",
-        publicPath,
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: "./index.html",
+      publicPath,
+    }),
+    isDev ? new RefreshPlugin() : null,
+  ].filter(Boolean),
+  optimization: {
+    minimizer: [
+      new rspack.SwcJsMinimizerRspackPlugin(),
+      new rspack.LightningCssMinimizerRspackPlugin({
+        minimizerOptions: { targets },
       }),
-      isDev ? new RefreshPlugin() : null,
-    ].filter(Boolean),
-    optimization: {
-      minimizer: [
-        new rspack.SwcJsMinimizerRspackPlugin(),
-        new rspack.LightningCssMinimizerRspackPlugin({
-          minimizerOptions: { targets },
-        }),
-      ],
-    },
-    experiments: {
-      css: true,
-    },
-  })
-);
+    ],
+  },
+  experiments: {
+    css: true,
+  },
+};
+
+export default withZephyr()(config);

examples/basehref-examples/webpack-app/webpack.config.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { withZephyr } = require('zephyr-webpack-plugin');
 

examples/create-nx-rspack-workspace-mf/README.md

@@ -22,8 +22,8 @@ A comprehensive Nx workspace demonstrating Module Federation architecture with R
 This Nx workspace consists of three federated applications:
 
 - **`host/`** - Host application that orchestrates the micro-frontends
-- **`remote1/`** - Remote application exposing shared components
-- **`remote2/`** - Another remote application with independent functionality
+- **`rspack_remote1/`** - Remote application exposing shared components
+- **`rspack_remote2/`** - Another remote application with independent functionality
 
 ## Getting Started
 
@@ -36,13 +36,13 @@ This Nx workspace consists of three federated applications:
 
    Start all applications concurrently:
    ```bash
-   npx nx run-many --target=serve --projects=remote1,remote2,host --parallel
+   npx nx run-many --target=serve --projects=rspack_remote1,rspack_remote2,host --parallel
    ```
 
    Or start individually:
    ```bash
-   npx nx serve remote1
-   npx nx serve remote2
+   npx nx serve rspack_remote1
+   npx nx serve rspack_remote2
    npx nx serve host
    ```
 
@@ -51,8 +51,8 @@ This Nx workspace consists of three federated applications:
    Because this is a Module Federation setup, remotes must be built before the host:
 
    ```bash
-   npx nx run remote1:build
-   npx nx run remote2:build
+   npx nx run rspack_remote1:build
+   npx nx run rspack_remote2:build
    npx nx run host:build
    ```