@unpackjs/plugin-react 3.2.5 → 3.3.1

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 (4) hide show
  1. package/dist/index.js +3 -3
  2. package/dist/injectScript.js +12 -7
  3. package/package.json +4 -5
  4. package/dist/index.cjs +0 -261
package/dist/index.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import __rslib_shim_module__ from 'module';
2
2
  let require = __rslib_shim_module__.createRequire(import.meta.url);
3
- import { fileURLToPath as __webpack_fileURLToPath__ } from "node:url";
3
+ import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
4
4
  import plugin_react_refresh from "@rspack/plugin-react-refresh";
5
5
  import { TEMPLATE_CONTENT, addRestartCleaner, colors, esVersionToBrowserslist, getPathInJs, getPort, isDev, isDevServer, isFunction, isPlainObject, launchEditor, logger, mergeConfig as core_mergeConfig, removeDir, rspack } from "@unpackjs/core";
6
6
  import node_fs from "node:fs";
7
7
  import node_http from "node:http";
8
- var click_to_component_dirname = __webpack_dirname__(__webpack_fileURLToPath__(import.meta.url));
8
+ var click_to_component_dirname = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
9
9
  let applyClickToComponentConfig = async ({ config, unpackConfig })=>{
10
10
  let { port } = await new Promise((resolve)=>{
11
11
  let server = node_http.createServer((req, res)=>{
@@ -227,5 +227,5 @@ ${renderer}
227
227
  }
228
228
  };
229
229
  };
230
- import node_path, { dirname as __webpack_dirname__ } from "node:path";
230
+ import node_path, { dirname as __rspack_dirname } from "node:path";
231
231
  export { PLUGIN_NAME, pluginReact };
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(/[\\/]/);
@@ -52,12 +60,10 @@
52
60
  let el = (cover || ((cover = document.createElement('div')).id = '__click-to-component-cover__', applyStyles(cover, {
53
61
  position: 'fixed',
54
62
  zIndex: 2147483647,
55
- background: 'rgba(111, 168, 220, 0.3)',
63
+ background: 'rgba(111, 168, 220, 0.5)',
56
64
  boxSizing: 'border-box',
57
65
  display: 'none',
58
- pointerEvents: 'none',
59
- transition: 'all 0.2s cubic-bezier(0.25, 1, 0.5, 1)',
60
- boxShadow: 'inset 0 0 0 1px #4a90e2, 0 0 4px rgba(74, 144, 226, 0.5)'
66
+ pointerEvents: 'none'
61
67
  }), (nameTag = document.createElement('span')).id = '__click-to-component-name__', applyStyles(nameTag, {
62
68
  position: 'absolute',
63
69
  bottom: '0',
@@ -70,8 +76,7 @@
70
76
  padding: '4px 8px',
71
77
  pointerEvents: 'none',
72
78
  whiteSpace: 'nowrap',
73
- zIndex: 2147483648,
74
- boxShadow: '0 4px 6px rgba(0, 0, 0, 0.3)'
79
+ zIndex: 2147483648
75
80
  }), cover.appendChild(nameTag), document.documentElement.appendChild(cover)), cover);
76
81
  applyStyles(el, {
77
82
  top: rect.top + 'px',
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.1",
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.7.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
- });