vite-plugin-react-native-web 3.1.0 → 3.1.2

package/README.md

@@ -1,6 +1,35 @@
 # vite-plugin-react-native-web
 
-React Native Web support for Vite.
+[![npm](https://img.shields.io/npm/v/vite-plugin-react-native-web?style=flat-square)](https://www.npmjs.com/package/vite-plugin-react-native-web)
+
+Add React Native Web support to Vite by removing Flow types, aliasing `react-native` to `react-native-web` and transforming .js files as .jsx files using ESBuild.
+
+## Installation
+
+Just install it:
+
+```bash
+npm i vite-plugin-react-native-web -D
+```
+
+## Usage
+
+```typescript
+import reactNativeWeb from "vite-plugin-react-native-web";
+
+export default defineConfig({
+  plugins: [reactNativeWeb({ ... })],
+});
+```
+
+If you are getting errors please report them in the issues section.
+
+The following variables are defined in the transformed files: (inferred during Vite's build process)
+
+- `global` as `globalThis`
+- `__DEV__` as `process.env.NODE_ENV === 'development'`
+- `process.env.NODE_ENV` as `process.env.NODE_ENV`
+- `process.env.EXPO_OS` as `"web"`
 
 ## Peer Dependencies
 
@@ -12,31 +41,14 @@ This plugin requires `react-native-web` and `inline-style-prefixer` as peer depe
 pnpm add react-native-web inline-style-prefixer
 ```
 
-## Why?
-
-- `react-native-web` provides the core React Native compatibility for web.
-- `inline-style-prefixer` is required for style prefixing and is used internally by `react-native-web`.
-
-## Example Vite config
-
-To ensure correct dependency optimization, add the following to your Vite config:
-
-```js
-optimizeDeps: {
-  include: [
-    'inline-style-prefixer/lib/createPrefixer',
-    'inline-style-prefixer/lib/plugins/backgroundClip',
-    'inline-style-prefixer/lib/plugins/crossFade',
-    'inline-style-prefixer/lib/plugins/cursor',
-    'inline-style-prefixer/lib/plugins/filter',
-    'inline-style-prefixer/lib/plugins/imageSet',
-    'inline-style-prefixer/lib/plugins/logical',
-    'inline-style-prefixer/lib/plugins/position',
-    'inline-style-prefixer/lib/plugins/sizing',
-    'inline-style-prefixer/lib/plugins/transition'
-  ]
-}
-```
+## Examples
+
+- [React + TypeScript + Vite + React Native Web Example](./apps/example)
+- [React + TypeScript + Expo + Vite + React Native Web Example](./apps/expo-example)
+
+## Contributing
+
+Please feel free to contribute to this project. Just fork it and submit a PR.
 
 ## License
 

package/dist/cjs/index.js

@@ -91,6 +91,13 @@ const optimizeDepsInclude = [
 	"inline-style-prefixer/lib/plugins/sizing",
 	"inline-style-prefixer/lib/plugins/transition"
 ];
+const silencedLogs = [{
+	code: "EVAL",
+	file: "expo/src/async-require/fetchThenEvalJs.ts"
+}, {
+	code: "EVAL",
+	file: "expo-modules-core/src/uuid/index.web.ts"
+}];
 const reactNativeWeb = (_options) => ({
 	enforce: "pre",
 	name: "react-native-web",
@@ -113,7 +120,14 @@ const reactNativeWeb = (_options) => ({
 			shimMissingExports: true,
 			treeshake: treeshakePreset,
 			moduleTypes,
-			plugins: [flowRemoveTypesPlugin(), treeshakeFixPlugin()]
+			plugins: [flowRemoveTypesPlugin(), treeshakeFixPlugin()],
+			onLog(level, log, defaultHandler) {
+				var _a;
+				const code = log.code;
+				const file = (_a = log.loc) === null || _a === void 0 ? void 0 : _a.file;
+				if (code && file && silencedLogs.some((silencedLog) => code === silencedLog.code && file.includes(silencedLog.file))) return;
+				defaultHandler(level, log);
+			}
 		} },
 		optimizeDeps: {
 			include: optimizeDepsInclude,

package/dist/es/index.js

@@ -64,6 +64,13 @@ const optimizeDepsInclude = [
 	"inline-style-prefixer/lib/plugins/sizing",
 	"inline-style-prefixer/lib/plugins/transition"
 ];
+const silencedLogs = [{
+	code: "EVAL",
+	file: "expo/src/async-require/fetchThenEvalJs.ts"
+}, {
+	code: "EVAL",
+	file: "expo-modules-core/src/uuid/index.web.ts"
+}];
 const reactNativeWeb = (_options) => ({
 	enforce: "pre",
 	name: "react-native-web",
@@ -86,7 +93,14 @@ const reactNativeWeb = (_options) => ({
 			shimMissingExports: true,
 			treeshake: treeshakePreset,
 			moduleTypes,
-			plugins: [flowRemoveTypesPlugin(), treeshakeFixPlugin()]
+			plugins: [flowRemoveTypesPlugin(), treeshakeFixPlugin()],
+			onLog(level, log, defaultHandler) {
+				var _a;
+				const code = log.code;
+				const file = (_a = log.loc) === null || _a === void 0 ? void 0 : _a.file;
+				if (code && file && silencedLogs.some((silencedLog) => code === silencedLog.code && file.includes(silencedLog.file))) return;
+				defaultHandler(level, log);
+			}
 		} },
 		optimizeDeps: {
 			include: optimizeDepsInclude,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vite-plugin-react-native-web",
-	"version": "3.1.0",
+	"version": "3.1.2",
 	"type": "module",
 	"publishConfig": {
 		"access": "public"