vite-plugin-react-native-web 1.2.0 → 2.0.1

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 +1 -1
  2. package/dist/cjs/index.js +52 -24
  3. package/dist/es/index.js +52 -24
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -27,7 +27,7 @@ export default defineConfig({
27
27
  If you are getting errors please report them in the issues section.
28
28
 
29
29
  The following variables are defined in the transformed files: (inferred during Vite's build process)
30
- - `global` as `window`
30
+ - `global` as `self`
31
31
  - `__DEV__` as `process.env.NODE_ENV === 'development'`
32
32
  - `process.env.NODE_ENV` as `process.env.NODE_ENV`
33
33
 
package/dist/cjs/index.js CHANGED
@@ -23,18 +23,44 @@ const extensions = [
23
23
  '.tsx',
24
24
  '.json',
25
25
  ];
26
- const loader = {
26
+ const scriptPathPattern = /\.(js|jsx|ts|tsx|flow)$/;
27
+ const nativeLegacyScriptPathPattern = /\.(js|flow)$/;
28
+ const flowPragmaPattern = /@flow\b/;
29
+ const useClientPragmaPattern = /['"]use client['"]/;
30
+ const jsxElementPattern = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>([\s\S]*?)<\/\1>/;
31
+ const jsxSelfClosingPattern = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*\/?>/;
32
+ const jsxFragmentPattern = /<>([\s\S]*?)<\/>/;
33
+ const loaders = {
27
34
  '.js': 'jsx',
35
+ '.flow': 'jsx',
36
+ };
37
+ const getLoader = (path) => {
38
+ const ext = `.${path.split('.').pop()}`;
39
+ if (ext in loaders) {
40
+ return loaders[ext];
41
+ }
42
+ return 'default';
28
43
  };
29
- const filter = /\.(js|flow)$/;
30
44
  const esbuildPlugin = () => ({
31
45
  name: 'react-native-web',
32
46
  setup: (build) => {
33
- build.onLoad({ filter }, async ({ path }) => {
34
- const src = await fs.readFile(path, 'utf-8');
47
+ // We need to manually resolve .web files since the resolveExtensions option does not seem to work properly.
48
+ build.onLoad({ filter: scriptPathPattern }, async (args) => {
49
+ let path = args.path;
50
+ const webPath = args.path.replace(/(\.[^/.]+)$/, '.web$1');
51
+ try {
52
+ await fs.access(webPath);
53
+ path = webPath;
54
+ }
55
+ catch { }
56
+ let contents = await fs.readFile(path, 'utf-8');
57
+ const loader = getLoader(path);
58
+ if (nativeLegacyScriptPathPattern.test(path) && flowPragmaPattern.test(contents)) {
59
+ contents = flowRemoveTypes(contents).toString();
60
+ }
35
61
  return {
36
- contents: flowRemoveTypes(src).toString(),
37
- loader: loader['.js'],
62
+ contents,
63
+ loader,
38
64
  };
39
65
  });
40
66
  },
@@ -61,29 +87,31 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
61
87
  }),
62
88
  async transform(code, id) {
63
89
  id = id.split('?')[0];
64
- if (!filter.test(id)) {
90
+ if (!nativeLegacyScriptPathPattern.test(id)) {
65
91
  return;
66
92
  }
67
- let includeSourceMaps = true;
68
- // Do not include source maps for files that are using 'use client' pragma since these break the esbuild mappings (https://github.com/vitejs/vite/issues/15012)
69
- if (code.includes("'use client'") || code.includes('"use client"')) {
70
- includeSourceMaps = false;
71
- }
72
- if (code.includes('@flow')) {
93
+ if (flowPragmaPattern.test(code)) {
73
94
  code = flowRemoveTypes(code).toString();
74
95
  }
75
- const result = await vite.transformWithEsbuild(code, id, {
76
- loader: loader['.js'],
77
- tsconfigRaw: {
78
- compilerOptions: {
79
- jsx: 'react-jsx',
96
+ let map = null;
97
+ if (jsxElementPattern.test(code) || jsxSelfClosingPattern.test(code) || jsxFragmentPattern.test(code)) {
98
+ const loader = getLoader(id);
99
+ const result = await vite.transformWithEsbuild(code, id, {
100
+ loader,
101
+ tsconfigRaw: {
102
+ compilerOptions: {
103
+ jsx: 'react-jsx',
104
+ },
80
105
  },
81
- },
82
- });
83
- return {
84
- code: result.code,
85
- map: includeSourceMaps ? result.map : null,
86
- };
106
+ });
107
+ code = result.code;
108
+ map = result.map;
109
+ // Do not include source maps for files that are using 'use client' pragma since these break the esbuild mappings (https://github.com/vitejs/vite/issues/15012)
110
+ if (useClientPragmaPattern.test(code)) {
111
+ map = null;
112
+ }
113
+ }
114
+ return { code, map };
87
115
  },
88
116
  });
89
117
 
package/dist/es/index.js CHANGED
@@ -19,18 +19,44 @@ const extensions = [
19
19
  '.tsx',
20
20
  '.json',
21
21
  ];
22
- const loader = {
22
+ const scriptPathPattern = /\.(js|jsx|ts|tsx|flow)$/;
23
+ const nativeLegacyScriptPathPattern = /\.(js|flow)$/;
24
+ const flowPragmaPattern = /@flow\b/;
25
+ const useClientPragmaPattern = /['"]use client['"]/;
26
+ const jsxElementPattern = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>([\s\S]*?)<\/\1>/;
27
+ const jsxSelfClosingPattern = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*\/?>/;
28
+ const jsxFragmentPattern = /<>([\s\S]*?)<\/>/;
29
+ const loaders = {
23
30
  '.js': 'jsx',
31
+ '.flow': 'jsx',
32
+ };
33
+ const getLoader = (path) => {
34
+ const ext = `.${path.split('.').pop()}`;
35
+ if (ext in loaders) {
36
+ return loaders[ext];
37
+ }
38
+ return 'default';
24
39
  };
25
- const filter = /\.(js|flow)$/;
26
40
  const esbuildPlugin = () => ({
27
41
  name: 'react-native-web',
28
42
  setup: (build) => {
29
- build.onLoad({ filter }, async ({ path }) => {
30
- const src = await fs.readFile(path, 'utf-8');
43
+ // We need to manually resolve .web files since the resolveExtensions option does not seem to work properly.
44
+ build.onLoad({ filter: scriptPathPattern }, async (args) => {
45
+ let path = args.path;
46
+ const webPath = args.path.replace(/(\.[^/.]+)$/, '.web$1');
47
+ try {
48
+ await fs.access(webPath);
49
+ path = webPath;
50
+ }
51
+ catch { }
52
+ let contents = await fs.readFile(path, 'utf-8');
53
+ const loader = getLoader(path);
54
+ if (nativeLegacyScriptPathPattern.test(path) && flowPragmaPattern.test(contents)) {
55
+ contents = flowRemoveTypes(contents).toString();
56
+ }
31
57
  return {
32
- contents: flowRemoveTypes(src).toString(),
33
- loader: loader['.js'],
58
+ contents,
59
+ loader,
34
60
  };
35
61
  });
36
62
  },
@@ -57,29 +83,31 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
57
83
  }),
58
84
  async transform(code, id) {
59
85
  id = id.split('?')[0];
60
- if (!filter.test(id)) {
86
+ if (!nativeLegacyScriptPathPattern.test(id)) {
61
87
  return;
62
88
  }
63
- let includeSourceMaps = true;
64
- // Do not include source maps for files that are using 'use client' pragma since these break the esbuild mappings (https://github.com/vitejs/vite/issues/15012)
65
- if (code.includes("'use client'") || code.includes('"use client"')) {
66
- includeSourceMaps = false;
67
- }
68
- if (code.includes('@flow')) {
89
+ if (flowPragmaPattern.test(code)) {
69
90
  code = flowRemoveTypes(code).toString();
70
91
  }
71
- const result = await transformWithEsbuild(code, id, {
72
- loader: loader['.js'],
73
- tsconfigRaw: {
74
- compilerOptions: {
75
- jsx: 'react-jsx',
92
+ let map = null;
93
+ if (jsxElementPattern.test(code) || jsxSelfClosingPattern.test(code) || jsxFragmentPattern.test(code)) {
94
+ const loader = getLoader(id);
95
+ const result = await transformWithEsbuild(code, id, {
96
+ loader,
97
+ tsconfigRaw: {
98
+ compilerOptions: {
99
+ jsx: 'react-jsx',
100
+ },
76
101
  },
77
- },
78
- });
79
- return {
80
- code: result.code,
81
- map: includeSourceMaps ? result.map : null,
82
- };
102
+ });
103
+ code = result.code;
104
+ map = result.map;
105
+ // Do not include source maps for files that are using 'use client' pragma since these break the esbuild mappings (https://github.com/vitejs/vite/issues/15012)
106
+ if (useClientPragmaPattern.test(code)) {
107
+ map = null;
108
+ }
109
+ }
110
+ return { code, map };
83
111
  },
84
112
  });
85
113
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-react-native-web",
3
- "version": "1.2.0",
3
+ "version": "2.0.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },