@treelocator/runtime 0.4.1 → 0.4.5

package/src/adapters/react/makeFiberId.tsx

@@ -1,19 +0,0 @@
-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/searchDevtoolsRenderersForClosestTarget.ts

@@ -1,15 +0,0 @@
-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/components/Button.tsx

@@ -1,14 +0,0 @@
-export function Button(props: { onClick: () => void; children: any }) {
-  return (
-    <button
-      class="py-1 px-1 hover:bg-white/30 pointer hover:text-gray-100 rounded"
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        props.onClick();
-      }}
-    >
-      {props.children}
-    </button>
-  );
-}

package/src/components/ComponentOutline.tsx

@@ -1,98 +0,0 @@
-import { For } from "solid-js";
-import { PADDING } from "../consts";
-import { LabelData } from "../types/LabelData";
-import { SimpleDOMRect } from "../types/types";
-
-export function ComponentOutline(props: {
-  bbox: SimpleDOMRect;
-  labels: LabelData[];
-  element: HTMLElement;
-}) {
-  const isInside = () => props.bbox.height >= window.innerHeight - 40;
-  const isBelow = () => props.bbox.y < 30 && !isInside();
-
-  const left = () => Math.max(props.bbox.x - PADDING, 0);
-  const top = () => Math.max(props.bbox.y - PADDING, 0);
-
-  const cutFromTop = () => (props.bbox.y < 0 ? -(props.bbox.y - PADDING) : 0);
-  const cutFromLeft = () => (props.bbox.x < 0 ? -(props.bbox.x - PADDING) : 0);
-
-  const width = () =>
-    Math.min(props.bbox.width - cutFromLeft() + PADDING * 2, window.innerWidth);
-  const height = () =>
-    Math.min(
-      props.bbox.height - cutFromTop() + PADDING * 2,
-      window.innerHeight
-    );
-
-  return (
-    <div
-      class="border border-purple-500"
-      style={{
-        "z-index": 1,
-        position: "fixed",
-        left: left() + "px",
-        top: top() + "px",
-        width: width() + "px",
-        height: height() + "px",
-        "border-top-left-radius": left() === 0 || top() === 0 ? "0" : "8px",
-        "border-top-right-radius":
-          left() + width() === window.innerWidth || top() === 0 ? "0" : "8px",
-        "border-bottom-left-radius":
-          left() === 0 || top() + height() === window.innerHeight ? "0" : "8px",
-        "border-bottom-right-radius":
-          left() + width() === window.innerWidth ||
-          top() + height() === window.innerHeight
-            ? "0"
-            : "8px",
-      }}
-    >
-      <div
-        id="locatorjs-labels-section"
-        style={{
-          position: "absolute",
-          display: "flex",
-          "justify-content": "center",
-          bottom: isBelow() ? (isInside() ? "2px" : "-28px") : undefined,
-          top: isBelow() ? undefined : isInside() ? "2px" : "-28px",
-          left: "0px",
-          width: "100%",
-          "pointer-events": "auto",
-          cursor: "pointer",
-          ...(isBelow()
-            ? {
-                "border-bottom-left-radius": "100%",
-                "border-bottom-right-radius": "100%",
-              }
-            : {
-                "border-top-left-radius": "100%",
-                "border-top-right-radius": "100%",
-              }),
-        }}
-      >
-        <div
-          id="locatorjs-labels-wrapper"
-          style={{
-            padding: isBelow() ? "10px 10px 2px 10px" : "2px 10px 10px 10px",
-          }}
-        >
-          <For each={props.labels}>
-            {(label) => {
-              const labelClass =
-                "bg-purple-500 block text-white text-xs font-bold text-center px-1 py-0.5 rounded whitespace-nowrap pointer-events-auto";
-              const labelStyles = {
-                "line-height": "18px",
-              };
-
-              return (
-                <div class={labelClass} style={labelStyles}>
-                  {label.label}
-                </div>
-              );
-            }}
-          </For>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/SimpleNodeOutline.tsx

@@ -1,27 +0,0 @@
-import { TreeNode } from "../types/TreeNode";
-
-export function SimpleNodeOutline(props: { node: TreeNode }) {
-  const offset = () => (props.node.type === "component" ? 2 : 0);
-  const box = () => props.node.getBox();
-  return (
-    <div>
-      {box() ? (
-        <div
-          style={{
-            position: "fixed",
-            left: box()!.x - offset() + "px",
-            top: box()!.y - offset() + "px",
-            width: box()!.width + offset() * 2 + "px",
-            height: box()!.height + offset() * 2 + "px",
-            border:
-              props.node.type === "component"
-                ? "2px solid rgba(200,0,0,1)"
-                : "1px solid rgba(200,0,0,1)",
-            "border-radius": props.node.type === "component" ? "5px" : "3px",
-            "z-index": props.node.type === "component" ? 1000 : 10,
-          }}
-        />
-      ) : null}
-    </div>
-  );
-}

package/src/components/Tooltip.tsx

@@ -1,28 +0,0 @@
-export default function Tooltip(props: {
-  tooltipText?: string;
-  position?: "bottom" | "left" | "right" | "top";
-  children: any;
-}) {
-  const positionMap = {
-    bottom: "-bottom-7 left-1/2 -translate-x-1/2 transform",
-    left: "-left-2 top-1/2 -translate-y-1/2 -translate-x-full transform",
-    right: "-right-2 top-1/2 -translate-y-1/2 translate-x-full transform",
-    top: "-top-7 left-1/2 -translate-x-1/2 transform",
-  };
-
-  return (
-    <div class="group/tooltip relative block">
-      {props.children}
-      <div
-        class={
-          "pointer-events-none invisible absolute z-10 whitespace-nowrap rounded bg-gray-700 px-2 py-1 text-center text-xs text-white opacity-0 transition-opacity duration-300 group-hover/tooltip:visible group-hover/tooltip:opacity-100" +
-          " " +
-          positionMap[props.position || "top"]
-        }
-        role="tooltip"
-      >
-        {props.tooltipText}
-      </div>
-    </div>
-  );
-}

package/src/functions/cropPath.test.ts

@@ -1,18 +0,0 @@
-import cropPath from "./cropPath";
-import { describe, expect, test } from "vitest";
-
-describe("cropPath", () => {
-  test("crop", () => {
-    expect(cropPath("aaa/bbb/ccc/ddd.tsx")).toBe(".../bbb/ccc/ddd.tsx");
-    expect(cropPath("/aaa/bbb/ccc/ddd.tsx")).toBe(".../bbb/ccc/ddd.tsx");
-  });
-
-  test("no crop", () => {
-    // expect(cropPath("/bbb/ccc/ddd.tsx")).toBe("/bbb/ccc/ddd.tsx");
-    expect(cropPath("bbb/ccc/ddd.tsx")).toBe("bbb/ccc/ddd.tsx");
-    expect(cropPath("/ccc/ddd.tsx")).toBe("/ccc/ddd.tsx");
-    expect(cropPath("ccc/ddd.tsx")).toBe("ccc/ddd.tsx");
-    expect(cropPath("")).toBe("");
-    expect(cropPath("xxx")).toBe("xxx");
-  });
-});

package/src/functions/cropPath.ts

@@ -1,12 +0,0 @@
-export default function cropPath(fullPath: string) {
-  const array = fullPath.split("/");
-
-  const newPath = array
-    .slice(Math.max(array.length - 3, 0), array.length)
-    .join("/");
-  if (newPath !== fullPath) {
-    return `.../${newPath}`;
-  } else {
-    return newPath;
-  }
-}

package/src/functions/evalTemplate.test.ts

@@ -1,12 +0,0 @@
-import { evalTemplate } from "./evalTemplate";
-import { describe, expect, test } from "vitest";
-
-describe("evalTemplate", () => {
-  test("basic", () => {
-    const res = evalTemplate("https://example.com/${filePath}${ext}", {
-      filePath: "test",
-      ext: ".js",
-    });
-    expect(res).toBe("https://example.com/test.js");
-  });
-});

package/src/functions/evalTemplate.ts

@@ -1,8 +0,0 @@
-export function evalTemplate(str: string, params: { [key: string]: string }) {
-  let newStr = str;
-
-  Object.entries(params).forEach(([key, value]) => {
-    newStr = newStr.replace("${" + key + "}", value);
-  });
-  return newStr;
-}

package/src/functions/findNames.ts

@@ -1,20 +0,0 @@
-import { Fiber } from "@locator/shared";
-import { getUsableName } from "./getUsableName";
-
-export function findNames(fiber: Fiber): {
-  name: string;
-  wrappingComponent: string;
-} {
-  // if (fiber._debugOwner?.elementType?.styledComponentId) {
-  //   // This is special case for styled-components, we need to show one level up
-  //   return {
-  //     name: getUsableName(fiber._debugOwner),
-  //     wrappingComponent: getUsableName(fiber._debugOwner?._debugOwner),
-  //   };
-  // } else {
-  return {
-    name: getUsableName(fiber),
-    wrappingComponent: getUsableName(fiber._debugOwner),
-  };
-  // }
-}

package/src/functions/getBoundingRect.tsx

@@ -1,11 +0,0 @@
-export function getBoundingRect(node: Element | Text): DOMRect | null {
-  if (node instanceof Element) {
-    return node.getBoundingClientRect();
-  } else if (node instanceof Text) {
-    const range = document.createRange();
-    range.selectNodeContents(node);
-    return range.getBoundingClientRect();
-  } else {
-    return null;
-  }
-}

package/src/functions/getComposedBoundingBox.tsx

@@ -1,25 +0,0 @@
-import { mergeRects } from "./mergeRects";
-import { SimpleDOMRect, SimpleNode } from "./../types/types";
-
-export function getComposedBoundingBox(
-  children: SimpleNode[]
-): SimpleDOMRect | null {
-  let composedRect: SimpleDOMRect | null = null;
-
-  children.forEach((child) => {
-    const box = child.box;
-    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/functions/getIdsOnPathToRoot.tsx

@@ -1,21 +0,0 @@
-import { findFiberByHtmlElement } from "./../adapters/react/findFiberByHtmlElement";
-import { makeFiberId } from "./../adapters/react/makeFiberId";
-
-export function getIdsOnPathToRoot(element: HTMLElement): {
-  [id: string]: true;
-} {
-  const fiber = findFiberByHtmlElement(element, false);
-  if (!fiber) {
-    return {};
-  }
-  const res: {
-    [id: string]: true;
-  } = {};
-  let parent = fiber?._debugOwner;
-
-  while (parent) {
-    res[makeFiberId(parent)] = true;
-    parent = parent?._debugOwner;
-  }
-  return res;
-}

package/src/functions/getMultipleElementsBoundingBox.tsx

@@ -1,25 +0,0 @@
-import { mergeRects } from "./mergeRects";
-import { SimpleDOMRect } from "../types/types";
-
-export function getMultipleElementsBoundingBox(
-  children: HTMLElement[]
-): SimpleDOMRect | null {
-  let composedRect: SimpleDOMRect | null = null;
-
-  children.forEach((child) => {
-    const box = child.getBoundingClientRect();
-    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/functions/getPathToParent.tsx

@@ -1,17 +0,0 @@
-import { findFiberByHtmlElement } from "../adapters/react/findFiberByHtmlElement";
-import { fiberToSimple } from "../adapters/react/fiberToSimple";
-
-export function getPathToParent(element: HTMLElement) {
-  const fiber = findFiberByHtmlElement(element, false);
-  if (!fiber) {
-    return;
-  }
-  let res = fiberToSimple(fiber);
-  let parent = fiber?._debugOwner;
-
-  while (parent) {
-    res = fiberToSimple(parent, [res]);
-    parent = parent?._debugOwner;
-  }
-  return res;
-}

package/src/functions/getUsableFileName.test.tsx

@@ -1,24 +0,0 @@
-import getUsableFileName from "./getUsableFileName"; // assuming the function is in filenameUtils.ts
-import { describe, expect, it } from "vitest";
-
-describe("getUsableFileName", () => {
-  it("should return filename if it is not index.<extension>", () => {
-    expect(getUsableFileName("myProject/utils/getSomething.js")).toBe(
-      "getSomething.js"
-    );
-  });
-
-  it("should return parent folder and filename if the filename is index.<extension>", () => {
-    expect(getUsableFileName("myProject/Button/index.tsx")).toBe(
-      "Button/index.tsx"
-    );
-  });
-
-  it("should handle paths with only one segment", () => {
-    expect(getUsableFileName("file.ts")).toBe("file.ts");
-  });
-
-  it("should handle paths with index.<extension> without parent folder", () => {
-    expect(getUsableFileName("index.ts")).toBe("index.ts");
-  });
-});

package/src/functions/getUsableFileName.tsx

@@ -1,19 +0,0 @@
-export default function getUsableFileName(path: string): string {
-  const pathSegments = path.split("/");
-
-  // If the path has only one segment, return it directly.
-  if (pathSegments.length === 1) {
-    return pathSegments[0] || "unnamed";
-  }
-
-  const fileName = pathSegments[pathSegments.length - 1] || "unnamed";
-
-  if (fileName.startsWith("index.")) {
-    // If the file name is index.<extension>, return the parent folder's name
-    // along with the filename.
-    return `${pathSegments[pathSegments.length - 2]}/${fileName}`;
-  } else {
-    // Otherwise, just return the filename.
-    return fileName;
-  }
-}

package/src/functions/transformPath.test.ts

@@ -1,28 +0,0 @@
-import { transformPath } from "./transformPath";
-import { describe, expect, test } from "vitest";
-
-describe("transformPath", () => {
-  test("replacing internal url to external", () => {
-    expect(transformPath("/app/src/myFile.js", "/app/", "C://myPath/")).toBe(
-      "C://myPath/src/myFile.js"
-    );
-  });
-
-  test("unifying absolute and relative paths", () => {
-    const from = "^/src/";
-    const to = "/myPath/src/";
-
-    expect(transformPath("/src/myFile.js", from, to)).toBe(
-      "/myPath/src/myFile.js"
-    );
-    expect(transformPath("/myPath/src/myFile.js", from, to)).toBe(
-      "/myPath/src/myFile.js"
-    );
-  });
-
-  test("invalid regex should keep original", () => {
-    expect(transformPath("/app/src/myFile.js", "[", "C://myPath/")).toBe(
-      "/app/src/myFile.js"
-    );
-  });
-});

package/src/functions/transformPath.ts

@@ -1,7 +0,0 @@
-export function transformPath(path: string, from: string, to: string) {
-  try {
-    return path.replace(new RegExp(`${from}`), to);
-  } catch (e) {
-    return path;
-  }
-}