@rmrdeveloper/sideroom-pi 8.11.0 → 8.13.0

package/extensions/visual-context/parse-astro.ts

@@ -0,0 +1,166 @@
+import { parse } from '@astrojs/compiler/sync';
+import type { Node } from '@astrojs/compiler/types';
+import { literalText } from './literal.ts';
+import {
+  InvalidMarkup,
+  NON_MARKUP_TAGS,
+  type ParsedMarkup,
+  type SourceNode,
+  verifiedElementRange,
+} from './markup.ts';
+import { decodedHtmlText } from './parse-html.ts';
+
+const VOID_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
+
+function byteOffsets(source: string): Int32Array {
+  const offsets = new Int32Array(Buffer.byteLength(source) + 1).fill(-1);
+  let byte = 0;
+  let character = 0;
+  for (const point of source) {
+    offsets[byte] = character;
+    byte += Buffer.byteLength(point);
+    character += point.length;
+  }
+  offsets[byte] = character;
+  return offsets;
+}
+
+// Astro's self-closing node end may precede its attributes. Find only the end
+// of its original opening tag, respecting quoted and braced attribute values.
+function openingTagEnd(source: string, start: number): number {
+  let quote = '';
+  let braces = 0;
+  for (let index = start + 1; index < source.length; index += 1) {
+    const character = source[index];
+    if (quote) {
+      if (character === '\\' && braces > 0) {
+        index += 1;
+      } else if (character === quote) {
+        quote = '';
+      }
+      continue;
+    }
+    if (character === '"' || character === "'" || character === '`') {
+      quote = character;
+    } else if (character === '{') {
+      braces += 1;
+    } else if (character === '}') {
+      braces -= 1;
+    } else if (character === '>' && braces === 0) {
+      return index + 1;
+    }
+  }
+  return -1;
+}
+
+export function parseAstro(source: string): ParsedMarkup {
+  const document = parse(source, { position: true });
+  if (document.diagnostics.some((diagnostic) => diagnostic.severity === 1)) {
+    throw new InvalidMarkup('Invalid Astro source');
+  }
+  const offsets = byteOffsets(source);
+  let incomplete = false;
+  function convert(node: Node): readonly SourceNode[] {
+    if (node.type === 'text') {
+      return [{ kind: 'text', value: decodedHtmlText(node.value) }];
+    }
+    if (node.type === 'expression') {
+      const textNodes = node.children.filter((child) => child.type === 'text');
+      const expression =
+        textNodes.length === node.children.length
+          ? textNodes.map((child) => child.value).join('')
+          : undefined;
+      const value =
+        expression === undefined ? undefined : literalText(expression);
+      // Expression text is JS source, not rendered text. Visit only real tags.
+      return value === undefined
+        ? [
+            {
+              kind: 'dynamic',
+              children: node.children
+                .filter((child) => child.type !== 'text')
+                .flatMap(convert),
+            },
+          ]
+        : [{ kind: 'text', value }];
+    }
+    if (node.type === 'root' || node.type === 'fragment') {
+      return [{ kind: 'group', children: node.children.flatMap(convert) }];
+    }
+    if (
+      !('name' in node && 'attributes' in node) ||
+      NON_MARKUP_TAGS.has(node.name)
+    ) {
+      return [];
+    }
+    const start = offsets[node.position?.start.offset ?? -1] ?? -1;
+    const openingEnd = openingTagEnd(source, start);
+    const opening = source.slice(start, openingEnd);
+    const reportedEnd = offsets[node.position?.end?.offset ?? -1] ?? -1;
+    const isClosed = VOID_TAGS.has(node.name) || opening.endsWith('/>');
+    const reportedRange = source.slice(start, reportedEnd);
+    const closingTag = reportedRange
+      .slice(reportedRange.lastIndexOf('</'))
+      .replace(/\s+>$/u, '>');
+    // When the compiler's closing position is wrong, the verified opening tag
+    // is still a valid source range; never extend it to a guessed closing tag.
+    const end =
+      isClosed || closingTag !== `</${node.name}>` ? openingEnd : reportedEnd;
+    if (!node.position?.end && !isClosed) {
+      incomplete = true;
+      return [];
+    }
+    if (!verifiedElementRange({ source, start, end, tag: node.name })) {
+      incomplete = true;
+      return [];
+    }
+    let attributes: Record<string, string | undefined> = {};
+    for (const attribute of node.attributes) {
+      if (attribute.kind === 'spread') {
+        attributes = { hidden: undefined, contenteditable: undefined };
+        continue;
+      }
+      switch (attribute.kind) {
+        case 'expression':
+          attributes[attribute.name] = literalText(attribute.value);
+          break;
+        case 'template-literal':
+          attributes[attribute.name] = literalText(attribute.raw ?? '');
+          break;
+        case 'shorthand':
+          attributes[attribute.name] = undefined;
+          break;
+        default:
+          attributes[attribute.name] = decodedHtmlText(attribute.value);
+      }
+    }
+    return [
+      {
+        kind: 'element',
+        tag: node.name,
+        rendered: node.type !== 'component',
+        attributes,
+        start,
+        end,
+        children: node.children.flatMap(convert),
+      },
+    ];
+  }
+  const nodes = convert(document.ast);
+  return { nodes, incomplete };
+}

package/extensions/visual-context/parse-html.ts

@@ -0,0 +1,72 @@
+import { type DefaultTreeAdapterMap, parseFragment } from 'parse5';
+import {
+  NON_MARKUP_TAGS,
+  type ParsedMarkup,
+  type SourceNode,
+  verifiedElementRange,
+} from './markup.ts';
+
+type HtmlNode = DefaultTreeAdapterMap['node'];
+
+export function decodedHtmlText(text: string): string {
+  if (!text.includes('&')) {
+    return text;
+  }
+  const document = parseFragment(
+    `<textarea>${text.replace(/</gu, '&lt;')}</textarea>`,
+  );
+  const element = document.childNodes[0];
+  if (!element || !('childNodes' in element)) {
+    throw new Error('Cannot decode HTML character references');
+  }
+  return element.childNodes
+    .map((node) => ('value' in node ? node.value : ''))
+    .join('');
+}
+
+export function parseHtml(source: string): ParsedMarkup {
+  const document = parseFragment(source, { sourceCodeLocationInfo: true });
+  let incomplete = false;
+  function convert(node: HtmlNode): readonly SourceNode[] {
+    if (node.nodeName === '#text' && 'value' in node) {
+      return [{ kind: 'text', value: node.value }];
+    }
+    if (!('tagName' in node)) {
+      return 'childNodes' in node ? node.childNodes.flatMap(convert) : [];
+    }
+    if (NON_MARKUP_TAGS.has(node.tagName)) {
+      return [];
+    }
+    const children = (
+      'content' in node ? node.content.childNodes : node.childNodes
+    ).flatMap(convert);
+    if (node.tagName === 'template') {
+      return [{ kind: 'group', children }];
+    }
+    const location = node.sourceCodeLocation;
+    if (!location?.startTag) {
+      return children;
+    }
+    const start = location.startOffset;
+    const end = location.endTag?.endOffset ?? location.startTag.endOffset;
+    if (!verifiedElementRange({ source, start, end, tag: node.tagName })) {
+      incomplete = true;
+      return children;
+    }
+    return [
+      {
+        kind: 'element',
+        tag: node.tagName,
+        rendered: true,
+        attributes: Object.fromEntries(
+          node.attrs.map(({ name, value }) => [name, value]),
+        ),
+        start,
+        end,
+        children,
+      },
+    ];
+  }
+  const nodes = document.childNodes.flatMap(convert);
+  return { nodes, incomplete };
+}

package/extensions/visual-context/parse-jsx.ts

@@ -0,0 +1,157 @@
+import { parse } from '@babel/parser';
+import { isBabelSyntaxError, literalText } from './literal.ts';
+import {
+  InvalidMarkup,
+  NON_MARKUP_TAGS,
+  type ParsedMarkup,
+  type SourceNode,
+  verifiedElementRange,
+} from './markup.ts';
+
+const ATTRIBUTE_NAMES: Readonly<Record<string, string>> = {
+  className: 'class',
+  contentEditable: 'contenteditable',
+};
+type JsxElement = Extract<
+  ReturnType<typeof import('@babel/parser').parseExpression>,
+  { type: 'JSXElement' }
+>;
+
+export function parseJsx(source: string, typescript: boolean): ParsedMarkup {
+  let document: ReturnType<typeof parse>;
+  try {
+    document = parse(source, {
+      sourceType: 'unambiguous',
+      plugins: typescript ? ['jsx', 'typescript'] : ['jsx'],
+      attachComment: false,
+    });
+  } catch (cause) {
+    if (isBabelSyntaxError(cause)) {
+      throw new InvalidMarkup('Invalid JSX source', { cause });
+    }
+    throw new Error('Cannot parse JSX source', { cause });
+  }
+  let incomplete = false;
+  function element(node: JsxElement): readonly SourceNode[] {
+    const name = node.openingElement.name;
+    const tag =
+      name.type === 'JSXIdentifier'
+        ? name.name
+        : source.slice(name.start ?? 0, name.end ?? 0);
+    if (NON_MARKUP_TAGS.has(tag)) {
+      return [];
+    }
+    const start = node.start ?? -1;
+    const end = node.end ?? -1;
+    if (!verifiedElementRange({ source, start, end, tag })) {
+      incomplete = true;
+      return [];
+    }
+    let attributes: Record<string, string | undefined> = {};
+    for (const attribute of node.openingElement.attributes) {
+      if (attribute.type === 'JSXSpreadAttribute') {
+        // A spread may overwrite descriptors or make captured text private.
+        attributes = { hidden: undefined, contenteditable: undefined };
+        continue;
+      }
+      if (attribute.name.type !== 'JSXIdentifier') {
+        continue;
+      }
+      const key = ATTRIBUTE_NAMES[attribute.name.name] ?? attribute.name.name;
+      const value = attribute.value;
+      if (!value) {
+        attributes[key] = '';
+        continue;
+      }
+      if (value.type === 'StringLiteral') {
+        attributes[key] = value.value;
+        continue;
+      }
+      if (value.type !== 'JSXExpressionContainer') {
+        attributes[key] = undefined;
+        continue;
+      }
+      if (value.expression.type === 'BooleanLiteral' && key === 'hidden') {
+        if (value.expression.value) {
+          attributes.hidden = '';
+        } else {
+          delete attributes.hidden;
+        }
+        continue;
+      }
+      if (
+        value.expression.type === 'BooleanLiteral' &&
+        key === 'contenteditable'
+      ) {
+        attributes.contenteditable = String(value.expression.value);
+        continue;
+      }
+      attributes[key] = literalText(
+        source.slice(value.expression.start ?? 0, value.expression.end ?? 0),
+      );
+    }
+    const children = node.children.flatMap((child): readonly SourceNode[] => {
+      if (child.type === 'JSXText') {
+        // JSX trims indentation at line boundaries, unlike HTML textContent.
+        const lines = child.value.replace(/\t/gu, ' ').split(/\r\n|\n|\r/u);
+        const text = lines
+          .map((line, index) => {
+            const left = index === 0 ? line : line.trimStart();
+            return index === lines.length - 1 ? left : left.trimEnd();
+          })
+          .filter(Boolean)
+          .join(' ');
+        return [{ kind: 'text', value: text }];
+      }
+      if (child.type === 'JSXExpressionContainer') {
+        if (child.expression.type === 'JSXEmptyExpression') {
+          return [];
+        }
+        const text = literalText(
+          source.slice(child.expression.start ?? 0, child.expression.end ?? 0),
+        );
+        return text === undefined
+          ? [{ kind: 'dynamic', children: collect(child.expression) }]
+          : [{ kind: 'text', value: text }];
+      }
+      if (child.type === 'JSXSpreadChild') {
+        return [{ kind: 'dynamic', children: collect(child.expression) }];
+      }
+      return collect(child);
+    });
+    return [
+      {
+        kind: 'element',
+        tag,
+        rendered: /^[a-z]/u.test(tag) && !tag.includes('.'),
+        attributes,
+        start,
+        end,
+        children,
+      },
+    ];
+  }
+  function collect(value: unknown): readonly SourceNode[] {
+    if (!value || typeof value !== 'object') {
+      return [];
+    }
+    if (Array.isArray(value)) {
+      return value.flatMap(collect);
+    }
+    if ('type' in value && value.type === 'JSXElement') {
+      return element(value as JsxElement);
+    }
+    if (
+      'type' in value &&
+      value.type === 'JSXFragment' &&
+      'children' in value
+    ) {
+      return [{ kind: 'group', children: collect(value.children) }];
+    }
+    return Object.entries(value)
+      .filter(([key]) => !['loc', 'comments', 'tokens', 'extra'].includes(key))
+      .flatMap(([, child]) => collect(child));
+  }
+  const nodes = document.program.body.flatMap(collect);
+  return { nodes, incomplete };
+}

package/extensions/visual-context/parse-svelte.ts

@@ -0,0 +1,128 @@
+import { type AST, parse } from 'svelte/compiler';
+import { literalText } from './literal.ts';
+import {
+  InvalidMarkup,
+  NON_MARKUP_TAGS,
+  type ParsedMarkup,
+  type SourceNode,
+  verifiedElementRange,
+} from './markup.ts';
+
+export function parseSvelte(source: string): ParsedMarkup {
+  let document: AST.Root;
+  try {
+    document = parse(source, { modern: true });
+  } catch (cause) {
+    if (
+      cause instanceof Error &&
+      cause.name === 'CompileError' &&
+      'code' in cause
+    ) {
+      throw new InvalidMarkup('Invalid Svelte source', { cause });
+    }
+    throw new Error('Cannot parse Svelte source', { cause });
+  }
+  let incomplete = false;
+  function fragment(
+    node: AST.Fragment | null | undefined,
+  ): readonly SourceNode[] {
+    return node?.nodes.flatMap(convert) ?? [];
+  }
+  function convert(node: AST.TemplateNode): readonly SourceNode[] {
+    if (node.type === 'Text') {
+      return [{ kind: 'text', value: node.data }];
+    }
+    if (node.type === 'ExpressionTag') {
+      const value = literalText(source.slice(node.start + 1, node.end - 1));
+      return value === undefined
+        ? [{ kind: 'dynamic', children: [] }]
+        : [{ kind: 'text', value }];
+    }
+    if (node.type === 'IfBlock') {
+      return [
+        {
+          kind: 'dynamic',
+          children: [...fragment(node.consequent), ...fragment(node.alternate)],
+        },
+      ];
+    }
+    if (node.type === 'EachBlock' || node.type === 'SnippetBlock') {
+      return [
+        {
+          kind: 'dynamic',
+          children: [
+            ...fragment(node.body),
+            ...fragment(node.type === 'EachBlock' ? node.fallback : undefined),
+          ],
+        },
+      ];
+    }
+    if (node.type === 'AwaitBlock') {
+      return [
+        {
+          kind: 'dynamic',
+          children: [
+            ...fragment(node.pending),
+            ...fragment(node.then),
+            ...fragment(node.catch),
+          ],
+        },
+      ];
+    }
+    if (node.type === 'KeyBlock') {
+      return [{ kind: 'group', children: fragment(node.fragment) }];
+    }
+    if (!('fragment' in node && 'name' in node && 'attributes' in node)) {
+      return ['HtmlTag', 'RenderTag'].includes(node.type)
+        ? [{ kind: 'dynamic', children: [] }]
+        : [];
+    }
+    if (NON_MARKUP_TAGS.has(node.name)) {
+      return [];
+    }
+    const children = fragment(node.fragment);
+    const start = node.start;
+    const end = node.end;
+    if (!verifiedElementRange({ source, start, end, tag: node.name })) {
+      incomplete = true;
+      return [];
+    }
+    let attributes: Record<string, string | undefined> = {};
+    for (const attribute of node.attributes) {
+      if (attribute.type === 'SpreadAttribute') {
+        attributes = { hidden: undefined, contenteditable: undefined };
+        continue;
+      }
+      if (attribute.type !== 'Attribute') {
+        continue;
+      }
+      if (attribute.value === true) {
+        attributes[attribute.name] = '';
+        continue;
+      }
+      const pieces = (
+        Array.isArray(attribute.value) ? attribute.value : [attribute.value]
+      ).map((piece) =>
+        piece.type === 'Text'
+          ? piece.data
+          : literalText(source.slice(piece.start + 1, piece.end - 1)),
+      );
+      attributes[attribute.name] = pieces.some((piece) => piece === undefined)
+        ? undefined
+        : pieces.join('');
+    }
+    return [
+      {
+        kind: 'element',
+        tag: node.name,
+        rendered: ['RegularElement', 'TitleElement'].includes(node.type),
+        attributes,
+        start,
+        end,
+        children,
+      },
+    ];
+  }
+  const nodes = fragment(document.fragment);
+  return { nodes, incomplete };
+}

package/extensions/visual-context/parse-vue.ts

@@ -0,0 +1,133 @@
+import {
+  ElementTypes,
+  NodeTypes,
+  parse,
+  type TemplateChildNode,
+} from '@vue/compiler-dom';
+import { literalText } from './literal.ts';
+import {
+  InvalidMarkup,
+  NON_MARKUP_TAGS,
+  type ParsedMarkup,
+  type SourceNode,
+  verifiedElementRange,
+} from './markup.ts';
+
+export function parseVue(source: string): ParsedMarkup {
+  let document: ReturnType<typeof parse>;
+  try {
+    document = parse(source, { comments: false });
+  } catch (cause) {
+    if (cause instanceof SyntaxError && 'code' in cause) {
+      throw new InvalidMarkup('Invalid Vue template', { cause });
+    }
+    throw new Error('Cannot parse Vue template', { cause });
+  }
+  let incomplete = false;
+  function convert(node: TemplateChildNode): readonly SourceNode[] {
+    if (node.type === NodeTypes.TEXT) {
+      return [{ kind: 'text', value: node.content }];
+    }
+    if (node.type === NodeTypes.INTERPOLATION) {
+      const text = literalText(node.content.loc.source);
+      return text === undefined
+        ? [{ kind: 'dynamic', children: [] }]
+        : [{ kind: 'text', value: text }];
+    }
+    if (node.type !== NodeTypes.ELEMENT || NON_MARKUP_TAGS.has(node.tag)) {
+      return [];
+    }
+    const conditional = node.props.some(
+      (prop) =>
+        prop.type === NodeTypes.DIRECTIVE &&
+        ['if', 'else-if', 'else', 'for'].includes(prop.name),
+    );
+    if (node.tag === 'template') {
+      const language = node.props.find(
+        (prop) => prop.type === NodeTypes.ATTRIBUTE && prop.name === 'lang',
+      );
+      if (
+        language?.type === NodeTypes.ATTRIBUTE &&
+        language.value?.content !== 'html'
+      ) {
+        incomplete = true;
+        return [];
+      }
+      if (
+        node.props.some(
+          (prop) => prop.type === NodeTypes.ATTRIBUTE && prop.name === 'src',
+        )
+      ) {
+        incomplete = true;
+        return [];
+      }
+      return [
+        {
+          kind: conditional ? 'dynamic' : 'group',
+          children: node.children.flatMap(convert),
+        },
+      ];
+    }
+    const start = node.loc.start.offset;
+    const end = node.loc.end.offset;
+    if (!verifiedElementRange({ source, start, end, tag: node.tag })) {
+      incomplete = true;
+      return [];
+    }
+    const attributes: Record<string, string | undefined> = {};
+    for (const prop of node.props) {
+      if (prop.type === NodeTypes.ATTRIBUTE) {
+        attributes[prop.name] = prop.value?.content ?? '';
+      }
+    }
+    let dynamicText = false;
+    for (const prop of node.props) {
+      if (prop.type !== NodeTypes.DIRECTIVE) {
+        continue;
+      }
+      if (['html', 'text'].includes(prop.name)) {
+        dynamicText = true;
+      }
+      if (prop.name !== 'bind') {
+        continue;
+      }
+      if (
+        !prop.arg ||
+        prop.arg.type !== NodeTypes.SIMPLE_EXPRESSION ||
+        !prop.arg.isStatic
+      ) {
+        // An unknown key or object binding may replace a static id.
+        attributes.id = undefined;
+        attributes.hidden = undefined;
+        attributes.contenteditable = undefined;
+        continue;
+      }
+      const value = prop.exp ? literalText(prop.exp.loc.source) : undefined;
+      const key = prop.arg.content;
+      attributes[key] =
+        key === 'class'
+          ? [attributes.class, value].filter(Boolean).join(' ')
+          : value;
+    }
+    const children = node.children.flatMap(convert);
+    const elements: readonly SourceNode[] = [
+      {
+        kind: 'element',
+        tag: node.tag,
+        rendered: node.tagType === ElementTypes.ELEMENT,
+        attributes,
+        start,
+        end,
+        children: dynamicText ? [{ kind: 'dynamic', children }] : children,
+      },
+    ];
+    return conditional ? [{ kind: 'dynamic', children: elements }] : elements;
+  }
+  const templates = document.children.filter(
+    (node) => node.type === NodeTypes.ELEMENT && node.tag === 'template',
+  );
+  const nodes = (templates.length > 0 ? templates : document.children).flatMap(
+    convert,
+  );
+  return { nodes, incomplete };
+}