@jsenv/plugin-react 1.2.17 → 1.2.18
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jsenv/plugin-react",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.18",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@babel/plugin-transform-react-jsx": "7.21.5",
|
|
28
28
|
"@babel/plugin-transform-react-jsx-development": "7.18.6",
|
|
29
|
-
"@jsenv/ast": "3.0.
|
|
29
|
+
"@jsenv/ast": "3.0.8",
|
|
30
30
|
"@jsenv/plugin-commonjs": "2.0.5",
|
|
31
31
|
"@jsenv/sourcemap": "1.0.10",
|
|
32
32
|
"@jsenv/url-meta": "8.1.0",
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import RefreshRuntime from "react-refresh"
|
|
1
|
+
import RefreshRuntime from "react-refresh";
|
|
2
2
|
|
|
3
3
|
export const installReactRefresh = (url) => {
|
|
4
4
|
if (!self.__react_refresh_installed__) {
|
|
5
|
-
throw new Error("react refresh not installed")
|
|
5
|
+
throw new Error("react refresh not installed");
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
let prevRefreshReg
|
|
9
|
-
let prevRefreshSig
|
|
10
|
-
prevRefreshReg = self.$RefreshReg
|
|
11
|
-
prevRefreshSig = self.$RefreshSig
|
|
8
|
+
let prevRefreshReg;
|
|
9
|
+
let prevRefreshSig;
|
|
10
|
+
prevRefreshReg = self.$RefreshReg$;
|
|
11
|
+
prevRefreshSig = self.$RefreshSig$;
|
|
12
12
|
self.$RefreshReg$ = (type, id) => {
|
|
13
|
-
RefreshRuntime.register(type, `${url} ${id}`)
|
|
14
|
-
}
|
|
15
|
-
self.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform
|
|
13
|
+
RefreshRuntime.register(type, `${url} ${id}`);
|
|
14
|
+
};
|
|
15
|
+
self.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
|
|
16
16
|
|
|
17
17
|
return {
|
|
18
18
|
end: () => {
|
|
19
|
-
self.$RefreshReg$ = prevRefreshReg
|
|
20
|
-
self.$RefreshSig$ = prevRefreshSig
|
|
19
|
+
self.$RefreshReg$ = prevRefreshReg;
|
|
20
|
+
self.$RefreshSig$ = prevRefreshSig;
|
|
21
21
|
},
|
|
22
22
|
acceptCallback: () => {
|
|
23
23
|
if (!self.__react_refresh_timeout__) {
|
|
24
24
|
self.__react_refresh_timeout__ = setTimeout(() => {
|
|
25
|
-
self.__react_refresh_timeout__ = 0
|
|
26
|
-
RefreshRuntime.performReactRefresh()
|
|
27
|
-
}, 30)
|
|
25
|
+
self.__react_refresh_timeout__ = 0;
|
|
26
|
+
RefreshRuntime.performReactRefresh();
|
|
27
|
+
}, 30);
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
|
-
}
|
|
31
|
-
}
|
|
30
|
+
};
|
|
31
|
+
};
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import RefreshRuntime from "react-refresh"
|
|
1
|
+
import RefreshRuntime from "react-refresh";
|
|
2
2
|
|
|
3
3
|
// see https://github.com/vitejs/vite/blob/0858450b2a258b216ae9aa797cc02e9a0d4eb0af/packages/plugin-react/src/fast-refresh.ts#L29-L35
|
|
4
|
-
RefreshRuntime.injectIntoGlobalHook(self)
|
|
5
|
-
self.$RefreshReg$ = () => {}
|
|
6
|
-
self.$RefreshSig$ = () => (type) => type
|
|
4
|
+
RefreshRuntime.injectIntoGlobalHook(self);
|
|
5
|
+
self.$RefreshReg$ = () => {};
|
|
6
|
+
self.$RefreshSig$ = () => (type) => type;
|
|
7
7
|
const debounce = (fn, delay) => {
|
|
8
|
-
let handle
|
|
8
|
+
let handle;
|
|
9
9
|
return () => {
|
|
10
|
-
clearTimeout(handle)
|
|
11
|
-
handle = setTimeout(fn, delay)
|
|
12
|
-
}
|
|
13
|
-
}
|
|
10
|
+
clearTimeout(handle);
|
|
11
|
+
handle = setTimeout(fn, delay);
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
14
|
// see https://github.com/vitejs/vite/blob/0858450b2a258b216ae9aa797cc02e9a0d4eb0af/packages/plugin-react/src/fast-refresh.ts#L16-L26
|
|
15
15
|
RefreshRuntime.performReactRefresh = debounce(
|
|
16
16
|
RefreshRuntime.performReactRefresh,
|
|
17
17
|
16,
|
|
18
|
-
)
|
|
18
|
+
);
|
|
19
19
|
|
|
20
|
-
self.__react_refresh_installed__ = true
|
|
20
|
+
self.__react_refresh_installed__ = true;
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
* - https://github.com/vitejs/vite/blob/main/packages/plugin-react/src/index.ts
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
-
import { URL_META } from "@jsenv/url-meta"
|
|
6
|
-
import { jsenvPluginCommonJs } from "@jsenv/plugin-commonjs"
|
|
7
|
-
import { createMagicSource, composeTwoSourcemaps } from "@jsenv/sourcemap"
|
|
8
|
-
import { applyBabelPlugins } from "@jsenv/ast"
|
|
5
|
+
import { URL_META } from "@jsenv/url-meta";
|
|
6
|
+
import { jsenvPluginCommonJs } from "@jsenv/plugin-commonjs";
|
|
7
|
+
import { createMagicSource, composeTwoSourcemaps } from "@jsenv/sourcemap";
|
|
8
|
+
import { applyBabelPlugins } from "@jsenv/ast";
|
|
9
9
|
|
|
10
|
-
import { jsenvPluginReactRefreshPreamble } from "./jsenv_plugin_react_refresh_preamble.js"
|
|
10
|
+
import { jsenvPluginReactRefreshPreamble } from "./jsenv_plugin_react_refresh_preamble.js";
|
|
11
11
|
|
|
12
12
|
export const jsenvPluginReact = ({
|
|
13
13
|
asJsModuleLogLevel,
|
|
@@ -41,8 +41,8 @@ export const jsenvPluginReact = ({
|
|
|
41
41
|
jsxTranspilation,
|
|
42
42
|
refreshInstrumentation,
|
|
43
43
|
}),
|
|
44
|
-
]
|
|
45
|
-
}
|
|
44
|
+
];
|
|
45
|
+
};
|
|
46
46
|
|
|
47
47
|
const jsenvPluginJsxAndRefresh = ({
|
|
48
48
|
jsxTranspilation,
|
|
@@ -52,17 +52,17 @@ const jsenvPluginJsxAndRefresh = ({
|
|
|
52
52
|
jsxTranspilation = {
|
|
53
53
|
"./**/*.jsx": true,
|
|
54
54
|
"./**/*.tsx": true,
|
|
55
|
-
}
|
|
55
|
+
};
|
|
56
56
|
} else if (jsxTranspilation === false) {
|
|
57
|
-
jsxTranspilation = {}
|
|
57
|
+
jsxTranspilation = {};
|
|
58
58
|
}
|
|
59
59
|
if (refreshInstrumentation === true) {
|
|
60
60
|
refreshInstrumentation = {
|
|
61
61
|
"./**/*.jsx": true,
|
|
62
62
|
"./**/*.tsx": true,
|
|
63
|
-
}
|
|
63
|
+
};
|
|
64
64
|
} else if (refreshInstrumentation === false) {
|
|
65
|
-
refreshInstrumentation = {}
|
|
65
|
+
refreshInstrumentation = {};
|
|
66
66
|
}
|
|
67
67
|
const associations = URL_META.resolveAssociations(
|
|
68
68
|
{
|
|
@@ -70,7 +70,7 @@ const jsenvPluginJsxAndRefresh = ({
|
|
|
70
70
|
refreshInstrumentation,
|
|
71
71
|
},
|
|
72
72
|
"file://",
|
|
73
|
-
)
|
|
73
|
+
);
|
|
74
74
|
|
|
75
75
|
return {
|
|
76
76
|
name: "jsenv:jsx_and_refresh",
|
|
@@ -80,12 +80,12 @@ const jsenvPluginJsxAndRefresh = ({
|
|
|
80
80
|
const urlMeta = URL_META.applyAssociations({
|
|
81
81
|
url: urlInfo.url,
|
|
82
82
|
associations,
|
|
83
|
-
})
|
|
84
|
-
const jsxEnabled = urlMeta.jsxTranspilation
|
|
83
|
+
});
|
|
84
|
+
const jsxEnabled = urlMeta.jsxTranspilation;
|
|
85
85
|
const refreshEnabled = context.dev
|
|
86
86
|
? urlMeta.refreshInstrumentation &&
|
|
87
87
|
!urlInfo.content.includes("import.meta.hot.decline()")
|
|
88
|
-
: false
|
|
88
|
+
: false;
|
|
89
89
|
const babelPlugins = [
|
|
90
90
|
...(jsxEnabled
|
|
91
91
|
? [
|
|
@@ -103,12 +103,12 @@ const jsenvPluginJsxAndRefresh = ({
|
|
|
103
103
|
...(refreshEnabled
|
|
104
104
|
? [["react-refresh/babel", { skipEnvCheck: true }]]
|
|
105
105
|
: []),
|
|
106
|
-
]
|
|
106
|
+
];
|
|
107
107
|
const { code, map } = await applyBabelPlugins({
|
|
108
108
|
babelPlugins,
|
|
109
109
|
urlInfo,
|
|
110
|
-
})
|
|
111
|
-
const magicSource = createMagicSource(code)
|
|
110
|
+
});
|
|
111
|
+
const magicSource = createMagicSource(code);
|
|
112
112
|
if (jsxEnabled) {
|
|
113
113
|
// "@babel/plugin-transform-react-jsx" is injecting some of these 3 imports into the code:
|
|
114
114
|
// 1. import { jsx } from "react/jsx-runtime"
|
|
@@ -121,28 +121,28 @@ const jsenvPluginJsxAndRefresh = ({
|
|
|
121
121
|
`"react"`,
|
|
122
122
|
`"react/jsx-dev-runtime"`,
|
|
123
123
|
`"react/jsx-runtime"`,
|
|
124
|
-
]
|
|
124
|
+
];
|
|
125
125
|
for (const importSpecifier of injectedSpecifiers) {
|
|
126
|
-
let index = code.indexOf(importSpecifier)
|
|
126
|
+
let index = code.indexOf(importSpecifier);
|
|
127
127
|
while (index > -1) {
|
|
128
|
-
const specifier = importSpecifier.slice(1, -1)
|
|
128
|
+
const specifier = importSpecifier.slice(1, -1);
|
|
129
129
|
const [injectedReference] = context.referenceUtils.inject({
|
|
130
130
|
type: "js_import",
|
|
131
131
|
expectedType: "js_module",
|
|
132
132
|
specifier,
|
|
133
|
-
})
|
|
133
|
+
});
|
|
134
134
|
magicSource.replace({
|
|
135
135
|
start: index,
|
|
136
136
|
end: index + importSpecifier.length,
|
|
137
137
|
replacement: injectedReference.generatedSpecifier,
|
|
138
|
-
})
|
|
139
|
-
index = code.indexOf(importSpecifier, index + 1)
|
|
138
|
+
});
|
|
139
|
+
index = code.indexOf(importSpecifier, index + 1);
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
143
|
if (refreshEnabled) {
|
|
144
|
-
const hasReg = /\$RefreshReg\$\(/.test(code)
|
|
145
|
-
const hasSig = /\$RefreshSig\$\(/.test(code)
|
|
144
|
+
const hasReg = /\$RefreshReg\$\(/.test(code);
|
|
145
|
+
const hasSig = /\$RefreshSig\$\(/.test(code);
|
|
146
146
|
if (hasReg || hasSig) {
|
|
147
147
|
const [reactRefreshClientReference] = context.referenceUtils.inject(
|
|
148
148
|
{
|
|
@@ -150,20 +150,20 @@ const jsenvPluginJsxAndRefresh = ({
|
|
|
150
150
|
expectedType: "js_module",
|
|
151
151
|
specifier: "@jsenv/plugin-react/src/client/react_refresh.js",
|
|
152
152
|
},
|
|
153
|
-
)
|
|
153
|
+
);
|
|
154
154
|
magicSource.prepend(`import { installReactRefresh } from ${
|
|
155
155
|
reactRefreshClientReference.generatedSpecifier
|
|
156
156
|
}
|
|
157
157
|
const __react_refresh__ = installReactRefresh(${JSON.stringify(urlInfo.url)})
|
|
158
|
-
`)
|
|
158
|
+
`);
|
|
159
159
|
if (hasReg) {
|
|
160
160
|
magicSource.append(`
|
|
161
161
|
__react_refresh__.end()
|
|
162
|
-
import.meta.hot.accept(__react_refresh__.acceptCallback)`)
|
|
162
|
+
import.meta.hot.accept(__react_refresh__.acceptCallback)`);
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
165
|
}
|
|
166
|
-
const result = magicSource.toContentAndSourcemap()
|
|
166
|
+
const result = magicSource.toContentAndSourcemap();
|
|
167
167
|
return {
|
|
168
168
|
content: result.content,
|
|
169
169
|
sourcemap: await composeTwoSourcemaps(map, result.sourcemap),
|
|
@@ -171,8 +171,8 @@ import.meta.hot.accept(__react_refresh__.acceptCallback)`)
|
|
|
171
171
|
// I don't know exactly what is resulting in bad sourcemaps
|
|
172
172
|
// but I suspect hooknames or prefresh to be responsible
|
|
173
173
|
sourcemapIsWrong: jsxEnabled && refreshEnabled,
|
|
174
|
-
}
|
|
174
|
+
};
|
|
175
175
|
},
|
|
176
176
|
},
|
|
177
|
-
}
|
|
178
|
-
}
|
|
177
|
+
};
|
|
178
|
+
};
|
|
@@ -3,26 +3,26 @@ import {
|
|
|
3
3
|
stringifyHtmlAst,
|
|
4
4
|
injectHtmlNodeAsEarlyAsPossible,
|
|
5
5
|
createHtmlNode,
|
|
6
|
-
} from "@jsenv/ast"
|
|
6
|
+
} from "@jsenv/ast";
|
|
7
7
|
|
|
8
8
|
export const jsenvPluginReactRefreshPreamble = () => {
|
|
9
9
|
const reactRefreshPreambleClientFileUrl = new URL(
|
|
10
10
|
"./client/react_refresh_preamble.js",
|
|
11
11
|
import.meta.url,
|
|
12
|
-
).href
|
|
12
|
+
).href;
|
|
13
13
|
|
|
14
14
|
return {
|
|
15
15
|
name: "jsenv:react_refresh_preamble",
|
|
16
16
|
appliesDuring: "dev",
|
|
17
17
|
transformUrlContent: {
|
|
18
18
|
html: (urlInfo, context) => {
|
|
19
|
-
const htmlAst = parseHtmlString(urlInfo.content)
|
|
19
|
+
const htmlAst = parseHtmlString(urlInfo.content);
|
|
20
20
|
const [reactRefreshPreambleReference] = context.referenceUtils.inject({
|
|
21
21
|
type: "script",
|
|
22
22
|
subtype: "js_module",
|
|
23
23
|
expectedType: "js_module",
|
|
24
24
|
specifier: reactRefreshPreambleClientFileUrl,
|
|
25
|
-
})
|
|
25
|
+
});
|
|
26
26
|
injectHtmlNodeAsEarlyAsPossible(
|
|
27
27
|
htmlAst,
|
|
28
28
|
createHtmlNode({
|
|
@@ -31,10 +31,10 @@ export const jsenvPluginReactRefreshPreamble = () => {
|
|
|
31
31
|
src: reactRefreshPreambleReference.generatedSpecifier,
|
|
32
32
|
}),
|
|
33
33
|
"jsenv:react_refresh_preamble",
|
|
34
|
-
)
|
|
35
|
-
const htmlModified = stringifyHtmlAst(htmlAst)
|
|
36
|
-
return htmlModified
|
|
34
|
+
);
|
|
35
|
+
const htmlModified = stringifyHtmlAst(htmlAst);
|
|
36
|
+
return htmlModified;
|
|
37
37
|
},
|
|
38
38
|
},
|
|
39
|
-
}
|
|
40
|
-
}
|
|
39
|
+
};
|
|
40
|
+
};
|
package/src/main.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { jsenvPluginReact } from "./jsenv_plugin_react.js"
|
|
1
|
+
export { jsenvPluginReact } from "./jsenv_plugin_react.js";
|