vite-plugin-react-native-web 1.1.2 → 2.0.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 (3) hide show
  1. package/dist/cjs/index.js +55 -26
  2. package/dist/es/index.js +55 -26
  3. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var vite = require('vite');
6
6
  var flowRemoveTypes = require('flow-remove-types');
7
- var fs = require('fs/promises');
7
+ var fs = require('node:fs/promises');
8
8
 
9
9
  // import type { ViteReactNativeWebOptions } from '../types'
10
10
  const development = process.env.NODE_ENV === 'development';
@@ -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
  },
@@ -44,7 +70,7 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
44
70
  name: 'react-native-web',
45
71
  config: () => ({
46
72
  define: {
47
- global: 'window',
73
+ global: 'self',
48
74
  __DEV__: JSON.stringify(development),
49
75
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
50
76
  },
@@ -60,29 +86,32 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
60
86
  },
61
87
  }),
62
88
  async transform(code, id) {
63
- if (!filter.test(id)) {
89
+ id = id.split('?')[0];
90
+ if (!nativeLegacyScriptPathPattern.test(id)) {
64
91
  return;
65
92
  }
66
- let includeSourceMaps = true;
67
- // 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)
68
- if (code.includes('\'use client\'') || code.includes('"use client"')) {
69
- includeSourceMaps = false;
70
- }
71
- if (code.includes('@flow')) {
93
+ if (flowPragmaPattern.test(code)) {
72
94
  code = flowRemoveTypes(code).toString();
73
95
  }
74
- const result = await vite.transformWithEsbuild(code, id, {
75
- loader: loader['.js'],
76
- tsconfigRaw: {
77
- compilerOptions: {
78
- 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
+ },
79
105
  },
80
- },
81
- });
82
- return {
83
- code: result.code,
84
- map: includeSourceMaps ? result.map : null,
85
- };
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 };
86
115
  },
87
116
  });
88
117
 
package/dist/es/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { transformWithEsbuild } from 'vite';
2
2
  import flowRemoveTypes from 'flow-remove-types';
3
- import fs from 'fs/promises';
3
+ import fs from 'node:fs/promises';
4
4
 
5
5
  // import type { ViteReactNativeWebOptions } from '../types'
6
6
  const development = process.env.NODE_ENV === 'development';
@@ -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
  },
@@ -40,7 +66,7 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
40
66
  name: 'react-native-web',
41
67
  config: () => ({
42
68
  define: {
43
- global: 'window',
69
+ global: 'self',
44
70
  __DEV__: JSON.stringify(development),
45
71
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
46
72
  },
@@ -56,29 +82,32 @@ const reactNativeWeb = ( /*options: ViteReactNativeWebOptions = {}*/) => ({
56
82
  },
57
83
  }),
58
84
  async transform(code, id) {
59
- if (!filter.test(id)) {
85
+ id = id.split('?')[0];
86
+ if (!nativeLegacyScriptPathPattern.test(id)) {
60
87
  return;
61
88
  }
62
- let includeSourceMaps = true;
63
- // 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)
64
- if (code.includes('\'use client\'') || code.includes('"use client"')) {
65
- includeSourceMaps = false;
66
- }
67
- if (code.includes('@flow')) {
89
+ if (flowPragmaPattern.test(code)) {
68
90
  code = flowRemoveTypes(code).toString();
69
91
  }
70
- const result = await transformWithEsbuild(code, id, {
71
- loader: loader['.js'],
72
- tsconfigRaw: {
73
- compilerOptions: {
74
- 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
+ },
75
101
  },
76
- },
77
- });
78
- return {
79
- code: result.code,
80
- map: includeSourceMaps ? result.map : null,
81
- };
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 };
82
111
  },
83
112
  });
84
113
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-react-native-web",
3
- "version": "1.1.2",
3
+ "version": "2.0.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },