@storybook/react-native-web-vite 9.1.0-alpha.1 → 9.1.0-alpha.10

package/dist/index.d.ts

@@ -1,21 +1,27 @@
 import { CompatibleString } from 'storybook/internal/types';
 import { FrameworkOptions as FrameworkOptions$1, StorybookConfig as StorybookConfig$1 } from '@storybook/react-vite';
-import { Options, BabelOptions } from '@vitejs/plugin-react';
-import { BabelPluginOptions } from 'vite-plugin-babel';
+import { Options, BabelOptions } from 'vite-plugin-rnw';
 export * from '@storybook/react';
 export { __definePreview as definePreview } from '@storybook/react';
 
 type FrameworkOptions = FrameworkOptions$1 & {
+    /**
+     * Many react native libraries aren't transpiled for the web, add them to this list to make sure
+     * they get transpiled before attempting to load them on the web. We will automatically add
+     * `react-native`, `@react-native`, `expo`, and `@expo` to this list.
+     *
+     * @example {modulesToTranspile: ['my-library']}
+     */
+    modulesToTranspile?: string[];
     pluginReactOptions?: Omit<Options, 'babel'> & {
         babel?: BabelOptions;
     };
-    pluginBabelOptions?: BabelPluginOptions & {
-        presetReact?: {
-            [key: string]: any;
-            runtime?: 'automatic' | 'classic';
-            importSource?: string;
-        };
-    };
+    /**
+     * @deprecated These options will be ignored. Use `pluginReactOptions` now for everything and
+     *   override includes in order to transpile node_modules pluginBabelOptions will be removed in
+     *   the next major version. To configure babel, use `pluginReactOptions.babel`.
+     */
+    pluginBabelOptions?: Record<string, unknown>;
 };
 type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>;
 /** The interface for Storybook configuration in `main.ts` files. */

package/dist/node/index.d.ts

@@ -1,8 +1,7 @@
 import { StorybookConfig } from '../index.js';
 import 'storybook/internal/types';
 import '@storybook/react-vite';
-import '@vitejs/plugin-react';
-import 'vite-plugin-babel';
+import 'vite-plugin-rnw';
 import '@storybook/react';
 
 declare function defineMain(config: StorybookConfig): StorybookConfig;

package/dist/preset.d.ts

@@ -1,16 +1,13 @@
-import { PluginOption } from 'vite';
 import { StorybookConfig } from './index.js';
 import 'storybook/internal/types';
 import '@storybook/react-vite';
-import '@vitejs/plugin-react';
-import 'vite-plugin-babel';
+import 'vite-plugin-rnw';
 import '@storybook/react';
 
-declare function reactNativeWeb(): PluginOption;
 declare const viteFinal: StorybookConfig['viteFinal'];
 declare const core: {
     builder: string;
     renderer: string;
 };
 
-export { core, reactNativeWeb, viteFinal };
+export { core, viteFinal };

package/dist/preset.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{core:()=>core,reactNativeWeb:()=>reactNativeWeb,viteFinal:()=>viteFinal});module.exports=__toCommonJS(preset_exports);var import_preset=require("@storybook/react-vite/preset"),import_vite_plugin_flow=require("@bunchtogether/vite-plugin-flow"),import_plugin_react=__toESM(require("@vitejs/plugin-react")),import_vite_plugin_babel=__toESM(require("vite-plugin-babel")),import_vite_plugin_commonjs=__toESM(require("vite-plugin-commonjs")),import_vite_tsconfig_paths=__toESM(require("vite-tsconfig-paths"));function reactNativeWeb(){return{name:"vite:react-native-web",config(_userConfig,env){return{define:{"global.__x":{},_frameTimestamp:void 0,_WORKLET:!1,__DEV__:`${env.mode==="development"}`,"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||env.mode)},optimizeDeps:{include:[],esbuildOptions:{jsx:"automatic",resolveExtensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],loader:{".js":"jsx"}}},resolve:{extensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],alias:{"react-native":"react-native-web"}}}}}}var viteFinal=async(config,options)=>{let{mergeConfig}=await import("vite"),{pluginReactOptions={},pluginBabelOptions={}}=await options.presets.apply("frameworkOptions"),isDevelopment=options.configType!=="PRODUCTION",{plugins=[],...reactConfigWithoutPlugins}=await(0,import_preset.viteFinal)(config,options);return mergeConfig(reactConfigWithoutPlugins,{plugins:[(0,import_vite_tsconfig_paths.default)(),(0,import_vite_plugin_flow.flowPlugin)({exclude:[/node_modules\/(?!react-native|@react-native)/]}),(0,import_plugin_react.default)({...pluginReactOptions,jsxRuntime:pluginReactOptions.jsxRuntime||"automatic",babel:{babelrc:!1,configFile:!1,...pluginReactOptions.babel}}),(0,import_vite_plugin_babel.default)({...pluginBabelOptions,include:pluginBabelOptions.include||[/node_modules\/(react-native|@react-native)/],exclude:pluginBabelOptions.exclude,babelConfig:{...pluginBabelOptions.babelConfig,babelrc:!1,configFile:!1,presets:[["@babel/preset-react",{development:isDevelopment,runtime:"automatic",...pluginBabelOptions.presetReact||{}}],...pluginBabelOptions.babelConfig?.presets||[]],plugins:[["@babel/plugin-transform-modules-commonjs",{strict:!1,strictMode:!1,allowTopLevelThis:!0}],...pluginBabelOptions.babelConfig?.plugins||[]]}}),...plugins,reactNativeWeb(),(0,import_vite_plugin_commonjs.default)()],optimizeDeps:{esbuildOptions:{plugins:[(0,import_vite_plugin_flow.esbuildFlowPlugin)(new RegExp(/\.(flow|jsx?)$/),_path=>"jsx")]}}})},core={builder:"@storybook/builder-vite",renderer:"@storybook/react"};0&&(module.exports={core,reactNativeWeb,viteFinal});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{core:()=>core,viteFinal:()=>viteFinal});module.exports=__toCommonJS(preset_exports);var import_preset=require("@storybook/react-vite/preset"),import_vite_plugin_rnw=require("vite-plugin-rnw"),import_vite_tsconfig_paths=__toESM(require("vite-tsconfig-paths")),getExcludeOptions=modulesToTranspile=>{let defaultModulesToTranspile=["react-native","@react-native","expo","@expo"],uniqueModulesToTranspile=Array.from(new Set([...modulesToTranspile,...defaultModulesToTranspile]));return modulesToTranspile.length?{exclude:new RegExp(`/node_modules/(?!${uniqueModulesToTranspile.join("|")})`)}:{}},viteFinal=async(config,options)=>{let{mergeConfig}=await import("vite"),{pluginReactOptions={},modulesToTranspile=[]}=await options.presets.apply("frameworkOptions"),{plugins=[],...reactConfigWithoutPlugins}=await(0,import_preset.viteFinal)(config,options);return mergeConfig(reactConfigWithoutPlugins,{plugins:[(0,import_vite_tsconfig_paths.default)(),(0,import_vite_plugin_rnw.rnw)({...getExcludeOptions(modulesToTranspile),...pluginReactOptions,jsxRuntime:pluginReactOptions.jsxRuntime||"automatic",babel:{babelrc:!1,configFile:!1,...pluginReactOptions.babel}}),...plugins]})},core={builder:"@storybook/builder-vite",renderer:"@storybook/react"};0&&(module.exports={core,viteFinal});

package/dist/vite-plugin.d.ts

@@ -1,5 +1,5 @@
 import * as vite from 'vite';
 
-declare const storybookReactNativeWeb: () => vite.PluginOption[];
+declare const storybookReactNativeWeb: () => (vite.Plugin<any> | vite.Plugin<any>[])[];
 
 export { storybookReactNativeWeb };

package/dist/vite-plugin.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var vite_plugin_exports={};__export(vite_plugin_exports,{storybookReactNativeWeb:()=>storybookReactNativeWeb});module.exports=__toCommonJS(vite_plugin_exports);var import_plugin_react2=__toESM(require("@vitejs/plugin-react")),import_vite_tsconfig_paths2=__toESM(require("vite-tsconfig-paths"));var import_preset=require("@storybook/react-vite/preset"),import_vite_plugin_flow=require("@bunchtogether/vite-plugin-flow"),import_plugin_react=__toESM(require("@vitejs/plugin-react")),import_vite_plugin_babel=__toESM(require("vite-plugin-babel")),import_vite_plugin_commonjs=__toESM(require("vite-plugin-commonjs")),import_vite_tsconfig_paths=__toESM(require("vite-tsconfig-paths"));function reactNativeWeb(){return{name:"vite:react-native-web",config(_userConfig,env){return{define:{"global.__x":{},_frameTimestamp:void 0,_WORKLET:!1,__DEV__:`${env.mode==="development"}`,"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||env.mode)},optimizeDeps:{include:[],esbuildOptions:{jsx:"automatic",resolveExtensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],loader:{".js":"jsx"}}},resolve:{extensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],alias:{"react-native":"react-native-web"}}}}}}var storybookReactNativeWeb=()=>[(0,import_vite_tsconfig_paths2.default)(),(0,import_plugin_react2.default)({babel:{babelrc:!1,configFile:!1},jsxRuntime:"automatic"}),reactNativeWeb()];0&&(module.exports={storybookReactNativeWeb});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var vite_plugin_exports={};__export(vite_plugin_exports,{storybookReactNativeWeb:()=>storybookReactNativeWeb});module.exports=__toCommonJS(vite_plugin_exports);var import_vite_plugin_rnw=require("vite-plugin-rnw"),import_vite_tsconfig_paths=__toESM(require("vite-tsconfig-paths")),storybookReactNativeWeb=()=>[(0,import_vite_tsconfig_paths.default)(),(0,import_vite_plugin_rnw.rnw)({jsxRuntime:"automatic"})];0&&(module.exports={storybookReactNativeWeb});

package/dist/vite-plugin.mjs

@@ -1,10 +1,6 @@
-import react2 from '@vitejs/plugin-react';
-import tsconfigPaths2 from 'vite-tsconfig-paths';
-import '@storybook/react-vite/preset';
-import '@bunchtogether/vite-plugin-flow';
-import 'vite-plugin-babel';
-import 'vite-plugin-commonjs';
+import { rnw } from 'vite-plugin-rnw';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
-function reactNativeWeb(){return {name:"vite:react-native-web",config(_userConfig,env){return {define:{"global.__x":{},_frameTimestamp:void 0,_WORKLET:!1,__DEV__:`${env.mode==="development"}`,"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||env.mode)},optimizeDeps:{include:[],esbuildOptions:{jsx:"automatic",resolveExtensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],loader:{".js":"jsx"}}},resolve:{extensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],alias:{"react-native":"react-native-web"}}}}}}var storybookReactNativeWeb=()=>[tsconfigPaths2(),react2({babel:{babelrc:!1,configFile:!1},jsxRuntime:"automatic"}),reactNativeWeb()];
+var storybookReactNativeWeb=()=>[tsconfigPaths(),rnw({jsxRuntime:"automatic"})];
 
 export { storybookReactNativeWeb };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-web-vite",
-  "version": "9.1.0-alpha.1",
+  "version": "9.1.0-alpha.10",
   "description": "Develop react-native components an isolated web environment with hot reloading.",
   "keywords": [
     "storybook"
@@ -59,13 +59,10 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@bunchtogether/vite-plugin-flow": "^1.0.2",
-    "@storybook/builder-vite": "9.1.0-alpha.1",
-    "@storybook/react": "9.1.0-alpha.1",
-    "@storybook/react-vite": "9.1.0-alpha.1",
-    "@vitejs/plugin-react": "^4.3.2",
-    "vite-plugin-babel": "^1.3.0",
-    "vite-plugin-commonjs": "^0.10.4",
+    "@storybook/builder-vite": "9.1.0-alpha.10",
+    "@storybook/react": "9.1.0-alpha.10",
+    "@storybook/react-vite": "9.1.0-alpha.10",
+    "vite-plugin-rnw": "^0.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
@@ -77,8 +74,8 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-native": ">=0.74.5",
     "react-native-web": "^0.19.12 || ^0.20.0",
-    "storybook": "^9.1.0-alpha.1",
-    "vite": "^5.0.0 || ^6.0.0"
+    "storybook": "^9.1.0-alpha.10",
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "engines": {
     "node": ">=20.0.0"