vite-plugin-react-native 0.0.1 → 0.0.3

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/dist/index.cjs CHANGED
@@ -1,5 +1,16 @@
1
1
  'use strict';
2
2
 
3
+ var path = require('path');
4
+ var fs = require('fs');
5
+ var module$1 = require('module');
6
+ var url = require('url');
7
+
8
+ var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
9
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
+
11
+ var path__default = /*#__PURE__*/_interopDefault(path);
12
+ var fs__default = /*#__PURE__*/_interopDefault(fs);
13
+
3
14
  // index.ts
4
15
  function uniqueStrings(values) {
5
16
  const out = [];
@@ -12,17 +23,12 @@ function uniqueStrings(values) {
12
23
  }
13
24
  return out;
14
25
  }
15
- var reactNativeResolveExtensions = [
26
+ var webResolveExtensions = [
16
27
  ".web.mjs",
17
28
  ".web.js",
18
29
  ".web.ts",
19
30
  ".web.tsx",
20
31
  ".web.jsx",
21
- ".native.mjs",
22
- ".native.js",
23
- ".native.ts",
24
- ".native.tsx",
25
- ".native.jsx",
26
32
  ".mjs",
27
33
  ".js",
28
34
  ".ts",
@@ -30,60 +36,46 @@ var reactNativeResolveExtensions = [
30
36
  ".jsx",
31
37
  ".json"
32
38
  ];
33
- var useLatestCallbackShimModule = `
34
- import * as React from 'react';
35
- const useClientLayoutEffect =
36
- typeof document !== 'undefined' ||
37
- (typeof navigator !== 'undefined' && navigator.product === 'ReactNative')
38
- ? React.useLayoutEffect
39
- : React.useEffect;
40
- export default function useLatestCallback(callback) {
41
- const ref = React.useRef(callback);
42
- const latestCallback = React.useRef(function latestCallback() {
43
- return ref.current.apply(this, arguments);
44
- }).current;
45
- useClientLayoutEffect(() => {
46
- ref.current = callback;
47
- });
48
- return latestCallback;
49
- }
50
- `;
51
- function latestCallbackEsbuildShim() {
52
- const namespace = "virtual-use-latest-callback";
53
- return {
54
- name: "use-latest-callback-esbuild-shim",
55
- setup(build) {
56
- build.onResolve({ filter: /^use-latest-callback$/ }, () => {
57
- return { path: "use-latest-callback", namespace };
58
- });
59
- build.onLoad({ filter: /.*/, namespace }, () => {
60
- return { contents: useLatestCallbackShimModule, loader: "js" };
61
- });
62
- }
63
- };
64
- }
65
39
  function reactNative() {
66
40
  const safeAreaId = "virtual:rn-safe-area-context";
67
41
  const resolvedSafeAreaId = "\0" + safeAreaId;
68
42
  const screensId = "virtual:rn-screens";
69
43
  const resolvedScreensId = "\0" + screensId;
70
- const latestCallbackId = "virtual:use-latest-callback";
71
- const resolvedLatestCallbackId = "\0" + latestCallbackId;
44
+ const pluginDir = path__default.default.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))));
45
+ const require2 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
72
46
  return {
73
- name: "vite-plugin-react-native",
47
+ name: "react-native",
74
48
  enforce: "pre",
75
49
  config(userConfig, env) {
76
50
  const mode = env.mode;
77
51
  const isProd = mode === "production";
52
+ const projectRoot = userConfig.root ? path__default.default.resolve(userConfig.root) : process.cwd();
53
+ const routerDomPackageJson = require2.resolve("react-native-router-dom/package.json", { paths: [projectRoot, pluginDir] });
54
+ const routerDomDir = path__default.default.dirname(routerDomPackageJson);
55
+ const routerDomSourceEntry = path__default.default.join(routerDomDir, "src/index.ts");
56
+ const routerDomDistEntry = path__default.default.join(routerDomDir, "dist/index.mjs");
57
+ const routerDomEntry = fs__default.default.existsSync(routerDomSourceEntry) ? routerDomSourceEntry : routerDomDistEntry;
58
+ const userAlias = userConfig.resolve?.alias;
59
+ const userAliasArray = Array.isArray(userAlias) ? userAlias : userAlias && typeof userAlias === "object" ? Object.entries(userAlias).map(([find, replacement]) => ({ find, replacement })) : [];
78
60
  const userResolveExtensions = Array.isArray(userConfig.resolve?.extensions) ? userConfig.resolve?.extensions : null;
79
61
  const userOptimizeDepsExclude = Array.isArray(userConfig.optimizeDeps?.exclude) ? userConfig.optimizeDeps?.exclude : [];
80
62
  const userOptimizeDepsInclude = Array.isArray(userConfig.optimizeDeps?.include) ? userConfig.optimizeDeps?.include : [];
81
- const userEsbuildPlugins = Array.isArray(userConfig.optimizeDeps?.esbuildOptions?.plugins) ? userConfig.optimizeDeps?.esbuildOptions?.plugins : [];
82
63
  const config = {
83
64
  resolve: {
84
- alias: [{ find: /^react-native$/, replacement: "react-native-web" }],
65
+ alias: [
66
+ ...userAliasArray,
67
+ { find: /^react-native$/, replacement: "react-native-web" },
68
+ { find: /^react-native-router-dom$/, replacement: routerDomEntry }
69
+ ],
85
70
  dedupe: ["react", "react-dom"],
86
- extensions: userResolveExtensions ? void 0 : reactNativeResolveExtensions
71
+ extensions: userResolveExtensions ? void 0 : webResolveExtensions
72
+ },
73
+ build: {
74
+ commonjsOptions: {
75
+ esmExternals: true,
76
+ requireReturnsDefault: "auto",
77
+ transformMixedEsModules: true
78
+ }
87
79
  },
88
80
  define: {
89
81
  __DEV__: JSON.stringify(!isProd),
@@ -96,7 +88,9 @@ function reactNative() {
96
88
  "react",
97
89
  "react-dom",
98
90
  "react/jsx-runtime",
99
- "react/jsx-dev-runtime"
91
+ "react/jsx-dev-runtime",
92
+ "hoist-non-react-statics",
93
+ "invariant"
100
94
  ]),
101
95
  exclude: uniqueStrings([
102
96
  ...userOptimizeDepsExclude,
@@ -104,10 +98,7 @@ function reactNative() {
104
98
  "react-native-gesture-handler",
105
99
  "react-native-safe-area-context",
106
100
  "react-native-screens"
107
- ]),
108
- esbuildOptions: {
109
- plugins: [...userEsbuildPlugins, latestCallbackEsbuildShim()]
110
- }
101
+ ])
111
102
  }
112
103
  };
113
104
  return config;
@@ -115,14 +106,9 @@ function reactNative() {
115
106
  resolveId(source) {
116
107
  if (source === "react-native-safe-area-context") return resolvedSafeAreaId;
117
108
  if (source === "react-native-screens") return resolvedScreensId;
118
- if (source === "use-latest-callback") return resolvedLatestCallbackId;
119
- if (source === "use-latest-callback/esm.mjs") return resolvedLatestCallbackId;
120
- if (source.endsWith("use-latest-callback/lib/src/index.js")) return resolvedLatestCallbackId;
121
- if (source === "./lib/src/index.js") return resolvedLatestCallbackId;
122
109
  return null;
123
110
  },
124
111
  load(id) {
125
- const normalizedId = id.split("?")[0];
126
112
  if (id === resolvedSafeAreaId) {
127
113
  return `
128
114
  import * as React from 'react';
@@ -170,19 +156,23 @@ export function enableScreens() {}
170
156
  export function screensEnabled() { return false; }
171
157
  export function enableFreeze() {}
172
158
  export function freezeEnabled() { return false; }
173
- export function Screen(props) { return React.createElement(View, props); }
174
- export function ScreenContainer(props) { return React.createElement(View, props); }
159
+ function withFlex1Style(style) {
160
+ if (!style) return [{ flex: 1 }];
161
+ if (Array.isArray(style)) return [{ flex: 1 }, ...style];
162
+ return [{ flex: 1 }, style];
163
+ }
164
+ export function Screen(props) {
165
+ const p = props ?? {};
166
+ const { style, ...rest } = p;
167
+ return React.createElement(View, { ...rest, style: withFlex1Style(style) });
168
+ }
169
+ export function ScreenContainer(props) {
170
+ const p = props ?? {};
171
+ const { style, ...rest } = p;
172
+ return React.createElement(View, { ...rest, style: withFlex1Style(style) });
173
+ }
175
174
  `;
176
175
  }
177
- if (id === resolvedLatestCallbackId) {
178
- return useLatestCallbackShimModule;
179
- }
180
- if (normalizedId.includes("/node_modules/use-latest-callback/lib/src/index.js")) {
181
- return useLatestCallbackShimModule;
182
- }
183
- if (normalizedId.includes("/node_modules/use-latest-callback/esm.mjs")) {
184
- return useLatestCallbackShimModule;
185
- }
186
176
  return null;
187
177
  }
188
178
  };
package/dist/index.js CHANGED
@@ -1,3 +1,8 @@
1
+ import path from 'path';
2
+ import fs from 'fs';
3
+ import { createRequire } from 'module';
4
+ import { fileURLToPath } from 'url';
5
+
1
6
  // index.ts
2
7
  function uniqueStrings(values) {
3
8
  const out = [];
@@ -10,17 +15,12 @@ function uniqueStrings(values) {
10
15
  }
11
16
  return out;
12
17
  }
13
- var reactNativeResolveExtensions = [
18
+ var webResolveExtensions = [
14
19
  ".web.mjs",
15
20
  ".web.js",
16
21
  ".web.ts",
17
22
  ".web.tsx",
18
23
  ".web.jsx",
19
- ".native.mjs",
20
- ".native.js",
21
- ".native.ts",
22
- ".native.tsx",
23
- ".native.jsx",
24
24
  ".mjs",
25
25
  ".js",
26
26
  ".ts",
@@ -28,60 +28,46 @@ var reactNativeResolveExtensions = [
28
28
  ".jsx",
29
29
  ".json"
30
30
  ];
31
- var useLatestCallbackShimModule = `
32
- import * as React from 'react';
33
- const useClientLayoutEffect =
34
- typeof document !== 'undefined' ||
35
- (typeof navigator !== 'undefined' && navigator.product === 'ReactNative')
36
- ? React.useLayoutEffect
37
- : React.useEffect;
38
- export default function useLatestCallback(callback) {
39
- const ref = React.useRef(callback);
40
- const latestCallback = React.useRef(function latestCallback() {
41
- return ref.current.apply(this, arguments);
42
- }).current;
43
- useClientLayoutEffect(() => {
44
- ref.current = callback;
45
- });
46
- return latestCallback;
47
- }
48
- `;
49
- function latestCallbackEsbuildShim() {
50
- const namespace = "virtual-use-latest-callback";
51
- return {
52
- name: "use-latest-callback-esbuild-shim",
53
- setup(build) {
54
- build.onResolve({ filter: /^use-latest-callback$/ }, () => {
55
- return { path: "use-latest-callback", namespace };
56
- });
57
- build.onLoad({ filter: /.*/, namespace }, () => {
58
- return { contents: useLatestCallbackShimModule, loader: "js" };
59
- });
60
- }
61
- };
62
- }
63
31
  function reactNative() {
64
32
  const safeAreaId = "virtual:rn-safe-area-context";
65
33
  const resolvedSafeAreaId = "\0" + safeAreaId;
66
34
  const screensId = "virtual:rn-screens";
67
35
  const resolvedScreensId = "\0" + screensId;
68
- const latestCallbackId = "virtual:use-latest-callback";
69
- const resolvedLatestCallbackId = "\0" + latestCallbackId;
36
+ const pluginDir = path.dirname(fileURLToPath(import.meta.url));
37
+ const require2 = createRequire(import.meta.url);
70
38
  return {
71
- name: "vite-plugin-react-native",
39
+ name: "react-native",
72
40
  enforce: "pre",
73
41
  config(userConfig, env) {
74
42
  const mode = env.mode;
75
43
  const isProd = mode === "production";
44
+ const projectRoot = userConfig.root ? path.resolve(userConfig.root) : process.cwd();
45
+ const routerDomPackageJson = require2.resolve("react-native-router-dom/package.json", { paths: [projectRoot, pluginDir] });
46
+ const routerDomDir = path.dirname(routerDomPackageJson);
47
+ const routerDomSourceEntry = path.join(routerDomDir, "src/index.ts");
48
+ const routerDomDistEntry = path.join(routerDomDir, "dist/index.mjs");
49
+ const routerDomEntry = fs.existsSync(routerDomSourceEntry) ? routerDomSourceEntry : routerDomDistEntry;
50
+ const userAlias = userConfig.resolve?.alias;
51
+ const userAliasArray = Array.isArray(userAlias) ? userAlias : userAlias && typeof userAlias === "object" ? Object.entries(userAlias).map(([find, replacement]) => ({ find, replacement })) : [];
76
52
  const userResolveExtensions = Array.isArray(userConfig.resolve?.extensions) ? userConfig.resolve?.extensions : null;
77
53
  const userOptimizeDepsExclude = Array.isArray(userConfig.optimizeDeps?.exclude) ? userConfig.optimizeDeps?.exclude : [];
78
54
  const userOptimizeDepsInclude = Array.isArray(userConfig.optimizeDeps?.include) ? userConfig.optimizeDeps?.include : [];
79
- const userEsbuildPlugins = Array.isArray(userConfig.optimizeDeps?.esbuildOptions?.plugins) ? userConfig.optimizeDeps?.esbuildOptions?.plugins : [];
80
55
  const config = {
81
56
  resolve: {
82
- alias: [{ find: /^react-native$/, replacement: "react-native-web" }],
57
+ alias: [
58
+ ...userAliasArray,
59
+ { find: /^react-native$/, replacement: "react-native-web" },
60
+ { find: /^react-native-router-dom$/, replacement: routerDomEntry }
61
+ ],
83
62
  dedupe: ["react", "react-dom"],
84
- extensions: userResolveExtensions ? void 0 : reactNativeResolveExtensions
63
+ extensions: userResolveExtensions ? void 0 : webResolveExtensions
64
+ },
65
+ build: {
66
+ commonjsOptions: {
67
+ esmExternals: true,
68
+ requireReturnsDefault: "auto",
69
+ transformMixedEsModules: true
70
+ }
85
71
  },
86
72
  define: {
87
73
  __DEV__: JSON.stringify(!isProd),
@@ -94,7 +80,9 @@ function reactNative() {
94
80
  "react",
95
81
  "react-dom",
96
82
  "react/jsx-runtime",
97
- "react/jsx-dev-runtime"
83
+ "react/jsx-dev-runtime",
84
+ "hoist-non-react-statics",
85
+ "invariant"
98
86
  ]),
99
87
  exclude: uniqueStrings([
100
88
  ...userOptimizeDepsExclude,
@@ -102,10 +90,7 @@ function reactNative() {
102
90
  "react-native-gesture-handler",
103
91
  "react-native-safe-area-context",
104
92
  "react-native-screens"
105
- ]),
106
- esbuildOptions: {
107
- plugins: [...userEsbuildPlugins, latestCallbackEsbuildShim()]
108
- }
93
+ ])
109
94
  }
110
95
  };
111
96
  return config;
@@ -113,14 +98,9 @@ function reactNative() {
113
98
  resolveId(source) {
114
99
  if (source === "react-native-safe-area-context") return resolvedSafeAreaId;
115
100
  if (source === "react-native-screens") return resolvedScreensId;
116
- if (source === "use-latest-callback") return resolvedLatestCallbackId;
117
- if (source === "use-latest-callback/esm.mjs") return resolvedLatestCallbackId;
118
- if (source.endsWith("use-latest-callback/lib/src/index.js")) return resolvedLatestCallbackId;
119
- if (source === "./lib/src/index.js") return resolvedLatestCallbackId;
120
101
  return null;
121
102
  },
122
103
  load(id) {
123
- const normalizedId = id.split("?")[0];
124
104
  if (id === resolvedSafeAreaId) {
125
105
  return `
126
106
  import * as React from 'react';
@@ -168,19 +148,23 @@ export function enableScreens() {}
168
148
  export function screensEnabled() { return false; }
169
149
  export function enableFreeze() {}
170
150
  export function freezeEnabled() { return false; }
171
- export function Screen(props) { return React.createElement(View, props); }
172
- export function ScreenContainer(props) { return React.createElement(View, props); }
151
+ function withFlex1Style(style) {
152
+ if (!style) return [{ flex: 1 }];
153
+ if (Array.isArray(style)) return [{ flex: 1 }, ...style];
154
+ return [{ flex: 1 }, style];
155
+ }
156
+ export function Screen(props) {
157
+ const p = props ?? {};
158
+ const { style, ...rest } = p;
159
+ return React.createElement(View, { ...rest, style: withFlex1Style(style) });
160
+ }
161
+ export function ScreenContainer(props) {
162
+ const p = props ?? {};
163
+ const { style, ...rest } = p;
164
+ return React.createElement(View, { ...rest, style: withFlex1Style(style) });
165
+ }
173
166
  `;
174
167
  }
175
- if (id === resolvedLatestCallbackId) {
176
- return useLatestCallbackShimModule;
177
- }
178
- if (normalizedId.includes("/node_modules/use-latest-callback/lib/src/index.js")) {
179
- return useLatestCallbackShimModule;
180
- }
181
- if (normalizedId.includes("/node_modules/use-latest-callback/esm.mjs")) {
182
- return useLatestCallbackShimModule;
183
- }
184
168
  return null;
185
169
  }
186
170
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-react-native",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "Vite plugin for React Native web compatibility",
5
5
  "keywords": [
6
6
  "vite",