@markuplint/svelte-parser 5.1.1 → 5.3.0

package/lib/component-scanner.d.ts

@@ -1,3 +1,4 @@
+import type { NamespaceURI } from '@markuplint/ml-ast';
 /**
  * Result of scanning a single component file for its root element information.
  */
@@ -47,6 +48,8 @@ export interface ComponentScanSlotWrapper {
     readonly isRoot: boolean;
     readonly attrs: readonly ComponentScanAttr[];
     readonly contents: readonly ComponentScanContent[];
+    /** The namespace of the element when the elements between it and the root element decide it. */
+    readonly namespace?: NamespaceURI;
 }
 /**
  * A script/ESM source block extracted from a component file.
@@ -55,6 +58,20 @@ export interface ComponentScanScriptSource {
     readonly content: string;
     readonly offset: number;
 }
+/**
+ * An expression of the template that is read as script, with the pattern that binds its result:
+ * the `import('./C.svelte')` of `{#await import('./C.svelte') then { default: C }}`, as the source
+ * text of each.
+ *
+ * It has the shape of the type of the same name of `@markuplint/pretenders`
+ * (`ComponentScanner#extractTemplateImports`), which this package cannot import (the scanner is
+ * loaded by it dynamically); keep the two the same.
+ */
+export interface ComponentScanTemplateImport {
+    readonly expression: string;
+    /** The pattern of the `then` of the block (`{ default: C }`, `m`); absent when the block has none */
+    readonly value?: string;
+}
 /**
  * Component scanner for Svelte component files.
  *
@@ -65,4 +82,5 @@ export interface ComponentScanScriptSource {
 export declare const componentScanner: {
     scanComponent(sourceCode: string): ComponentScanResult | null;
     extractScriptSource(sourceCode: string): ComponentScanScriptSource | null;
+    extractTemplateImports(sourceCode: string): ComponentScanTemplateImport[];
 };

package/lib/component-scanner.js

@@ -1,9 +1,20 @@
+import { getNamespaceBelow } from '@markuplint/parser-utils';
+import { isFatalError } from '@markuplint/shared';
 import { parser } from './parser.js';
+import { svelteParse } from './svelte-parser/index.js';
 function extractComponentInfo(doc) {
     const root = findRoot(doc);
     if (!root) {
         return null;
     }
+    // The parser says the root is authored, yet its name is not the one of a component
+    // (`component`, `slot` of Vue): it renders what it is given, so there is no element
+    // to pretend to be. `pretenders` would otherwise emit that name as the target, and
+    // nothing tells it from the name of an element. What a component's name is, is the
+    // parser's rule (`Parser#isComponentName`).
+    if (root.elementType === 'authored' && !parser.isComponentName(root.nodeName)) {
+        return null;
+    }
     const spreads = extractSpreads(root);
     return {
         rootElement: root.nodeName,
@@ -151,6 +162,24 @@ function findWrapper(n, nodes) {
     }
     return null;
 }
+/**
+ * The names of the elements from the child of `root` down to `el`, for the namespace of `el`
+ * (`getNamespaceBelow`). A component is `null`, as it does not enter a namespace by its name.
+ */
+function getNamesBelow(el, root, nodes) {
+    const names = [];
+    let current = el;
+    while (current && current.uuid !== root.uuid) {
+        if (isElement(current) && !current.isFragment && current.nodeName !== 'template') {
+            names.unshift(getNamespaceSubject(current));
+        }
+        current = current.parentNodeUuid ? nodes.get(current.parentNodeUuid) : undefined;
+    }
+    return names;
+}
+function getNamespaceSubject(el) {
+    return el.elementType === 'authored' ? null : el.nodeName;
+}
 function isWithin(n, root, nodes) {
     let current = n;
     while (current) {
@@ -230,11 +259,15 @@ function scanSlotContent(doc) {
     return {
         slotWrappers: [...wrappers.values()].map(wrapper => {
             const isNative = wrapper.elementType === 'html';
+            const namespace = isNative
+                ? getNamespaceBelow(getNamespaceSubject(root), getNamesBelow(wrapper, root, nodes))
+                : null;
             return {
                 element: wrapper.nodeName,
                 isRoot: wrapper.uuid === root.uuid,
                 attrs: isNative ? extractAttrs(wrapper) : [],
                 contents: isNative ? extractContents(wrapper) : [],
+                ...(namespace ? { namespace } : {}),
             };
         }),
         rootContents: extractContents(root),
@@ -268,6 +301,68 @@ function extractSvelteScript(source) {
     }
     return moduleBlock;
 }
+/**
+ * The source text of a node of the script AST that Svelte parses an expression or a pattern of the
+ * template into. The types of its nodes (`estree`) do not declare the offsets, though the parser
+ * (acorn) sets them on every node.
+ */
+function textOf(source, node) {
+    const { start, end } = node;
+    return source.slice(start, end);
+}
+/**
+ * The `#await` blocks of the template, in source order, wherever they are (in another block, an
+ * element, a component, a snippet). Svelte documents `{#await import('./C.svelte') then { default: C }}`
+ * as the way to render a component lazily (https://svelte.dev/docs/svelte/await), and the script block
+ * does not hold it: whatever the expression of a block is, it is returned as written, and the
+ * reader decides whether it loads a module.
+ */
+function extractAwaitBlocks(source) {
+    // A source with no `{#await` has none, and is not parsed a second time for that
+    if (!/\{\s*#await\b/.test(source)) {
+        return [];
+    }
+    let nodes;
+    try {
+        nodes = svelteParse(source);
+    }
+    catch (error) {
+        if (isFatalError(error)) {
+            throw error;
+        }
+        // The source is not Svelte (the compiler reports it as an `Error` of its own),
+        // which `scanComponent` reports as no component
+        return [];
+    }
+    const found = [];
+    const visit = (node) => {
+        if (Array.isArray(node)) {
+            for (const child of node) {
+                visit(child);
+            }
+            return;
+        }
+        if (typeof node !== 'object' || node === null) {
+            return;
+        }
+        const block = node;
+        if (block.type === 'AwaitBlock' && block.expression) {
+            const { value } = block;
+            found.push([
+                block.start,
+                {
+                    expression: textOf(source, block.expression),
+                    ...(value ? { value: textOf(source, value) } : {}),
+                },
+            ]);
+        }
+        for (const child of Object.values(node)) {
+            visit(child);
+        }
+    };
+    visit(nodes);
+    return found.toSorted(([a], [b]) => a - b).map(([, block]) => block);
+}
 /**
  * Component scanner for Svelte component files.
  *
@@ -298,4 +393,7 @@ export const componentScanner = {
     extractScriptSource(sourceCode) {
         return extractSvelteScript(sourceCode);
     },
+    extractTemplateImports(sourceCode) {
+        return extractAwaitBlocks(sourceCode);
+    },
 };

package/lib/parser.js

@@ -13,6 +13,9 @@ export class SvelteParser extends Parser {
         super({
             endTagType: 'xml',
             tagNameCaseSensitive: true,
+            // A static attribute is in the HTML string that the compiler hands to the browser's parser,
+            // and a dynamic one is set by `set_attribute` under the name as written.
+            attrNameRoute: 'dom-api-when-dynamic',
             ignoreTags: [
                 // Fixed(Resolved) #2505
                 // The script tag needs to be passed with the lang attribute to the parser,
@@ -361,8 +364,16 @@ export class SvelteParser extends Parser {
             else {
                 thenExpEndCharOffset = thenExpStart + rawPendingNodesBelow.indexOf('}') + 1;
             }
-            thenToken = this.sliceFragment(token.offset + thenExpStart, thenExpEndCharOffset);
+            // `thenExpStart` is a position in the whole source, as `thenExpEndCharOffset` is
+            thenToken = this.sliceFragment(thenExpStart, thenExpEndCharOffset);
         }
+        /**
+         * `{#await expression then name}...{:catch name}...{/await}`
+         *
+         * The `then` is in the head of the block (the shorthand), so no `{:then}` marks it: Svelte
+         * reads what follows the head as the `then` fragment, which then belongs to the head.
+         */
+        const hasThenInHead = !thenToken && !!originBlockNode.then;
         let catchToken = null;
         /**
          * `{#await expression}...{:then name}...{:catch name}...{/await}`
@@ -372,10 +383,17 @@ export class SvelteParser extends Parser {
          *
          * `{#await expression}...{:catch name}...{/await}`
          *                 find___^
+         *
+         * If `then` is in the head of the block:
+         *
+         * `{#await expression then name}...{:catch name}...{/await}`
+         *                           find___^
          */
         const catchExpStart = thenToken
             ? (thenEnd ?? thenToken.offset + thenToken.raw.length)
-            : (pendingEnd ?? awaitExpEnd);
+            : hasThenInHead
+                ? (thenEnd ?? awaitExpEnd)
+                : (pendingEnd ?? awaitExpEnd);
         /**
          * `{:catch name}...{/await}`
          */
@@ -395,8 +413,18 @@ export class SvelteParser extends Parser {
             else {
                 catchExpEndCharOffset = catchExpStart + rawThenNodesBelow.indexOf('}') + 1;
             }
-            catchToken = this.sliceFragment(token.offset + catchExpStart, catchExpEndCharOffset);
+            // `catchExpStart` is a position in the whole source, as `catchExpEndCharOffset` is
+            catchToken = this.sliceFragment(catchExpStart, catchExpEndCharOffset);
         }
+        /**
+         * What follows the head of the block when no `{:then}` or `{:catch}` marks it: the `then` or the
+         * `catch` of the shorthand (`{#await expression then name}`, `{#await expression catch name}`).
+         */
+        const headContent = hasThenInHead
+            ? originBlockNode.then?.nodes
+            : !thenToken && !catchToken
+                ? originBlockNode.catch?.nodes
+                : undefined;
         const expressions = [
             this.visitPsBlock({
                 ...awaitExpToken,
@@ -404,7 +432,7 @@ export class SvelteParser extends Parser {
                 parentNode: token.parentNode,
                 nodeName: 'await',
                 isFragment: false,
-            }, originBlockNode.pending?.nodes, {
+            }, originBlockNode.pending?.nodes ?? headContent, {
                 type: 'await',
                 expression: awaitExpToken.raw,
             })[0],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/svelte-parser",
-	"version": "5.1.1",
+	"version": "5.3.0",
 	"description": "Svelte parser for markuplint",
 	"repository": {
 		"type": "git",
@@ -15,16 +15,16 @@
 	"type": "module",
 	"exports": {
 		".": {
-			"import": "./lib/index.js",
-			"types": "./lib/index.d.ts"
+			"types": "./lib/index.d.ts",
+			"default": "./lib/index.js"
 		},
 		"./kit": {
-			"import": "./lib/sveltekit-parser.js",
-			"types": "./lib/sveltekit-parser.d.ts"
+			"types": "./lib/sveltekit-parser.d.ts",
+			"default": "./lib/sveltekit-parser.js"
 		},
 		"./component-scanner": {
-			"import": "./lib/component-scanner.js",
-			"types": "./lib/component-scanner.d.ts"
+			"types": "./lib/component-scanner.d.ts",
+			"default": "./lib/component-scanner.js"
 		}
 	},
 	"types": "lib/index.d.ts",
@@ -40,10 +40,11 @@
 		"clean": "tsc --build --clean tsconfig.build.json"
 	},
 	"dependencies": {
-		"@markuplint/html-parser": "5.1.1",
-		"@markuplint/ml-ast": "5.1.1",
-		"@markuplint/parser-utils": "5.1.1",
-		"svelte": "5.55.7"
+		"@markuplint/html-parser": "5.3.0",
+		"@markuplint/ml-ast": "5.3.0",
+		"@markuplint/parser-utils": "5.3.0",
+		"@markuplint/shared": "5.3.0",
+		"svelte": "^5.57.2"
 	},
-	"gitHead": "a940c8526e971d590d97395ce924910221208820"
+	"gitHead": "f587cf0206c8426e57369a48d6d5fb22306eafde"
 }