@unpackjs/plugin-react 2.0.0 → 2.1.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.
- package/dist/index.cjs +202 -78
- package/dist/index.js +181 -42
- package/dist/injectScript.js +82 -0
- package/dist/reactCompilerLoader.mjs +48 -0
- package/dist-types/click-to-component/index.d.ts.map +1 -0
- package/dist-types/index.d.ts.map +1 -0
- package/dist-types/mpa.d.ts.map +1 -0
- package/{dist/react-compiler-loader/index.d.ts → dist-types/reactCompilerLoader.d.ts} +1 -1
- package/dist-types/reactCompilerLoader.d.ts.map +1 -0
- package/dist-types/splitChunks.d.ts.map +1 -0
- package/package.json +13 -11
- package/dist/click-to-component/index.cjs +0 -110
- package/dist/click-to-component/index.d.ts.map +0 -1
- package/dist/click-to-component/index.js +0 -68
- package/dist/click-to-component/injectScript.js +0 -116
- package/dist/index.d.ts.map +0 -1
- package/dist/mpa.cjs +0 -152
- package/dist/mpa.d.ts.map +0 -1
- package/dist/mpa.js +0 -109
- package/dist/react-compiler-loader/index.cjs +0 -95
- package/dist/react-compiler-loader/index.d.ts.map +0 -1
- package/dist/react-compiler-loader/index.js +0 -51
- package/dist/splitChunks.cjs +0 -59
- package/dist/splitChunks.d.ts.map +0 -1
- package/dist/splitChunks.js +0 -27
- /package/{dist → dist-types}/click-to-component/index.d.ts +0 -0
- /package/{dist → dist-types}/index.d.ts +0 -0
- /package/{dist → dist-types}/mpa.d.ts +0 -0
- /package/{dist → dist-types}/splitChunks.d.ts +0 -0
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
let COVER_ID = '__click-to-component__', cover = null, currentDebugSource = null, enabled = !1;
|
|
2
|
+
function debounce(fn, delay = 200) {
|
|
3
|
+
let timer = null;
|
|
4
|
+
return (...args)=>{
|
|
5
|
+
clearTimeout(timer), timer = setTimeout(()=>{
|
|
6
|
+
fn(...args);
|
|
7
|
+
}, delay);
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
function applyStyles(target, styles) {
|
|
11
|
+
Object.entries(styles).forEach(([key, value])=>{
|
|
12
|
+
target.style[key] = value;
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function createCover() {
|
|
16
|
+
(cover = document.createElement('div')).id = '__click-to-component__', applyStyles(cover, {
|
|
17
|
+
position: 'fixed',
|
|
18
|
+
zIndex: '999999',
|
|
19
|
+
background: 'rgba(111, 168, 220, 0.5)',
|
|
20
|
+
display: 'none',
|
|
21
|
+
pointerEvents: 'none'
|
|
22
|
+
}), document.body.appendChild(cover);
|
|
23
|
+
}
|
|
24
|
+
function updateCover(target) {
|
|
25
|
+
if ('function' != typeof target.getBoundingClientRect) {
|
|
26
|
+
currentDebugSource = null;
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
let { top, left, width, height } = target.getBoundingClientRect();
|
|
30
|
+
applyStyles(cover, {
|
|
31
|
+
top: top + 'px',
|
|
32
|
+
left: left + 'px',
|
|
33
|
+
width: width + 'px',
|
|
34
|
+
height: height + 'px',
|
|
35
|
+
display: 'block'
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
function hideCover() {
|
|
39
|
+
cover.style.display = 'none';
|
|
40
|
+
}
|
|
41
|
+
function getFiberWithDebugSourceByTarget(target) {
|
|
42
|
+
let fiberKey = Object.keys(target).find((key)=>key.includes('__reactFiber')), doNext = (fiber, depth = 0)=>{
|
|
43
|
+
if (fiber && !(depth > 10)) {
|
|
44
|
+
if (fiber._debugSource) return fiber;
|
|
45
|
+
if (fiber._debugOwner) return doNext(fiber._debugOwner, depth + 1);
|
|
46
|
+
console.warn('[WARN] click-to-component cannot work with the minified version of React.');
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
return doNext(target[fiberKey]);
|
|
50
|
+
}
|
|
51
|
+
function getClosestNodeFromFiber(fiber) {
|
|
52
|
+
return fiber.stateNode ? fiber.stateNode : getClosestNodeFromFiber(fiber.return);
|
|
53
|
+
}
|
|
54
|
+
function openEditor() {
|
|
55
|
+
if (!currentDebugSource) return;
|
|
56
|
+
let port = window.CLICK_TO_COMPONENT.port, { fileName, lineNumber, columnNumber } = currentDebugSource, url = [
|
|
57
|
+
'http://localhost:',
|
|
58
|
+
port,
|
|
59
|
+
'/?file=',
|
|
60
|
+
fileName,
|
|
61
|
+
'&line=',
|
|
62
|
+
lineNumber,
|
|
63
|
+
'&column=',
|
|
64
|
+
columnNumber
|
|
65
|
+
].join(''), xhr = new XMLHttpRequest();
|
|
66
|
+
xhr.open('GET', url, !0), xhr.send(), xhr.addEventListener('error', ()=>{
|
|
67
|
+
document.createElement('img').src = url;
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
document.addEventListener('mouseover', debounce((e)=>{
|
|
71
|
+
if (!enabled) return;
|
|
72
|
+
let fiber = getFiberWithDebugSourceByTarget(e.target);
|
|
73
|
+
if (!fiber) return;
|
|
74
|
+
let closestNode = getClosestNodeFromFiber(fiber);
|
|
75
|
+
closestNode && (currentDebugSource = fiber._debugSource, updateCover(closestNode));
|
|
76
|
+
}, 30)), document.addEventListener('click', (e)=>{
|
|
77
|
+
enabled && (e.stopPropagation(), e.preventDefault(), openEditor(), hideCover(), enabled = !1);
|
|
78
|
+
}, !0), document.addEventListener('keydown', (e)=>{
|
|
79
|
+
'Alt' === e.key && (enabled = !0);
|
|
80
|
+
}), document.addEventListener('keyup', (e)=>{
|
|
81
|
+
'Alt' === e.key && (enabled = !1, hideCover());
|
|
82
|
+
}), createCover();
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { transformAsync } from "@babel/core";
|
|
2
|
+
import plugin_proposal_decorators from "@babel/plugin-proposal-decorators";
|
|
3
|
+
import plugin_transform_class_properties from "@babel/plugin-transform-class-properties";
|
|
4
|
+
import babel_plugin_react_compiler from "babel-plugin-react-compiler";
|
|
5
|
+
let defaultBabelParsePlugins = [
|
|
6
|
+
'jsx',
|
|
7
|
+
"typescript"
|
|
8
|
+
];
|
|
9
|
+
async function reactCompilerLoader(input, _inputSourceMap) {
|
|
10
|
+
let callback = this.async();
|
|
11
|
+
try {
|
|
12
|
+
let options = this.getOptions(), result = await transformAsync(input, {
|
|
13
|
+
sourceFileName: this.resourcePath,
|
|
14
|
+
filename: this.resourcePath,
|
|
15
|
+
cloneInputAst: !1,
|
|
16
|
+
plugins: [
|
|
17
|
+
[
|
|
18
|
+
babel_plugin_react_compiler,
|
|
19
|
+
options
|
|
20
|
+
],
|
|
21
|
+
[
|
|
22
|
+
plugin_proposal_decorators,
|
|
23
|
+
{
|
|
24
|
+
legacy: !0
|
|
25
|
+
}
|
|
26
|
+
],
|
|
27
|
+
[
|
|
28
|
+
plugin_transform_class_properties
|
|
29
|
+
]
|
|
30
|
+
],
|
|
31
|
+
parserOpts: {
|
|
32
|
+
plugins: [
|
|
33
|
+
...defaultBabelParsePlugins
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
ast: !1,
|
|
37
|
+
sourceMaps: !0,
|
|
38
|
+
configFile: !1,
|
|
39
|
+
babelrc: !1
|
|
40
|
+
});
|
|
41
|
+
if (!result) throw TypeError('babel.transformAsync with react compiler plugin returns null');
|
|
42
|
+
let { code, map } = result;
|
|
43
|
+
callback(null, code ?? void 0, map ?? void 0);
|
|
44
|
+
} catch (e) {
|
|
45
|
+
callback(e);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
export { reactCompilerLoader as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,oBAAoB,EAKzB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AA6BvB,eAAO,MAAM,2BAA2B,GAAU,2BAG/C;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,KAAG,OAAO,CAAC,oBAAoB,CA+B/B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EASL,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AAKvB,eAAO,MAAM,WAAW,iBAAiB,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AACD,eAAO,MAAM,WAAW,GAAI,UAAS,kBAAuB,KAAG,YAqG9D,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mpa.d.ts","sourceRoot":"","sources":["../src/mpa.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAUzB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AAYvB,eAAO,MAAM,cAAc,GAAI,oDAK5B;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;IAC1B,WAAW,EAAE,CAAC,GAAG,OAAO,EAAE,oBAAoB,EAAE,KAAK,oBAAoB,CAAA;IACzE,UAAU,EAAE,GAAG,CAAA;CAChB,KAAG,oBA8GH,CAAA"}
|
|
@@ -2,4 +2,4 @@ export type ReactCompilerLoaderOption = {
|
|
|
2
2
|
target: '17' | '18' | '19';
|
|
3
3
|
};
|
|
4
4
|
export default function reactCompilerLoader(this: any, input: string, _inputSourceMap: any): Promise<void>;
|
|
5
|
-
//# sourceMappingURL=
|
|
5
|
+
//# sourceMappingURL=reactCompilerLoader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reactCompilerLoader.d.ts","sourceRoot":"","sources":["../src/reactCompilerLoader.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,yBAAyB,GAAG;IACtC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC3B,CAAA;AAMD,wBAA8B,mBAAmB,CAAC,IAAI,KAAA,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,iBAiC1F"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"splitChunks.d.ts","sourceRoot":"","sources":["../src/splitChunks.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AAEvB,eAAO,MAAM,sBAAsB,GAAI,2BAGpC;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,yCA2BA,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,34 +1,36 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unpackjs/plugin-react",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|
|
8
|
-
"types": "./dist/index.d.ts",
|
|
8
|
+
"types": "./dist-types/index.d.ts",
|
|
9
9
|
"import": "./dist/index.js",
|
|
10
10
|
"require": "./dist/index.cjs"
|
|
11
|
-
}
|
|
11
|
+
},
|
|
12
|
+
"./package.json": "./package.json"
|
|
12
13
|
},
|
|
13
14
|
"main": "./dist/index.cjs",
|
|
14
|
-
"types": "./dist/index.d.ts",
|
|
15
|
+
"types": "./dist-types/index.d.ts",
|
|
15
16
|
"keywords": [],
|
|
16
17
|
"authors": [],
|
|
17
18
|
"license": "MIT",
|
|
18
19
|
"files": [
|
|
19
20
|
"dist",
|
|
20
|
-
"
|
|
21
|
+
"dist-types"
|
|
21
22
|
],
|
|
22
23
|
"publishConfig": {
|
|
23
24
|
"access": "public"
|
|
24
25
|
},
|
|
25
26
|
"dependencies": {
|
|
26
|
-
"@babel/core": "7.
|
|
27
|
-
"@babel/plugin-proposal-decorators": "7.
|
|
27
|
+
"@babel/core": "7.28.0",
|
|
28
|
+
"@babel/plugin-proposal-decorators": "7.28.0",
|
|
28
29
|
"@babel/plugin-transform-class-properties": "7.27.1",
|
|
29
|
-
"@pmmmwh/react-refresh-webpack-plugin": "0.6.
|
|
30
|
+
"@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
|
|
30
31
|
"@rspack/plugin-react-refresh": "1.4.3",
|
|
31
|
-
"@
|
|
32
|
+
"@svgr/webpack": "8.1.0",
|
|
33
|
+
"@swc/core": "1.12.9",
|
|
32
34
|
"@swc/helpers": "0.5.17",
|
|
33
35
|
"babel-plugin-react-compiler": "latest",
|
|
34
36
|
"launch-editor": "2.10.0",
|
|
@@ -36,10 +38,10 @@
|
|
|
36
38
|
"swc-loader": "0.2.6"
|
|
37
39
|
},
|
|
38
40
|
"devDependencies": {
|
|
39
|
-
"@unpackjs/core": "2.
|
|
41
|
+
"@unpackjs/core": "2.4.2"
|
|
40
42
|
},
|
|
41
43
|
"peerDependencies": {
|
|
42
|
-
"@unpackjs/core": "2.
|
|
44
|
+
"@unpackjs/core": "2.x"
|
|
43
45
|
},
|
|
44
46
|
"scripts": {
|
|
45
47
|
"dev": "rslib build --watch",
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __webpack_require__ = {};
|
|
3
|
-
(()=>{
|
|
4
|
-
__webpack_require__.n = (module)=>{
|
|
5
|
-
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
|
|
6
|
-
__webpack_require__.d(getter, {
|
|
7
|
-
a: getter
|
|
8
|
-
});
|
|
9
|
-
return getter;
|
|
10
|
-
};
|
|
11
|
-
})();
|
|
12
|
-
(()=>{
|
|
13
|
-
__webpack_require__.d = (exports1, definition)=>{
|
|
14
|
-
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: definition[key]
|
|
17
|
-
});
|
|
18
|
-
};
|
|
19
|
-
})();
|
|
20
|
-
(()=>{
|
|
21
|
-
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
22
|
-
})();
|
|
23
|
-
(()=>{
|
|
24
|
-
__webpack_require__.r = (exports1)=>{
|
|
25
|
-
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
26
|
-
value: 'Module'
|
|
27
|
-
});
|
|
28
|
-
Object.defineProperty(exports1, '__esModule', {
|
|
29
|
-
value: true
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
})();
|
|
33
|
-
var __webpack_exports__ = {};
|
|
34
|
-
__webpack_require__.r(__webpack_exports__);
|
|
35
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
36
|
-
applyClickToComponentConfig: ()=>applyClickToComponentConfig
|
|
37
|
-
});
|
|
38
|
-
const external_node_fs_namespaceObject = require("node:fs");
|
|
39
|
-
var external_node_fs_default = /*#__PURE__*/ __webpack_require__.n(external_node_fs_namespaceObject);
|
|
40
|
-
const external_node_http_namespaceObject = require("node:http");
|
|
41
|
-
var external_node_http_default = /*#__PURE__*/ __webpack_require__.n(external_node_http_namespaceObject);
|
|
42
|
-
const external_node_path_namespaceObject = require("node:path");
|
|
43
|
-
var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
|
|
44
|
-
const core_namespaceObject = require("@unpackjs/core");
|
|
45
|
-
const external_launch_editor_namespaceObject = require("launch-editor");
|
|
46
|
-
var external_launch_editor_default = /*#__PURE__*/ __webpack_require__.n(external_launch_editor_namespaceObject);
|
|
47
|
-
const createServer = ()=>new Promise((resolve)=>{
|
|
48
|
-
const server = external_node_http_default().createServer((req, res)=>{
|
|
49
|
-
const params = new URLSearchParams(req.url.slice(1));
|
|
50
|
-
const file = decodeURIComponent(params.get('file'));
|
|
51
|
-
const line = Number(params.get('line'));
|
|
52
|
-
const column = Number(params.get('column'));
|
|
53
|
-
res.writeHead(200, {
|
|
54
|
-
'Access-Control-Allow-Origin': '*',
|
|
55
|
-
'Access-Control-Allow-Methods': '*',
|
|
56
|
-
'Access-Control-Allow-Headers': '*',
|
|
57
|
-
'Access-Control-Allow-Private-Network': 'true'
|
|
58
|
-
});
|
|
59
|
-
res.end('ok');
|
|
60
|
-
external_launch_editor_default()(`${file}:${line}:${column}`);
|
|
61
|
-
});
|
|
62
|
-
(0, core_namespaceObject.getPort)().then((port)=>{
|
|
63
|
-
server.listen(port, ()=>{
|
|
64
|
-
resolve({
|
|
65
|
-
port
|
|
66
|
-
});
|
|
67
|
-
});
|
|
68
|
-
});
|
|
69
|
-
core_namespaceObject.restartCleaners.push(()=>new Promise((resolve)=>server.close(()=>resolve())));
|
|
70
|
-
});
|
|
71
|
-
const applyClickToComponentConfig = async ({ config, unpackConfig })=>{
|
|
72
|
-
const { port } = await createServer();
|
|
73
|
-
const injectScript = external_node_fs_default().readFileSync(external_node_path_default().resolve(__dirname, './injectScript.js'), 'utf-8');
|
|
74
|
-
const scriptTpl = `
|
|
75
|
-
if (!document.querySelector('#__click-to-component__')) {
|
|
76
|
-
const script = document.createElement('script')
|
|
77
|
-
window['CLICK_TO_COMPONENT'] = { port: ${port} }
|
|
78
|
-
script.setAttribute('type', 'text/javascript')
|
|
79
|
-
script.textContent = \`${injectScript}\`
|
|
80
|
-
document.body.appendChild(script)
|
|
81
|
-
}`;
|
|
82
|
-
if (unpackConfig.mpa) Object.values(config.entry).forEach((entryConfig)=>{
|
|
83
|
-
const filePath = entryConfig.import[0];
|
|
84
|
-
const content = external_node_fs_default().readFileSync(filePath, 'utf-8');
|
|
85
|
-
external_node_fs_default().writeFileSync(filePath, `${scriptTpl}\n${content}`, 'utf-8');
|
|
86
|
-
});
|
|
87
|
-
else {
|
|
88
|
-
const realEntryPath = external_node_path_default().resolve(config.context, core_namespaceObject.TEMP_DIR, 'entries', `index.${port}.jsx`);
|
|
89
|
-
const tpl = `
|
|
90
|
-
${scriptTpl}
|
|
91
|
-
import '${(0, core_namespaceObject.getPathInJs)(external_node_path_default().resolve(Object.values(config.entry)[0]))}'
|
|
92
|
-
`;
|
|
93
|
-
const dir = external_node_path_default().dirname(realEntryPath);
|
|
94
|
-
if (!external_node_fs_default().existsSync(dir)) external_node_fs_default().mkdirSync(dir, {
|
|
95
|
-
recursive: true
|
|
96
|
-
});
|
|
97
|
-
external_node_fs_default().writeFileSync(realEntryPath, tpl, 'utf-8');
|
|
98
|
-
config.entry = {
|
|
99
|
-
main: realEntryPath
|
|
100
|
-
};
|
|
101
|
-
}
|
|
102
|
-
return config;
|
|
103
|
-
};
|
|
104
|
-
exports.applyClickToComponentConfig = __webpack_exports__.applyClickToComponentConfig;
|
|
105
|
-
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
106
|
-
"applyClickToComponentConfig"
|
|
107
|
-
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
|
|
108
|
-
Object.defineProperty(exports, '__esModule', {
|
|
109
|
-
value: true
|
|
110
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,YAAY,EAIlB,MAAM,gBAAgB,CAAA;AA6BvB,eAAO,MAAM,2BAA2B,8BAGrC;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,KAAG,OAAO,CAAC,oBAAoB,CAmC/B,CAAA"}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import __rslib_shim_module__ from 'module';
|
|
2
|
-
/*#__PURE__*/ import.meta.url;
|
|
3
|
-
import { fileURLToPath as __webpack_fileURLToPath__ } from "node:url";
|
|
4
|
-
import { dirname as __webpack_dirname__ } from "node:path";
|
|
5
|
-
import * as __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__ from "node:fs";
|
|
6
|
-
import * as __WEBPACK_EXTERNAL_MODULE_node_http_2dc67212__ from "node:http";
|
|
7
|
-
import * as __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__ from "node:path";
|
|
8
|
-
import * as __WEBPACK_EXTERNAL_MODULE__unpackjs_core_a401ca19__ from "@unpackjs/core";
|
|
9
|
-
import * as __WEBPACK_EXTERNAL_MODULE_launch_editor_c6c8c971__ from "launch-editor";
|
|
10
|
-
var click_to_component_dirname = __webpack_dirname__(__webpack_fileURLToPath__(import.meta.url));
|
|
11
|
-
const createServer = ()=>new Promise((resolve)=>{
|
|
12
|
-
const server = __WEBPACK_EXTERNAL_MODULE_node_http_2dc67212__["default"].createServer((req, res)=>{
|
|
13
|
-
const params = new URLSearchParams(req.url.slice(1));
|
|
14
|
-
const file = decodeURIComponent(params.get('file'));
|
|
15
|
-
const line = Number(params.get('line'));
|
|
16
|
-
const column = Number(params.get('column'));
|
|
17
|
-
res.writeHead(200, {
|
|
18
|
-
'Access-Control-Allow-Origin': '*',
|
|
19
|
-
'Access-Control-Allow-Methods': '*',
|
|
20
|
-
'Access-Control-Allow-Headers': '*',
|
|
21
|
-
'Access-Control-Allow-Private-Network': 'true'
|
|
22
|
-
});
|
|
23
|
-
res.end('ok');
|
|
24
|
-
(0, __WEBPACK_EXTERNAL_MODULE_launch_editor_c6c8c971__["default"])(`${file}:${line}:${column}`);
|
|
25
|
-
});
|
|
26
|
-
(0, __WEBPACK_EXTERNAL_MODULE__unpackjs_core_a401ca19__.getPort)().then((port)=>{
|
|
27
|
-
server.listen(port, ()=>{
|
|
28
|
-
resolve({
|
|
29
|
-
port
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
});
|
|
33
|
-
__WEBPACK_EXTERNAL_MODULE__unpackjs_core_a401ca19__.restartCleaners.push(()=>new Promise((resolve)=>server.close(()=>resolve())));
|
|
34
|
-
});
|
|
35
|
-
const applyClickToComponentConfig = async ({ config, unpackConfig })=>{
|
|
36
|
-
const { port } = await createServer();
|
|
37
|
-
const injectScript = __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].readFileSync(__WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].resolve(click_to_component_dirname, './injectScript.js'), 'utf-8');
|
|
38
|
-
const scriptTpl = `
|
|
39
|
-
if (!document.querySelector('#__click-to-component__')) {
|
|
40
|
-
const script = document.createElement('script')
|
|
41
|
-
window['CLICK_TO_COMPONENT'] = { port: ${port} }
|
|
42
|
-
script.setAttribute('type', 'text/javascript')
|
|
43
|
-
script.textContent = \`${injectScript}\`
|
|
44
|
-
document.body.appendChild(script)
|
|
45
|
-
}`;
|
|
46
|
-
if (unpackConfig.mpa) Object.values(config.entry).forEach((entryConfig)=>{
|
|
47
|
-
const filePath = entryConfig.import[0];
|
|
48
|
-
const content = __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].readFileSync(filePath, 'utf-8');
|
|
49
|
-
__WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].writeFileSync(filePath, `${scriptTpl}\n${content}`, 'utf-8');
|
|
50
|
-
});
|
|
51
|
-
else {
|
|
52
|
-
const realEntryPath = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].resolve(config.context, __WEBPACK_EXTERNAL_MODULE__unpackjs_core_a401ca19__.TEMP_DIR, 'entries', `index.${port}.jsx`);
|
|
53
|
-
const tpl = `
|
|
54
|
-
${scriptTpl}
|
|
55
|
-
import '${(0, __WEBPACK_EXTERNAL_MODULE__unpackjs_core_a401ca19__.getPathInJs)(__WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].resolve(Object.values(config.entry)[0]))}'
|
|
56
|
-
`;
|
|
57
|
-
const dir = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].dirname(realEntryPath);
|
|
58
|
-
if (!__WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].existsSync(dir)) __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].mkdirSync(dir, {
|
|
59
|
-
recursive: true
|
|
60
|
-
});
|
|
61
|
-
__WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].writeFileSync(realEntryPath, tpl, 'utf-8');
|
|
62
|
-
config.entry = {
|
|
63
|
-
main: realEntryPath
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
return config;
|
|
67
|
-
};
|
|
68
|
-
export { applyClickToComponentConfig };
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
const COVER_ID = '__click-to-component__';
|
|
2
|
-
let cover = null;
|
|
3
|
-
let currentDebugSource = null;
|
|
4
|
-
let enabled = false;
|
|
5
|
-
function debounce(fn, delay = 200) {
|
|
6
|
-
let timer = null;
|
|
7
|
-
return (...args)=>{
|
|
8
|
-
clearTimeout(timer);
|
|
9
|
-
timer = setTimeout(()=>{
|
|
10
|
-
fn(...args);
|
|
11
|
-
}, delay);
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
function applyStyles(target, styles) {
|
|
15
|
-
Object.entries(styles).forEach(([key, value])=>{
|
|
16
|
-
target.style[key] = value;
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
function createCover() {
|
|
20
|
-
cover = document.createElement('div');
|
|
21
|
-
cover.id = COVER_ID;
|
|
22
|
-
applyStyles(cover, {
|
|
23
|
-
position: 'fixed',
|
|
24
|
-
zIndex: '999999',
|
|
25
|
-
background: 'rgba(120, 170, 210, 0.6)',
|
|
26
|
-
display: 'none',
|
|
27
|
-
pointerEvents: 'none'
|
|
28
|
-
});
|
|
29
|
-
document.body.appendChild(cover);
|
|
30
|
-
}
|
|
31
|
-
function updateCover(target) {
|
|
32
|
-
if ('function' != typeof target.getBoundingClientRect) {
|
|
33
|
-
currentDebugSource = null;
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
const { top, left, width, height } = target.getBoundingClientRect();
|
|
37
|
-
applyStyles(cover, {
|
|
38
|
-
top: top + 'px',
|
|
39
|
-
left: left + 'px',
|
|
40
|
-
width: width + 'px',
|
|
41
|
-
height: height + 'px',
|
|
42
|
-
display: 'block'
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
function hideCover() {
|
|
46
|
-
cover.style.display = 'none';
|
|
47
|
-
}
|
|
48
|
-
function getFiberWithDebugSourceByTarget(target) {
|
|
49
|
-
const fiberKey = Object.keys(target).find((key)=>key.includes('__reactFiber'));
|
|
50
|
-
const maxDepth = 10;
|
|
51
|
-
const doNext = (fiber, depth = 0)=>{
|
|
52
|
-
if (!fiber) return;
|
|
53
|
-
if (depth > maxDepth) return;
|
|
54
|
-
if (fiber._debugSource) return fiber;
|
|
55
|
-
if (fiber._debugOwner) return doNext(fiber._debugOwner, depth + 1);
|
|
56
|
-
console.warn('[WARN] click-to-component cannot work with the minified version of React.');
|
|
57
|
-
};
|
|
58
|
-
return doNext(target[fiberKey]);
|
|
59
|
-
}
|
|
60
|
-
function getClosestNodeFromFiber(fiber) {
|
|
61
|
-
if (fiber.stateNode) return fiber.stateNode;
|
|
62
|
-
return getClosestNodeFromFiber(fiber.return);
|
|
63
|
-
}
|
|
64
|
-
function openEditor() {
|
|
65
|
-
if (!currentDebugSource) return;
|
|
66
|
-
const port = window.CLICK_TO_COMPONENT.port;
|
|
67
|
-
const { fileName, lineNumber, columnNumber } = currentDebugSource;
|
|
68
|
-
const url = [
|
|
69
|
-
'http://localhost:',
|
|
70
|
-
port,
|
|
71
|
-
'/?file=',
|
|
72
|
-
fileName,
|
|
73
|
-
'&line=',
|
|
74
|
-
lineNumber,
|
|
75
|
-
'&column=',
|
|
76
|
-
columnNumber
|
|
77
|
-
].join('');
|
|
78
|
-
const sendXHR = ()=>{
|
|
79
|
-
const xhr = new XMLHttpRequest();
|
|
80
|
-
xhr.open('GET', url, true);
|
|
81
|
-
xhr.send();
|
|
82
|
-
xhr.addEventListener('error', ()=>{
|
|
83
|
-
const img = document.createElement('img');
|
|
84
|
-
img.src = url;
|
|
85
|
-
});
|
|
86
|
-
};
|
|
87
|
-
sendXHR();
|
|
88
|
-
}
|
|
89
|
-
document.addEventListener('mouseover', debounce((e)=>{
|
|
90
|
-
if (!enabled) return;
|
|
91
|
-
const target = e.target;
|
|
92
|
-
const fiber = getFiberWithDebugSourceByTarget(target);
|
|
93
|
-
if (!fiber) return;
|
|
94
|
-
const closestNode = getClosestNodeFromFiber(fiber);
|
|
95
|
-
if (!closestNode) return;
|
|
96
|
-
currentDebugSource = fiber._debugSource;
|
|
97
|
-
updateCover(closestNode);
|
|
98
|
-
}, 30));
|
|
99
|
-
document.addEventListener('click', (e)=>{
|
|
100
|
-
if (!enabled) return;
|
|
101
|
-
e.stopPropagation();
|
|
102
|
-
e.preventDefault();
|
|
103
|
-
openEditor();
|
|
104
|
-
hideCover();
|
|
105
|
-
enabled = false;
|
|
106
|
-
}, true);
|
|
107
|
-
document.addEventListener('keydown', (e)=>{
|
|
108
|
-
if ('Alt' === e.key) enabled = true;
|
|
109
|
-
});
|
|
110
|
-
document.addEventListener('keyup', (e)=>{
|
|
111
|
-
if ('Alt' === e.key) {
|
|
112
|
-
enabled = false;
|
|
113
|
-
hideCover();
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
createCover();
|
package/dist/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,YAAY,EAOlB,MAAM,gBAAgB,CAAA;AAKvB,eAAO,MAAM,WAAW,iBAAiB,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AACD,eAAO,MAAM,WAAW,aAAa,kBAAkB,KAAQ,YAuF9D,CAAA"}
|