diff --git a/.github/workflows/build-templates.yml b/.github/workflows/build-templates.yml index acd248cd8..4e70f23ab 100644 --- a/.github/workflows/build-templates.yml +++ b/.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 diff --git a/packages/create-react-native-library/templates/common/$.github/workflows/ci.yml b/packages/create-react-native-library/templates/common/$.github/workflows/ci.yml index 5225a72d1..b6cf8b81c 100644 --- a/packages/create-react-native-library/templates/common/$.github/workflows/ci.yml +++ b/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 diff --git a/packages/create-react-native-library/templates/js-view/src/{%- project.name %}View.tsx b/packages/create-react-native-library/templates/js-view/src/{%- project.name %}View.tsx index 7ffb3bdb6..f5b2c76f3 100644 --- a/packages/create-react-native-library/templates/js-view/src/{%- project.name %}View.tsx +++ b/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 ; } diff --git a/packages/create-react-native-library/templates/tools/vite/example/vite.config.mjs b/packages/create-react-native-library/templates/tools/vite/example/vite.config.mjs index 6b568a4b3..4e413a11d 100644 --- a/packages/create-react-native-library/templates/tools/vite/example/vite.config.mjs +++ b/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), { diff --git a/packages/create-react-native-library/templates/tools/vite/~package.json b/packages/create-react-native-library/templates/tools/vite/~package.json new file mode 100644 index 000000000..02edd2eb2 --- /dev/null +++ b/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" + } +} diff --git a/packages/react-native-builder-bob/babel-config.js b/packages/react-native-builder-bob/configs/babel-config.js similarity index 96% rename from packages/react-native-builder-bob/babel-config.js rename to packages/react-native-builder-bob/configs/babel-config.js index a0ed89480..3832806b6 100644 --- a/packages/react-native-builder-bob/babel-config.js +++ b/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. diff --git a/packages/react-native-builder-bob/babel-preset.js b/packages/react-native-builder-bob/configs/babel-preset.js similarity index 98% rename from packages/react-native-builder-bob/babel-preset.js rename to packages/react-native-builder-bob/configs/babel-preset.js index ff834ae44..faa90e7e2 100644 --- a/packages/react-native-builder-bob/babel-preset.js +++ b/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, }, diff --git a/packages/react-native-builder-bob/metro-config.js b/packages/react-native-builder-bob/configs/metro-config.js similarity index 100% rename from packages/react-native-builder-bob/metro-config.js rename to packages/react-native-builder-bob/configs/metro-config.js diff --git a/packages/react-native-builder-bob/vite-config.mjs b/packages/react-native-builder-bob/configs/vite-config.mjs similarity index 84% rename from packages/react-native-builder-bob/vite-config.mjs rename to packages/react-native-builder-bob/configs/vite-config.mjs index 6f4d215b0..1db29b3c9 100644 --- a/packages/react-native-builder-bob/vite-config.mjs +++ b/packages/react-native-builder-bob/configs/vite-config.mjs @@ -36,15 +36,11 @@ 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, @@ -52,6 +48,7 @@ export default defineConfig(({ mode }) => ({ alias: { 'react-native': 'react-native-web', }, + dedupe: ['react', 'react-dom', 'react-native-web'], }, optimizeDeps: { esbuildOptions: { diff --git a/packages/react-native-builder-bob/package.json b/packages/react-native-builder-bob/package.json index f572f7c87..947274bd2 100644 --- a/packages/react-native-builder-bob/package.json +++ b/packages/react-native-builder-bob/package.json @@ -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" diff --git a/packages/react-native-builder-bob/src/utils/compile.ts b/packages/react-native-builder-bob/src/utils/compile.ts index ce247e784..dc6454872 100644 --- a/packages/react-native-builder-bob/src/utils/compile.ts +++ b/packages/react-native-builder-bob/src/utils/compile.ts @@ -140,7 +140,7 @@ export default async function compile({ ...(babelrc || configFile ? null : { - presets: [require.resolve('../../babel-preset')], + presets: [require.resolve('../../configs/babel-preset')], }), });