Feature: ignored elements

packages/runtime/src/adapters/jsx/jsxAdapter.ts

@@ -12,9 +12,12 @@ import { TreeNode, TreeNodeComponent } from "../../types/TreeNode";
 import { Source } from "../../types/types";
 import { goUpByTheTree } from "../goUpByTheTree";
 import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
+import isIgnoredElement from "../../functions/isIgnoredElement";
 
 export function getElementInfo(target: HTMLElement): FullElementInfo | null {
   const found = target.closest("[data-locatorjs-id]");
+  // if element is ignored, it should match the parent
+  if (found instanceof HTMLElement && isIgnoredElement(found) && ((found.parentElement && found.parentElement !== found) || found.children.length > 0)) return getElementInfo((found.children[0] || found.parentElement) as HTMLElement)
 
   if (
     found &&

packages/runtime/src/adapters/react/reactAdapter.ts

@@ -17,12 +17,16 @@ import { Fiber, Source } from "@locator/shared";
 import { TreeNode, TreeNodeComponent } from "../../types/TreeNode";
 import { goUpByTheTree } from "../goUpByTheTree";
 import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
+import isIgnoredElement from "../../functions/isIgnoredElement";
 
 export function getElementInfo(found: HTMLElement): FullElementInfo | null {
+  // if element is ignored, it should match the parent
+  if (isIgnoredElement(found) && (found.parentElement || found.children.length > 0)) return getElementInfo((found.children[0] || found.parentElement) as HTMLElement)
+
   // Instead of labels, return this element, parent elements leading to closest component, its component labels, all wrapping components labels.
   const labels: LabelData[] = [];
 
-  const fiber = findFiberByHtmlElement(found, false);
+  const fiber = findFiberByHtmlElement(found , false);
   if (fiber) {
     const { component, componentBox, parentElements } =
       getAllParentsElementsAndRootComponent(fiber);

packages/runtime/src/adapters/svelte/svelteAdapter.ts

@@ -8,6 +8,7 @@ import {
 } from "../adapterApi";
 import { goUpByTheTree } from "../goUpByTheTree";
 import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
+import isIgnoredElement from "../../functions/isIgnoredElement";
 
 type SvelteLoc = {
   char: number;
@@ -20,6 +21,8 @@ type SvelteElement = HTMLElement & { __svelte_meta?: { loc: SvelteLoc } };
 
 export function getElementInfo(found: SvelteElement): FullElementInfo | null {
   if (found.__svelte_meta) {
+    // if element is ignored, it should match the parent
+    if (isIgnoredElement(found) && (found.parentElement || found.children.length > 0)) return getElementInfo((found.children[0] || found.parentElement) as HTMLElement)
     const { loc } = found.__svelte_meta;
     return {
       thisElement: {

packages/runtime/src/adapters/vue/vueAdapter.ts

@@ -10,13 +10,17 @@ import {
 import { goUpByTheTree } from "../goUpByTheTree";
 import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
 import { getVueComponentBoundingBox } from "./getVNodeBoundingBox";
+import isIgnoredElement from "../../functions/isIgnoredElement";
 
 type VueElement = HTMLElement & {
   __vueParentComponent?: ComponentInternalInstance;
 };
 
 export function getElementInfo(found: VueElement): FullElementInfo | null {
   const parentComponent = found.__vueParentComponent;
+  // if element is ignored, it should match the parent
+  if (isIgnoredElement(found) && ((parentComponent && found.parentElement) || found.children.length > 0)) return getElementInfo((found.children[0] || found.parentElement) as HTMLElement )
+
   if (parentComponent) {
     if (!parentComponent.type) {
       return null;

packages/runtime/src/functions/isIgnoredElement.ts

@@ -0,0 +1,10 @@
+/**
+ * This function checks if the found element should be ignored.
+ */
+const isIgnoredElement = (element:HTMLElement):boolean => {
+    // TODO: -add more options for ignoring elements if needed e.g. disable all elements with certain prefix
+    if (element.dataset.locatorDisable) return true;
+    return false
+};
+
+export default isIgnoredElement