chore: Update playgrounds

zjxxxxxxxxx · Dec 1, 2024 · 02a5d86 · 02a5d86
1 parent af47d57
commit 02a5d86
Show file tree

Hide file tree

Showing 190 changed files with 1,283 additions and 2,140 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ Whether you are a `React` developer, a `Vue` developer, or a developer who uses
 
 ### Use plugin
 
-> The example uses [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) as a reference. In other cases, the only choice is different, and the usage is exactly the same.
+> The example uses [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-react) as a reference. In other cases, the only choice is different, and the usage is exactly the same.
 
 First you need to install the plugin into the project.
 
@@ -71,11 +71,7 @@ import OpenEditor from '@open-editor/vite';
 
 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        retainLines: true,
-      },
-    }),
+    react(),
     OpenEditor({
       // options
     }),
@@ -189,17 +185,16 @@ window.addEventListener('openeditor', (e) => {
 
 ## Playgrounds
 
-| Source code                                                                                        | Online trial                                                                                                                                                                    |
-| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`rollup/react15`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) |
-| [`rollup/vue2`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2)       | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2)    |
-| [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react)         | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react)     |
-| [`vite/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue)             | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue)       |
-| [`vite/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt)           | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt)      |
-| [`webpack/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react)   | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react)  |
-| [`webpack/nextjs`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) |
-| [`webpack/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue)       | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue)    |
-| [`webpack/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nuxt)     | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nuxt)   |
+| Source code                                                                                         | Online trial                                                                                                                                                                    |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`rollup/react15`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/rollup-react15) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) |
+| [`rollup/vue2`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/rollup-vue2)       | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2)    |
+| [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-react)         | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react)     |
+| [`vite/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-vue)             | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue)       |
+| [`vite/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-nuxt)           | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt)      |
+| [`webpack/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-react)   | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react)  |
+| [`webpack/nextjs`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-nextjs) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) |
+| [`webpack/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-vue)       | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue)    |
 
 ## Thanks
 

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -53,7 +53,7 @@
 
 ### 使用插件
 
-> 示例以 [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) 作为参考，其他情况下只是选择不同而已，使用方式是完全一致的。
+> 示例以 [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-react) 作为参考，其他情况下只是选择不同而已，使用方式是完全一致的。
 
 首先需要将插件安装到项目中。
 
@@ -71,11 +71,7 @@ import OpenEditor from '@open-editor/vite';
 
 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        retainLines: true,
-      },
-    }),
+    react(),
     OpenEditor({
       // options
     }),
@@ -189,17 +185,16 @@ window.addEventListener('openeditor', (e) => {
 
 ## 演练场
 
-| 源代码                                                                                             | 在线试玩                                                                                                                                                                        |
-| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`rollup/react15`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) |
-| [`rollup/vue2`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2)       | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2)    |
-| [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react)         | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react)     |
-| [`vite/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue)             | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue)       |
-| [`vite/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt)           | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt)      |
-| [`webpack/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react)   | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react)  |
-| [`webpack/nextjs`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) |
-| [`webpack/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue)       | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue)    |
-| [`webpack/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nuxt)     | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nuxt)   |
+| 源代码                                                                                              | 在线试玩                                                                                                                                                                        |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`rollup/react15`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/rollup-react15) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) |
+| [`rollup/vue2`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/rollup-vue2)       | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2)    |
+| [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-react)         | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react)     |
+| [`vite/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-vue)             | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue)       |
+| [`vite/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-nuxt)           | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt)      |
+| [`webpack/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-react)   | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react)  |
+| [`webpack/nextjs`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-nextjs) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) |
+| [`webpack/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-vue)       | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue)    |
 
 ## 致谢
 

diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "install:ci": "pnpm install --ignore-scripts"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=18"
   },
   "packageManager": "[email protected]",
   "keywords": [

diff --git a/packages/client/src/bridge/treeOpenBridge.tsx b/packages/client/src/bridge/treeOpenBridge.tsx
@@ -4,34 +4,36 @@ import { appendChild } from '../utils/dom';
 import { onMessage, postMessage } from '../utils/message';
 import { getOptions } from '../options';
 import { resolveSource, type CodeSource } from '../resolve';
-import { TREE_OPEN_CROSS_IFRAME } from '../constants';
+import { CURRENT_INSPECT_ID, TREE_OPEN_CROSS_IFRAME } from '../constants';
 import { on, off } from '../event';
 
-export const treeOpenBridge = crossIframeBridge<[CodeSource]>({
+export const treeOpenBridge = crossIframeBridge<[CodeSource, string]>({
   setup() {
-    onMessage<[CodeSource]>(TREE_OPEN_CROSS_IFRAME, (args) => {
+    onMessage<[CodeSource, string]>(TREE_OPEN_CROSS_IFRAME, (args) => {
       treeOpenBridge.emit(args, isTopWindow);
     });
   },
   emitMiddlewares: [
-    (_, next) => {
-      const { once } = getOptions();
+    ([, activeId], next) => {
+      if (activeId === CURRENT_INSPECT_ID) {
+        const { once } = getOptions();
 
-      const overlay = <div className="oe-prevent-event-overlay" />;
-      const eventOpts = {
-        target: once ? overlay : window,
-        capture: true,
-      };
+        const overlay = <div className="oe-prevent-event-overlay" />;
+        const eventOpts = {
+          target: once ? overlay : window,
+          capture: true,
+        };
 
-      const remove = () => {
-        off('pointerup', remove, eventOpts);
-        off('pointerout', remove, eventOpts);
-        overlay.remove();
-      };
-      on('pointerup', remove, eventOpts);
-      on('pointerout', remove, eventOpts);
+        const remove = () => {
+          off('pointerup', remove, eventOpts);
+          off('pointerout', remove, eventOpts);
+          overlay.remove();
+        };
+        on('pointerup', remove, eventOpts);
+        on('pointerout', remove, eventOpts);
 
-      appendChild(document.body, overlay);
+        appendChild(document.body, overlay);
+      }
 
       next();
     },

diff --git a/packages/client/src/inspector/getBoxModel.ts b/packages/client/src/inspector/getBoxModel.ts
@@ -26,7 +26,7 @@ const IS_BORDER_WITH_ZOOM = !IS_FIREFOX;
 export function getBoxModel(el: HTMLElement | null): [BoxRect, BoxLines] {
   // When an invalid element or invisible element is encountered, empty is returned.
   if (!checkValidElement(el) || !checkVisibility(el)) {
-    return [getDefaultBoxRect(), getDefaultBoxLines()];
+    return getDefaultBoxModel();
   }
 
   const {
@@ -48,9 +48,9 @@ export function getBoxModel(el: HTMLElement | null): [BoxRect, BoxLines] {
 
   // Negative values will cause the position to shift and should be ignored.
   const marginTop = withZoom(Math.max(get('margin-top'), 0));
-  const marginLeft = withZoom(Math.max(get('margin-left'), 0));
   const marginRight = withZoom(Math.max(get('margin-right'), 0));
   const marginBottom = withZoom(Math.max(get('margin-bottom'), 0));
+  const marginLeft = withZoom(Math.max(get('margin-left'), 0));
 
   const borderTop = withZoom(get('border-top'), IS_BORDER_WITH_ZOOM);
   const borderRight = withZoom(get('border-right'), IS_BORDER_WITH_ZOOM);
@@ -70,52 +70,46 @@ export function getBoxModel(el: HTMLElement | null): [BoxRect, BoxLines] {
   const positionHeight = height + marginTop + marginBottom;
 
   return [
+    createBoxRect(
+      positionWidth,
+      positionHeight,
+      positionTop,
+      positionRight,
+      positionBottom,
+      positionLeft,
+    ),
     {
-      width: positionWidth,
-      height: positionHeight,
-      top: positionTop,
-      right: positionRight,
-      bottom: positionBottom,
-      left: positionLeft,
+      margin: createBoxLine(marginTop, marginRight, marginBottom, marginLeft),
+      border: createBoxLine(borderTop, borderRight, borderBottom, borderLeft),
+      padding: createBoxLine(paddingTop, paddingRight, paddingBottom, paddingLeft),
     },
+  ];
+}
+
+export function getDefaultBoxModel(): [BoxRect, BoxLines] {
+  return [
+    createBoxRect(),
     {
-      margin: {
-        top: marginTop,
-        right: marginRight,
-        left: marginLeft,
-        bottom: marginBottom,
-      },
-      border: {
-        top: borderTop,
-        right: borderRight,
-        left: borderLeft,
-        bottom: borderBottom,
-      },
-      padding: {
-        top: paddingTop,
-        right: paddingRight,
-        left: paddingLeft,
-        bottom: paddingBottom,
-      },
+      margin: createBoxLine(),
+      border: createBoxLine(),
+      padding: createBoxLine(),
     },
   ];
 }
 
-export function getDefaultBoxRect(): BoxRect {
+function createBoxRect(width = 0, height = 0, top = 0, right = 0, bottom = 0, left = 0): BoxRect {
   return {
-    width: 0,
-    height: 0,
-    top: 0,
-    right: 0,
-    left: 0,
-    bottom: 0,
+    width,
+    height,
+    ...createBoxLine(top, right, bottom, left),
   };
 }
 
-export function getDefaultBoxLines(): BoxLines {
+function createBoxLine(top = 0, right = 0, bottom = 0, left = 0): BoxLine {
   return {
-    margin: getDefaultBoxRect(),
-    border: getDefaultBoxRect(),
-    padding: getDefaultBoxRect(),
+    top,
+    right,
+    bottom,
+    left,
   };
 }
diff --git a/packages/client/src/inspector/inspectorEnable.ts b/packages/client/src/inspector/inspectorEnable.ts
@@ -1,6 +1,7 @@
 import { inspectorExitBridge, openEditorBridge, treeOpenBridge } from '../bridge';
 import { getOptions } from '../options';
 import { resolveSource } from '../resolve';
+import { CURRENT_INSPECT_ID } from '../constants';
 import { setupListeners } from './setupListeners';
 import { disableHoverCSS, enableHoverCSS } from './disableHoverCSS';
 import { getActiveElement } from './getActiveElement';
@@ -21,7 +22,7 @@ export async function inspectorEnable() {
 
     cleanListeners = setupListeners({
       onActive: () => renderUI(),
-      onOpenTree: (el) => treeOpenBridge.emit([resolveSource(el, true)]),
+      onOpenTree: (el) => treeOpenBridge.emit([resolveSource(el, true), CURRENT_INSPECT_ID]),
       onOpenEditor: (el) => openEditorBridge.emit([resolveSource(el).meta]),
       onExitInspect: () => inspectorExitBridge.emit(),
     });

diff --git a/packages/client/src/resolve/resolveUtil.ts b/packages/client/src/resolve/resolveUtil.ts
@@ -23,7 +23,7 @@ let glob: ReturnType<typeof outmatch>;
 function filter(fileName: string) {
   const { ignoreComponents } = getOptions();
   if (ignoreComponents) {
-    return !(glob ||= outmatch(ignoreComponents, { excludeDot: true }))(fileName);
+    return !(glob ||= outmatch(ignoreComponents, { excludeDot: false }))(fileName);
   }
   return true;
 }