@unpackjs/plugin-react 3.2.5 → 3.3.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/injectScript.js +9 -1
  2. package/package.json +4 -5
  3. package/dist/index.cjs +0 -261
package/dist/injectScript.js CHANGED
@@ -41,7 +41,15 @@
41
41
  }(originalFiber);
42
42
  if (!debugFiber) return;
43
43
  let highlightNode = function findDOMOfFiber(fiber) {
44
- return fiber ? fiber.stateNode instanceof Element ? fiber.stateNode : fiber.child ? findDOMOfFiber(fiber.child) : null : null;
44
+ if (!fiber) return null;
45
+ if (fiber.stateNode instanceof Element) return fiber.stateNode;
46
+ let child = fiber.child;
47
+ for(; child;){
48
+ let dom = findDOMOfFiber(child);
49
+ if (dom) return dom;
50
+ child = child.sibling;
51
+ }
52
+ return null;
45
53
  }(debugFiber), displayText = function(source) {
46
54
  if (!source || !source.fileName) return 'Unknown Source';
47
55
  let { fileName, lineNumber, columnNumber } = source, parts = fileName.split(/[\\/]/);
package/package.json CHANGED
@@ -1,17 +1,16 @@
1
1
  {
2
2
  "name": "@unpackjs/plugin-react",
3
- "version": "3.2.5",
3
+ "version": "3.3.0",
4
4
  "description": "React plugin for Unpack",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {
8
8
  "types": "./dist-types/index.d.ts",
9
- "import": "./dist/index.js",
10
- "require": "./dist/index.cjs"
9
+ "import": "./dist/index.js"
11
10
  },
12
11
  "./package.json": "./package.json"
13
12
  },
14
- "main": "./dist/index.cjs",
13
+ "main": "./dist/index.js",
15
14
  "types": "./dist-types/index.d.ts",
16
15
  "keywords": [],
17
16
  "authors": [],
@@ -30,7 +29,7 @@
30
29
  "react-refresh": "0.18.0"
31
30
  },
32
31
  "devDependencies": {
33
- "@unpackjs/core": "3.5.4"
32
+ "@unpackjs/core": "3.6.0"
34
33
  },
35
34
  "peerDependencies": {
36
35
  "@unpackjs/core": "3.x"
package/dist/index.cjs DELETED
@@ -1,261 +0,0 @@
1
- "use strict";
2
- const __rslib_import_meta_url__ = 'undefined' == typeof document ? new (require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
3
- var __webpack_require__ = {};
4
- __webpack_require__.n = (module)=>{
5
- var getter = module && module.__esModule ? ()=>module.default : ()=>module;
6
- return __webpack_require__.d(getter, {
7
- a: getter
8
- }), getter;
9
- }, __webpack_require__.d = (exports1, definition)=>{
10
- for(var key in definition)__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key) && Object.defineProperty(exports1, key, {
11
- enumerable: !0,
12
- get: definition[key]
13
- });
14
- }, __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop), __webpack_require__.r = (exports1)=>{
15
- 'undefined' != typeof Symbol && Symbol.toStringTag && Object.defineProperty(exports1, Symbol.toStringTag, {
16
- value: 'Module'
17
- }), Object.defineProperty(exports1, '__esModule', {
18
- value: !0
19
- });
20
- };
21
- var __webpack_exports__ = {};
22
- __webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, {
23
- pluginReact: ()=>pluginReact,
24
- PLUGIN_NAME: ()=>PLUGIN_NAME
25
- });
26
- const external_node_path_namespaceObject = require("node:path");
27
- var external_node_path_default = __webpack_require__.n(external_node_path_namespaceObject);
28
- const plugin_react_refresh_namespaceObject = require("@rspack/plugin-react-refresh");
29
- var plugin_react_refresh_default = __webpack_require__.n(plugin_react_refresh_namespaceObject);
30
- const core_namespaceObject = require("@unpackjs/core"), external_node_fs_namespaceObject = require("node:fs");
31
- var external_node_fs_default = __webpack_require__.n(external_node_fs_namespaceObject);
32
- const external_node_http_namespaceObject = require("node:http");
33
- var external_node_http_default = __webpack_require__.n(external_node_http_namespaceObject);
34
- const createServer = ()=>new Promise((resolve)=>{
35
- let server = external_node_http_default().createServer((req, res)=>{
36
- let params = new URLSearchParams(req.url.slice(1)), file = decodeURIComponent(params.get('file')), line = Number(params.get('line')), column = Number(params.get('column'));
37
- res.writeHead(200, {
38
- 'Access-Control-Allow-Origin': '*',
39
- 'Access-Control-Allow-Methods': '*',
40
- 'Access-Control-Allow-Headers': '*',
41
- 'Access-Control-Allow-Private-Network': 'true'
42
- }), res.end('ok'), (0, core_namespaceObject.launchEditor)(`${file}:${line}:${column}`);
43
- });
44
- (0, core_namespaceObject.getPort)().then((port)=>{
45
- server.listen(port, ()=>{
46
- resolve({
47
- port
48
- });
49
- });
50
- }), (0, core_namespaceObject.addRestartCleaner)(()=>new Promise((resolve)=>server.close(()=>resolve())));
51
- }), applyClickToComponentConfig = async ({ config, unpackConfig })=>{
52
- let { port } = await createServer(), injectScript = external_node_fs_default().readFileSync(external_node_path_default().resolve(__dirname, './injectScript.js'), 'utf-8'), scriptTpl = `
53
- if (!document.querySelector('#__click-to-component__')) {
54
- const script = document.createElement('script')
55
- window['CLICK_TO_COMPONENT'] = { port: ${port} }
56
- script.setAttribute('type', 'text/javascript')
57
- script.textContent = \`${injectScript}\`
58
- document.body.appendChild(script)
59
- }`;
60
- if (unpackConfig.mpa) Object.values(config.entry).forEach((entryConfig)=>{
61
- let filePath = entryConfig.import[0], content = external_node_fs_default().readFileSync(filePath, 'utf-8');
62
- external_node_fs_default().writeFileSync(filePath, `${scriptTpl}\n${content}`, 'utf-8');
63
- });
64
- else {
65
- let realEntryPath = external_node_path_default().resolve(config.context, unpackConfig._context.cachePath, 'entries', `index.${port}.jsx`), tpl = `
66
- ${scriptTpl}
67
- import '${(0, core_namespaceObject.getPathInJs)(external_node_path_default().resolve(Object.values(config.entry)[0]))}'
68
- `, dir = external_node_path_default().dirname(realEntryPath);
69
- external_node_fs_default().existsSync(dir) || external_node_fs_default().mkdirSync(dir, {
70
- recursive: !0
71
- }), external_node_fs_default().writeFileSync(realEntryPath, tpl, 'utf-8'), config.entry = {
72
- main: realEntryPath
73
- };
74
- }
75
- return config;
76
- }, applyMpaConfig = ({ config, unpackConfig })=>{
77
- let start, entry, html, pagesRoot, tempDirectory = external_node_path_default().join(unpackConfig._context.cachePath, 'mpa'), userOptions = (0, core_namespaceObject.isPlainObject)(unpackConfig.mpa) ? unpackConfig.mpa : {}, { entry: entry1, html: html1 } = (start = performance.now(), entry = {}, html = [], pagesRoot = external_node_path_default().join(unpackConfig.root, 'src', 'pages'), external_node_fs_default().readdirSync(pagesRoot).forEach((filename)=>{
78
- if (filename.startsWith('.')) return;
79
- let indexFilePath = ((dir)=>{
80
- for (let extension of [
81
- '.tsx',
82
- '.jsx'
83
- ]){
84
- let indexFilePath = external_node_path_default().join(dir, `index${extension}`);
85
- if (external_node_fs_default().existsSync(indexFilePath)) return indexFilePath;
86
- }
87
- return null;
88
- })(external_node_path_default().join(pagesRoot, filename));
89
- if (indexFilePath) {
90
- let filePath, pageConfig, pageConfig1 = (filePath = external_node_path_default().join(indexFilePath, '../config.json'), pageConfig = {}, external_node_fs_default().existsSync(filePath) && (pageConfig = JSON.parse(external_node_fs_default().readFileSync(filePath, 'utf-8'))), pageConfig), entryName = !0 === userOptions.lowerCase ? filename.toLowerCase() : filename;
91
- pageConfig1.filename && (entryName = pageConfig1.filename.slice(0, -5)), entry[entryName] = {
92
- import: [
93
- indexFilePath
94
- ]
95
- }, pageConfig1.template && (pageConfig1.template = external_node_path_default().join(indexFilePath, '../', pageConfig1.template)), html.push({
96
- template: unpackConfig.html?.template || void 0,
97
- templateContent: unpackConfig.html?.templateContent || (unpackConfig.html?.template ? void 0 : core_namespaceObject.TEMPLATE_CONTENT),
98
- minify: !1,
99
- filename: `${entryName}.html`,
100
- chunks: [
101
- entryName
102
- ],
103
- ...pageConfig1,
104
- templateParameters: {
105
- mountId: unpackConfig.html?.mountId || '',
106
- title: (0, core_namespaceObject.isFunction)(unpackConfig.html?.title) ? unpackConfig.html?.title({
107
- entryName
108
- }) : unpackConfig.html?.title || '',
109
- headTag: unpackConfig.html?.headTag || '',
110
- ...unpackConfig.html?.templateParameters,
111
- ...pageConfig1.templateParameters
112
- }
113
- });
114
- }
115
- }), (0, core_namespaceObject.isDevServer)() || core_namespaceObject.logger.info(`collect entries in ${(performance.now() - start).toFixed(2)}ms ${core_namespaceObject.colors.dim('[MPA]')}`), {
116
- entry,
117
- html
118
- });
119
- return (0, core_namespaceObject.mergeConfig)(config, {
120
- entry: ((entry)=>{
121
- let root = unpackConfig.root;
122
- (0, core_namespaceObject.removeDir)(external_node_path_default().join(root, tempDirectory));
123
- let globalImport = userOptions.globalImport?.reduce((acc, curr)=>`${acc}\nimport '${(0, core_namespaceObject.getPathInJs)(external_node_path_default().resolve(root, curr))}'`, '') || '', { layout } = userOptions, layoutImport = layout ? `import Layout from '${(0, core_namespaceObject.getPathInJs)(external_node_path_default().resolve(root, layout))}'` : '', layoutJSX = layout ? '<Layout><App /></Layout>' : '<App />', rootElement = `document.getElementById('${unpackConfig.html?.mountId}')`, renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX})`;
124
- return Object.entries(entry).forEach(([entryName, entryConfig])=>{
125
- let filePath = external_node_path_default().join(root, tempDirectory, `${entryName}.jsx`), tpl = `
126
- import React from 'react'
127
- import ReactDOM from 'react-dom/client'
128
- import App from '${(0, core_namespaceObject.getPathInJs)(entryConfig.import[0])}'${layoutImport && `\n${layoutImport}`}
129
- ${globalImport}
130
- ${renderer}
131
- `, dir = external_node_path_default().dirname(filePath);
132
- external_node_fs_default().existsSync(dir) || external_node_fs_default().mkdirSync(dir, {
133
- recursive: !0
134
- }), external_node_fs_default().writeFileSync(filePath, tpl, 'utf-8'), entryConfig.import[0] = filePath;
135
- }), entry;
136
- })(entry1),
137
- plugins: html1.map((h)=>new core_namespaceObject.rspack.HtmlRspackPlugin(h))
138
- });
139
- }, applySplitChunksConfig = ({ config })=>{
140
- let currentSplitChunks = config.optimization?.splitChunks;
141
- if (!currentSplitChunks) return config;
142
- let extraGroups = {};
143
- return extraGroups.react = {
144
- name: 'lib-react',
145
- test: (0, core_namespaceObject.isDevServer)() ? /node_modules[\\/](?:react|react-dom|scheduler|react-refresh|@rspack[\\/]plugin-react-refresh)[\\/]/ : /node_modules[\\/](?:react|react-dom|scheduler)[\\/]/,
146
- priority: 0
147
- }, extraGroups.router = {
148
- name: 'lib-router',
149
- test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
150
- priority: 0
151
- }, config.optimization.splitChunks = {
152
- ...currentSplitChunks,
153
- cacheGroups: {
154
- ...extraGroups,
155
- ...currentSplitChunks.cacheGroups ?? {}
156
- }
157
- }, config;
158
- }, PLUGIN_NAME = 'unpack:react', pluginReact = (options = {})=>{
159
- let { clickToComponent } = options;
160
- return {
161
- name: PLUGIN_NAME,
162
- bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig })=>{
163
- let config = originalConfig;
164
- unpackConfig.mpa && (config = applyMpaConfig({
165
- config,
166
- unpackConfig
167
- })), (0, core_namespaceObject.isDev)() && clickToComponent && (config = await applyClickToComponentConfig({
168
- config,
169
- unpackConfig
170
- })), unpackConfig.performance?.chunkSplit?.strategy === 'split-by-experience' && (config = applySplitChunksConfig({
171
- config
172
- }));
173
- let jsExclude = [
174
- /node_modules[\\/](?!\.unpack)/
175
- ], getSwcOptions = ({ tsx })=>({
176
- jsc: {
177
- parser: {
178
- tsx,
179
- syntax: "typescript",
180
- dynamicImport: !0,
181
- decorators: !0
182
- },
183
- externalHelpers: !0,
184
- transform: {
185
- react: {
186
- runtime: 'automatic',
187
- refresh: (0, core_namespaceObject.isDevServer)()
188
- }
189
- }
190
- },
191
- env: {
192
- targets: (0, core_namespaceObject.esVersionToBrowserslist)(unpackConfig.build.target)
193
- }
194
- });
195
- return mergeConfig(config, {
196
- module: {
197
- rules: [
198
- {
199
- test: /\.(j|t)s$/,
200
- exclude: jsExclude,
201
- use: [
202
- {
203
- loader: 'builtin:swc-loader',
204
- options: getSwcOptions({
205
- tsx: !1
206
- })
207
- }
208
- ]
209
- },
210
- {
211
- test: /\.(j|t)sx$/,
212
- exclude: jsExclude,
213
- use: [
214
- {
215
- loader: 'builtin:swc-loader',
216
- options: getSwcOptions({
217
- tsx: !0
218
- })
219
- }
220
- ]
221
- },
222
- {
223
- test: /\.svg$/i,
224
- type: 'asset',
225
- resourceQuery: /url/
226
- },
227
- {
228
- test: /\.svg$/i,
229
- issuer: /\.[jt]sx?$/,
230
- resourceQuery: {
231
- not: [
232
- /url/
233
- ]
234
- },
235
- use: [
236
- require.resolve('@svgr/webpack')
237
- ]
238
- }
239
- ]
240
- },
241
- plugins: [
242
- (0, core_namespaceObject.isDevServer)() && new (plugin_react_refresh_default())({
243
- overlay: !1
244
- })
245
- ].filter(Boolean),
246
- resolve: {
247
- alias: {
248
- '@swc/helpers': external_node_path_default().dirname(require.resolve('@swc/helpers/package.json'))
249
- }
250
- }
251
- });
252
- }
253
- };
254
- };
255
- for(var __webpack_i__ in exports.PLUGIN_NAME = __webpack_exports__.PLUGIN_NAME, exports.pluginReact = __webpack_exports__.pluginReact, __webpack_exports__)-1 === [
256
- "PLUGIN_NAME",
257
- "pluginReact"
258
- ].indexOf(__webpack_i__) && (exports[__webpack_i__] = __webpack_exports__[__webpack_i__]);
259
- Object.defineProperty(exports, '__esModule', {
260
- value: !0
261
- });