@unpackjs/plugin-react 3.2.4 → 3.2.5

package/dist/index.cjs

@@ -62,7 +62,7 @@ if (!document.querySelector('#__click-to-component__')) {
         external_node_fs_default().writeFileSync(filePath, `${scriptTpl}\n${content}`, 'utf-8');
     });
     else {
-        let realEntryPath = external_node_path_default().resolve(config.context, core_namespaceObject.TEMP_DIR, 'entries', `index.${port}.jsx`), tpl = `
+        let realEntryPath = external_node_path_default().resolve(config.context, unpackConfig._context.cachePath, 'entries', `index.${port}.jsx`), tpl = `
 ${scriptTpl}
 import '${(0, core_namespaceObject.getPathInJs)(external_node_path_default().resolve(Object.values(config.entry)[0]))}'
 `, dir = external_node_path_default().dirname(realEntryPath);
@@ -74,7 +74,7 @@ import '${(0, core_namespaceObject.getPathInJs)(external_node_path_default().res
     }
     return config;
 }, applyMpaConfig = ({ config, unpackConfig })=>{
-    let start, entry, html, pagesRoot, tempDirectory = external_node_path_default().join(core_namespaceObject.TEMP_DIR, '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)=>{
+    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)=>{
         if (filename.startsWith('.')) return;
         let indexFilePath = ((dir)=>{
             for (let extension of [

package/dist/index.js

@@ -2,7 +2,7 @@ import __rslib_shim_module__ from 'module';
 let require = __rslib_shim_module__.createRequire(import.meta.url);
 import { fileURLToPath as __webpack_fileURLToPath__ } from "node:url";
 import plugin_react_refresh from "@rspack/plugin-react-refresh";
-import { TEMPLATE_CONTENT, TEMP_DIR, addRestartCleaner, colors, esVersionToBrowserslist, getPathInJs, getPort, isDev, isDevServer, isFunction, isPlainObject, launchEditor, logger, mergeConfig as core_mergeConfig, removeDir, rspack } from "@unpackjs/core";
+import { TEMPLATE_CONTENT, addRestartCleaner, colors, esVersionToBrowserslist, getPathInJs, getPort, isDev, isDevServer, isFunction, isPlainObject, launchEditor, logger, mergeConfig as core_mergeConfig, removeDir, rspack } from "@unpackjs/core";
 import node_fs from "node:fs";
 import node_http from "node:http";
 var click_to_component_dirname = __webpack_dirname__(__webpack_fileURLToPath__(import.meta.url));
@@ -37,7 +37,7 @@ if (!document.querySelector('#__click-to-component__')) {
         node_fs.writeFileSync(filePath, `${scriptTpl}\n${content}`, 'utf-8');
     });
     else {
-        let realEntryPath = node_path.resolve(config.context, TEMP_DIR, 'entries', `index.${port}.jsx`), tpl = `
+        let realEntryPath = node_path.resolve(config.context, unpackConfig._context.cachePath, 'entries', `index.${port}.jsx`), tpl = `
 ${scriptTpl}
 import '${getPathInJs(node_path.resolve(Object.values(config.entry)[0]))}'
 `, dir = node_path.dirname(realEntryPath);
@@ -55,7 +55,7 @@ import '${getPathInJs(node_path.resolve(Object.values(config.entry)[0]))}'
         bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig })=>{
             let config = originalConfig;
             unpackConfig.mpa && (config = (({ config, unpackConfig })=>{
-                let start, entry, html, pagesRoot, tempDirectory = node_path.join(TEMP_DIR, 'mpa'), userOptions = isPlainObject(unpackConfig.mpa) ? unpackConfig.mpa : {}, { entry: entry1, html: html1 } = (start = performance.now(), entry = {}, html = [], pagesRoot = node_path.join(unpackConfig.root, 'src', 'pages'), node_fs.readdirSync(pagesRoot).forEach((filename)=>{
+                let start, entry, html, pagesRoot, tempDirectory = node_path.join(unpackConfig._context.cachePath, 'mpa'), userOptions = isPlainObject(unpackConfig.mpa) ? unpackConfig.mpa : {}, { entry: entry1, html: html1 } = (start = performance.now(), entry = {}, html = [], pagesRoot = node_path.join(unpackConfig.root, 'src', 'pages'), node_fs.readdirSync(pagesRoot).forEach((filename)=>{
                     if (filename.startsWith('.')) return;
                     let indexFilePath = ((dir)=>{
                         for (let extension of [

package/dist/injectScript.js

@@ -1,75 +1,113 @@
-const COVER_ID = '__click-to-component__';
-let cover = null, currentDebugSource = null, enabled = !1;
-function debounce(fn, delay = 200) {
-    let timer = null;
-    return (...args)=>{
-        clearTimeout(timer), timer = setTimeout(()=>{
-            fn(...args);
-        }, delay);
-    };
-}
-function applyStyles(target, styles) {
-    Object.entries(styles).forEach(([key, value])=>{
-        target.style[key] = value;
-    });
-}
-function createCover() {
-    (cover = document.createElement('div')).id = '__click-to-component__', applyStyles(cover, {
-        position: 'fixed',
-        zIndex: '999999',
-        background: 'rgba(111, 168, 220, 0.5)',
-        display: 'none',
-        pointerEvents: 'none'
-    }), document.body.appendChild(cover);
-}
-function updateCover(target) {
-    if ('function' != typeof target.getBoundingClientRect) {
-        currentDebugSource = null;
-        return;
+!function() {
+    let cover = null, nameTag = null, currentDebugSource = null, cachedFiberKey = null, isEnabled = !1, debounceTimer = null;
+    function applyStyles(target, styles) {
+        for(let key in styles)target.style[key] = styles[key];
+    }
+    function hideCover() {
+        cover && (cover.style.display = 'none');
     }
-    let { top, left, width, height } = target.getBoundingClientRect();
-    applyStyles(cover, {
-        top: top + 'px',
-        left: left + 'px',
-        width: width + 'px',
-        height: height + 'px',
-        display: 'block'
-    });
-}
-function hideCover() {
-    cover.style.display = 'none';
-}
-function getFiberWithDebugSourceByTarget(target) {
-    let fiberKey = Object.keys(target).find((key)=>key.includes('__reactFiber')), doNext = (fiber, depth = 0)=>{
-        if (fiber && !(depth > 10)) {
-            if (fiber._debugSource) return fiber;
-            if (fiber._debugOwner) return doNext(fiber._debugOwner, depth + 1);
-            console.warn('[WARN] click-to-component cannot work with the minified version of React.');
-        }
+    let handleClick = (e)=>{
+        0 === e.button && (e.preventDefault(), e.stopPropagation(), function() {
+            if (!currentDebugSource) return;
+            let port = window.CLICK_TO_COMPONENT?.port, { fileName, lineNumber, columnNumber } = currentDebugSource, url = new URL('http://localhost:' + port + '/');
+            url.searchParams.set('file', fileName), url.searchParams.set('line', lineNumber), url.searchParams.set('column', columnNumber), fetch(url.toString()).catch(()=>{
+                new Image().src = url.toString();
+            });
+        }(), stopInspect());
+    }, debouncedMouseOver = (e)=>{
+        debounceTimer && clearTimeout(debounceTimer), debounceTimer = setTimeout(()=>{
+            ((e)=>{
+                if (!isEnabled) return;
+                let target = e.composedPath && e.composedPath().length > 0 ? e.composedPath()[0] : e.target;
+                if (3 === target.nodeType && (target = target.parentElement), !target || 1 !== target.nodeType) return;
+                let originalFiber = function(target) {
+                    if (!target || 'object' != typeof target) return null;
+                    if (cachedFiberKey && target[cachedFiberKey]) return target[cachedFiberKey];
+                    try {
+                        cachedFiberKey = Object.keys(target).find((key)=>key.startsWith('__reactFiber$'));
+                    } catch  {
+                        return null;
+                    }
+                    return target[cachedFiberKey];
+                }(target);
+                if (!originalFiber) return;
+                let debugFiber = function(fiber) {
+                    let curr = fiber;
+                    for(; curr;){
+                        if (curr._debugSource) return curr;
+                        curr = curr.return || curr._debugOwner;
+                    }
+                    return null;
+                }(originalFiber);
+                if (!debugFiber) return;
+                let highlightNode = function findDOMOfFiber(fiber) {
+                    return fiber ? fiber.stateNode instanceof Element ? fiber.stateNode : fiber.child ? findDOMOfFiber(fiber.child) : null : null;
+                }(debugFiber), displayText = function(source) {
+                    if (!source || !source.fileName) return 'Unknown Source';
+                    let { fileName, lineNumber, columnNumber } = source, parts = fileName.split(/[\\/]/);
+                    return (parts.length > 3 ? parts.slice(-3).join('/') : parts.join('/')) + ':' + lineNumber + ':' + columnNumber;
+                }(currentDebugSource = debugFiber._debugSource);
+                !function(rect, text) {
+                    if (!rect) return hideCover();
+                    let el = (cover || ((cover = document.createElement('div')).id = '__click-to-component-cover__', applyStyles(cover, {
+                        position: 'fixed',
+                        zIndex: 2147483647,
+                        background: 'rgba(111, 168, 220, 0.3)',
+                        boxSizing: 'border-box',
+                        display: 'none',
+                        pointerEvents: 'none',
+                        transition: 'all 0.2s cubic-bezier(0.25, 1, 0.5, 1)',
+                        boxShadow: 'inset 0 0 0 1px #4a90e2, 0 0 4px rgba(74, 144, 226, 0.5)'
+                    }), (nameTag = document.createElement('span')).id = '__click-to-component-name__', applyStyles(nameTag, {
+                        position: 'absolute',
+                        bottom: '0',
+                        right: '0',
+                        background: '#2d3748',
+                        color: '#fff',
+                        fontSize: '12px',
+                        fontFamily: 'Consolas, Monaco, "Andale Mono", monospace',
+                        fontWeight: 'bold',
+                        padding: '4px 8px',
+                        pointerEvents: 'none',
+                        whiteSpace: 'nowrap',
+                        zIndex: 2147483648,
+                        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.3)'
+                    }), cover.appendChild(nameTag), document.documentElement.appendChild(cover)), cover);
+                    applyStyles(el, {
+                        top: rect.top + 'px',
+                        left: rect.left + 'px',
+                        width: rect.width + 'px',
+                        height: rect.height + 'px',
+                        display: 'block'
+                    }), nameTag.innerText = text, nameTag.style.left = 'auto', nameTag.style.right = 'auto', nameTag.style.top = 'auto', nameTag.style.bottom = 'auto';
+                    let tagWidth = nameTag.offsetWidth, viewportHeight = window.innerHeight;
+                    rect.right - tagWidth < 0 ? nameTag.style.left = '0' : nameTag.style.right = '0';
+                    rect.height < 50 || rect.width < tagWidth + 20 ? rect.bottom + 28 <= viewportHeight ? nameTag.style.bottom = "-28px" : nameTag.style.top = "-28px" : nameTag.style.bottom = '0';
+                }(highlightNode.getBoundingClientRect(), displayText);
+            })(e);
+        }, 30);
     };
-    return doNext(target[fiberKey]);
-}
-function getClosestNodeFromFiber(fiber) {
-    return fiber.stateNode ? fiber.stateNode : getClosestNodeFromFiber(fiber.return);
-}
-function openEditor() {
-    let xhr;
-    if (!currentDebugSource) return;
-    let port = window.CLICK_TO_COMPONENT.port, { fileName, lineNumber, columnNumber } = currentDebugSource, url = "http://localhost:" + port + "/?file=" + fileName + "&line=" + lineNumber + "&column=" + columnNumber;
-    (xhr = new XMLHttpRequest()).open('GET', url, !0), xhr.send(), xhr.addEventListener('error', ()=>{
-        document.createElement('img').src = url;
-    });
-}
-document.addEventListener('mouseover', debounce((e)=>{
-    if (!enabled) return;
-    let fiber = getFiberWithDebugSourceByTarget(e.target);
-    if (!fiber) return;
-    let closestNode = getClosestNodeFromFiber(fiber);
-    closestNode && (currentDebugSource = fiber._debugSource, updateCover(closestNode));
-}, 30)), document.addEventListener('click', (e)=>{
-    enabled && (e.stopPropagation(), e.preventDefault(), openEditor(), hideCover(), enabled = !1);
-}, !0), document.addEventListener('keydown', (e)=>{
-    'Alt' === e.key && (enabled = !0);
-}), document.addEventListener('keyup', (e)=>{
-    'Alt' === e.key && (enabled = !1, hideCover());
-}), createCover();
+    function stopInspect() {
+        isEnabled && (isEnabled = !1, document.body.style.cursor = '', debounceTimer && clearTimeout(debounceTimer), hideCover(), currentDebugSource = null, document.removeEventListener('mouseover', debouncedMouseOver, {
+            capture: !0
+        }), document.removeEventListener('click', handleClick, {
+            capture: !0
+        }), window.removeEventListener('scroll', hideCover, {
+            capture: !0
+        }), window.removeEventListener('resize', hideCover));
+    }
+    document.addEventListener('keydown', (e)=>{
+        ('Alt' === e.key || 'Option' === e.key) && (isEnabled || (isEnabled = !0, document.body.style.cursor = 'crosshair', document.addEventListener('mouseover', debouncedMouseOver, {
+            capture: !0
+        }), document.addEventListener('click', handleClick, {
+            capture: !0
+        }), window.addEventListener('scroll', hideCover, {
+            capture: !0,
+            passive: !0
+        }), window.addEventListener('resize', hideCover, {
+            passive: !0
+        })));
+    }), document.addEventListener('keyup', (e)=>{
+        ('Alt' === e.key || 'Option' === e.key) && stopInspect();
+    }), window.addEventListener('blur', stopInspect), console.log('%c[Click-To-Component] Ready.', 'color: #888');
+}();

package/dist-types/click-to-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,oBAAoB,EAKzB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AA4BvB,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,oBAAoB,EAIzB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AA4BvB,eAAO,MAAM,2BAA2B,GAAU,2BAG/C;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,KAAG,OAAO,CAAC,oBAAoB,CAoC/B,CAAA"}

package/dist-types/mpa.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mpa.d.ts","sourceRoot":"","sources":["../src/mpa.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAYzB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AAYvB,eAAO,MAAM,cAAc,GAAI,2BAG5B;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,KAAG,oBA2GH,CAAA"}
+{"version":3,"file":"mpa.d.ts","sourceRoot":"","sources":["../src/mpa.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAWzB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AAYvB,eAAO,MAAM,cAAc,GAAI,2BAG5B;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,KAAG,oBA2GH,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unpackjs/plugin-react",
-  "version": "3.2.4",
+  "version": "3.2.5",
   "description": "React plugin for Unpack",
   "type": "module",
   "exports": {
@@ -30,7 +30,7 @@
     "react-refresh": "0.18.0"
   },
   "devDependencies": {
-    "@unpackjs/core": "3.5.0"
+    "@unpackjs/core": "3.5.4"
   },
   "peerDependencies": {
     "@unpackjs/core": "3.x"