feat: support integration with unplugin-vue-source (#75)

.changeset/kind-donkeys-eat.md

@@ -0,0 +1,10 @@
+---
+'@open-editor/client': patch
+'@open-editor/rollup': patch
+'@open-editor/server': patch
+'@open-editor/shared': patch
+'@open-editor/vite': patch
+'@open-editor/webpack': patch
+---
+
+support integration with unplugin-vue-source

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

@@ -0,0 +1,65 @@
+import { isFunc } from '@open-editor/shared';
+
+import { ResolveDebug } from '../resolveDebug';
+import { ElementSourceMeta } from '../resolveSource';
+import { isValidFileName } from '../util';
+import { resolveSourceFromFiber } from './react18';
+
+export function resolveReact15(
+  { value: instance }: ResolveDebug,
+  tree: Partial<ElementSourceMeta>[],
+  deep?: boolean,
+) {
+  if (instance && '_debugOwner' in instance) {
+    return resolveSourceFromFiber(instance, tree, deep);
+  }
+  return resolveSourceFromInstance(instance, tree, deep);
+}
+
+export function resolveSourceFromInstance(
+  instance: any | null | undefined,
+  tree: Partial<ElementSourceMeta>[],
+  deep?: boolean,
+) {
+  while (instance) {
+    let owner = instance._currentElement._owner;
+
+    const source = instance._currentElement._source;
+    if (source && isValidFileName(source.fileName)) {
+      while (!isInstanceComponent(owner)) {
+        if (!owner) return;
+
+        owner = owner._currentElement._owner;
+      }
+
+      tree.push({
+        name: getInstanceComponentName(owner),
+        file: source.fileName,
+        line: source.lineNumber,
+        column: (<any>source).columnNumber,
+      });
+
+      if (!deep) return;
+    }
+
+    instance = owner;
+  }
+}
+
+function isInstanceComponent(owner?: any | null) {
+  if (owner && owner._currentElement) {
+    return (
+      isFunc(owner._currentElement.type) ||
+      isFunc(owner._currentElement.type.render)
+    );
+  }
+  return false;
+}
+
+function getInstanceComponentName(owner: any) {
+  const component = isFunc(owner._currentElement.type)
+    ? owner._currentElement.type
+    : // React.forwardRef(Component)
+      owner._currentElement.type.render;
+  return component?.name || component?.displayName;
+}

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

@@ -0,0 +1,59 @@
+import type { Fiber } from 'react-reconciler';
+import { isFunc } from '@open-editor/shared';
+
+import { ResolveDebug } from '../resolveDebug';
+import { ElementSourceMeta } from '../resolveSource';
+import { isValidFileName } from '../util';
+
+export function resolveReact18(
+  debug: ResolveDebug<Fiber>,
+  tree: Partial<ElementSourceMeta>[],
+  deep?: boolean,
+) {
+  return resolveSourceFromFiber(debug.value, tree, deep);
+}
+
+export function resolveSourceFromFiber(
+  fiber: Fiber | null | undefined,
+  tree: Partial<ElementSourceMeta>[],
+  deep?: boolean,
+) {
+  while (fiber) {
+    let owner = fiber._debugOwner;
+
+    const source = fiber._debugSource;
+    if (source && isValidFileName(source.fileName)) {
+      while (!isFiberComponent(owner)) {
+        if (!owner) return;
+
+        owner = owner._debugOwner;
+      }
+
+      tree.push({
+        name: getFiberComponentName(owner as Fiber),
+        file: source.fileName,
+        line: source.lineNumber,
+        column: (<any>source).columnNumber,
+      });
+
+      if (!deep) return;
+    }
+
+    fiber = owner;
+  }
+}
+
+function isFiberComponent(owner?: Fiber | null) {
+  if (owner && owner._debugSource) {
+    return isFunc(owner.type) || isFunc(owner.type.render);
+  }
+  return false;
+}
+
+function getFiberComponentName(owner: Fiber) {
+  const component = isFunc(owner.type)
+    ? owner.type
+    : // React.forwardRef(Component)
+      owner.type.render;
+  return component?.name || component?.displayName;
+}