@treelocator/runtime 0.1.0

package/src/adapters/jsx/jsxAdapter.ts

@@ -0,0 +1,276 @@
+import type { FileStorage } from "@locator/shared";
+import {
+  parseDataId,
+  parseDataPath,
+  splitFullPath,
+} from "../../functions/parseDataId";
+import type { TreeNode, TreeNodeComponent } from "../../types/TreeNode";
+import type { Source } from "../../types/types";
+import type {
+  AdapterObject,
+  FullElementInfo,
+  ParentPathItem,
+  TreeState,
+} from "../adapterApi";
+import { goUpByTheTree } from "../goUpByTheTree";
+import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
+import { getExpressionData } from "./getExpressionData";
+import { getJSXComponentBoundingBox } from "./getJSXComponentBoundingBox";
+
+export function getElementInfo(target: HTMLElement): FullElementInfo | null {
+  const found = target.closest("[data-locatorjs-id], [data-locatorjs]");
+
+  if (
+    found &&
+    found instanceof HTMLElement &&
+    found.dataset &&
+    (found.dataset.locatorjsId ||
+      found.dataset.locatorjs ||
+      found.dataset.locatorjsStyled)
+  ) {
+    const dataId = found.dataset.locatorjsId;
+    const dataPath = found.dataset.locatorjs;
+    const styledDataId = found.dataset.locatorjsStyled;
+
+    if (!dataId && !dataPath) {
+      return null;
+    }
+
+    let fileFullPath: string;
+
+    if (dataPath) {
+      const parsed = parseDataPath(dataPath);
+      if (!parsed) {
+        return null;
+      }
+      [fileFullPath] = parsed;
+    } else if (dataId) {
+      [fileFullPath] = parseDataId(dataId);
+    } else {
+      return null;
+    }
+
+    const locatorData = window.__LOCATOR_DATA__;
+    const fileData: FileStorage | undefined = locatorData?.[fileFullPath];
+
+    // Handle styled components (only when locatorData is available)
+    const [styledFileFullPath, styledId] = styledDataId
+      ? parseDataId(styledDataId)
+      : [null, null];
+    const styledFileData: FileStorage | undefined =
+      styledFileFullPath && locatorData?.[styledFileFullPath];
+    const styledExpData =
+      styledFileData && styledFileData.styledDefinitions[Number(styledId)];
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const styledLink = styledExpData && {
+      filePath: styledFileData.filePath,
+      projectPath: styledFileData.projectPath,
+      column: (styledExpData.loc?.start.column || 0) + 1,
+      line: styledExpData.loc?.start.line || 0,
+    };
+
+    // Get expression data (works with or without locatorData)
+    const expData = getExpressionData(found, fileData || null);
+    if (!expData) {
+      return null;
+    }
+
+    // Extract file path components
+    let filePath: string;
+    let projectPath: string;
+
+    if (fileData) {
+      filePath = fileData.filePath;
+      projectPath = fileData.projectPath;
+    } else {
+      // If no fileData, split the full path
+      [projectPath, filePath] = splitFullPath(fileFullPath);
+    }
+
+    const wrappingComponent =
+      expData.wrappingComponentId !== null && fileData
+        ? fileData.components[Number(expData.wrappingComponentId)]
+        : null;
+
+    return {
+      thisElement: {
+        box: found.getBoundingClientRect(),
+        label: expData.name,
+        link: {
+          filePath,
+          projectPath,
+          column: (expData.loc.start.column || 0) + 1,
+          line: expData.loc.start.line || 0,
+        },
+      },
+      htmlElement: found,
+      parentElements: [],
+      componentBox: getJSXComponentBoundingBox(
+        found,
+        locatorData || {},
+        fileFullPath,
+        Number(expData.wrappingComponentId)
+      ),
+      componentsLabels: wrappingComponent
+        ? [
+            {
+              label: wrappingComponent.name || "component",
+              link: {
+                filePath,
+                projectPath,
+                column: (wrappingComponent.loc?.start.column || 0) + 1,
+                line: wrappingComponent.loc?.start.line || 0,
+              },
+            },
+          ]
+        : [],
+    };
+  }
+
+  // return deduplicateLabels(labels);
+
+  return null;
+}
+
+export class JSXTreeNodeElement extends HtmlElementTreeNode {
+  getSource(): Source | null {
+    const dataId = this.element.dataset.locatorjsId;
+    const dataPath = this.element.dataset.locatorjs;
+
+    if (!dataId && !dataPath) {
+      return null;
+    }
+
+    let fileFullPath: string;
+
+    if (dataPath) {
+      const parsed = parseDataPath(dataPath);
+      if (!parsed) {
+        return null;
+      }
+      [fileFullPath] = parsed;
+    } else if (dataId) {
+      [fileFullPath] = parseDataId(dataId);
+    } else {
+      return null;
+    }
+
+    const locatorData = window.__LOCATOR_DATA__;
+    const fileData: FileStorage | undefined = locatorData?.[fileFullPath];
+
+    // Get expression data (works with or without locatorData)
+    const expData = getExpressionData(this.element, fileData || null);
+    if (expData) {
+      let fileName: string;
+      let projectPath: string;
+
+      if (fileData) {
+        fileName = fileData.filePath;
+        projectPath = fileData.projectPath;
+      } else {
+        // If no fileData, split the full path
+        [projectPath, fileName] = splitFullPath(fileFullPath);
+      }
+
+      return {
+        fileName,
+        projectPath,
+        columnNumber: (expData.loc.start.column || 0) + 1,
+        lineNumber: expData.loc.start.line || 0,
+      };
+    }
+
+    return null;
+  }
+  getComponent(): TreeNodeComponent | null {
+    const dataId = this.element.dataset.locatorjsId;
+    const dataPath = this.element.dataset.locatorjs;
+
+    if (!dataId && !dataPath) {
+      return null;
+    }
+
+    let fileFullPath: string;
+
+    if (dataPath) {
+      const parsed = parseDataPath(dataPath);
+      if (!parsed) {
+        return null;
+      }
+      [fileFullPath] = parsed;
+    } else if (dataId) {
+      [fileFullPath] = parseDataId(dataId);
+    } else {
+      return null;
+    }
+
+    const locatorData = window.__LOCATOR_DATA__;
+    const fileData: FileStorage | undefined = locatorData?.[fileFullPath];
+
+    // Component information is only available when we have fileData
+    if (fileData) {
+      const expData = getExpressionData(this.element, fileData);
+      if (expData && expData.wrappingComponentId !== null) {
+        const component = fileData.components[expData.wrappingComponentId];
+        if (component) {
+          return {
+            label: component.name || "component",
+            definitionLink: {
+              fileName: fileData.filePath,
+              projectPath: fileData.projectPath,
+              columnNumber: (component.loc?.start.column || 0) + 1,
+              lineNumber: component.loc?.start.line || 0,
+            },
+          };
+        }
+      }
+    }
+
+    return null;
+  }
+}
+
+function getTree(element: HTMLElement): TreeState | null {
+  const originalRoot: TreeNode = new JSXTreeNodeElement(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 jsxAdapter: AdapterObject = {
+  getElementInfo,
+  getTree,
+  getParentsPaths,
+};
+
+export default jsxAdapter;

package/src/adapters/jsx/runtimeStore.ts

@@ -0,0 +1,94 @@
+import {
+  parseDataId,
+  parseDataPath,
+  splitFullPath,
+} from "../../functions/parseDataId";
+
+export function getDataForDataId(dataId: string) {
+  let fileFullPath: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let expData: any;
+  let filePath = "";
+  let projectPath = "";
+
+  const data = window.__LOCATOR_DATA__;
+
+  // Try parsing as path format first (new format)
+  const pathParsed = parseDataPath(dataId);
+  if (pathParsed) {
+    const [fullPath, line, column] = pathParsed;
+    fileFullPath = fullPath;
+
+    if (data) {
+      const fileData = data[fileFullPath];
+      if (fileData) {
+        // Find expression by location
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        expData = fileData.expressions.find(
+          (exp: any) =>
+            exp.loc.start.line === line && exp.loc.start.column === column
+        );
+        if (expData) {
+          filePath = fileData.filePath;
+          projectPath = fileData.projectPath;
+        }
+      }
+    }
+
+    // If no data or not found, create minimal data from path
+    if (!expData) {
+      [projectPath, filePath] = splitFullPath(fullPath);
+      expData = {
+        name: "Component",
+        loc: {
+          start: { line, column },
+          end: { line, column },
+        },
+        wrappingComponentId: null,
+      };
+    }
+  } else {
+    // Fall back to ID format (old format) - requires __LOCATOR_DATA__
+    if (!data) {
+      return null;
+    }
+
+    const [fullPath, id] = parseDataId(dataId);
+    fileFullPath = fullPath;
+    const fileData = data[fileFullPath];
+    if (!fileData) {
+      return null;
+    }
+    expData = fileData.expressions[Number(id)];
+    filePath = fileData.filePath;
+    projectPath = fileData.projectPath;
+  }
+
+  if (!expData) {
+    return null;
+  }
+
+  const link = {
+    filePath,
+    projectPath,
+    column: expData.loc.start.column || 0,
+    line: expData.loc.start.line || 0,
+  };
+
+  // let label;
+  // if (expData.type === "jsx") {
+  //   label =
+  //     (expData.wrappingComponent ? `${expData.wrappingComponent}: ` : "") +
+  //     expData.name;
+  // } else {
+  //   label = `${expData.htmlTag ? `styled.${expData.htmlTag}` : "styled"}${
+  //     expData.name ? `: ${expData.name}` : ""
+  //   }`;
+  // }
+
+  return {
+    link,
+    label: expData.name,
+    componentLabel: expData,
+  };
+}

package/src/adapters/react/fiberToSimple.tsx

@@ -0,0 +1,72 @@
+import { Fiber } from "@locator/shared";
+import { getBoundingRect } from "../../functions/getBoundingRect";
+import { getComposedBoundingBox } from "../../functions/getComposedBoundingBox";
+import { getUsableName } from "../../functions/getUsableName";
+
+import { getAllFiberChildren } from "./getAllFiberChildren";
+import { SimpleNode } from "../../types/types";
+import { makeFiberId } from "./makeFiberId";
+
+export function fiberToSimple(
+  fiber: Fiber,
+  manualChildren?: SimpleNode[]
+): SimpleNode {
+  let simpleChildren;
+  if (fiber.elementType?.styledComponentId) {
+    const children = getAllFiberChildren(fiber);
+    if (children.length === 1) {
+      const simple = fiberToSimple(children[0]!, manualChildren);
+      simple.name = `${simple.name} (styled)`;
+      return simple;
+    }
+  }
+
+  if (manualChildren) {
+    simpleChildren = manualChildren;
+  } else {
+    const children = getAllFiberChildren(fiber);
+
+    simpleChildren = children.map((child) => {
+      return fiberToSimple(child);
+    });
+  }
+
+  const element =
+    fiber.stateNode instanceof Element || fiber.stateNode instanceof Text
+      ? fiber.stateNode
+      : fiber.stateNode?.containerInfo;
+
+  if (element) {
+    const box = getBoundingRect(element);
+    return {
+      type: "element",
+      element: element,
+      fiber: fiber,
+      uniqueId: makeFiberId(fiber),
+      name: getUsableName(fiber),
+      box: box || getComposedBoundingBox(simpleChildren),
+      children: simpleChildren,
+      source: fiber._debugSource || null,
+    };
+  } else {
+    return {
+      type: "component",
+      fiber: fiber,
+      uniqueId: makeFiberId(fiber),
+      name: getUsableName(fiber),
+      box: getComposedBoundingBox(simpleChildren),
+      children: simpleChildren,
+      source: fiber._debugSource || null,
+      definitionSourceFile: simpleChildren.reduce<string | null>(
+        (acc, curr) => {
+          if (curr.source?.fileName) {
+            return curr.source?.fileName;
+          } else {
+            return acc;
+          }
+        },
+        null
+      ),
+    };
+  }
+}

package/src/adapters/react/findDebugSource.ts

@@ -0,0 +1,15 @@
+import { Fiber, Source } from "@locator/shared";
+
+export function findDebugSource(
+  fiber: Fiber
+): { fiber: Fiber; source: Source } | null {
+  let current: Fiber | null = fiber;
+  while (current) {
+    if (current._debugSource) {
+      return { fiber: current, source: current._debugSource };
+    }
+    current = current._debugOwner || null;
+  }
+
+  return null;
+}

package/src/adapters/react/findFiberByHtmlElement.ts

@@ -0,0 +1,27 @@
+import { Fiber, Renderer } from "@locator/shared";
+import { findDebugSource } from "./findDebugSource";
+
+export function findFiberByHtmlElement(
+  target: HTMLElement,
+  shouldHaveDebugSource: boolean
+): Fiber | null {
+  const renderers = window.__REACT_DEVTOOLS_GLOBAL_HOOK__?.renderers;
+  // console.log("RENDERERS: ", renderers);
+  const renderersValues = renderers?.values();
+  if (renderersValues) {
+    for (const renderer of Array.from(renderersValues) as Renderer[]) {
+      if (renderer.findFiberByHostInstance) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const found = renderer.findFiberByHostInstance(target as any);
+        if (found) {
+          if (shouldHaveDebugSource) {
+            return findDebugSource(found)?.fiber || null;
+          } else {
+            return found;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}

package/src/adapters/react/gatherFiberRoots.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Fiber } from "@locator/shared";
+import { findFiberByHtmlElement } from "./findFiberByHtmlElement";
+
+export function gatherFiberRoots(
+  parentNode: HTMLElement,
+  mutable_foundFibers: Fiber[]
+) {
+  const nodes = parentNode.childNodes;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node instanceof HTMLElement) {
+      const fiber =
+        (node as any)._reactRootContainer?._internalRoot?.current ||
+        (node as any)._reactRootContainer?.current;
+      if (fiber) {
+        mutable_foundFibers.push(getRoot(fiber));
+      } else {
+        const rootFiber = findFiberByHtmlElement(node!, false);
+        if (rootFiber) {
+          mutable_foundFibers.push(getRoot(rootFiber));
+        } else {
+          gatherFiberRoots(node, mutable_foundFibers);
+        }
+      }
+    }
+  }
+}
+
+function getRoot(fiber: Fiber): Fiber {
+  let thisFiber: Fiber = fiber;
+  while (thisFiber.return) {
+    thisFiber = thisFiber.return;
+  }
+  return thisFiber;
+}

package/src/adapters/react/getAllFiberChildren.tsx

@@ -0,0 +1,11 @@
+import { Fiber } from "@locator/shared";
+
+export function getAllFiberChildren(fiber: Fiber) {
+  const allChildren: Fiber[] = [];
+  let child = fiber.child;
+  while (child) {
+    allChildren.push(child);
+    child = child.sibling;
+  }
+  return allChildren;
+}

package/src/adapters/react/getAllParentsElementsAndRootComponent.ts

@@ -0,0 +1,52 @@
+import { Fiber } from "@locator/shared";
+import { getUsableName } from "../../functions/getUsableName";
+import { mergeRects } from "../../functions/mergeRects";
+import { SimpleDOMRect } from "../../types/types";
+import { ElementInfo } from "../adapterApi";
+import { getFiberComponentBoundingBox } from "./getFiberComponentBoundingBox";
+import { isStyledElement } from "./isStyled";
+
+export function getAllParentsElementsAndRootComponent(fiber: Fiber): {
+  component: Fiber;
+  componentBox: SimpleDOMRect;
+  parentElements: ElementInfo[];
+} {
+  const parentElements: ElementInfo[] = [];
+  const deepestElement = fiber.stateNode;
+  if (!deepestElement || !(deepestElement instanceof HTMLElement)) {
+    throw new Error(
+      "This functions works only for Fibres with HTMLElement stateNode"
+    );
+  }
+  let componentBox: SimpleDOMRect = deepestElement.getBoundingClientRect();
+
+  // For styled-components we rather use parent element
+  let currentFiber =
+    isStyledElement(fiber) && fiber._debugOwner ? fiber._debugOwner : fiber;
+  while (currentFiber._debugOwner || currentFiber.return) {
+    currentFiber = currentFiber._debugOwner || currentFiber.return!;
+    const currentElement = currentFiber.stateNode;
+    if (!currentElement || !(currentElement instanceof HTMLElement)) {
+      return {
+        component: currentFiber,
+        parentElements,
+        componentBox:
+          getFiberComponentBoundingBox(currentFiber) || componentBox,
+      };
+    }
+
+    const usableName = getUsableName(currentFiber);
+
+    componentBox = mergeRects(
+      componentBox,
+      currentElement.getBoundingClientRect()
+    );
+
+    parentElements.push({
+      box: currentElement.getBoundingClientRect(),
+      label: usableName,
+      link: null,
+    });
+  }
+  throw new Error("Could not find root component");
+}

package/src/adapters/react/getAllWrappingParents.ts

@@ -0,0 +1,25 @@
+import { Fiber } from "@locator/shared";
+import { getAllFiberChildren } from "./getAllFiberChildren";
+
+export function getAllWrappingParents(fiber: Fiber): Fiber[] {
+  const parents: Fiber[] = [fiber];
+
+  let currentFiber = fiber;
+  while (currentFiber.return) {
+    currentFiber = currentFiber.return;
+    if (
+      currentFiber.stateNode &&
+      currentFiber.stateNode instanceof HTMLElement
+    ) {
+      return parents;
+    }
+
+    // if there is multiple children, it means the parent is not just wrapping this one
+    const children = getAllFiberChildren(currentFiber);
+    if (children.length > 1) {
+      return parents;
+    }
+    parents.push(currentFiber);
+  }
+  return parents;
+}

package/src/adapters/react/getFiberComponentBoundingBox.ts

@@ -0,0 +1,30 @@
+import { getFiberOwnBoundingBox } from "./getFiberOwnBoundingBox";
+import { Fiber } from "@locator/shared";
+import { getAllFiberChildren } from "./getAllFiberChildren";
+import { mergeRects } from "../../functions/mergeRects";
+import { SimpleDOMRect } from "../../types/types";
+
+const MAX_LEVEL = 6;
+export function getFiberComponentBoundingBox(fiber: Fiber, level = 0) {
+  const children = getAllFiberChildren(fiber);
+  let composedRect: SimpleDOMRect | undefined;
+  children.forEach((child) => {
+    let box = getFiberOwnBoundingBox(child);
+    if (!box && level < MAX_LEVEL) {
+      box = getFiberComponentBoundingBox(child, level + 1) || null;
+    }
+    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;
+}

package/src/adapters/react/getFiberLabel.ts

@@ -0,0 +1,20 @@
+import { Fiber, Source } from "@locator/shared";
+import { LabelData } from "../../types/LabelData";
+import { getUsableName } from "../../functions/getUsableName";
+
+export function getFiberLabel(fiber: Fiber, source?: Source): LabelData {
+  const name = getUsableName(fiber);
+
+  const label: LabelData = {
+    label: name,
+    link: source
+      ? {
+          filePath: source.fileName,
+          projectPath: "",
+          line: source.lineNumber,
+          column: source.columnNumber || 0,
+        }
+      : null,
+  };
+  return label;
+}

package/src/adapters/react/getFiberOwnBoundingBox.ts

@@ -0,0 +1,9 @@
+import { Fiber } from "@locator/shared";
+import { SimpleDOMRect } from "../../types/types";
+
+export function getFiberOwnBoundingBox(fiber: Fiber): SimpleDOMRect | null {
+  if (fiber.stateNode && fiber.stateNode.getBoundingClientRect) {
+    return fiber.stateNode.getBoundingClientRect();
+  }
+  return null;
+}

package/src/adapters/react/isStyled.ts

@@ -0,0 +1,5 @@
+import { Fiber } from "@locator/shared";
+
+export function isStyledElement(fiber: Fiber) {
+  return !!fiber._debugOwner?.elementType?.styledComponentId;
+}