ci: build web on ci

Author: satya164

.github/workflows/build-templates.yml

@@ -86,7 +86,8 @@ jobs:
             --repo-url https://test.test
             --type ${{ matrix.type.name }}
             --languages ${{ matrix.type.language }}
-            --example ${{ matrix.type.language == 'js' && 'expo' || 'vanilla' }}
+            --example vanilla
+            --tools vite
             --tools eslint
             --tools jest
             --tools lefthook
@@ -138,7 +139,11 @@ jobs:
           tgz=$(ls react-native-builder-bob-*.tgz)
           cd -
           cd ${{ env.work_dir }}
-          YARN_CHECKSUM_BEHAVIOR=ignore yarn add --dev ../packages/react-native-builder-bob/$tgz
+
+          export YARN_CHECKSUM_BEHAVIOR=ignore
+
+          yarn add --dev ../packages/react-native-builder-bob/$tgz
+          yarn --cwd example add --dev ../../packages/react-native-builder-bob/$tgz
 
       - name: Get build target
         working-directory: ${{ env.work_dir }}
@@ -209,17 +214,6 @@ jobs:
         run: |
           yarn prepare
 
-      - name: Build example (Web)
-        if: matrix.type.language == 'js'
-        working-directory: ${{ env.work_dir }}
-        shell: bash
-        run: |
-          # Clean up built JS files
-          # So we test that bundling works without any pre-built files
-          rm -rf lib/*
-
-          yarn example expo export --platform web
-
       - name: Install JDK
         if: env.android_build == 1 && env.turbo_cache_hit_android != 1
         uses: actions/setup-java@c5195efecf7bdfc987ee8bae7a71cb8b11521c00 # v4.7.1
@@ -271,3 +265,13 @@ jobs:
         working-directory: ${{ env.work_dir }}
         run: |
           yarn turbo run build:ios --cache-dir=".turbo"
+
+      - name: Build example (Web)
+        working-directory: ${{ env.work_dir }}
+        shell: bash
+        run: |
+          # Clean up built JS files
+          # So we test that bundling works without any pre-built files
+          rm -rf lib/*
+
+          yarn example build:web

packages/create-react-native-library/templates/common/$.github/workflows/ci.yml

@@ -194,6 +194,7 @@ jobs:
         run: |
           yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}"
 <% } -%>
+
 <% if (example === 'expo' || tools.includes('vite')) { -%>
   build-web:
     runs-on: ubuntu-latest

packages/create-react-native-library/templates/js-view/src/{%- project.name %}View.tsx

@@ -4,10 +4,6 @@ type Props = ViewProps & {
   color?: ColorValue;
 };
 
-export function <%- project.name -%>View({
-  color,
-  style,
-  ...rest
-}: Props) {
+export function <%- project.name -%>View({ color, style, ...rest }: Props) {
   return <View {...rest} style={[style, { backgroundColor: color }]} />;
 }

packages/create-react-native-library/templates/tools/vite/example/vite.config.mjs

@@ -2,7 +2,7 @@ import { fileURLToPath } from 'node:url';
 
 import { defineConfig, mergeConfig } from 'vite';
 
-import bobConfig from 'react-native-builder-bob/vite-config.mjs';
+import bobConfig from 'react-native-builder-bob/vite-config';
 
 export default defineConfig((env) =>
   mergeConfig(bobConfig(env), {

packages/create-react-native-library/templates/tools/vite/~package.json

@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "web": "vite",
+    "build:web": "vite build"
+  },
+  "devDependencies": {
+    "react-native-web": "~0.21.1"
+  }
+}

…react-native-builder-bob/babel-config.js …tive-builder-bob/configs/babel-config.jspackages/react-native-builder-bob/babel-config.js renamed to packages/react-native-builder-bob/configs/babel-config.js packages/react-native-builder-bob/babel-config.js renamed to packages/react-native-builder-bob/configs/babel-config.js

@@ -2,7 +2,7 @@
 
 const path = require('path');
 // @ts-ignore -- Ignore missing types for this module
-const { loadConfig } = require('./lib/utils/loadConfig');
+const { loadConfig } = require('../lib/utils/loadConfig');
 
 /**
  * Get Babel configuration for the example project.

…react-native-builder-bob/babel-preset.js …tive-builder-bob/configs/babel-preset.jspackages/react-native-builder-bob/babel-preset.js renamed to packages/react-native-builder-bob/configs/babel-preset.js packages/react-native-builder-bob/babel-preset.js renamed to packages/react-native-builder-bob/configs/babel-preset.js

@@ -59,7 +59,7 @@ module.exports = function (api, options, cwd) {
       ],
       require.resolve('@babel/plugin-transform-flow-strip-types'),
       [
-        require.resolve('./lib/babel'),
+        require.resolve('../lib/babel'),
         {
           extension: rewriteImportExtensions ? 'js' : undefined,
         },

…react-native-builder-bob/metro-config.js …tive-builder-bob/configs/metro-config.jspackages/react-native-builder-bob/metro-config.js renamed to packages/react-native-builder-bob/configs/metro-config.js packages/react-native-builder-bob/metro-config.js renamed to packages/react-native-builder-bob/configs/metro-config.js

@@ -36,22 +36,19 @@ const jsx = (regex) => ({
 });
 
 export default defineConfig(({ mode }) => ({
-  plugins: [
-    jsx(/\/(@expo|expo-.+)\//),
-    commonjs(),
-    react(),
-  ],
+  plugins: [jsx(/\/(@expo|expo-.+)\//), commonjs(), react()],
   define: {
-    '__DEV__': JSON.stringify(mode !== 'production'),
+    __DEV__: JSON.stringify(mode !== 'production'),
     'process.env.EXPO_OS': JSON.stringify('web'),
-    'global': 'globalThis',
+    global: 'globalThis',
   },
   resolve: {
     extensions,
     conditions: ['source', 'module', 'browser', mode],
     alias: {
       'react-native': 'react-native-web',
     },
+    dedupe: ['react', 'react-dom', 'react-native-web'],
   },
   optimizeDeps: {
     esbuildOptions: {

…react-native-builder-bob/vite-config.mjs …tive-builder-bob/configs/vite-config.mjspackages/react-native-builder-bob/vite-config.mjs renamed to packages/react-native-builder-bob/configs/vite-config.mjs packages/react-native-builder-bob/vite-config.mjs renamed to packages/react-native-builder-bob/configs/vite-config.mjs

@@ -18,16 +18,20 @@
   },
   "homepage": "https://oss.callstack.com/react-native-builder-bob/build",
   "main": "lib/index.js",
+  "exports": {
+     "./package.json": "./package.json",
+     "./babel-config": "./configs/babel-config.js",
+     "./babel-preset": "./configs/babel-preset.js",
+     "./metro-config": "./configs/metro-config.js",
+     "./vite-config": "./configs/vite-config.mjs"
+  },
   "bin": {
     "bob": "bin/bob"
   },
   "files": [
     "bin",
     "lib",
-    "babel-preset.js",
-    "metro-config.js",
-    "babel-config.js",
-    "vite-config.mjs"
+    "configs"
   ],
   "engines": {
     "node": "^20.19.0 || ^22.12.0 || >= 23.4.0"