data-highlight.js

import { attribute, effect } from "datastar";

const registry = CSS.highlights;

const findMatchingRange = (highlight, range) =>
  Array.from(highlight?.values() || []).find(
    (r) =>
      r.startContainer === range.startContainer &&
      r.endContainer === range.endContainer &&
      r.compareBoundaryPoints(Range.START_TO_START, range) === 0 &&
      r.compareBoundaryPoints(Range.END_TO_END, range) === 0,
  );

const getRange = (el, start, end) => {
  let range = new Range();
  let i = 0;

  for (const node of el.childNodes) {
    if (start >= i && start <= i + node.length) {
      range.setStart(node, start - i);
    }
    if (end <= i + node.length) {
      range.setEnd(node, end - i);
      return range;
    }
    i += node.length;
  }

  return undefined;
};

attribute({
  name: "highlight",
  requirement: "exclusive",
  apply: ({ el, key, error, value, mods }) => {
    let cachedHighlights = new Map();

    const language = key ?? value;
    if (!language) {
      throw error("MissingLanguageKey");
    }

    const applyHighlights = (mutationRecords) => {
      if (!mutationRecords && cachedHighlights.size > 0) {
        // No mutations, no need to re-apply highlights
        return;
      }

      if (
        !el.childNodes.length ||
        !Array.from(el.childNodes).every((n) => n.nodeType === Node.TEXT_NODE)
      ) {
        error("ExpectedTextNodesOnly");
        return;
      }

      import(`data-highlight:${language}`)
        .then(({ default: getTokens }) => {
          const highlights = new Map();

          const tokens = getTokens(el.textContent, language);

          if (mods.has("debug")) {
            console.log({ input: el.textContent, language, tokens });
          }

          tokens.forEach(({ type, start, end }) => {
            const range = getRange(el, start, end);

            if (!range) return;

            // Add to existing highlight, or create new highlight
            highlights.get(type)?.add(range) ??
              highlights.set(type, new Highlight(range));

            // Remove range from cache (if it exists), so we know not to delete it later
            const r = findMatchingRange(cachedHighlights.get(type), range);
            r && cachedHighlights.get(type)?.delete(r);

            // Paint by adding range to the global registry
            const global = registry.get(type);
            if (global) {
              !findMatchingRange(global, range) && global.add(range);
            } else {
              registry.set(type, new Highlight(range));
            }
          });

          cachedHighlights.entries().forEach(([type, highlight]) => {
            // Any remaining cached highlights are no longer relevant
            // for the current text node, so we delete them.
            highlight.forEach((range) => registry.get(type)?.delete(range));

            // Ranges become orphaned when textNodes are replaced, and are
            // assigned to their parent node. We should also delete these.
            registry
              .get(type)
              ?.forEach(
                (range) =>
                  (range.collapsed || range.startContainer === el) &&
                  registry.get(type).delete(range),
              );
          });

          cachedHighlights = highlights;
        })
        .catch(console.error);
    };

    applyHighlights();
    const observer = new MutationObserver(applyHighlights);

    observer.observe(el, {
      childList: true,
      subtree: true,
      characterData: true,
    });

    return () => {
      observer.disconnect();

      // Tidy up global CSS.highlights; remove this element's types/ranges
      for (const [type, cache] of cachedHighlights) {
        if (registry.has(type)) {
          cache.forEach((range) => registry.get(type)?.delete(range));
          registry.get(type)?.size === 0 && registry.delete(type);
        }
      }
    };
  },
});

attribute({
  name: "highlight-text",
  requirement: {
    key: "denied",
    value: "must",
  },
  returnsValue: true,
  apply({ el, rx }) {
    const update = () => {
      observer.disconnect();

      const nodes = el.childNodes;
      const lines = `${rx()}`.split("\n").map((line) => line + "\n");

      let i = 0;
      while (i < nodes.length) {
        const node = nodes[i];
        const line = lines[i];

        if (node.data === line) {
          i++;
          continue;
        }

        if (!line) {
          node.remove();
          continue;
        }

        let index = 0;
        while (node.data[index] === line[index]) {
          index++;
        }

        node.replaceData(
          index,
          node.length,
          index > 0 ? line.slice(index) : line,
        );

        i++;
      }

      el.append(...lines.slice(nodes.length));

      observer.observe(el, {
        attributeFilter: ["data-highlight-text"],
      });
    };

    const observer = new MutationObserver(update);
    const cleanup = effect(update);

    return () => {
      observer.disconnect();
      cleanup();
    };
  },
});