vite-plugin-rnw 0.0.6 → 0.0.8-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.
- package/LICENSE +21 -0
- package/README.md +1 -34
- package/dist/index.d.ts +5 -65
- package/dist/index.js +30 -306
- package/package.json +8 -23
- package/dist/index.cjs +0 -472
- package/dist/index.d.cts +0 -68
- package/dist/refresh-runtime.js +0 -648
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025-present, dannyhw You and Vite contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -2,12 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A vite plugin for React Native Web projects.
|
|
4
4
|
|
|
5
|
-
This plugin
|
|
6
|
-
|
|
7
|
-
- enable [Fast Refresh](https://www.npmjs.com/package/react-refresh) in development (requires react >= 16.9)
|
|
8
|
-
- use the [automatic JSX runtime](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
|
|
9
|
-
- use custom Babel plugins/presets
|
|
10
|
-
- small installation size
|
|
5
|
+
This plugin uses the [react plugin](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) internally and applies a lot of fixes for react native web on top.
|
|
11
6
|
|
|
12
7
|
```js
|
|
13
8
|
// vite.config.js
|
|
@@ -69,31 +64,3 @@ rnw({
|
|
|
69
64
|
}
|
|
70
65
|
})
|
|
71
66
|
```
|
|
72
|
-
|
|
73
|
-
#### Proposed syntax
|
|
74
|
-
|
|
75
|
-
If you are using ES syntax that are still in proposal status (e.g. class properties), you can selectively enable them with the `babel.parserOpts.plugins` option:
|
|
76
|
-
|
|
77
|
-
```js
|
|
78
|
-
rnw({
|
|
79
|
-
babel: {
|
|
80
|
-
parserOpts: {
|
|
81
|
-
plugins: ["decorators-legacy"],
|
|
82
|
-
},
|
|
83
|
-
},
|
|
84
|
-
});
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
This option does not enable _code transformation_. That is handled by esbuild.
|
|
88
|
-
|
|
89
|
-
**Note:** TypeScript syntax is handled automatically.
|
|
90
|
-
|
|
91
|
-
Here's the [complete list of Babel parser plugins](https://babeljs.io/docs/en/babel-parser#ecmascript-proposalshttpsgithubcombabelproposals).
|
|
92
|
-
|
|
93
|
-
## Consistent components exports
|
|
94
|
-
|
|
95
|
-
For React refresh to work correctly, your file should only export React components. You can find a good explanation in the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).
|
|
96
|
-
|
|
97
|
-
If an incompatible change in exports is found, the module will be invalidated and HMR will propagate. To make it easier to export simple constants alongside your component, the module is only invalidated when their value changes.
|
|
98
|
-
|
|
99
|
-
You can catch mistakes and get more detailed warning with this [eslint rule](https://github.com/ArnaudBarre/eslint-plugin-react-refresh).
|
package/dist/index.d.ts
CHANGED
|
@@ -1,68 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { Plugin } from "vite";
|
|
2
|
+
import { Options } from "@vitejs/plugin-react";
|
|
3
3
|
|
|
4
4
|
//#region src/index.d.ts
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
include?: string | RegExp | Array<string | RegExp>;
|
|
8
|
-
exclude?: string | RegExp | Array<string | RegExp>;
|
|
9
|
-
/**
|
|
10
|
-
* Control where the JSX factory is imported from.
|
|
11
|
-
* https://esbuild.github.io/api/#jsx-import-source
|
|
12
|
-
* @default 'react'
|
|
13
|
-
*/
|
|
14
|
-
jsxImportSource?: string;
|
|
15
|
-
/**
|
|
16
|
-
* Note: Skipping React import with classic runtime is not supported from v4
|
|
17
|
-
* @default "automatic"
|
|
18
|
-
*/
|
|
19
|
-
jsxRuntime?: "classic" | "automatic";
|
|
20
|
-
/**
|
|
21
|
-
* Babel configuration applied in both dev and prod.
|
|
22
|
-
*/
|
|
23
|
-
babel?: BabelOptions | ((id: string, options: {
|
|
24
|
-
ssr?: boolean;
|
|
25
|
-
}) => BabelOptions);
|
|
26
|
-
/**
|
|
27
|
-
* React Fast Refresh runtime URL prefix.
|
|
28
|
-
* Useful in a module federation context to enable HMR by specifying
|
|
29
|
-
* the host application URL in the Vite config of a remote application.
|
|
30
|
-
* @example
|
|
31
|
-
* reactRefreshHost: 'http://localhost:3000'
|
|
32
|
-
*/
|
|
33
|
-
reactRefreshHost?: string;
|
|
34
|
-
/**
|
|
35
|
-
* If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
|
|
36
|
-
*/
|
|
37
|
-
disableOxcRecommendation?: boolean;
|
|
38
|
-
}
|
|
39
|
-
type BabelOptions = Omit<TransformOptions, "ast" | "filename" | "root" | "sourceFileName" | "sourceMaps" | "inputSourceMap">;
|
|
40
|
-
/**
|
|
41
|
-
* The object type used by the `options` passed to plugins with
|
|
42
|
-
* an `api.reactBabel` method.
|
|
43
|
-
*/
|
|
44
|
-
interface ReactBabelOptions extends BabelOptions {
|
|
45
|
-
plugins: Extract<BabelOptions["plugins"], any[]>;
|
|
46
|
-
presets: Extract<BabelOptions["presets"], any[]>;
|
|
47
|
-
overrides: Extract<BabelOptions["overrides"], any[]>;
|
|
48
|
-
parserOpts: ParserOptions & {
|
|
49
|
-
plugins: Extract<ParserOptions["plugins"], any[]>;
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
type ReactBabelHook = (babelConfig: ReactBabelOptions, context: ReactBabelHookContext, config: ResolvedConfig) => void;
|
|
53
|
-
type ReactBabelHookContext = {
|
|
54
|
-
ssr: boolean;
|
|
55
|
-
id: string;
|
|
56
|
-
};
|
|
57
|
-
type ViteReactPluginApi = {
|
|
58
|
-
/**
|
|
59
|
-
* Manipulate the Babel options of `@vitejs/plugin-react`
|
|
60
|
-
*/
|
|
61
|
-
reactBabel?: ReactBabelHook;
|
|
62
|
-
};
|
|
63
|
-
declare function rnw(opts?: Options): Plugin[];
|
|
64
|
-
declare namespace rnw {
|
|
65
|
-
var preambleCode: string;
|
|
66
|
-
}
|
|
5
|
+
type RnwOptions = Options;
|
|
6
|
+
declare function rnw(opts?: RnwOptions): Plugin[];
|
|
67
7
|
//#endregion
|
|
68
|
-
export {
|
|
8
|
+
export { RnwOptions, rnw };
|
package/dist/index.js
CHANGED
|
@@ -1,88 +1,10 @@
|
|
|
1
|
-
import { dirname, join } from "node:path";
|
|
2
|
-
import { fileURLToPath } from "node:url";
|
|
3
|
-
import { readFileSync } from "node:fs";
|
|
4
1
|
import * as vite from "vite";
|
|
5
2
|
import { createFilter } from "vite";
|
|
6
3
|
import { esbuildFlowPlugin, flowPlugin } from "@bunchtogether/vite-plugin-flow";
|
|
7
4
|
import commonjs from "vite-plugin-commonjs";
|
|
8
|
-
import {
|
|
5
|
+
import { makeIdFiltersToMatchWithQuery } from "@rolldown/pluginutils";
|
|
6
|
+
import react from "@vitejs/plugin-react";
|
|
9
7
|
|
|
10
|
-
//#region src/refresh-utils.ts
|
|
11
|
-
const runtimePublicPath = "/@react-refresh";
|
|
12
|
-
const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
|
|
13
|
-
const refreshContentRE = /\$RefreshReg\$\(/;
|
|
14
|
-
const preambleCode = `import { injectIntoGlobalHook } from "__BASE__${runtimePublicPath.slice(1)}";
|
|
15
|
-
injectIntoGlobalHook(window);
|
|
16
|
-
window.$RefreshReg$ = () => {};
|
|
17
|
-
window.$RefreshSig$ = () => (type) => type;`;
|
|
18
|
-
const getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
|
|
19
|
-
const avoidSourceMapOption = Symbol();
|
|
20
|
-
function addRefreshWrapper(code, map, pluginName, id, reactRefreshHost = "") {
|
|
21
|
-
const hasRefresh = refreshContentRE.test(code);
|
|
22
|
-
const onlyReactComp = !hasRefresh && reactCompRE.test(code);
|
|
23
|
-
const normalizedMap = map === avoidSourceMapOption ? null : map;
|
|
24
|
-
if (!hasRefresh && !onlyReactComp) return {
|
|
25
|
-
code,
|
|
26
|
-
map: normalizedMap
|
|
27
|
-
};
|
|
28
|
-
const avoidSourceMap = map === avoidSourceMapOption;
|
|
29
|
-
const newMap = typeof normalizedMap === "string" ? JSON.parse(normalizedMap) : normalizedMap;
|
|
30
|
-
let newCode = code;
|
|
31
|
-
if (hasRefresh) {
|
|
32
|
-
const refreshHead = removeLineBreaksIfNeeded(`let prevRefreshReg;
|
|
33
|
-
let prevRefreshSig;
|
|
34
|
-
|
|
35
|
-
if (import.meta.hot && !inWebWorker) {
|
|
36
|
-
if (!window.$RefreshReg$) {
|
|
37
|
-
throw new Error(
|
|
38
|
-
"${pluginName} can't detect preamble. Something is wrong."
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
prevRefreshReg = window.$RefreshReg$;
|
|
43
|
-
prevRefreshSig = window.$RefreshSig$;
|
|
44
|
-
window.$RefreshReg$ = RefreshRuntime.getRefreshReg(${JSON.stringify(id)});
|
|
45
|
-
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
`, avoidSourceMap);
|
|
49
|
-
newCode = `${refreshHead}${newCode}
|
|
50
|
-
|
|
51
|
-
if (import.meta.hot && !inWebWorker) {
|
|
52
|
-
window.$RefreshReg$ = prevRefreshReg;
|
|
53
|
-
window.$RefreshSig$ = prevRefreshSig;
|
|
54
|
-
}
|
|
55
|
-
`;
|
|
56
|
-
if (newMap) newMap.mappings = ";".repeat(16) + newMap.mappings;
|
|
57
|
-
}
|
|
58
|
-
const sharedHead = removeLineBreaksIfNeeded(`import * as RefreshRuntime from "${reactRefreshHost}${runtimePublicPath}";
|
|
59
|
-
const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
|
|
60
|
-
|
|
61
|
-
`, avoidSourceMap);
|
|
62
|
-
newCode = `${sharedHead}${newCode}
|
|
63
|
-
|
|
64
|
-
if (import.meta.hot && !inWebWorker) {
|
|
65
|
-
RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
|
|
66
|
-
RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(id)}, currentExports);
|
|
67
|
-
import.meta.hot.accept((nextExports) => {
|
|
68
|
-
if (!nextExports) return;
|
|
69
|
-
const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(id)}, currentExports, nextExports);
|
|
70
|
-
if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
|
|
71
|
-
});
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
`;
|
|
75
|
-
if (newMap) newMap.mappings = ";;;" + newMap.mappings;
|
|
76
|
-
return {
|
|
77
|
-
code: newCode,
|
|
78
|
-
map: newMap
|
|
79
|
-
};
|
|
80
|
-
}
|
|
81
|
-
function removeLineBreaksIfNeeded(code, enabled) {
|
|
82
|
-
return enabled ? code.replace(/\n/g, "") : code;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
//#endregion
|
|
86
8
|
//#region src/transforms.ts
|
|
87
9
|
/**
|
|
88
10
|
* Code transformation utilities for fixing React Native package compatibility issues
|
|
@@ -94,8 +16,7 @@ function removeLineBreaksIfNeeded(code, enabled) {
|
|
|
94
16
|
function analyzeRequireStatements(originalCode, exportedVars) {
|
|
95
17
|
const importMap = /* @__PURE__ */ new Map();
|
|
96
18
|
for (const varName of exportedVars) {
|
|
97
|
-
const
|
|
98
|
-
const requireMatch = requirePattern.exec(originalCode);
|
|
19
|
+
const requireMatch = new RegExp(`${varName}\\s*=\\s*[\\s\\S]*?require\\(['"]([^'"]+)['"]\\)(?:\\.([\\w]+))?`, "g").exec(originalCode);
|
|
99
20
|
if (requireMatch) {
|
|
100
21
|
const [, modulePath, prop] = requireMatch;
|
|
101
22
|
const key = `${modulePath}:${prop || "default"}`;
|
|
@@ -136,8 +57,7 @@ function generateDirectExports(importMap) {
|
|
|
136
57
|
*/
|
|
137
58
|
function transformReanimatedWebUtils(toTransform, originalCode, id, isProduction) {
|
|
138
59
|
if (!isProduction || !id.includes("node_modules/react-native-reanimated") || !id.includes("ReanimatedModule/js-reanimated/webUtils") || !originalCode.includes("export let") || !originalCode.includes("try") || !originalCode.includes("require")) return toTransform;
|
|
139
|
-
const
|
|
140
|
-
const exportedVars = exportLetMatches.map((match) => match[1]);
|
|
60
|
+
const exportedVars = Array.from(originalCode.matchAll(/export let (\w+);/g)).map((match) => match[1]);
|
|
141
61
|
if (exportedVars.length === 0) return toTransform;
|
|
142
62
|
const importMap = analyzeRequireStatements(originalCode, exportedVars);
|
|
143
63
|
toTransform = removeTryCatchRequireBlocks(toTransform);
|
|
@@ -148,20 +68,6 @@ function transformReanimatedWebUtils(toTransform, originalCode, id, isProduction
|
|
|
148
68
|
|
|
149
69
|
//#endregion
|
|
150
70
|
//#region src/index.ts
|
|
151
|
-
const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
|
|
152
|
-
var _userConfig$build;
|
|
153
|
-
if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) return;
|
|
154
|
-
if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) return;
|
|
155
|
-
if ((_userConfig$build = userConfig.build) === null || _userConfig$build === void 0 || (_userConfig$build = _userConfig$build.rollupOptions) === null || _userConfig$build === void 0 ? void 0 : _userConfig$build.onwarn) userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
|
|
156
|
-
else defaultHandler(warning);
|
|
157
|
-
} } });
|
|
158
|
-
const _dirname = dirname(fileURLToPath(import.meta.url));
|
|
159
|
-
const refreshRuntimePath = join(_dirname, "refresh-runtime.js");
|
|
160
|
-
let babel;
|
|
161
|
-
async function loadBabel() {
|
|
162
|
-
if (!babel) babel = await import("@babel/core");
|
|
163
|
-
return babel;
|
|
164
|
-
}
|
|
165
71
|
const extensions = [
|
|
166
72
|
".web.js",
|
|
167
73
|
".web.ts",
|
|
@@ -178,45 +84,17 @@ const extensions = [
|
|
|
178
84
|
];
|
|
179
85
|
const defaultIncludeRE = /\.[tj]sx?$/;
|
|
180
86
|
const defaultExcludeRE = /\/node_modules\/(?!react-native|@react-native|expo|@expo)/;
|
|
181
|
-
const tsRE = /\.tsx?$/;
|
|
182
|
-
const getInitialOptions = (opts) => {
|
|
183
|
-
if (opts.jsxRuntime === "classic") if ("rolldownVersion" in vite) return { oxc: { jsx: {
|
|
184
|
-
runtime: "classic",
|
|
185
|
-
development: false
|
|
186
|
-
} } };
|
|
187
|
-
else return { esbuild: { jsx: "transform" } };
|
|
188
|
-
else return {
|
|
189
|
-
esbuild: {
|
|
190
|
-
jsx: "automatic",
|
|
191
|
-
jsxImportSource: opts.jsxImportSource
|
|
192
|
-
},
|
|
193
|
-
optimizeDeps: "rolldownVersion" in vite ? { rollupOptions: { jsx: { mode: "automatic" } } } : { esbuildOptions: { jsx: "automatic" } }
|
|
194
|
-
};
|
|
195
|
-
};
|
|
196
87
|
function rnw(opts = {}) {
|
|
197
|
-
var _opts$babel;
|
|
198
88
|
const include = opts.include ?? defaultIncludeRE;
|
|
199
89
|
const exclude = opts.exclude ?? defaultExcludeRE;
|
|
200
90
|
const filter = createFilter(include, exclude);
|
|
201
|
-
const jsxImportSource = opts.jsxImportSource ?? "react";
|
|
202
|
-
const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
|
|
203
|
-
const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
|
|
204
|
-
let runningInVite = false;
|
|
205
91
|
let isProduction = true;
|
|
206
|
-
|
|
207
|
-
let skipFastRefresh = true;
|
|
208
|
-
let runPluginOverrides;
|
|
209
|
-
let staticBabelOptions;
|
|
210
|
-
const importReactRE = /\bimport\s+(?:\*\s+as\s+)?React\b/;
|
|
211
|
-
const viteBabel = {
|
|
92
|
+
const rnwPlugin = {
|
|
212
93
|
name: "vite:react-native-web-babel",
|
|
213
94
|
enforce: "pre",
|
|
214
|
-
config(_userConfig,
|
|
215
|
-
|
|
216
|
-
const development = env.mode === "development";
|
|
217
|
-
const initialOptions = getInitialOptions(opts);
|
|
95
|
+
config(_userConfig, { mode }) {
|
|
96
|
+
const development = mode === "development";
|
|
218
97
|
return {
|
|
219
|
-
...initialOptions,
|
|
220
98
|
define: {
|
|
221
99
|
global: "window",
|
|
222
100
|
DEV: JSON.stringify(development),
|
|
@@ -224,26 +102,25 @@ function rnw(opts = {}) {
|
|
|
224
102
|
_frameTimestamp: void 0,
|
|
225
103
|
_WORKLET: false,
|
|
226
104
|
__DEV__: JSON.stringify(development),
|
|
227
|
-
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV ||
|
|
105
|
+
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || mode),
|
|
228
106
|
EXPO_OS: JSON.stringify("web"),
|
|
229
107
|
"process.env.EXPO_OS": JSON.stringify("web"),
|
|
230
108
|
"global.Error": "Error"
|
|
231
109
|
},
|
|
232
|
-
optimizeDeps: {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
},
|
|
110
|
+
optimizeDeps: { esbuildOptions: {
|
|
111
|
+
resolveExtensions: extensions,
|
|
112
|
+
loader: {
|
|
113
|
+
".js": "jsx",
|
|
114
|
+
".mjs": "jsx"
|
|
115
|
+
},
|
|
116
|
+
plugins: [esbuildFlowPlugin(/* @__PURE__ */ new RegExp(/\.(flow|jsx?)$/), (_path) => "jsx")]
|
|
117
|
+
} },
|
|
241
118
|
build: { rollupOptions: {
|
|
242
119
|
treeshake: "safest",
|
|
243
120
|
plugins: [{
|
|
244
|
-
name: "
|
|
245
|
-
async transform(
|
|
246
|
-
if (id.includes("react-native-css-interop")) return { moduleSideEffects: "no-treeshake" };
|
|
121
|
+
name: "treeshake-fix",
|
|
122
|
+
async transform(_code, id) {
|
|
123
|
+
if (id.includes("react-native-css-interop") || id.includes("react-native-css") || id.includes("expo-modules-core")) return { moduleSideEffects: "no-treeshake" };
|
|
247
124
|
}
|
|
248
125
|
}]
|
|
249
126
|
} },
|
|
@@ -254,128 +131,20 @@ function rnw(opts = {}) {
|
|
|
254
131
|
};
|
|
255
132
|
},
|
|
256
133
|
configResolved(config) {
|
|
257
|
-
runningInVite = true;
|
|
258
|
-
projectRoot = config.root;
|
|
259
134
|
isProduction = config.isProduction;
|
|
260
|
-
skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
|
|
261
|
-
if ("jsxPure" in opts) config.logger.warnOnce("[@vitejs/plugin-react] jsxPure was removed. You can configure esbuild.jsxSideEffects directly.");
|
|
262
|
-
const hooks = config.plugins.map((plugin) => {
|
|
263
|
-
var _plugin$api;
|
|
264
|
-
return (_plugin$api = plugin.api) === null || _plugin$api === void 0 ? void 0 : _plugin$api.reactBabel;
|
|
265
|
-
}).filter(defined);
|
|
266
|
-
if (hooks.length > 0) runPluginOverrides = (babelOptions, context) => {
|
|
267
|
-
hooks.forEach((hook) => hook(babelOptions, context, config));
|
|
268
|
-
};
|
|
269
|
-
else if (typeof opts.babel !== "function") staticBabelOptions = createBabelOptions(opts.babel);
|
|
270
|
-
},
|
|
271
|
-
options(options) {
|
|
272
|
-
if (!runningInVite) {
|
|
273
|
-
options.jsx = {
|
|
274
|
-
mode: opts.jsxRuntime,
|
|
275
|
-
importSource: opts.jsxImportSource
|
|
276
|
-
};
|
|
277
|
-
return options;
|
|
278
|
-
}
|
|
279
135
|
},
|
|
280
136
|
transform: {
|
|
281
137
|
filter: { id: {
|
|
282
138
|
include: makeIdFiltersToMatchWithQuery(include),
|
|
283
|
-
exclude:
|
|
139
|
+
exclude: makeIdFiltersToMatchWithQuery(exclude)
|
|
284
140
|
} },
|
|
285
141
|
async handler(code, id, options) {
|
|
286
142
|
const [filepath] = id.split("?");
|
|
287
|
-
if (!
|
|
288
|
-
const ssr = (options === null || options === void 0 ? void 0 : options.ssr) === true;
|
|
289
|
-
const babelOptions = (() => {
|
|
290
|
-
if (staticBabelOptions) return staticBabelOptions;
|
|
291
|
-
const newBabelOptions = createBabelOptions(typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel);
|
|
292
|
-
runPluginOverrides === null || runPluginOverrides === void 0 || runPluginOverrides(newBabelOptions, {
|
|
293
|
-
id,
|
|
294
|
-
ssr
|
|
295
|
-
});
|
|
296
|
-
return newBabelOptions;
|
|
297
|
-
})();
|
|
298
|
-
const plugins = [...babelOptions.plugins];
|
|
299
|
-
const isJSX = filepath.endsWith("x");
|
|
300
|
-
const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
|
|
301
|
-
if (useFastRefresh) plugins.push([await loadPlugin("react-refresh/babel"), { skipEnvCheck: true }]);
|
|
302
|
-
if (opts.jsxRuntime === "classic" && isJSX) {
|
|
303
|
-
if (!isProduction) plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
|
|
304
|
-
}
|
|
305
|
-
const parserPlugins = [...babelOptions.parserOpts.plugins];
|
|
306
|
-
if (!filepath.endsWith(".ts")) parserPlugins.push("jsx");
|
|
307
|
-
if (tsRE.test(filepath)) parserPlugins.push("typescript");
|
|
308
|
-
const babel$1 = await loadBabel();
|
|
143
|
+
if (!filter(filepath)) return;
|
|
309
144
|
let toTransform = code;
|
|
310
145
|
toTransform = transformReanimatedWebUtils(toTransform, code, id, isProduction);
|
|
311
|
-
|
|
312
|
-
...babelOptions,
|
|
313
|
-
root: projectRoot,
|
|
314
|
-
filename: id,
|
|
315
|
-
sourceFileName: filepath,
|
|
316
|
-
retainLines: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
|
|
317
|
-
parserOpts: {
|
|
318
|
-
...babelOptions.parserOpts,
|
|
319
|
-
sourceType: "module",
|
|
320
|
-
allowAwaitOutsideFunction: true,
|
|
321
|
-
plugins: parserPlugins
|
|
322
|
-
},
|
|
323
|
-
generatorOpts: {
|
|
324
|
-
...babelOptions.generatorOpts,
|
|
325
|
-
importAttributesKeyword: "with",
|
|
326
|
-
decoratorsBeforeExport: true
|
|
327
|
-
},
|
|
328
|
-
plugins,
|
|
329
|
-
sourceMaps: true
|
|
330
|
-
});
|
|
331
|
-
if (result) {
|
|
332
|
-
if (!useFastRefresh) return {
|
|
333
|
-
code: result.code,
|
|
334
|
-
map: result.map
|
|
335
|
-
};
|
|
336
|
-
return addRefreshWrapper(result.code, result.map, "@vitejs/plugin-react", id, opts.reactRefreshHost);
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
}
|
|
340
|
-
};
|
|
341
|
-
const dependencies = [
|
|
342
|
-
"react",
|
|
343
|
-
"react-dom",
|
|
344
|
-
jsxImportDevRuntime,
|
|
345
|
-
jsxImportRuntime
|
|
346
|
-
];
|
|
347
|
-
const staticBabelPlugins = typeof opts.babel === "object" ? ((_opts$babel = opts.babel) === null || _opts$babel === void 0 ? void 0 : _opts$babel.plugins) ?? [] : [];
|
|
348
|
-
const reactCompilerPlugin = getReactCompilerPlugin(staticBabelPlugins);
|
|
349
|
-
if (reactCompilerPlugin != null) {
|
|
350
|
-
const reactCompilerRuntimeModule = getReactCompilerRuntimeModule(reactCompilerPlugin);
|
|
351
|
-
dependencies.push(reactCompilerRuntimeModule);
|
|
352
|
-
}
|
|
353
|
-
const viteReactRefresh = {
|
|
354
|
-
name: "vite:react-native-web-refresh",
|
|
355
|
-
enforce: "pre",
|
|
356
|
-
config: (userConfig) => ({
|
|
357
|
-
build: silenceUseClientWarning(userConfig),
|
|
358
|
-
optimizeDeps: { include: dependencies },
|
|
359
|
-
resolve: { dedupe: ["react", "react-dom"] }
|
|
360
|
-
}),
|
|
361
|
-
resolveId: {
|
|
362
|
-
filter: { id: exactRegex(runtimePublicPath) },
|
|
363
|
-
handler(id) {
|
|
364
|
-
if (id === runtimePublicPath) return id;
|
|
146
|
+
return { code: toTransform };
|
|
365
147
|
}
|
|
366
|
-
},
|
|
367
|
-
load: {
|
|
368
|
-
filter: { id: exactRegex(runtimePublicPath) },
|
|
369
|
-
handler(id) {
|
|
370
|
-
if (id === runtimePublicPath) return readFileSync(refreshRuntimePath, "utf-8").replace(/__README_URL__/g, "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react");
|
|
371
|
-
}
|
|
372
|
-
},
|
|
373
|
-
transformIndexHtml(_, config) {
|
|
374
|
-
if (!skipFastRefresh) return [{
|
|
375
|
-
tag: "script",
|
|
376
|
-
attrs: { type: "module" },
|
|
377
|
-
children: getPreambleCode(config.server.config.base)
|
|
378
|
-
}];
|
|
379
148
|
}
|
|
380
149
|
};
|
|
381
150
|
return [
|
|
@@ -383,66 +152,21 @@ function rnw(opts = {}) {
|
|
|
383
152
|
{
|
|
384
153
|
name: "treat-js-files-as-jsx",
|
|
385
154
|
async transform(code, id) {
|
|
386
|
-
if (
|
|
387
|
-
return vite.transformWithEsbuild(code, id, {
|
|
155
|
+
if (id.match(/\.js$/) || id.match(/\.mjs$/)) return vite.transformWithEsbuild(code, id, {
|
|
388
156
|
loader: "jsx",
|
|
389
157
|
jsx: "automatic"
|
|
390
158
|
});
|
|
159
|
+
return null;
|
|
391
160
|
}
|
|
392
161
|
},
|
|
393
162
|
commonjs(),
|
|
394
|
-
|
|
395
|
-
|
|
163
|
+
rnwPlugin,
|
|
164
|
+
react({
|
|
165
|
+
...opts,
|
|
166
|
+
exclude
|
|
167
|
+
})
|
|
396
168
|
];
|
|
397
169
|
}
|
|
398
|
-
rnw.preambleCode = preambleCode;
|
|
399
|
-
const loadedPlugin = /* @__PURE__ */ new Map();
|
|
400
|
-
function loadPlugin(path) {
|
|
401
|
-
const cached = loadedPlugin.get(path);
|
|
402
|
-
if (cached) return cached;
|
|
403
|
-
const promise = import(path).then((module) => {
|
|
404
|
-
const value = module.default || module;
|
|
405
|
-
loadedPlugin.set(path, value);
|
|
406
|
-
return value;
|
|
407
|
-
});
|
|
408
|
-
loadedPlugin.set(path, promise);
|
|
409
|
-
return promise;
|
|
410
|
-
}
|
|
411
|
-
function createBabelOptions(rawOptions) {
|
|
412
|
-
var _babelOptions$parserO;
|
|
413
|
-
const babelOptions = {
|
|
414
|
-
babelrc: false,
|
|
415
|
-
configFile: false,
|
|
416
|
-
...rawOptions
|
|
417
|
-
};
|
|
418
|
-
babelOptions.plugins || (babelOptions.plugins = []);
|
|
419
|
-
babelOptions.presets || (babelOptions.presets = []);
|
|
420
|
-
babelOptions.overrides || (babelOptions.overrides = []);
|
|
421
|
-
babelOptions.parserOpts || (babelOptions.parserOpts = {});
|
|
422
|
-
(_babelOptions$parserO = babelOptions.parserOpts).plugins || (_babelOptions$parserO.plugins = []);
|
|
423
|
-
return babelOptions;
|
|
424
|
-
}
|
|
425
|
-
function defined(value) {
|
|
426
|
-
return value !== void 0;
|
|
427
|
-
}
|
|
428
|
-
function getReactCompilerPlugin(plugins) {
|
|
429
|
-
return plugins.find((p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler");
|
|
430
|
-
}
|
|
431
|
-
function getReactCompilerRuntimeModule(plugin) {
|
|
432
|
-
let moduleName = "react/compiler-runtime";
|
|
433
|
-
if (Array.isArray(plugin)) {
|
|
434
|
-
var _plugin$, _plugin$2, _plugin$3;
|
|
435
|
-
if (((_plugin$ = plugin[1]) === null || _plugin$ === void 0 ? void 0 : _plugin$.target) === "17" || ((_plugin$2 = plugin[1]) === null || _plugin$2 === void 0 ? void 0 : _plugin$2.target) === "18") moduleName = "react-compiler-runtime";
|
|
436
|
-
else if (typeof ((_plugin$3 = plugin[1]) === null || _plugin$3 === void 0 ? void 0 : _plugin$3.runtimeModule) === "string") {
|
|
437
|
-
var _plugin$4;
|
|
438
|
-
moduleName = (_plugin$4 = plugin[1]) === null || _plugin$4 === void 0 ? void 0 : _plugin$4.runtimeModule;
|
|
439
|
-
}
|
|
440
|
-
}
|
|
441
|
-
return moduleName;
|
|
442
|
-
}
|
|
443
|
-
function ensureArray(value) {
|
|
444
|
-
return Array.isArray(value) ? value : [value];
|
|
445
|
-
}
|
|
446
170
|
|
|
447
171
|
//#endregion
|
|
448
|
-
export { rnw
|
|
172
|
+
export { rnw };
|
package/package.json
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.0.
|
|
2
|
+
"version": "0.0.8-0",
|
|
3
3
|
"name": "vite-plugin-rnw",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"main": "./dist/index.cjs",
|
|
6
|
-
"module": "./dist/index.js",
|
|
7
|
-
"types": "./dist/index.d.ts",
|
|
8
5
|
"author": "Daniel Williams",
|
|
9
6
|
"description": "Vite plugin for React Native Web",
|
|
10
7
|
"keywords": [
|
|
@@ -14,13 +11,12 @@
|
|
|
14
11
|
"react-native"
|
|
15
12
|
],
|
|
16
13
|
"files": [
|
|
17
|
-
"dist"
|
|
14
|
+
"dist",
|
|
15
|
+
"LICENSE",
|
|
16
|
+
"README.md"
|
|
18
17
|
],
|
|
19
18
|
"exports": {
|
|
20
|
-
".":
|
|
21
|
-
"import": "./dist/index.js",
|
|
22
|
-
"require": "./dist/index.cjs"
|
|
23
|
-
}
|
|
19
|
+
".": "./dist/index.js"
|
|
24
20
|
},
|
|
25
21
|
"repository": {
|
|
26
22
|
"type": "git",
|
|
@@ -41,12 +37,7 @@
|
|
|
41
37
|
},
|
|
42
38
|
"devDependencies": {
|
|
43
39
|
"@types/node": "^22",
|
|
44
|
-
"
|
|
45
|
-
"react": "^19.1.0",
|
|
46
|
-
"react-dom": "^19.1.0",
|
|
47
|
-
"rolldown": "1.0.0-beta.24",
|
|
48
|
-
"tsdown": "^0.12.9",
|
|
49
|
-
"vite": "^7.0.4"
|
|
40
|
+
"tsdown": "^0.15.12"
|
|
50
41
|
},
|
|
51
42
|
"peerDependencies": {
|
|
52
43
|
"react-native-web": "*",
|
|
@@ -54,15 +45,9 @@
|
|
|
54
45
|
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
|
|
55
46
|
},
|
|
56
47
|
"dependencies": {
|
|
57
|
-
"@babel/core": "^7.28.0",
|
|
58
|
-
"@babel/plugin-transform-flow-strip-types": "^7.27.1",
|
|
59
|
-
"@babel/plugin-transform-modules-commonjs": "^7.27.1",
|
|
60
|
-
"@babel/plugin-transform-react-jsx-self": "^7.27.1",
|
|
61
|
-
"@babel/plugin-transform-react-jsx-source": "^7.27.1",
|
|
62
48
|
"@bunchtogether/vite-plugin-flow": "^1.0.2",
|
|
63
|
-
"@rolldown/pluginutils": "1.0.0-beta.
|
|
64
|
-
"@
|
|
65
|
-
"react-refresh": "^0.17.0",
|
|
49
|
+
"@rolldown/pluginutils": "1.0.0-beta.46",
|
|
50
|
+
"@vitejs/plugin-react": "^5.1.0",
|
|
66
51
|
"vite-plugin-commonjs": "^0.10.4"
|
|
67
52
|
}
|
|
68
53
|
}
|