Add package-bundlers job to CI workflow for testing library with multiple bundlers

Author: flexsurfer

.github/workflows/ci.yml

@@ -154,3 +154,118 @@ jobs:
           cd examples/todomvc
           npm ci
           npm run build
+
+  package-bundlers:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        bundler: [vite, webpack, rollup, esbuild]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build library
+        run: npm run build
+
+      - name: Pack library
+        run: npm pack --filename reflex.tgz
+
+      - name: Test with ${{ matrix.bundler }}
+        run: |
+          # Create test directory
+          mkdir -p bundler-test
+          cd bundler-test
+
+          # Initialize consumer project
+          npm init -y
+
+          # Install peer dependencies
+          npm install react@18 react-dom@18
+
+          # Install the packed library
+          npm install ../reflex.tgz
+
+          # Create entry file that imports from the library
+          cat > index.js << 'EOF'
+          import { initAppDb } from "@flexsurfer/reflex";
+          console.log("Successfully imported initAppDb:", typeof initAppDb);
+          console.log("Library bundled successfully!");
+          EOF
+
+          # Configure bundler-specific setup and build
+          case "${{ matrix.bundler }}" in
+            vite)
+              npm install --save-dev vite
+              cat > vite.config.js << 'EOF'
+              export default {
+                build: {
+                  lib: {
+                    entry: 'index.js',
+                    formats: ['es'],
+                    fileName: 'bundle'
+                  }
+                }
+              }
+              EOF
+              npx vite build
+              ;;
+
+            webpack)
+              npm install --save-dev webpack webpack-cli
+              cat > webpack.config.js << 'EOF'
+              const path = require('path');
+              module.exports = {
+                entry: './index.js',
+                output: {
+                  filename: 'bundle.js',
+                  path: path.resolve(__dirname, 'dist'),
+                  library: { type: 'commonjs2' }
+                },
+                mode: 'production',
+                resolve: {
+                  extensions: ['.js']
+                }
+              };
+              EOF
+              npx webpack --mode=production
+              # Test execution of bundled output
+              node dist/bundle.js
+              ;;
+
+            rollup)
+              npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs
+              cat > rollup.config.js << 'EOF'
+              import { nodeResolve } from '@rollup/plugin-node-resolve';
+              import commonjs from '@rollup/plugin-commonjs';
+
+              export default {
+                input: 'index.js',
+                output: {
+                  file: 'dist/bundle.js',
+                  format: 'cjs'
+                },
+                plugins: [nodeResolve(), commonjs()]
+              };
+              EOF
+              npx rollup -c
+              # Test execution of bundled output
+              node dist/bundle.js
+              ;;
+
+            esbuild)
+              npm install --save-dev esbuild
+              npx esbuild index.js --bundle --outfile=dist/bundle.js --format=cjs --platform=node
+              # Test execution of bundled output
+              node dist/bundle.js
+              ;;
+          esac