@treelocator/runtime 0.1.0

package/src/adapters/react/makeFiberId.tsx

@@ -0,0 +1,19 @@
+import { Fiber } from "@locator/shared";
+
+let globalIdCounter = 0;
+const globalIdMap = new WeakMap<Fiber, string>();
+
+export function makeFiberId(fiber: Fiber) {
+  if (fiber._debugID) {
+    return fiber._debugID.toString();
+  }
+  const found = globalIdMap.get(fiber);
+  if (found) {
+    return found;
+  } else {
+    globalIdCounter++;
+    const id = `fiber:${globalIdCounter}`;
+    globalIdMap.set(fiber, id);
+    return id;
+  }
+}

package/src/adapters/react/reactAdapter.ts

@@ -0,0 +1,148 @@
+import { findDebugSource } from "./findDebugSource";
+import { findFiberByHtmlElement } from "./findFiberByHtmlElement";
+import { getFiberLabel } from "./getFiberLabel";
+import { getAllWrappingParents } from "./getAllWrappingParents";
+import { deduplicateLabels } from "../../functions/deduplicateLabels";
+import { LabelData } from "../../types/LabelData";
+import { getFiberOwnBoundingBox } from "./getFiberOwnBoundingBox";
+import { getAllParentsElementsAndRootComponent } from "./getAllParentsElementsAndRootComponent";
+import { isStyledElement } from "./isStyled";
+import {
+  AdapterObject,
+  FullElementInfo,
+  ParentPathItem,
+  TreeState,
+} from "../adapterApi";
+import { Fiber, Source } from "@locator/shared";
+import { TreeNode, TreeNodeComponent } from "../../types/TreeNode";
+import { goUpByTheTree } from "../goUpByTheTree";
+import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
+
+export function getElementInfo(found: HTMLElement): FullElementInfo | null {
+  // Instead of labels, return this element, parent elements leading to closest component, its component labels, all wrapping components labels.
+  const labels: LabelData[] = [];
+
+  const fiber = findFiberByHtmlElement(found, false);
+  if (fiber) {
+    const { component, componentBox, parentElements } =
+      getAllParentsElementsAndRootComponent(fiber);
+
+    const allPotentialComponentFibers = getAllWrappingParents(component);
+
+    // This handles a common case when the component root is basically the comopnent itself, so I want to go to usage of the component
+    // TODO: whaat? why? currently I see that it adds the original styled components which is not necessary.
+
+    // if (fiber.return && fiber.return === fiber._debugOwner) {
+    //   allPotentialComponentFibers.unshift(fiber.return);
+    // }
+
+    allPotentialComponentFibers.forEach((fiber) => {
+      const fiberWithSource = findDebugSource(fiber);
+      if (fiberWithSource) {
+        const label = getFiberLabel(
+          fiberWithSource.fiber,
+          fiberWithSource.source
+        );
+        labels.push(label);
+      }
+    });
+
+    const thisLabel = getFiberLabel(fiber, findDebugSource(fiber)?.source);
+
+    if (isStyledElement(fiber)) {
+      thisLabel.label = `${thisLabel.label} (styled)`;
+    }
+
+    return {
+      thisElement: {
+        box: getFiberOwnBoundingBox(fiber) || found.getBoundingClientRect(),
+        ...thisLabel,
+      },
+      htmlElement: found,
+      parentElements: parentElements,
+      componentBox,
+      componentsLabels: deduplicateLabels(labels),
+    };
+  }
+
+  return null;
+}
+
+export class ReactTreeNodeElement extends HtmlElementTreeNode {
+  getSource(): Source | null {
+    const fiber = findFiberByHtmlElement(this.element, false);
+
+    if (fiber && fiber._debugSource) {
+      return {
+        fileName: fiber._debugSource.fileName,
+        lineNumber: fiber._debugSource.lineNumber,
+        columnNumber: fiber._debugSource.columnNumber,
+      };
+    }
+    return null;
+  }
+  getComponent(): TreeNodeComponent | null {
+    const fiber = findFiberByHtmlElement(this.element, false);
+    const componentFiber = fiber?._debugOwner;
+
+    if (componentFiber) {
+      const fiberLabel = getFiberLabel(
+        componentFiber,
+        findDebugSource(componentFiber)?.source
+      );
+
+      return {
+        label: fiberLabel.label,
+        callLink:
+          (fiberLabel.link && {
+            fileName: fiberLabel.link.filePath,
+            lineNumber: fiberLabel.link.line,
+            columnNumber: fiberLabel.link.column,
+            projectPath: fiberLabel.link.projectPath,
+          }) ||
+          undefined,
+      };
+    }
+    return null;
+  }
+}
+
+function getTree(element: HTMLElement): TreeState | null {
+  const originalRoot: TreeNode = new ReactTreeNodeElement(element);
+
+  return goUpByTheTree(originalRoot);
+}
+
+function fiberToPathItem(fiber: Fiber): ParentPathItem {
+  const label = getFiberLabel(fiber, findDebugSource(fiber)?.source);
+
+  return {
+    title: label.label,
+    link: label.link,
+  };
+}
+
+function getParentsPaths(element: HTMLElement) {
+  const fiber = findFiberByHtmlElement(element, false);
+  if (fiber) {
+    const pathItems: ParentPathItem[] = [];
+    let currentFiber = fiber;
+    pathItems.push(fiberToPathItem(currentFiber));
+
+    while (currentFiber._debugOwner) {
+      currentFiber = currentFiber._debugOwner;
+      pathItems.push(fiberToPathItem(currentFiber));
+    }
+
+    return pathItems;
+  }
+  return [];
+}
+
+const reactAdapter: AdapterObject = {
+  getElementInfo,
+  getTree,
+  getParentsPaths,
+};
+
+export default reactAdapter;

package/src/adapters/react/searchDevtoolsRenderersForClosestTarget.ts

@@ -0,0 +1,15 @@
+import { findFiberByHtmlElement } from "./findFiberByHtmlElement";
+
+export function searchDevtoolsRenderersForClosestTarget(
+  target: HTMLElement
+): HTMLElement | null {
+  let closest: HTMLElement | null = target;
+  while (closest) {
+    if (findFiberByHtmlElement(closest, false)) {
+      return closest;
+    }
+    closest = closest.parentElement;
+  }
+
+  return null;
+}

package/src/adapters/svelte/svelteAdapter.ts

@@ -0,0 +1,111 @@
+import { Source } from "@locator/shared";
+import { TreeNode, TreeNodeComponent } from "../../types/TreeNode";
+import {
+  AdapterObject,
+  FullElementInfo,
+  ParentPathItem,
+  TreeState,
+} from "../adapterApi";
+import { goUpByTheTree } from "../goUpByTheTree";
+import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
+
+type SvelteLoc = {
+  char: number;
+  column: number;
+  file: string;
+  line: number;
+};
+
+type SvelteElement = HTMLElement & { __svelte_meta?: { loc: SvelteLoc } };
+
+export function getElementInfo(found: SvelteElement): FullElementInfo | null {
+  if (found.__svelte_meta) {
+    const { loc } = found.__svelte_meta;
+    return {
+      thisElement: {
+        box: found.getBoundingClientRect(),
+        label: found.nodeName.toLowerCase(),
+        link: {
+          column: loc.column + 1,
+          line: loc.line + 1,
+          filePath: loc.file,
+          projectPath: "",
+        },
+      },
+      htmlElement: found,
+      parentElements: [],
+      componentBox: found.getBoundingClientRect(),
+      componentsLabels: [],
+    };
+  }
+  return null;
+}
+
+export class SvelteTreeNodeElement extends HtmlElementTreeNode {
+  getSource(): Source | null {
+    const element = this.element as SvelteElement;
+    if (element.__svelte_meta) {
+      const { loc } = element.__svelte_meta;
+      return {
+        fileName: loc.file,
+        lineNumber: loc.line + 1,
+        columnNumber: loc.column + 1,
+      };
+    }
+    return null;
+  }
+  getComponent(): TreeNodeComponent | null {
+    return null;
+  }
+}
+
+function getTree(element: HTMLElement): TreeState | null {
+  const originalRoot: TreeNode = new SvelteTreeNodeElement(element);
+
+  return goUpByTheTree(originalRoot);
+}
+
+function getParentsPaths(element: HTMLElement): ParentPathItem[] {
+  const path: ParentPathItem[] = [];
+  let currentElement: SvelteElement | null = element;
+
+  let maxDepth = 10000; // just in case, it should not be needed
+
+  do {
+    if (currentElement?.__svelte_meta) {
+      const { loc } = currentElement.__svelte_meta;
+
+      // we assume that there is one component per file
+      const isSameFileAsTheLastOne =
+        loc.file === path[path.length - 1]?.link?.filePath;
+
+      if (!isSameFileAsTheLastOne) {
+        path.push({
+          title: currentElement!.nodeName.toLowerCase(),
+          link: {
+            column: loc.column + 1,
+            line: loc.line + 1,
+            filePath: loc.file,
+            projectPath: "",
+          },
+        });
+      }
+    }
+
+    currentElement = currentElement.parentElement;
+    maxDepth--;
+    if (maxDepth < 0) {
+      break;
+    }
+  } while (currentElement);
+
+  return path;
+}
+
+const svelteAdapter: AdapterObject = {
+  getElementInfo,
+  getTree,
+  getParentsPaths,
+};
+
+export default svelteAdapter;

package/src/adapters/vue/getVNodeBoundingBox.tsx

@@ -0,0 +1,42 @@
+import { mergeRects } from "../../functions/mergeRects";
+import { SimpleDOMRect } from "../../types/types";
+import type { ComponentInternalInstance, VNode } from "vue";
+
+export function getVueComponentBoundingBox(
+  vcomponent: ComponentInternalInstance
+) {
+  let composedRect: SimpleDOMRect | null = null;
+  if (
+    vcomponent?.subTree?.children &&
+    vcomponent?.subTree?.children instanceof Array
+  ) {
+    vcomponent?.subTree?.children.forEach((child: any) => {
+      const box = getVNodeBoundingBox(child);
+      if (!box) {
+        return;
+      }
+      if (box.width <= 0 || box.height <= 0) {
+        // ignore zero-sized rects
+        return;
+      }
+      if (composedRect) {
+        composedRect = mergeRects(composedRect, box);
+      } else {
+        composedRect = box;
+      }
+    });
+  }
+  return composedRect;
+}
+
+export function getVNodeBoundingBox(vnode: VNode): SimpleDOMRect | null {
+  if (vnode.el instanceof HTMLElement) {
+    return vnode.el.getBoundingClientRect();
+  }
+
+  if (vnode.component) {
+    return getVueComponentBoundingBox(vnode.component);
+  }
+
+  return null;
+}

package/src/adapters/vue/vueAdapter.ts

@@ -0,0 +1,139 @@
+import { Source } from "@locator/shared";
+import type { ComponentInternalInstance } from "vue";
+import { TreeNode, TreeNodeComponent } from "../../types/TreeNode";
+import {
+  AdapterObject,
+  FullElementInfo,
+  ParentPathItem,
+  TreeState,
+} from "../adapterApi";
+import { goUpByTheTree } from "../goUpByTheTree";
+import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
+import { getVueComponentBoundingBox } from "./getVNodeBoundingBox";
+
+type VueElement = HTMLElement & {
+  __vueParentComponent?: ComponentInternalInstance;
+};
+
+export function getElementInfo(found: VueElement): FullElementInfo | null {
+  const parentComponent = found.__vueParentComponent;
+  if (parentComponent) {
+    if (!parentComponent.type) {
+      return null;
+    }
+
+    const componentBBox = getVueComponentBoundingBox(parentComponent);
+
+    const { __file, __name } = parentComponent.type;
+    if (__file && __name) {
+      return {
+        thisElement: {
+          box: found.getBoundingClientRect(),
+          label: found.nodeName.toLowerCase(),
+          link: {
+            column: 1,
+            line: 1,
+            filePath: __file,
+            projectPath: "",
+          },
+        },
+        htmlElement: found,
+        parentElements: [],
+        componentBox: componentBBox || found.getBoundingClientRect(),
+        componentsLabels: [
+          {
+            label: __name,
+            link: {
+              column: 1,
+              line: 1,
+              filePath: __file,
+              projectPath: "",
+            },
+          },
+        ],
+      };
+    }
+  }
+  return null;
+}
+
+export class VueTreeNodeElement extends HtmlElementTreeNode {
+  getSource(): Source | null {
+    const element = this.element as VueElement;
+    const parentComponent = element.__vueParentComponent;
+    if (parentComponent && parentComponent.type) {
+      const { __file } = parentComponent.type;
+      if (__file) {
+        return {
+          fileName: __file,
+          lineNumber: 1,
+          columnNumber: 1,
+        };
+      }
+    }
+    return null;
+  }
+  getComponent(): TreeNodeComponent | null {
+    return null;
+  }
+  // getComponent(): TreeNodeComponent | null {
+  //   const element = this.element as VueElement;
+  //   const parentComponent = element.__vueParentComponent;
+  //   if (parentComponent && parentComponent.type) {
+  //     const { __name } = parentComponent.type;
+  //     if (__name) {
+  //       return {
+  //         label: __name,
+  //         definitionLink: this.getSource() || undefined,
+  //       };
+  //     }
+  //   }
+  //   return null;
+  // }
+}
+
+function getTree(element: HTMLElement): TreeState | null {
+  const originalRoot: TreeNode = new VueTreeNodeElement(element);
+
+  return goUpByTheTree(originalRoot);
+}
+
+function getParentsPaths(element: HTMLElement): ParentPathItem[] {
+  const path: ParentPathItem[] = [];
+  let currentElement: HTMLElement | null = element;
+  let previousComponentKey: string | null = null;
+
+  do {
+    if (currentElement) {
+      const info = getElementInfo(currentElement);
+
+      const currentComponentKey = JSON.stringify(info?.componentsLabels);
+
+      if (info && currentComponentKey !== previousComponentKey) {
+        previousComponentKey = currentComponentKey;
+
+        const link = info.thisElement.link;
+        const label = info.thisElement.label;
+
+        if (link) {
+          path.push({
+            title: label,
+            link: link,
+          });
+        }
+      }
+    }
+
+    currentElement = currentElement.parentElement;
+  } while (currentElement);
+
+  return path;
+}
+
+const vueAdapter: AdapterObject = {
+  getElementInfo,
+  getTree,
+  getParentsPaths,
+};
+
+export default vueAdapter;