qwik-inspector-ignored-experiment.tsx

import type { Component, DevJSX, JSXNode, JSXOutput } from "@builder.io/qwik";
import { useSignal, useVisibleTask$ } from "@builder.io/qwik";
const QWIK_DATA_ATTR = "data-qwik-inspector";

interface HackedProps {
  "data-qwik-inspector"?: DevJSX;
  "p:where"?: DevJSX;
}

function createLinkFromDevJSX(dev: DevJSX) {
  const { fileName, columnNumber, lineNumber } = dev;
  return `${fileName}:${lineNumber}:${columnNumber}`;
}

export function useQwikInspectorIgnored(
  withHacks?: HackedProps | Record<string, any>,
) {
  const element = useSignal<Element>();
  // eslint-disable-next-line qwik/no-use-visible-task
  useVisibleTask$(({ track }) => {
    const target = track(element);
    if (target && target instanceof Element) {
      const replaceWith = withHacks?.["data-qwik-inspector"];
      const where = withHacks?.["p:where"]?.fileName;
      console.log("removing", target, { replaceWith, where });
      if (target instanceof HTMLElement) {
        target.setAttribute(QWIK_DATA_ATTR, replaceWith || "");
        console.log(
          "set attribute",
          { target, replaceWith },
          target.getAttribute(QWIK_DATA_ATTR),
        );
      }
      const rec = (target: Element) => {
        setTimeout(() => {
          try {
            if (replaceWith) {
              target.setAttribute(QWIK_DATA_ATTR, replaceWith);
            } else {
              target.removeAttribute(QWIK_DATA_ATTR);
            }
          } catch {
            // not important
          }
        }, 400);
        // iterate children and recurse down
        for (let i = 0, len = target.children.length; i < len; i++) {
          rec(target.children[i]);
        }
      };
      // console.log("removing", target, withHacks);
      rec(target);
    }
  });
  return element;
}

export function hacked<PROPS = unknown>(
  ref: JSXOutput,
  comp: Component<PROPS>,
): Component<PROPS> {
  const { dev: refDev } = ref as JSXNode;
  if (!refDev) return comp;
  return (...args) => {
    const [props, key, flags, callerDev] = args;
    const node = comp(
      {
        ...props,
        "data-qwik-inspector": callerDev && createLinkFromDevJSX(callerDev),
        "p:where": refDev,
      },
      key,
      flags,
      callerDev,
    ) as JSXNode;
    // replaceDev(refDev, node, callerDev);
    // console.log("simplify", { refDev, callerDev }, node);
    return node;
  };
}

// function replaceDev(ref: DevJSX, node: JSXNode, add?: DevJSX) {
//   if (node.dev == null || node.dev.fileName === ref.fileName) {
//     node.props["data-qwik-inspector"] = add;
//     node.props["p:where"] = ref;
//     replaceDevForChildren(ref, node.children, add);
//   }
// }
// function replaceDevForChildren(ref: DevJSX, child: JSXChildren, add?: DevJSX) {
//   if (child && typeof child === "object" && "props" in child) {
//     replaceDev(ref, child, add);
//   } else if (Array.isArray(child)) {
//     for (let i = 0; i < child.length; i++) {
//       replaceDevForChildren(ref, child[i], add);
//     }
//   }
// }