feat: filter out non-in-project components

.changeset/rich-pears-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@open-editor/client': patch
+---
+
+filter out non-in-project components

.eslintrc

@@ -8,9 +8,6 @@
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"],
   "rules": {
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/no-non-null-assertion": 0,
-    "@typescript-eslint/ban-ts-comment": 0,
-    "no-mixed-spaces-and-tabs": 0
+    "@typescript-eslint/no-explicit-any": 0
   }
 }

package.json

@@ -15,31 +15,34 @@
     "lint": "pnpm eslint . --ext .ts,.tsx --ignore-pattern='/playground/*'",
     "format": "prettier --write '**/*.{vue,ts,tsx,json,md}'",
     "postinstall": "simple-git-hooks",
-    "release": "run-s build changeset:publish",
+    "release": "run-s build publish:ci",
     "test": "turbo run test",
     "check": "tsc --noEmit && turbo run check --filter @open-editor/* --log-order grouped",
-    "versions": "run-s changeset:version format",
-    "changeset:version": "changeset version",
-    "changeset:publish": "changeset publish"
+    "versions": "run-s version:ci format",
+    "version:ci": "changeset version",
+    "publish:ci": "changeset publish"
   },
   "engines": {
     "node": ">=16.19.1"
   },
   "packageManager": "[email protected]",
   "keywords": [
-    "webpack-plugin",
     "rollup-plugin",
-    "vue-devtools",
-    "react-devtools",
     "vite-plugin",
-    "next-devtools"
+    "webpack-plugin",
+    "next-devtools",
+    "react-devtools",
+    "vue-devtools"
   ],
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
     "@open-editor/client": "workspace:*",
     "@open-editor/server": "workspace:*",
     "@open-editor/shared": "workspace:*",
+    "@open-editor/rollup": "workspace:*",
+    "@open-editor/vite": "workspace:*",
+    "@open-editor/webpack": "workspace:*",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@types/minimist": "^1.2.2",

packages/client/src/resolve/framework/react15.ts

@@ -1,7 +1,7 @@
 import { isFunc } from '@open-editor/shared';
 
-import { ResolveDebug } from '../resolveDebug';
-import { ElementSourceMeta } from '../resolveSource';
+import type { ResolveDebug } from '../resolveDebug';
+import type { ElementSourceMeta } from '../resolveSource';
 import { isValidFileName } from '../util';
 import { resolveSourceFromFiber } from './react18';
 

packages/client/src/resolve/framework/react18.ts

@@ -1,8 +1,8 @@
 import type { Fiber } from 'react-reconciler';
 import { isFunc } from '@open-editor/shared';
 
-import { ResolveDebug } from '../resolveDebug';
-import { ElementSourceMeta } from '../resolveSource';
+import type { ResolveDebug } from '../resolveDebug';
+import type { ElementSourceMeta } from '../resolveSource';
 import { isValidFileName } from '../util';
 
 export function resolveReact18(

packages/client/src/resolve/framework/vue2.ts

@@ -1,13 +1,14 @@
 import { isStr } from '@open-editor/shared';
 
+import type { ResolveDebug } from '../resolveDebug';
+import type { ElementSourceMeta } from '../resolveSource';
 import {
+  getElementVueSource,
   getVueComponentName,
   hasVueSource,
   isValidFileName,
   parseVueSource,
 } from '../util';
-import { ResolveDebug } from '../resolveDebug';
-import { ElementSourceMeta } from '../resolveSource';
 
 export function resolveVue2(
   debug: ResolveDebug,
@@ -29,24 +30,23 @@ function resolveSourceFromVueSource(
   tree: Partial<ElementSourceMeta>[],
   deep?: boolean,
 ) {
-  let [instance, source] = resolveVueSourceStart(debug);
+  let [instance, source] = resolveVueSourceAnchor(debug);
 
   while (instance && instance.$vnode) {
     if (instance.$parent.$vnode == null) {
       tree.push({
         name: getComponentName(instance),
         ...source,
       });
-    } else if (getVueSource(instance)) {
-      const __source = parseVueSource(getVueSource(instance));
-      if (isValidFileName(__source.file)) {
+    } else if (isStr(getComponentVueSource(instance))) {
+      if (isValidFileName(getComponentFile(instance))) {
         tree.push({
           name: getComponentName(instance),
           ...source,
         });
         if (!deep) return;
 
-        source = __source;
+        source = parseVueSource(getComponentVueSource(instance));
       }
     }
 
@@ -74,23 +74,23 @@ function resolveSourceFromInstance(
   }
 }
 
-function resolveVueSourceStart(debug: ResolveDebug) {
+function resolveVueSourceAnchor(debug: ResolveDebug) {
   let instance = debug.value;
   let element = debug.originalElement;
 
-  while (element && !element.getAttribute('__source')) {
+  while (element && !getElementVueSource(element)) {
     element = element.parentElement!;
   }
 
-  const __source = element.getAttribute('__source');
+  const __source = getElementVueSource(element);
   if (isStr(__source)) {
     return <const>[instance, parseVueSource(__source)];
   }
 
   while (instance) {
-    const __source = getVueSource(instance);
+    const __source = getComponentVueSource(instance);
     if (isStr(__source)) {
-      return <const>[instance, parseVueSource(__source)];
+      return <const>[instance.$parent, parseVueSource(__source)];
     }
 
     instance = instance.$parent;
@@ -99,8 +99,8 @@ function resolveVueSourceStart(debug: ResolveDebug) {
   return [];
 }
 
-function getVueSource(instance: any) {
-  return instance.$vnode.componentInstance?.$props?.__source;
+function getComponentVueSource(instance: any) {
+  return instance.$vnode.componentInstance.$props.__source;
 }
 
 function getComponentName(instance: any) {

packages/client/src/resolve/framework/vue3.ts

@@ -1,14 +1,15 @@
 import type { ComponentInternalInstance } from '@vue/runtime-core';
 import { isStr } from '@open-editor/shared';
 
+import type { ResolveDebug } from '../resolveDebug';
+import type { ElementSourceMeta } from '../resolveSource';
 import {
+  getElementVueSource,
   getVueComponentName,
   hasVueSource,
   isValidFileName,
   parseVueSource,
 } from '../util';
-import { ResolveDebug } from '../resolveDebug';
-import { ElementSourceMeta } from '../resolveSource';
 
 export function resolveVue3(
   debug: ResolveDebug<ComponentInternalInstance>,
@@ -26,24 +27,23 @@ function resolveSourceFromVueSource(
   tree: Partial<ElementSourceMeta>[],
   deep?: boolean,
 ) {
-  let [instance, source] = resolveVueSourceStart(debug);
+  let [instance, source] = resolveVueSourceAnchor(debug);
 
   while (instance) {
     if (instance.parent == null) {
       tree.push({
         name: getComponentName(instance),
         ...source,
       });
-    } else if (instance.props.__source) {
-      const __source = parseVueSource(instance.props.__source as string);
-      if (isValidFileName(__source.file)) {
+    } else if (isStr(getComponentVueSource(instance))) {
+      if (isValidFileName(getComponentFile(instance))) {
         tree.push({
           name: getComponentName(instance),
           ...source,
         });
         if (!deep) return;
 
-        source = __source;
+        source = parseVueSource(getComponentVueSource(instance));
       }
     }
 
@@ -57,10 +57,11 @@ function resolveSourceFromInstance(
   deep?: boolean,
 ) {
   while (instance) {
-    if (isValidFileName(instance.type.__file)) {
+    const file = getComponentFile(instance);
+    if (isValidFileName(file)) {
       tree.push({
         name: getComponentName(instance),
-        file: instance.type.__file,
+        file,
       });
       if (!deep) return;
     }
@@ -69,21 +70,23 @@ function resolveSourceFromInstance(
   }
 }
 
-function resolveVueSourceStart(debug: ResolveDebug<ComponentInternalInstance>) {
+function resolveVueSourceAnchor(
+  debug: ResolveDebug<ComponentInternalInstance>,
+) {
   let instance = debug.value;
   let element = debug.element;
 
-  while (element && !element.getAttribute('__source')) {
+  while (element && !getElementVueSource(element)) {
     element = element.parentElement!;
   }
 
-  const __source = element.getAttribute('__source');
+  const __source = getElementVueSource(element);
   if (isStr(__source)) {
     return <const>[instance, parseVueSource(__source)];
   }
 
   while (instance) {
-    const __source = instance.props.__source;
+    const __source = getComponentVueSource(instance);
     if (isStr(__source)) {
       return <const>[instance.parent, parseVueSource(__source)];
     }
@@ -94,10 +97,18 @@ function resolveVueSourceStart(debug: ResolveDebug<ComponentInternalInstance>) {
   return [];
 }
 
+function getComponentVueSource(instance: ComponentInternalInstance) {
+  return instance.props.__source as string;
+}
+
+function getComponentFile(instance: ComponentInternalInstance) {
+  return instance.type.__file;
+}
+
 function getComponentName(instance: ComponentInternalInstance) {
   return (
     instance.type.name ??
     instance.type.__name ??
-    getVueComponentName(instance.type.__file)
+    getVueComponentName(getComponentFile(instance))
   );
 }

packages/client/src/resolve/util.ts

@@ -31,7 +31,7 @@ export function hasVueSource(element: HTMLElement) {
   }
 
   while (element) {
-    if (element.getAttribute('__source') != null) {
+    if (getElementVueSource(element) != null) {
       return (hvs = true);
     }
 
@@ -41,10 +41,14 @@ export function hasVueSource(element: HTMLElement) {
   return (hvs = false);
 }
 
+export function getElementVueSource(element: HTMLElement) {
+  return element.getAttribute('__source');
+}
+
 export function parseVueSource(__source: string) {
   const [file, line, column] = __source.split(':');
   return {
-    file,
+    file: ensureFileName(file),
     line: Number(line),
     column: Number(column),
   };