@treelocator/runtime 0.1.0

package/dist/adapters/jsx/jsxAdapter.js

@@ -0,0 +1,208 @@
+import { parseDataId, parseDataPath, splitFullPath } from "../../functions/parseDataId";
+import { goUpByTheTree } from "../goUpByTheTree";
+import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
+import { getExpressionData } from "./getExpressionData";
+import { getJSXComponentBoundingBox } from "./getJSXComponentBoundingBox";
+export function getElementInfo(target) {
+  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;
+    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 = locatorData?.[fileFullPath];
+
+    // Handle styled components (only when locatorData is available)
+    const [styledFileFullPath, styledId] = styledDataId ? parseDataId(styledDataId) : [null, null];
+    const styledFileData = 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;
+    let projectPath;
+    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() {
+    const dataId = this.element.dataset.locatorjsId;
+    const dataPath = this.element.dataset.locatorjs;
+    if (!dataId && !dataPath) {
+      return null;
+    }
+    let fileFullPath;
+    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 = locatorData?.[fileFullPath];
+
+    // Get expression data (works with or without locatorData)
+    const expData = getExpressionData(this.element, fileData || null);
+    if (expData) {
+      let fileName;
+      let projectPath;
+      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() {
+    const dataId = this.element.dataset.locatorjsId;
+    const dataPath = this.element.dataset.locatorjs;
+    if (!dataId && !dataPath) {
+      return null;
+    }
+    let fileFullPath;
+    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 = 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) {
+  const originalRoot = new JSXTreeNodeElement(element);
+  return goUpByTheTree(originalRoot);
+}
+function getParentsPaths(element) {
+  const path = [];
+  let currentElement = element;
+  let previousComponentKey = 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 = {
+  getElementInfo,
+  getTree,
+  getParentsPaths
+};
+export default jsxAdapter;

package/dist/adapters/jsx/runtimeStore.d.ts

@@ -0,0 +1,10 @@
+export declare function getDataForDataId(dataId: string): {
+    link: {
+        filePath: string;
+        projectPath: string;
+        column: any;
+        line: any;
+    };
+    label: any;
+    componentLabel: any;
+} | null;

package/dist/adapters/jsx/runtimeStore.js

@@ -0,0 +1,87 @@
+import { parseDataId, parseDataPath, splitFullPath } from "../../functions/parseDataId";
+export function getDataForDataId(dataId) {
+  let fileFullPath;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let expData;
+  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 => 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/dist/adapters/react/fiberToSimple.d.ts

@@ -0,0 +1,3 @@
+import { Fiber } from "@locator/shared";
+import { SimpleNode } from "../../types/types";
+export declare function fiberToSimple(fiber: Fiber, manualChildren?: SimpleNode[]): SimpleNode;

package/dist/adapters/react/fiberToSimple.js

@@ -0,0 +1,55 @@
+import { getBoundingRect } from "../../functions/getBoundingRect";
+import { getComposedBoundingBox } from "../../functions/getComposedBoundingBox";
+import { getUsableName } from "../../functions/getUsableName";
+import { getAllFiberChildren } from "./getAllFiberChildren";
+import { makeFiberId } from "./makeFiberId";
+export function fiberToSimple(fiber, manualChildren) {
+  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((acc, curr) => {
+        if (curr.source?.fileName) {
+          return curr.source?.fileName;
+        } else {
+          return acc;
+        }
+      }, null)
+    };
+  }
+}

package/dist/adapters/react/findDebugSource.d.ts

@@ -0,0 +1,5 @@
+import { Fiber, Source } from "@locator/shared";
+export declare function findDebugSource(fiber: Fiber): {
+    fiber: Fiber;
+    source: Source;
+} | null;

package/dist/adapters/react/findDebugSource.js

@@ -0,0 +1,13 @@
+export function findDebugSource(fiber) {
+  let current = fiber;
+  while (current) {
+    if (current._debugSource) {
+      return {
+        fiber: current,
+        source: current._debugSource
+      };
+    }
+    current = current._debugOwner || null;
+  }
+  return null;
+}

package/dist/adapters/react/findFiberByHtmlElement.d.ts

@@ -0,0 +1,2 @@
+import { Fiber } from "@locator/shared";
+export declare function findFiberByHtmlElement(target: HTMLElement, shouldHaveDebugSource: boolean): Fiber | null;

package/dist/adapters/react/findFiberByHtmlElement.js

@@ -0,0 +1,22 @@
+import { findDebugSource } from "./findDebugSource";
+export function findFiberByHtmlElement(target, shouldHaveDebugSource) {
+  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)) {
+      if (renderer.findFiberByHostInstance) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const found = renderer.findFiberByHostInstance(target);
+        if (found) {
+          if (shouldHaveDebugSource) {
+            return findDebugSource(found)?.fiber || null;
+          } else {
+            return found;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}

package/dist/adapters/react/gatherFiberRoots.d.ts

@@ -0,0 +1,2 @@
+import { Fiber } from "@locator/shared";
+export declare function gatherFiberRoots(parentNode: HTMLElement, mutable_foundFibers: Fiber[]): void;

package/dist/adapters/react/gatherFiberRoots.js

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { findFiberByHtmlElement } from "./findFiberByHtmlElement";
+export function gatherFiberRoots(parentNode, mutable_foundFibers) {
+  const nodes = parentNode.childNodes;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node instanceof HTMLElement) {
+      const fiber = node._reactRootContainer?._internalRoot?.current || node._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) {
+  let thisFiber = fiber;
+  while (thisFiber.return) {
+    thisFiber = thisFiber.return;
+  }
+  return thisFiber;
+}

package/dist/adapters/react/getAllFiberChildren.d.ts

@@ -0,0 +1,2 @@
+import { Fiber } from "@locator/shared";
+export declare function getAllFiberChildren(fiber: Fiber): Fiber[];

package/dist/adapters/react/getAllFiberChildren.js

@@ -0,0 +1,9 @@
+export function getAllFiberChildren(fiber) {
+  const allChildren = [];
+  let child = fiber.child;
+  while (child) {
+    allChildren.push(child);
+    child = child.sibling;
+  }
+  return allChildren;
+}

package/dist/adapters/react/getAllParentsElementsAndRootComponent.d.ts

@@ -0,0 +1,8 @@
+import { Fiber } from "@locator/shared";
+import { SimpleDOMRect } from "../../types/types";
+import { ElementInfo } from "../adapterApi";
+export declare function getAllParentsElementsAndRootComponent(fiber: Fiber): {
+    component: Fiber;
+    componentBox: SimpleDOMRect;
+    parentElements: ElementInfo[];
+};

package/dist/adapters/react/getAllParentsElementsAndRootComponent.js

@@ -0,0 +1,34 @@
+import { getUsableName } from "../../functions/getUsableName";
+import { mergeRects } from "../../functions/mergeRects";
+import { getFiberComponentBoundingBox } from "./getFiberComponentBoundingBox";
+import { isStyledElement } from "./isStyled";
+export function getAllParentsElementsAndRootComponent(fiber) {
+  const parentElements = [];
+  const deepestElement = fiber.stateNode;
+  if (!deepestElement || !(deepestElement instanceof HTMLElement)) {
+    throw new Error("This functions works only for Fibres with HTMLElement stateNode");
+  }
+  let componentBox = 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/dist/adapters/react/getAllWrappingParents.d.ts

@@ -0,0 +1,2 @@
+import { Fiber } from "@locator/shared";
+export declare function getAllWrappingParents(fiber: Fiber): Fiber[];

package/dist/adapters/react/getAllWrappingParents.js

@@ -0,0 +1,19 @@
+import { getAllFiberChildren } from "./getAllFiberChildren";
+export function getAllWrappingParents(fiber) {
+  const parents = [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/dist/adapters/react/getFiberComponentBoundingBox.d.ts

@@ -0,0 +1,3 @@
+import { Fiber } from "@locator/shared";
+import { SimpleDOMRect } from "../../types/types";
+export declare function getFiberComponentBoundingBox(fiber: Fiber, level?: number): SimpleDOMRect | undefined;

package/dist/adapters/react/getFiberComponentBoundingBox.js

@@ -0,0 +1,27 @@
+import { getFiberOwnBoundingBox } from "./getFiberOwnBoundingBox";
+import { getAllFiberChildren } from "./getAllFiberChildren";
+import { mergeRects } from "../../functions/mergeRects";
+const MAX_LEVEL = 6;
+export function getFiberComponentBoundingBox(fiber, level = 0) {
+  const children = getAllFiberChildren(fiber);
+  let composedRect;
+  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/dist/adapters/react/getFiberLabel.d.ts

@@ -0,0 +1,3 @@
+import { Fiber, Source } from "@locator/shared";
+import { LabelData } from "../../types/LabelData";
+export declare function getFiberLabel(fiber: Fiber, source?: Source): LabelData;

package/dist/adapters/react/getFiberLabel.js

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

package/dist/adapters/react/getFiberOwnBoundingBox.d.ts

@@ -0,0 +1,3 @@
+import { Fiber } from "@locator/shared";
+import { SimpleDOMRect } from "../../types/types";
+export declare function getFiberOwnBoundingBox(fiber: Fiber): SimpleDOMRect | null;

package/dist/adapters/react/getFiberOwnBoundingBox.js

@@ -0,0 +1,6 @@
+export function getFiberOwnBoundingBox(fiber) {
+  if (fiber.stateNode && fiber.stateNode.getBoundingClientRect) {
+    return fiber.stateNode.getBoundingClientRect();
+  }
+  return null;
+}

package/dist/adapters/react/isStyled.d.ts

@@ -0,0 +1,2 @@
+import { Fiber } from "@locator/shared";
+export declare function isStyledElement(fiber: Fiber): boolean;

package/dist/adapters/react/isStyled.js

@@ -0,0 +1,3 @@
+export function isStyledElement(fiber) {
+  return !!fiber._debugOwner?.elementType?.styledComponentId;
+}

package/dist/adapters/react/makeFiberId.d.ts

@@ -0,0 +1,2 @@
+import { Fiber } from "@locator/shared";
+export declare function makeFiberId(fiber: Fiber): string;

package/dist/adapters/react/makeFiberId.js

@@ -0,0 +1,16 @@
+let globalIdCounter = 0;
+const globalIdMap = new WeakMap();
+export function makeFiberId(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/dist/adapters/react/reactAdapter.d.ts

@@ -0,0 +1,11 @@
+import { AdapterObject, FullElementInfo } from "../adapterApi";
+import { Source } from "@locator/shared";
+import { TreeNodeComponent } from "../../types/TreeNode";
+import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
+export declare function getElementInfo(found: HTMLElement): FullElementInfo | null;
+export declare class ReactTreeNodeElement extends HtmlElementTreeNode {
+    getSource(): Source | null;
+    getComponent(): TreeNodeComponent | null;
+}
+declare const reactAdapter: AdapterObject;
+export default reactAdapter;