vite-plugin-react-native-web 2.1.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +38 -38
  2. package/dist/cjs/index.js +10 -19
  3. package/dist/es/index.js +10 -19
  4. package/package.json +57 -57
package/README.md CHANGED
@@ -1,38 +1,38 @@
1
- # vite-plugin-react-native-web
2
-
3
- [![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)
4
-
5
- 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.
6
-
7
- ## Installation
8
-
9
- Just install it:
10
-
11
- ```bash
12
- npm i vite-plugin-react-native-web -D
13
- ```
14
-
15
- ## Usage
16
-
17
- ```typescript
18
- import reactNativeWeb from "vite-plugin-react-native-web";
19
-
20
- export default defineConfig({
21
- plugins: [
22
- reactNativeWeb()
23
- ]
24
- });
25
- ```
26
-
27
- If you are getting errors please report them in the issues section.
28
-
29
- The following variables are defined in the transformed files: (inferred during Vite's build process)
30
- - `global` as `self`
31
- - `__DEV__` as `process.env.NODE_ENV === 'development'`
32
- - `process.env.NODE_ENV` as `process.env.NODE_ENV`
33
-
34
- ## Contributing
35
- Please feel free to contribute to this project. Just fork it and submit a PR.
36
-
37
- ## License
38
- MIT
1
+ # vite-plugin-react-native-web
2
+
3
+ [![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)
4
+
5
+ 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.
6
+
7
+ ## Installation
8
+
9
+ Just install it:
10
+
11
+ ```bash
12
+ npm i vite-plugin-react-native-web -D
13
+ ```
14
+
15
+ ## Usage
16
+
17
+ ```typescript
18
+ import reactNativeWeb from "vite-plugin-react-native-web";
19
+
20
+ export default defineConfig({
21
+ plugins: [
22
+ reactNativeWeb()
23
+ ]
24
+ });
25
+ ```
26
+
27
+ If you are getting errors please report them in the issues section.
28
+
29
+ The following variables are defined in the transformed files: (inferred during Vite's build process)
30
+ - `global` as `self`
31
+ - `__DEV__` as `process.env.NODE_ENV === 'development'`
32
+ - `process.env.NODE_ENV` as `process.env.NODE_ENV`
33
+
34
+ ## Contributing
35
+ Please feel free to contribute to this project. Just fork it and submit a PR.
36
+
37
+ ## License
38
+ MIT
package/dist/cjs/index.js CHANGED
@@ -38,36 +38,25 @@ const extensions = [
38
38
  '.tsx',
39
39
  '.json',
40
40
  ];
41
- const nativeLegacyScriptPathPattern = /\.(js|flow)$/;
41
+ const reactNativeFlowJsxPathPattern = /\.(js|flow)$/;
42
+ const reactNativeFlowJsxLoader = 'jsx';
42
43
  const flowPragmaPattern = /@flow\b/;
43
44
  const useClientPragmaPattern = /['"]use client['"]/;
44
45
  const jsxElementPattern = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>([\s\S]*?)<\/\1>/;
45
46
  const jsxSelfClosingPattern = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*\/?>/;
46
47
  const jsxFragmentPattern = /<>([\s\S]*?)<\/>/;
47
- const loaders = {
48
- '.js': 'jsx',
49
- '.flow': 'jsx',
50
- };
51
- const getLoader = (path) => {
52
- const ext = `.${path.split('.').pop()}`;
53
- if (ext in loaders) {
54
- return loaders[ext];
55
- }
56
- return 'default';
57
- };
58
48
  const esbuildPlugin = () => ({
59
49
  name: 'react-native-web',
60
50
  setup: (build) => {
61
- build.onLoad({ filter: nativeLegacyScriptPathPattern }, async (args) => {
51
+ build.onLoad({ filter: reactNativeFlowJsxPathPattern }, async (args) => {
62
52
  let contents = await fs.readFile(args.path, 'utf-8');
63
- if (nativeLegacyScriptPathPattern.test(args.path) && flowPragmaPattern.test(contents)) {
53
+ if (flowPragmaPattern.test(contents)) {
64
54
  const transformed = flowRemoveTypes(contents);
65
55
  contents = transformed.toString();
66
56
  }
67
- const loader = getLoader(args.path);
68
57
  return {
69
58
  contents,
70
- loader,
59
+ loader: reactNativeFlowJsxLoader,
71
60
  };
72
61
  });
73
62
  },
@@ -81,6 +70,9 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
81
70
  __DEV__: JSON.stringify(development),
82
71
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
83
72
  },
73
+ commonjsOptions: {
74
+ transformMixedEsModules: true,
75
+ },
84
76
  resolve: {
85
77
  extensions,
86
78
  alias: [{ find: 'react-native', replacement: 'react-native-web' }],
@@ -94,7 +86,7 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
94
86
  }),
95
87
  async transform(code, id) {
96
88
  id = id.split('?')[0];
97
- if (!nativeLegacyScriptPathPattern.test(id)) {
89
+ if (!reactNativeFlowJsxPathPattern.test(id)) {
98
90
  return;
99
91
  }
100
92
  let map = null;
@@ -108,9 +100,8 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
108
100
  };
109
101
  }
110
102
  if (jsxElementPattern.test(code) || jsxSelfClosingPattern.test(code) || jsxFragmentPattern.test(code)) {
111
- const loader = getLoader(id);
112
103
  const result = await vite.transformWithEsbuild(code, id, {
113
- loader,
104
+ loader: reactNativeFlowJsxLoader,
114
105
  tsconfigRaw: {
115
106
  compilerOptions: {
116
107
  jsx: 'react-jsx',
package/dist/es/index.js CHANGED
@@ -34,36 +34,25 @@ const extensions = [
34
34
  '.tsx',
35
35
  '.json',
36
36
  ];
37
- const nativeLegacyScriptPathPattern = /\.(js|flow)$/;
37
+ const reactNativeFlowJsxPathPattern = /\.(js|flow)$/;
38
+ const reactNativeFlowJsxLoader = 'jsx';
38
39
  const flowPragmaPattern = /@flow\b/;
39
40
  const useClientPragmaPattern = /['"]use client['"]/;
40
41
  const jsxElementPattern = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>([\s\S]*?)<\/\1>/;
41
42
  const jsxSelfClosingPattern = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*\/?>/;
42
43
  const jsxFragmentPattern = /<>([\s\S]*?)<\/>/;
43
- const loaders = {
44
- '.js': 'jsx',
45
- '.flow': 'jsx',
46
- };
47
- const getLoader = (path) => {
48
- const ext = `.${path.split('.').pop()}`;
49
- if (ext in loaders) {
50
- return loaders[ext];
51
- }
52
- return 'default';
53
- };
54
44
  const esbuildPlugin = () => ({
55
45
  name: 'react-native-web',
56
46
  setup: (build) => {
57
- build.onLoad({ filter: nativeLegacyScriptPathPattern }, async (args) => {
47
+ build.onLoad({ filter: reactNativeFlowJsxPathPattern }, async (args) => {
58
48
  let contents = await fs.readFile(args.path, 'utf-8');
59
- if (nativeLegacyScriptPathPattern.test(args.path) && flowPragmaPattern.test(contents)) {
49
+ if (flowPragmaPattern.test(contents)) {
60
50
  const transformed = flowRemoveTypes(contents);
61
51
  contents = transformed.toString();
62
52
  }
63
- const loader = getLoader(args.path);
64
53
  return {
65
54
  contents,
66
- loader,
55
+ loader: reactNativeFlowJsxLoader,
67
56
  };
68
57
  });
69
58
  },
@@ -77,6 +66,9 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
77
66
  __DEV__: JSON.stringify(development),
78
67
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
79
68
  },
69
+ commonjsOptions: {
70
+ transformMixedEsModules: true,
71
+ },
80
72
  resolve: {
81
73
  extensions,
82
74
  alias: [{ find: 'react-native', replacement: 'react-native-web' }],
@@ -90,7 +82,7 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
90
82
  }),
91
83
  async transform(code, id) {
92
84
  id = id.split('?')[0];
93
- if (!nativeLegacyScriptPathPattern.test(id)) {
85
+ if (!reactNativeFlowJsxPathPattern.test(id)) {
94
86
  return;
95
87
  }
96
88
  let map = null;
@@ -104,9 +96,8 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
104
96
  };
105
97
  }
106
98
  if (jsxElementPattern.test(code) || jsxSelfClosingPattern.test(code) || jsxFragmentPattern.test(code)) {
107
- const loader = getLoader(id);
108
99
  const result = await transformWithEsbuild(code, id, {
109
- loader,
100
+ loader: reactNativeFlowJsxLoader,
110
101
  tsconfigRaw: {
111
102
  compilerOptions: {
112
103
  jsx: 'react-jsx',
package/package.json CHANGED
@@ -1,57 +1,57 @@
1
- {
2
- "name": "vite-plugin-react-native-web",
3
- "version": "2.1.0",
4
- "publishConfig": {
5
- "access": "public"
6
- },
7
- "description": "React Native Web support for Vite",
8
- "license": "MIT",
9
- "repository": {
10
- "url": "git+https://github.com/Bram-dc/vite-plugin-react-native-web.git"
11
- },
12
- "author": "Bram del Canho",
13
- "homepage": "https://github.com/Bram-dc/vite-plugin-react-native-web#readme",
14
- "bugs": "https://github.com/Bram-dc/vite-plugin-react-native-web/issues",
15
- "main": "./dist/cjs/index.js",
16
- "module": "./dist/es/index.js",
17
- "exports": {
18
- "types": "./types/index.d.ts",
19
- "import": "./dist/es/index.js",
20
- "default": "./dist/cjs/index.js"
21
- },
22
- "engines": {
23
- "node": ">=14.0.0"
24
- },
25
- "scripts": {
26
- "build": "rollup -c",
27
- "lint": "biome check --write ./src ./types ./biome.json ./tsconfig.json ./rollup.config.mjs",
28
- "prerelease": "npm run build",
29
- "release": "npm publish"
30
- },
31
- "files": [
32
- "dist",
33
- "!dist/**/*.map",
34
- "types",
35
- "README.md"
36
- ],
37
- "keywords": [
38
- "vite",
39
- "vite-plugin",
40
- "plugin",
41
- "react-native",
42
- "react-native-web"
43
- ],
44
- "dependencies": {
45
- "flow-remove-types": "^2.259.1"
46
- },
47
- "devDependencies": {
48
- "@biomejs/biome": "^1.9.4",
49
- "@rollup/plugin-typescript": "^12.1.2",
50
- "@types/node": "^22.10.10",
51
- "rollup": "^4.32.0",
52
- "tslib": "^2.8.1",
53
- "typescript": "^5.7.3",
54
- "vite": "^6.0.11"
55
- },
56
- "types": "./types/index.d.ts"
57
- }
1
+ {
2
+ "name": "vite-plugin-react-native-web",
3
+ "version": "2.2.0",
4
+ "publishConfig": {
5
+ "access": "public"
6
+ },
7
+ "description": "React Native Web support for Vite",
8
+ "license": "MIT",
9
+ "repository": {
10
+ "url": "git+https://github.com/Bram-dc/vite-plugin-react-native-web.git"
11
+ },
12
+ "author": "Bram del Canho",
13
+ "homepage": "https://github.com/Bram-dc/vite-plugin-react-native-web#readme",
14
+ "bugs": "https://github.com/Bram-dc/vite-plugin-react-native-web/issues",
15
+ "main": "./dist/cjs/index.js",
16
+ "module": "./dist/es/index.js",
17
+ "exports": {
18
+ "types": "./types/index.d.ts",
19
+ "import": "./dist/es/index.js",
20
+ "default": "./dist/cjs/index.js"
21
+ },
22
+ "engines": {
23
+ "node": ">=14.0.0"
24
+ },
25
+ "scripts": {
26
+ "build": "rollup -c",
27
+ "lint": "biome check --write ./src ./types ./biome.json ./tsconfig.json ./rollup.config.mjs",
28
+ "prerelease": "npm run build",
29
+ "release": "npm publish"
30
+ },
31
+ "files": [
32
+ "dist",
33
+ "!dist/**/*.map",
34
+ "types",
35
+ "README.md"
36
+ ],
37
+ "keywords": [
38
+ "vite",
39
+ "vite-plugin",
40
+ "plugin",
41
+ "react-native",
42
+ "react-native-web"
43
+ ],
44
+ "dependencies": {
45
+ "flow-remove-types": "^2.275.0"
46
+ },
47
+ "devDependencies": {
48
+ "@biomejs/biome": "^2.1.1",
49
+ "@rollup/plugin-typescript": "^12.1.4",
50
+ "@types/node": "^24.0.14",
51
+ "rollup": "^4.45.1",
52
+ "tslib": "^2.8.1",
53
+ "typescript": "^5.8.3",
54
+ "vite": "^7.0.4"
55
+ },
56
+ "types": "./types/index.d.ts"
57
+ }