diff --git a/.changeset/rich-pears-sneeze.md b/.changeset/rich-pears-sneeze.md new file mode 100644 index 00000000..9ca0b2f8 --- /dev/null +++ b/.changeset/rich-pears-sneeze.md @@ -0,0 +1,5 @@ +--- +'@open-editor/client': patch +--- + +filter out non-in-project components diff --git a/.eslintrc b/.eslintrc index c915d1e8..a347ea4d 100644 --- a/.eslintrc +++ b/.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 } } diff --git a/package.json b/package.json index 7fd725b7..30d0bacd 100644 --- a/package.json +++ b/package.json @@ -15,24 +15,24 @@ "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": "pnpm@8.6.11", "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", @@ -40,6 +40,9 @@ "@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", diff --git a/packages/client/src/resolve/framework/react15.ts b/packages/client/src/resolve/framework/react15.ts index 1ebcddd8..d430fa9d 100644 --- a/packages/client/src/resolve/framework/react15.ts +++ b/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'; diff --git a/packages/client/src/resolve/framework/react18.ts b/packages/client/src/resolve/framework/react18.ts index 8af24de8..5ac2b774 100644 --- a/packages/client/src/resolve/framework/react18.ts +++ b/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( diff --git a/packages/client/src/resolve/framework/vue2.ts b/packages/client/src/resolve/framework/vue2.ts index 58226fcd..35072bb6 100644 --- a/packages/client/src/resolve/framework/vue2.ts +++ b/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,7 +30,7 @@ function resolveSourceFromVueSource( tree: Partial[], deep?: boolean, ) { - let [instance, source] = resolveVueSourceStart(debug); + let [instance, source] = resolveVueSourceAnchor(debug); while (instance && instance.$vnode) { if (instance.$parent.$vnode == null) { @@ -37,16 +38,15 @@ function resolveSourceFromVueSource( 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 [instance, parseVueSource(__source)]; } while (instance) { - const __source = getVueSource(instance); + const __source = getComponentVueSource(instance); if (isStr(__source)) { - return [instance, parseVueSource(__source)]; + return [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) { diff --git a/packages/client/src/resolve/framework/vue3.ts b/packages/client/src/resolve/framework/vue3.ts index 6c38b8ac..a907ae64 100644 --- a/packages/client/src/resolve/framework/vue3.ts +++ b/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, @@ -26,7 +27,7 @@ function resolveSourceFromVueSource( tree: Partial[], deep?: boolean, ) { - let [instance, source] = resolveVueSourceStart(debug); + let [instance, source] = resolveVueSourceAnchor(debug); while (instance) { if (instance.parent == null) { @@ -34,16 +35,15 @@ function resolveSourceFromVueSource( 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) { +function resolveVueSourceAnchor( + debug: ResolveDebug, +) { 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 [instance, parseVueSource(__source)]; } while (instance) { - const __source = instance.props.__source; + const __source = getComponentVueSource(instance); if (isStr(__source)) { return [instance.parent, parseVueSource(__source)]; } @@ -94,10 +97,18 @@ function resolveVueSourceStart(debug: ResolveDebug) { 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)) ); } diff --git a/packages/client/src/resolve/util.ts b/packages/client/src/resolve/util.ts index de7b1ba7..7a9495a1 100644 --- a/packages/client/src/resolve/util.ts +++ b/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), }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 57e0adf2..5852d651 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16,12 +16,21 @@ importers: '@open-editor/client': specifier: workspace:* version: link:packages/client + '@open-editor/rollup': + specifier: workspace:* + version: link:packages/rollup '@open-editor/server': specifier: workspace:* version: link:packages/server '@open-editor/shared': specifier: workspace:* version: link:packages/shared + '@open-editor/vite': + specifier: workspace:* + version: link:packages/vite + '@open-editor/webpack': + specifier: workspace:* + version: link:packages/webpack '@rollup/plugin-commonjs': specifier: ^25.0.4 version: 25.0.4(rollup@3.28.1) @@ -398,12 +407,6 @@ importers: specifier: 0.0.1-beta.0 version: 0.0.1-beta.0 - vue-element-plus-admin: - dependencies: - '@open-editor/vite': - specifier: ^0.0.14 - version: link:../packages/vite - packages: /@aashutoshrathi/word-wrap@1.2.6: resolution: