@treelocator/runtime 0.4.0 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.4.0",
+  "version": "0.4.5",
   "description": "TreeLocatorJS runtime for component ancestry tracking. Alt+click any element to copy its component tree to clipboard. Exposes window.__treelocator__ API for browser automation (Playwright, Puppeteer, Selenium, Cypress).",
   "keywords": [
     "locator",

package/src/_generated_styles.ts

@@ -554,7 +554,7 @@ video {
   display: none;
 }
 
-[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -571,7 +571,7 @@ video {
   --tw-shadow: 0 0 #0000;
 }
 
-[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -600,6 +600,11 @@ input::placeholder,textarea::placeholder {
 
 ::-webkit-date-and-time-value {
   min-height: 1.5em;
+  text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+  display: inline-flex;
 }
 
 ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
@@ -617,7 +622,7 @@ select {
           print-color-adjust: exact;
 }
 
-[multiple],[size]:where(select:not([size="1"])) {
+select:where([multiple]),select:where([size]:not([size="1"])) {
   background-image: initial;
   background-position: initial;
   background-repeat: unset;
@@ -627,7 +632,7 @@ select {
           print-color-adjust: unset;
 }
 
-[type='checkbox'],[type='radio'] {
+input:where([type='checkbox']),input:where([type='radio']) {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -650,15 +655,15 @@ select {
   --tw-shadow: 0 0 #0000;
 }
 
-[type='checkbox'] {
+input:where([type='checkbox']) {
   border-radius: 0px;
 }
 
-[type='radio'] {
+input:where([type='radio']) {
   border-radius: 100%;
 }
 
-[type='checkbox']:focus,[type='radio']:focus {
+input:where([type='checkbox']):focus,input:where([type='radio']):focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -670,7 +675,7 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-[type='checkbox']:checked,[type='radio']:checked {
+input:where([type='checkbox']):checked,input:where([type='radio']):checked {
   border-color: transparent;
   background-color: currentColor;
   background-size: 100% 100%;
@@ -678,20 +683,36 @@ select {
   background-repeat: no-repeat;
 }
 
-[type='checkbox']:checked {
+input:where([type='checkbox']):checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
-[type='radio']:checked {
+@media (forced-colors: active)  {
+  input:where([type='checkbox']):checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
+input:where([type='radio']):checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
 }
 
-[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+@media (forced-colors: active)  {
+  input:where([type='radio']):checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
+input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
   border-color: transparent;
   background-color: currentColor;
 }
 
-[type='checkbox']:indeterminate {
+input:where([type='checkbox']):indeterminate {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
   border-color: transparent;
   background-color: currentColor;
@@ -700,12 +721,20 @@ select {
   background-repeat: no-repeat;
 }
 
-[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+@media (forced-colors: active)  {
+  input:where([type='checkbox']):indeterminate {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
+input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
   border-color: transparent;
   background-color: currentColor;
 }
 
-[type='file'] {
+input:where([type='file']) {
   background: unset;
   border-color: inherit;
   border-width: 0;
@@ -715,11 +744,45 @@ select {
   line-height: inherit;
 }
 
-[type='file']:focus {
+input:where([type='file']):focus {
   outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -764,6 +827,10 @@ select {
   position: relative;
 }
 
+.sticky {
+  position: sticky;
+}
+
 .-bottom-7 {
   bottom: -1.75rem;
 }
@@ -1108,6 +1175,12 @@ select {
   overflow: scroll;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .text-ellipsis {
   text-overflow: ellipsis;
 }
@@ -1164,6 +1237,15 @@ select {
   border-style: solid;
 }
 
+.border-dashed {
+  border-style: dashed;
+}
+
+.border-amber-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
@@ -1179,6 +1261,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
+}
+
 .border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
@@ -1346,6 +1433,10 @@ select {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -1681,10 +1772,19 @@ select {
   --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity, 1));
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.backdrop-filter {
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package/src/adapters/getElementInfo.tsx

@@ -1,27 +1,7 @@
-import reactAdapter from "./react/reactAdapter";
-import jsxAdapter from "./jsx/jsxAdapter";
-import svelteAdapter from "./svelte/svelteAdapter";
-import vueAdapter from "./vue/vueAdapter";
 import { AdapterId } from "../consts";
+import { resolveAdapter } from "./resolveAdapter";
 
 export function getElementInfo(target: HTMLElement, adapterId?: AdapterId) {
-  if (adapterId === "react") {
-    return reactAdapter.getElementInfo(target);
-  }
-  if (adapterId === "svelte") {
-    return svelteAdapter.getElementInfo(target);
-  }
-  if (adapterId === "jsx") {
-    return jsxAdapter.getElementInfo(target);
-  }
-  if (adapterId === "vue") {
-    return vueAdapter.getElementInfo(target);
-  }
-
-  return (
-    jsxAdapter.getElementInfo(target) ||
-    reactAdapter.getElementInfo(target) ||
-    svelteAdapter.getElementInfo(target) ||
-    vueAdapter.getElementInfo(target)
-  );
+  const adapter = resolveAdapter(adapterId);
+  return adapter?.getElementInfo(target) ?? null;
 }

package/src/adapters/getParentsPath.tsx

@@ -1,49 +1,10 @@
-import reactAdapter from "./react/reactAdapter";
-import {
-  detectJSX,
-  detectReact,
-  detectSvelte,
-  detectVue,
-} from "@locator/shared";
 import { ParentPathItem } from "./adapterApi";
-import svelteAdapter from "./svelte/svelteAdapter";
-import jsxAdapter from "./jsx/jsxAdapter";
-import vueAdapter from "./vue/vueAdapter";
+import { resolveAdapter } from "./resolveAdapter";
 
 export function getParentsPaths(
   target: HTMLElement,
   adapterId?: string
 ): ParentPathItem[] {
-  if (adapterId === "react" && reactAdapter.getParentsPaths) {
-    return reactAdapter.getParentsPaths(target);
-  }
-  if (adapterId === "svelte" && svelteAdapter.getParentsPaths) {
-    return svelteAdapter.getParentsPaths(target);
-  }
-  if (adapterId === "vue" && vueAdapter.getParentsPaths) {
-    return vueAdapter.getParentsPaths(target);
-  }
-  if (adapterId === "jsx" && jsxAdapter.getParentsPaths) {
-    return jsxAdapter.getParentsPaths(target);
-  }
-
-  if (detectSvelte() && svelteAdapter.getParentsPaths) {
-    return svelteAdapter.getParentsPaths(target);
-  }
-
-  if (detectVue() && vueAdapter.getParentsPaths) {
-    return vueAdapter.getParentsPaths(target);
-  }
-
-  if (detectReact() && reactAdapter.getParentsPaths) {
-    return reactAdapter.getParentsPaths(target);
-  }
-
-  // // Must be last, because its global data leaks from Locator extension.
-  // // Because the extension is in SolidJS and it uses JSX plugin in dev mode.
-  if (detectJSX() && jsxAdapter.getParentsPaths) {
-    return jsxAdapter.getParentsPaths(target);
-  }
-
-  return [];
+  const adapter = resolveAdapter(adapterId as any);
+  return adapter?.getParentsPaths(target) ?? [];
 }

package/src/adapters/getTree.tsx

@@ -1,45 +1,6 @@
-import reactAdapter from "./react/reactAdapter";
-import jsxAdapter from "./jsx/jsxAdapter";
-import svelteAdapter from "./svelte/svelteAdapter";
-import {
-  detectJSX,
-  detectReact,
-  detectSvelte,
-  detectVue,
-} from "@locator/shared";
-import vueAdapter from "./vue/vueAdapter";
+import { resolveAdapter } from "./resolveAdapter";
 
 export function getTree(target: HTMLElement, adapterId?: string) {
-  if (adapterId === "react" && reactAdapter.getTree) {
-    return reactAdapter.getTree(target);
-  }
-  if (adapterId === "svelte" && svelteAdapter.getTree) {
-    return svelteAdapter.getTree(target);
-  }
-  if (adapterId === "vue" && vueAdapter.getTree) {
-    return vueAdapter.getTree(target);
-  }
-  if (adapterId === "jsx" && jsxAdapter.getTree) {
-    return jsxAdapter.getTree(target);
-  }
-
-  if (detectSvelte() && svelteAdapter.getTree) {
-    return svelteAdapter.getTree(target);
-  }
-
-  if (detectVue() && vueAdapter.getTree) {
-    return vueAdapter.getTree(target);
-  }
-
-  if (detectReact() && reactAdapter.getTree) {
-    return reactAdapter.getTree(target);
-  }
-
-  // Must be last, because its global data leaks from Locator extension.
-  // Because the extension is in SolidJS and it uses JSX plugin in dev mode.
-  if (detectJSX() && jsxAdapter.getTree) {
-    return jsxAdapter.getTree(target);
-  }
-
-  return null;
+  const adapter = resolveAdapter(adapterId as any);
+  return adapter?.getTree?.(target) ?? null;
 }

package/src/adapters/jsx/getJSXComponentBoundingBox.ts

@@ -54,7 +54,6 @@ export function getJSXComponentBoundingBox(
             );
             goParent(parent);
           }
-          expData.wrappingComponentId;
         }
       } else {
         // If there is no locatorjs-id or locatorjs, we should go to the parent, because it can be some library element

package/src/adapters/jsx/jsxAdapter.ts

@@ -128,8 +128,6 @@ export function getElementInfo(target: HTMLElement): FullElementInfo | null {
     };
   }
 
-  // return deduplicateLabels(labels);
-
   return null;
 }
 

package/src/adapters/jsx/runtimeStore.ts

@@ -75,17 +75,6 @@ export function getDataForDataId(dataId: string) {
     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,

package/src/adapters/react/reactAdapter.ts

@@ -33,13 +33,6 @@ export function getElementInfo(found: HTMLElement): FullElementInfo | null {
 
     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) {

package/src/adapters/resolveAdapter.ts

@@ -0,0 +1,38 @@
+import reactAdapter from "./react/reactAdapter";
+import jsxAdapter from "./jsx/jsxAdapter";
+import svelteAdapter from "./svelte/svelteAdapter";
+import vueAdapter from "./vue/vueAdapter";
+import {
+  detectJSX,
+  detectReact,
+  detectSvelte,
+  detectVue,
+} from "@locator/shared";
+import type { AdapterObject } from "./adapterApi";
+import type { AdapterId } from "../consts";
+
+const adapterMap: Record<AdapterId, AdapterObject> = {
+  react: reactAdapter,
+  svelte: svelteAdapter,
+  vue: vueAdapter,
+  jsx: jsxAdapter,
+};
+
+/**
+ * Resolve the framework adapter to use.
+ * If an explicit adapterId is given, return that adapter.
+ * Otherwise, auto-detect the framework in priority order.
+ */
+export function resolveAdapter(adapterId?: AdapterId): AdapterObject | null {
+  if (adapterId) {
+    return adapterMap[adapterId] ?? null;
+  }
+
+  if (detectSvelte()) return svelteAdapter;
+  if (detectVue()) return vueAdapter;
+  if (detectReact()) return reactAdapter;
+  // Must be last: global data leaks from the LocatorJS extension (SolidJS + JSX plugin in dev)
+  if (detectJSX()) return jsxAdapter;
+
+  return null;
+}

package/src/adapters/vue/vueAdapter.ts

@@ -76,20 +76,6 @@ export class VueTreeNodeElement extends HtmlElementTreeNode {
   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 {

package/src/browserApi.ts

@@ -158,8 +158,6 @@ export interface LocatorJSAPI {
   } | null>;
 }
 
-let adapterId: AdapterId | undefined;
-
 function resolveElement(
   elementOrSelector: HTMLElement | string
 ): HTMLElement | null {
@@ -170,7 +168,7 @@ function resolveElement(
   return elementOrSelector;
 }
 
-function getAncestryForElement(element: HTMLElement): AncestryItem[] | null {
+function getAncestryForElement(element: HTMLElement, adapterId?: AdapterId): AncestryItem[] | null {
   const treeNode = createTreeNode(element, adapterId);
   if (!treeNode) {
     return null;
@@ -179,9 +177,10 @@ function getAncestryForElement(element: HTMLElement): AncestryItem[] | null {
 }
 
 async function getEnrichedAncestryForElement(
-  element: HTMLElement
+  element: HTMLElement,
+  adapterId?: AdapterId
 ): Promise<AncestryItem[] | null> {
-  const ancestry = getAncestryForElement(element);
+  const ancestry = getAncestryForElement(element, adapterId);
   if (!ancestry) return null;
   return enrichAncestryWithSourceMaps(ancestry, element);
 }
@@ -286,7 +285,7 @@ CYPRESS EXAMPLES:
 ----------------
 
 cy.window().then((win) => {
-  const path = win.__locatorjs__.getPath('button.submit');
+  const path = win.__treelocator__.getPath('button.submit');
   cy.log(path);
 });
 
@@ -301,10 +300,8 @@ Documentation: https://github.com/wende/treelocatorjs
 `;
 
 export function createBrowserAPI(
-  adapterIdParam?: AdapterId
+  adapterId?: AdapterId
 ): LocatorJSAPI {
-  adapterId = adapterIdParam;
-
   return {
     getPath(elementOrSelector: HTMLElement | string): Promise<string | null> {
       const element = resolveElement(elementOrSelector);
@@ -312,7 +309,7 @@ export function createBrowserAPI(
         return Promise.resolve(null);
       }
 
-      return getEnrichedAncestryForElement(element).then((ancestry) =>
+      return getEnrichedAncestryForElement(element, adapterId).then((ancestry) =>
         ancestry ? formatAncestryChain(ancestry) : null
       );
     },
@@ -325,7 +322,7 @@ export function createBrowserAPI(
         return Promise.resolve(null);
       }
 
-      return getEnrichedAncestryForElement(element);
+      return getEnrichedAncestryForElement(element, adapterId);
     },
 
     getPathData(
@@ -336,7 +333,7 @@ export function createBrowserAPI(
         return Promise.resolve(null);
       }
 
-      return getEnrichedAncestryForElement(element).then((ancestry) =>
+      return getEnrichedAncestryForElement(element, adapterId).then((ancestry) =>
         ancestry ? { path: formatAncestryChain(ancestry), ancestry } : null
       );
     },

package/src/components/MaybeOutline.tsx

@@ -9,6 +9,7 @@ export function MaybeOutline(props: {
   currentElement: HTMLElement;
   adapterId?: AdapterId;
   targets: Targets;
+  dashed?: boolean;
 }) {
   const elInfo = createMemo(() =>
     getElementInfo(props.currentElement, props.adapterId)
@@ -41,12 +42,13 @@ export function MaybeOutline(props: {
         <Outline
           element={elInfo()!}
           targets={props.targets}
+          dashed={props.dashed}
         />
       ) : phoenixInfo() ? (
         <div>
           {/* Element outline box */}
           <div
-            class="fixed rounded border border-solid border-amber-500"
+            class={`fixed rounded border ${props.dashed ? "border-dashed" : "border-solid"} border-amber-500`}
             style={{
               "z-index": 2,
               left: box().x + "px",
@@ -81,7 +83,7 @@ export function MaybeOutline(props: {
         <div>
           {/* Element outline box */}
           <div
-            class="fixed rounded border border-solid border-gray-500"
+            class={`fixed rounded border ${props.dashed ? "border-dashed" : "border-solid"} border-gray-500`}
             style={{
               "z-index": 2,
               left: box().x + "px",

package/src/components/Outline.tsx

@@ -25,6 +25,7 @@ export type AllBoxes = {
 export function Outline(props: {
   element: FullElementInfo;
   targets: Targets;
+  dashed?: boolean;
 }) {
   const box = () => props.element.thisElement.box;
 
@@ -130,7 +131,7 @@ export function Outline(props: {
         {domElementInfo() && <RenderBoxes allBoxes={domElementInfo()!} />}
         {/* Element outline box */}
         <div
-          class="fixed rounded border border-solid border-sky-500"
+          class={`fixed rounded border ${props.dashed ? "border-dashed" : "border-solid"} border-sky-500`}
           style={{
             "z-index": 2,
             left: box().x + "px",