@treelocator/runtime 0.4.1 → 0.4.5

package/dist/_generated_styles.js

@@ -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/dist/adapters/getElementInfo.js

@@ -1,19 +1,5 @@
-import reactAdapter from "./react/reactAdapter";
-import jsxAdapter from "./jsx/jsxAdapter";
-import svelteAdapter from "./svelte/svelteAdapter";
-import vueAdapter from "./vue/vueAdapter";
+import { resolveAdapter } from "./resolveAdapter";
 export function getElementInfo(target, 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/dist/adapters/getParentsPath.js

@@ -1,35 +1,5 @@
-import reactAdapter from "./react/reactAdapter";
-import { detectJSX, detectReact, detectSvelte, detectVue } from "@locator/shared";
-import svelteAdapter from "./svelte/svelteAdapter";
-import jsxAdapter from "./jsx/jsxAdapter";
-import vueAdapter from "./vue/vueAdapter";
+import { resolveAdapter } from "./resolveAdapter";
 export function getParentsPaths(target, adapterId) {
-  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);
+  return adapter?.getParentsPaths(target) ?? [];
 }

package/dist/adapters/getTree.js

@@ -1,35 +1,5 @@
-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, adapterId) {
-  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);
+  return adapter?.getTree?.(target) ?? null;
 }

package/dist/adapters/jsx/getJSXComponentBoundingBox.js

@@ -38,7 +38,6 @@ export function getJSXComponentBoundingBox(found, locatorData, componentFolder,
             composedBox = mergeRects(composedBox, parent.getBoundingClientRect());
             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/dist/adapters/jsx/jsxAdapter.js

@@ -85,9 +85,6 @@ export function getElementInfo(target) {
       }] : []
     };
   }
-
-  // return deduplicateLabels(labels);
-
   return null;
 }
 export class JSXTreeNodeElement extends HtmlElementTreeNode {

package/dist/adapters/jsx/runtimeStore.js

@@ -67,18 +67,6 @@ export function getDataForDataId(dataId) {
     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,

package/dist/adapters/react/reactAdapter.js

@@ -23,14 +23,6 @@ export function getElementInfo(found) {
       parentElements
     } = result;
     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/dist/adapters/resolveAdapter.d.ts

@@ -0,0 +1,8 @@
+import type { AdapterObject } from "./adapterApi";
+import type { AdapterId } from "../consts";
+/**
+ * Resolve the framework adapter to use.
+ * If an explicit adapterId is given, return that adapter.
+ * Otherwise, auto-detect the framework in priority order.
+ */
+export declare function resolveAdapter(adapterId?: AdapterId): AdapterObject | null;

package/dist/adapters/resolveAdapter.js

@@ -0,0 +1,28 @@
+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";
+const adapterMap = {
+  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) {
+  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/dist/adapters/vue/vueAdapter.js

@@ -62,20 +62,6 @@ export class VueTreeNodeElement extends HtmlElementTreeNode {
   getComponent() {
     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) {
   const originalRoot = new VueTreeNodeElement(element);

package/dist/browserApi.d.ts

@@ -144,5 +144,5 @@ export interface LocatorJSAPI {
         interactions: InteractionEvent[];
     } | null>;
 }
-export declare function createBrowserAPI(adapterIdParam?: AdapterId): LocatorJSAPI;
+export declare function createBrowserAPI(adapterId?: AdapterId): LocatorJSAPI;
 export declare function installBrowserAPI(adapterIdParam?: AdapterId): void;

package/dist/browserApi.js

@@ -1,7 +1,6 @@
 import { createTreeNode } from "./adapters/createTreeNode";
 import { collectAncestry, formatAncestryChain } from "./functions/formatAncestryChain";
 import { enrichAncestryWithSourceMaps } from "./functions/enrichAncestrySourceMaps";
-let adapterId;
 function resolveElement(elementOrSelector) {
   if (typeof elementOrSelector === "string") {
     const element = document.querySelector(elementOrSelector);
@@ -9,15 +8,15 @@ function resolveElement(elementOrSelector) {
   }
   return elementOrSelector;
 }
-function getAncestryForElement(element) {
+function getAncestryForElement(element, adapterId) {
   const treeNode = createTreeNode(element, adapterId);
   if (!treeNode) {
     return null;
   }
   return collectAncestry(treeNode);
 }
-async function getEnrichedAncestryForElement(element) {
-  const ancestry = getAncestryForElement(element);
+async function getEnrichedAncestryForElement(element, adapterId) {
+  const ancestry = getAncestryForElement(element, adapterId);
   if (!ancestry) return null;
   return enrichAncestryWithSourceMaps(ancestry, element);
 }
@@ -121,7 +120,7 @@ CYPRESS EXAMPLES:
 ----------------
 
 cy.window().then((win) => {
-  const path = win.__locatorjs__.getPath('button.submit');
+  const path = win.__treelocator__.getPath('button.submit');
   cy.log(path);
 });
 
@@ -134,29 +133,28 @@ NOTES:
 
 Documentation: https://github.com/wende/treelocatorjs
 `;
-export function createBrowserAPI(adapterIdParam) {
-  adapterId = adapterIdParam;
+export function createBrowserAPI(adapterId) {
   return {
     getPath(elementOrSelector) {
       const element = resolveElement(elementOrSelector);
       if (!element) {
         return Promise.resolve(null);
       }
-      return getEnrichedAncestryForElement(element).then(ancestry => ancestry ? formatAncestryChain(ancestry) : null);
+      return getEnrichedAncestryForElement(element, adapterId).then(ancestry => ancestry ? formatAncestryChain(ancestry) : null);
     },
     getAncestry(elementOrSelector) {
       const element = resolveElement(elementOrSelector);
       if (!element) {
         return Promise.resolve(null);
       }
-      return getEnrichedAncestryForElement(element);
+      return getEnrichedAncestryForElement(element, adapterId);
     },
     getPathData(elementOrSelector) {
       const element = resolveElement(elementOrSelector);
       if (!element) {
         return Promise.resolve(null);
       }
-      return getEnrichedAncestryForElement(element).then(ancestry => ancestry ? {
+      return getEnrichedAncestryForElement(element, adapterId).then(ancestry => ancestry ? {
         path: formatAncestryChain(ancestry),
         ancestry
       } : null);

package/dist/components/MaybeOutline.d.ts

@@ -4,4 +4,5 @@ export declare function MaybeOutline(props: {
     currentElement: HTMLElement;
     adapterId?: AdapterId;
     targets: Targets;
+    dashed?: boolean;
 }): import("solid-js").JSX.Element;