@markuplint/svelte-parser 5.0.1 → 5.1.0

package/lib/component-scanner.d.ts

@@ -5,17 +5,48 @@ export interface ComponentScanResult {
     readonly rootElement: string | null;
     readonly attrs: readonly ComponentScanAttr[];
     readonly hasSlots: boolean;
+    readonly slotWrappers?: readonly ComponentScanSlotWrapper[];
+    readonly rootContents?: readonly ComponentScanContent[];
     readonly scriptSource?: ComponentScanScriptSource;
+    readonly spreads?: readonly string[];
     readonly namespace?: 'svg';
     readonly line?: number;
     readonly col?: number;
 }
 /**
- * A static attribute extracted from a component's root element.
+ * An attribute extracted from an element of a component: a static one with its value, or
+ * a `dynamic` one whose value is an expression.
  */
 export interface ComponentScanAttr {
     readonly name: string;
     readonly value?: string;
+    /** The attribute is present and its value is an expression, unknown at scan time. `value` is omitted. */
+    readonly dynamic?: true;
+    /** The source of the expression of a `dynamic` attribute that is written as one expression. */
+    readonly expression?: string;
+}
+/**
+ * A direct child of an element that wraps a slot. A native element is itself
+ * (its own content is not tracked), the slot is its position, and anything
+ * else (an expression, a block, a component) is unknown content.
+ */
+export type ComponentScanContent = {
+    readonly element: string;
+    readonly attrs?: readonly ComponentScanAttr[];
+} | {
+    readonly slot: true;
+} | {
+    readonly dynamic: true;
+};
+/**
+ * An element that directly wraps a slot. A component has no `attrs` and no
+ * `contents`: what it renders is unknown.
+ */
+export interface ComponentScanSlotWrapper {
+    readonly element: string;
+    readonly isRoot: boolean;
+    readonly attrs: readonly ComponentScanAttr[];
+    readonly contents: readonly ComponentScanContent[];
 }
 /**
  * A script/ESM source block extracted from a component file.

package/lib/component-scanner.js

@@ -1,30 +1,30 @@
 import { parser } from './parser.js';
 function extractComponentInfo(doc) {
-    const root = doc.nodeList.find((n) => n.type === 'starttag' && n.depth === 0 && !n.isFragment);
+    const root = findRoot(doc);
     if (!root) {
         return null;
     }
-    const attrs = [];
-    for (const attr of root.attributes) {
-        if (attr.type !== 'attr') {
-            continue;
-        }
-        const value = attr.value.raw;
-        if (value === '') {
-            attrs.push({ name: attr.nodeName });
-        }
-        else {
-            attrs.push({ name: attr.nodeName, value });
-        }
-    }
+    const spreads = extractSpreads(root);
     return {
         rootElement: root.nodeName,
-        attrs,
+        attrs: extractAttrs(root),
+        ...(spreads.length > 0 ? { spreads } : {}),
         namespace: root.namespace === 'http://www.w3.org/2000/svg' ? 'svg' : undefined,
         line: root.line,
         col: root.col,
     };
 }
+const SPREAD = /^\{\s*\.\.\.([\s\S]*)\}$/;
+/**
+ * The expressions of `{...expr}`, which gives the element the attributes of an object
+ * (`{...rest}` is what the component receives and does not declare as props).
+ */
+function extractSpreads(el) {
+    return el.attributes.flatMap(attr => {
+        const expression = attr.type === 'spread' ? SPREAD.exec(attr.raw.trim())?.[1]?.trim() : undefined;
+        return expression ? [expression] : [];
+    });
+}
 /**
  * Slot usage can take several forms whose mapping to psblock node names is
  * not derivable from this code:
@@ -32,10 +32,214 @@ function extractComponentInfo(doc) {
  * - Svelte 5: `{@render children()}` (parsed as psblock `#ps:RenderTag`)
  * - Standard `<slot>` elements
  */
-function detectSlots(doc) {
-    return doc.nodeList.some(n => (n.type === 'starttag' && n.nodeName === 'slot') ||
+function isSlotNode(n) {
+    return ((n.type === 'starttag' && n.nodeName === 'slot') ||
         (n.type === 'psblock' && (n.nodeName === '#ps:SlotElement' || n.nodeName === '#ps:RenderTag')));
 }
+function detectSlots(doc) {
+    return doc.nodeList.some(n => n.type !== 'doctype' && isSlotNode(n));
+}
+function findRoot(doc) {
+    return doc.nodeList.find((n) => n.type === 'starttag' && n.depth === 0 && !n.isFragment);
+}
+function isElement(n) {
+    return n.type === 'starttag';
+}
+/**
+ * An attribute whose value is an expression (`type={kind}`, the shorthand `{type}`, `bind:value`,
+ * or `{}` inside a quoted value) is an attribute the element has, and it is `dynamic`. The other
+ * directives (`on:`, `class:`, `use:`, and so on) are not attributes by name and are left out.
+ */
+const INTERPOLATION = /\{[^}]*\}/;
+const DIRECTIVE = /^(bind|on|class|style|use|animate|transition|in|out|let):(.+)$/i;
+// Bindings to a value of the element that is not an attribute (`bind:clientWidth`, `bind:this`)
+const BINDING_WITHOUT_ATTRIBUTE = new Set([
+    'group',
+    'this',
+    'clientwidth',
+    'clientheight',
+    'offsetwidth',
+    'offsetheight',
+    'contentrect',
+    'contentboxsize',
+    'borderboxsize',
+    'devicepixelcontentboxsize',
+    'innerhtml',
+    'innertext',
+    'textcontent',
+    'naturalwidth',
+    'naturalheight',
+    'videowidth',
+    'videoheight',
+    'buffered',
+    'seekable',
+    'played',
+    'seeking',
+    'ended',
+    'readystate',
+    'duration',
+    'currenttime',
+    'paused',
+]);
+function extractAttrs(el) {
+    const attrs = [];
+    for (const attr of el.attributes) {
+        if (attr.type !== 'attr') {
+            continue;
+        }
+        if (attr.name.raw === '') {
+            if (attr.potentialName) {
+                // The shorthand `{type}` is `type={type}`
+                addAttr(attrs, { name: attr.potentialName, dynamic: true, expression: attr.potentialName });
+            }
+            continue;
+        }
+        const directive = DIRECTIVE.exec(attr.nodeName);
+        if (directive) {
+            const [, prefix, name] = directive;
+            if (prefix?.toLowerCase() === 'bind' && name && !BINDING_WITHOUT_ATTRIBUTE.has(name.toLowerCase())) {
+                addAttr(attrs, { name: name.toLowerCase(), dynamic: true });
+            }
+            continue;
+        }
+        const value = attr.value.raw;
+        if (attr.isDynamicValue) {
+            const expression = value.trim();
+            addAttr(attrs, { name: attr.nodeName, dynamic: true, ...(expression === '' ? {} : { expression }) });
+        }
+        else if (INTERPOLATION.test(value)) {
+            addAttr(attrs, { name: attr.nodeName, dynamic: true });
+        }
+        else if (value === '') {
+            addAttr(attrs, { name: attr.nodeName });
+        }
+        else {
+            addAttr(attrs, { name: attr.nodeName, value });
+        }
+    }
+    return attrs;
+}
+/**
+ * One name written in two forms (`class="btn" :class="x"`) is one attribute: dynamic
+ * when any of the forms is, in the position of the first. It is not one expression any
+ * more, so it has no `expression`.
+ */
+function addAttr(attrs, attr) {
+    const index = attrs.findIndex(existing => existing.name === attr.name);
+    const existing = attrs[index];
+    if (!existing) {
+        attrs.push(attr);
+    }
+    else if (existing.dynamic || attr.dynamic) {
+        attrs[index] = { name: attr.name, dynamic: true };
+    }
+}
+function containsSlot(n) {
+    return isSlotNode(n) || ('childNodes' in n && n.childNodes.some(child => containsSlot(child)));
+}
+/**
+ * The nearest element above the node. Blocks, fragments and `<template>` are
+ * looked through: they are not elements the component renders.
+ */
+function findWrapper(n, nodes) {
+    let current = n.parentNodeUuid ? nodes.get(n.parentNodeUuid) : undefined;
+    while (current) {
+        if (isElement(current) && !current.isFragment && current.nodeName !== 'template') {
+            return current;
+        }
+        current = current.parentNodeUuid ? nodes.get(current.parentNodeUuid) : undefined;
+    }
+    return null;
+}
+function isWithin(n, root, nodes) {
+    let current = n;
+    while (current) {
+        if (current.uuid === root.uuid) {
+            return true;
+        }
+        current = current.parentNodeUuid ? nodes.get(current.parentNodeUuid) : undefined;
+    }
+    return false;
+}
+function extractContents(el) {
+    const entries = [];
+    for (const child of el.childNodes) {
+        if (child.type === 'endtag' || child.type === 'comment') {
+            continue;
+        }
+        if (child.type === 'text') {
+            if (child.raw.trim() !== '') {
+                entries.push({ text: true });
+            }
+            continue;
+        }
+        if (containsSlot(child)) {
+            entries.push({ slot: true });
+            continue;
+        }
+        if (child.type === 'psblock') {
+            // Closing tags of blocks (`{/if}`) render nothing
+            if (!child.nodeName.startsWith('#ps:/')) {
+                entries.push({ dynamic: true });
+            }
+            continue;
+        }
+        if (isElement(child) && child.elementType === 'html' && child.nodeName !== 'template') {
+            const attrs = extractAttrs(child);
+            entries.push({ element: child.nodeName, ...(attrs.length > 0 ? { attrs } : {}) });
+            continue;
+        }
+        entries.push({ dynamic: true });
+    }
+    // Text beside elements can still satisfy a content model (`<ruby>漢<rt>kan</rt></ruby>`),
+    // so it is unknown content there. Text alone cannot be what a required child needs.
+    const hasElement = entries.some(entry => 'element' in entry);
+    const contents = [];
+    for (const entry of entries) {
+        if (!('text' in entry)) {
+            contents.push(entry);
+            continue;
+        }
+        const last = contents.at(-1);
+        if (hasElement && !(last && 'dynamic' in last)) {
+            contents.push({ dynamic: true });
+        }
+    }
+    return contents;
+}
+/**
+ * Finds the element that directly wraps each slot inside the root element and
+ * what surrounds the slots: the direct children of the root.
+ */
+function scanSlotContent(doc) {
+    const root = findRoot(doc);
+    if (!root) {
+        return {};
+    }
+    const nodes = new Map(doc.nodeList.filter((n) => n.type !== 'doctype').map(n => [n.uuid, n]));
+    const wrappers = new Map();
+    for (const n of nodes.values()) {
+        if (!isSlotNode(n)) {
+            continue;
+        }
+        const wrapper = findWrapper(n, nodes);
+        if (wrapper && isWithin(wrapper, root, nodes)) {
+            wrappers.set(wrapper.uuid, wrapper);
+        }
+    }
+    return {
+        slotWrappers: [...wrappers.values()].map(wrapper => {
+            const isNative = wrapper.elementType === 'html';
+            return {
+                element: wrapper.nodeName,
+                isRoot: wrapper.uuid === root.uuid,
+                attrs: isNative ? extractAttrs(wrapper) : [],
+                contents: isNative ? extractContents(wrapper) : [],
+            };
+        }),
+        rootContents: extractContents(root),
+    };
+}
 /**
  * Prefers the instance script over `<script context="module">`.
  */
@@ -89,7 +293,7 @@ export const componentScanner = {
         }
         const hasSlots = detectSlots(doc);
         const scriptSource = extractSvelteScript(sourceCode) ?? undefined;
-        return { ...info, hasSlots, scriptSource };
+        return { ...info, hasSlots, ...scanSlotContent(doc), scriptSource };
     },
     extractScriptSource(sourceCode) {
         return extractSvelteScript(sourceCode);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/svelte-parser",
-	"version": "5.0.1",
+	"version": "5.1.0",
 	"description": "Svelte parser for markuplint",
 	"repository": {
 		"type": "git",
@@ -40,10 +40,10 @@
 		"clean": "tsc --build --clean tsconfig.build.json"
 	},
 	"dependencies": {
-		"@markuplint/html-parser": "5.0.1",
-		"@markuplint/ml-ast": "5.0.1",
-		"@markuplint/parser-utils": "5.0.1",
+		"@markuplint/html-parser": "5.1.0",
+		"@markuplint/ml-ast": "5.1.0",
+		"@markuplint/parser-utils": "5.1.0",
 		"svelte": "5.55.7"
 	},
-	"gitHead": "edbaeedca5588fb291ea9d4e21a4ab2bf41fc9cb"
+	"gitHead": "3a061784a8211034ad0c1cbd64798c0213414f65"
 }