@markuplint/svelte-parser 5.4.0 → 5.6.0

package/lib/component-scanner.js

@@ -115,7 +115,8 @@ function extractAttrs(el) {
         }
         const value = attr.value.raw;
         if (attr.isDynamicValue) {
-            const expression = value.trim();
+            // `disabled="{false}"` is the expression `false` in quotes, which the parser keeps as `potentialValue`
+            const expression = (attr.potentialValue ?? value).trim();
             addAttr(attrs, { name: attr.nodeName, dynamic: true, ...(expression === '' ? {} : { expression }) });
         }
         else if (INTERPOLATION.test(value)) {

package/lib/parser.d.ts

@@ -56,6 +56,7 @@ export declare class SvelteParser extends Parser<SvelteNode> {
     visitAttr(token: Token): (import("@markuplint/ml-ast").MLASTSpreadAttr & {
         __rightText?: string;
     }) | {
+        potentialValue?: string;
         isDynamicValue: true | undefined;
         potentialName: string | undefined;
         type: "attr";
@@ -69,7 +70,6 @@ export declare class SvelteParser extends Parser<SvelteNode> {
         value: import("@markuplint/ml-ast").MLASTToken;
         endQuote: import("@markuplint/ml-ast").MLASTToken;
         isDirective?: true;
-        potentialValue?: string;
         valueType?: "string" | "number" | "boolean" | "code";
         candidate?: string;
         isDuplicatable: boolean;

package/lib/parser.js

@@ -1,6 +1,20 @@
-import { ParserError, Parser, AttrState } from '@markuplint/parser-utils';
+import { ParserError, Parser, AttrState, isBracedExpression } from '@markuplint/parser-utils';
 import { parseBlock } from './parse-block.js';
-import { svelteParse } from './svelte-parser/index.js';
+import { svelteParseComponent } from './svelte-parser/index.js';
+/**
+ * The opening of an attachment (`{@attach expr}`), up to the keyword, with the braces and spaces as
+ * Svelte allows. A shorthand (`{attach}`) is not one: the keyword is followed by a space.
+ */
+const ATTACHMENT = /^(\s*\{\s*)@attach(?=\s)/;
+/**
+ * Replaces the keyword of an attachment with spaces of the same length.
+ *
+ * @param raw - The source that starts with an attachment
+ * @returns The source whose keyword is spaces
+ */
+function maskAttachKeyword(raw) {
+    return raw.replace(ATTACHMENT, (_match, opening) => opening + ' '.repeat('@attach'.length));
+}
 /**
  * Parser implementation for Svelte component templates.
  * Extends the base Parser to handle Svelte elements, text, comments,
@@ -13,26 +27,34 @@ export class SvelteParser extends Parser {
         super({
             endTagType: 'xml',
             tagNameCaseSensitive: true,
+            // A value in `{…}` is JavaScript
+            attrExpressionLanguage: 'javascript',
             // 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,
-                // so instead of excluding it, we convert it to PSBlock in visitText.
-                // Keep the style tag as is for now.
-                {
-                    type: 'Style',
-                    start: '<style',
-                    end: '</style>',
-                },
-            ],
-            maskChar: '-',
+            // `<slot>` is replaced with what the parent component passes to it, not the HTML `slot` element
+            // of a shadow tree
+            // @see https://svelte.dev/docs/svelte/legacy-slots
+            slotElement: 'framework',
+            // No `ignoreTags`:
+            // - The script tag needs to be passed with the lang attribute to the parser, so instead of
+            //   masking it, it is converted to PSBlock in visitText.
+            // - The top-level style is kept out of Svelte's CSS parse in `svelteParseComponent`; nested ones stay elements.
+            // `svelte/compiler` strips a leading BOM and counts positions from the next character
+            leadingBom: 'mask',
         });
     }
+    /**
+     * A top-level `<style>` is masked as a comment before Svelte parses it (see `svelteParseComponent`),
+     * so `nodeize` needs to know which comments stand for one. The parser object is reused, so this is
+     * set again by every `tokenize`.
+     */
+    #topLevelStyleStarts = new Set();
     tokenize() {
+        const { nodes, topLevelStyleStarts } = svelteParseComponent(this.rawCode);
+        this.#topLevelStyleStarts = topLevelStyleStarts;
         return {
-            ast: svelteParse(this.rawCode),
+            ast: nodes,
             isFragment: true,
         };
     }
@@ -63,6 +85,16 @@ export class SvelteParser extends Parser {
                 });
             }
             case 'Comment': {
+                // The mask of a top-level `<style>`, the CSS of the component (see `svelteParseComponent`)
+                if (this.#topLevelStyleStarts.has(originNode.start)) {
+                    return this.visitPsBlock({
+                        ...token,
+                        depth,
+                        parentNode,
+                        nodeName: 'Style',
+                        isFragment: false,
+                    });
+                }
                 return this.visitComment({
                     ...token,
                     depth,
@@ -273,7 +305,11 @@ export class SvelteParser extends Parser {
      * @returns The parsed attribute node with Svelte-specific metadata
      */
     visitAttr(token) {
-        const attr = super.visitAttr(token, {
+        // `@attach` is not JavaScript, so the tokenizer, which finds the end of `{…}` by reading it as
+        // JavaScript, cannot read it. Spaces of the same length stand for it, which makes the attachment
+        // a shorthand (`{expr}`) whose end the tokenizer finds, and every offset stays the source's.
+        const isAttachment = ATTACHMENT.test(token.raw);
+        const attr = super.visitAttr(isAttachment ? { ...token, raw: maskAttachKeyword(token.raw) } : token, {
             quoteSet: [
                 { start: '"', end: '"', type: 'string' },
                 { start: "'", end: "'", type: 'string' },
@@ -286,8 +322,25 @@ export class SvelteParser extends Parser {
         if (attr.type === 'spread') {
             return attr;
         }
+        // `{@attach expr}`: "Attachments are functions that run in an effect when an
+        // element is mounted". The function gets the element and can do anything to it, its attributes
+        // included, so it is read as a spread.
+        if (isAttachment) {
+            // The token of the attribute starts at its `{`: the spaces before it are not in `attr.raw`, nor in
+            // `source`, so the length of the attribute is the length of the text of `source` that it takes
+            const source = token.raw.trimStart();
+            const attachmentLength = attr.raw.length;
+            const rightText = source.slice(attachmentLength);
+            return {
+                ...this.createToken(source.slice(0, attachmentLength), attr.offset, attr.line, attr.col),
+                type: 'spread',
+                nodeName: '#spread',
+                ...(rightText === '' ? {} : { __rightText: rightText }),
+            };
+        }
         let isDynamicValue = attr.startQuote.raw === '{' || undefined;
         let potentialName;
+        let potentialValue;
         // Shorthand {name} → potentialName = value
         if (isDynamicValue && attr.name.raw === '') {
             potentialName = attr.value.raw;
@@ -296,10 +349,29 @@ export class SvelteParser extends Parser {
         if (attr.startQuote.raw === '{' && attr.endQuote.raw === '}') {
             isDynamicValue = true;
         }
+        // A single expression in quotes is the expression: `disabled="{false}"` is `disabled={false}`:
+        //
+        // > Quoting a singular expression does not affect how the value is parsed, but in Svelte 6 it
+        // > will cause the value to be coerced to a string:
+        //
+        // @see https://svelte.dev/docs/svelte/basic-markup#Element-attributes
+        //
+        // A value with text around the expression (`page/{p}`) or several expressions is a string. The
+        // tokens stay those of the source (the quotes are the quotes), and the expression is
+        // `potentialValue`.
+        if (!isDynamicValue &&
+            attr.name.raw !== '' &&
+            (attr.startQuote.raw === '"' || attr.startQuote.raw === "'") &&
+            attr.endQuote.raw === attr.startQuote.raw &&
+            isBracedExpression(attr.value.raw)) {
+            isDynamicValue = true;
+            potentialValue = attr.value.raw.slice(1, -1);
+        }
         return {
             ...attr,
             isDynamicValue,
             potentialName,
+            ...(potentialValue == null ? {} : { potentialValue }),
         };
     }
     /**

package/lib/svelte-parser/index.d.ts

@@ -9,6 +9,33 @@ export type SvelteAwaitBlock = AST.AwaitBlock;
  * `SnippetBlock`, `RenderTag`, and `SvelteBoundary`.
  */
 export declare function svelteParse(template: string): SvelteNode[];
+/**
+ * Parses a component, keeping the top-level `<style>` out of Svelte's CSS parser and the nested one in
+ * the markup.
+ *
+ * > There can only be one top-level <style> tag per component.
+ * >
+ * > However, it is possible to have a <style> tag nested inside other elements or logic blocks.
+ * >
+ * > In that case, the <style> tag will be inserted as-is into the DOM; no scoping or processing will
+ * > be done on the <style> tag.
+ *
+ * The top-level one is the CSS of the component, and Svelte reads it as CSS (`lang="scss"` is not CSS and
+ * fails: "Expected a valid CSS identifier"), so it is masked. The nested one is an element whose content
+ * is text, which Svelte reads without parsing it. What is top-level cannot be told from the source by a
+ * pattern. The source is tried with Svelte as-is first (`ast.css` for the top-level one). When CSS parsing
+ * fails (`css_*`), only that style block is masked and parsing is retried. When that is still not enough,
+ * every `<style>` is masked and the ones that are children of the fragment are the top-level ones.
+ *
+ * @see https://svelte.dev/docs/svelte/nested-style-elements#main
+ * @param template - The source of the component
+ * @returns The nodes, and the offsets in `template` where a top-level `<style>` starts: the nodes have
+ * a comment (`Comment`) there, and the positions of every node are positions in `template`
+ */
+export declare function svelteParseComponent(template: string): {
+    readonly nodes: SvelteNode[];
+    readonly topLevelStyleStarts: ReadonlySet<number>;
+};
 export type SvelteDirective = Directive | AST.Attribute | AST.SpreadAttribute;
 export type SvelteBlock = AST.EachBlock | AST.IfBlock | AST.AwaitBlock | AST.KeyBlock | AST.SnippetBlock | AST.SvelteBoundary;
 type Directive = AST.AnimateDirective | AST.BindDirective | AST.ClassDirective | AST.LetDirective | AST.OnDirective | AST.StyleDirective | AST.TransitionDirective | AST.UseDirective;

package/lib/svelte-parser/index.js

@@ -1,3 +1,4 @@
+import { isFatalError } from '@markuplint/shared';
 import { parse } from 'svelte/compiler';
 /**
  * The `modern: true` option opts into Svelte 5's modern AST format,
@@ -8,3 +9,212 @@ export function svelteParse(template) {
     const ast = parse(template, { modern: true });
     return ast.fragment.nodes ?? [];
 }
+/**
+ * What the source is read in order as, so that a `<style` is a `<style>` block only where one can start: a
+ * comment (`<!-- … -->`) and a `<script>` block are consumed whole, and a `<style` in their text is not
+ * one. A `<style>` block runs from `<style` to the first `</style>`, or to the end of the source when it
+ * is not closed; the name ends there (`<style-guide>` is a custom element).
+ *
+ * It does not read an attribute value or an expression (`{…}`), so a `<style` in one is still taken as
+ * a block. `svelteParseComponent` tries Svelte first so that case is handled without this mask; only the
+ * last fallback still uses `SOURCE_BLOCK`.
+ */
+const SOURCE_BLOCK = /<!--[\s\S]*?(?:-->|$)|<script(?=[\s/>])[\s\S]+?(?:<\/script>|$)|<style(?=[\s/>])[\s\S]+?(?:<\/style>|$)/g;
+/**
+ * Replaces each `<style>` block of the source with what `replacer` returns, and leaves everything else.
+ *
+ * @param template - The source of the component
+ * @param replacer - Gives the replacement of a `<style>` block, from the block and its offset in `template`
+ * @returns The source with the replaced blocks
+ */
+function replaceStyleBlocks(template, replacer) {
+    return template.replaceAll(SOURCE_BLOCK, (block, offset) => block.startsWith('<style') ? replacer(block, offset) : block);
+}
+/**
+ * The shortest block that a comment (`<!---->`) can mask. A shorter one is `<style` cut off by the end of
+ * the source, which no comment of the same length can stand for.
+ */
+const MIN_MASKABLE_LENGTH = '<!---->'.length;
+/**
+ * Replaces a `<style>` block with a comment (`<!---…--->`) of the same length and line breaks, so that
+ * every offset in the source stays the offset in the result. A block that is too short to be a comment
+ * is left as it is, so that Svelte reports the syntax error of the source, not one of a mask.
+ *
+ * @param block - A `<style>` block
+ * @returns The comment
+ */
+function maskStyleBlock(block) {
+    if (block.length < MIN_MASKABLE_LENGTH) {
+        return block;
+    }
+    return '<!' + block.slice(2, -1).replaceAll(/[^\n]/g, '-') + '>';
+}
+/**
+ * `afterCssError` must not treat markup or script errors as a failed top-level style block: only Svelte's
+ * own CSS parse step (`css_*`) qualifies.
+ */
+function isSvelteCssParseError(error) {
+    return (typeof error === 'object' &&
+        error !== null &&
+        'code' in error &&
+        typeof error.code === 'string' &&
+        error.code.startsWith('css_'));
+}
+const STYLE_OPENER = /<style(?=[\s/>])/g;
+/**
+ * The `<style>` block that contains `index`. When a `<style` in an attribute value or an expression opens
+ * a spurious range to the next `</style>`, the real block is the one that starts last among the openers
+ * before `index`.
+ *
+ * @param template - The source of the component
+ * @param index - A character offset in `template`
+ * @returns The block span, if any
+ */
+function styleBlockAroundIndex(template, index) {
+    let best = null;
+    for (const match of template.matchAll(STYLE_OPENER)) {
+        if (match.index === undefined) {
+            continue;
+        }
+        const start = match.index;
+        const close = template.indexOf('</style>', start);
+        const end = close === -1 ? template.length : close + '</style>'.length;
+        if (index >= start && index < end && (best === null || start > best.start)) {
+            best = { start, end };
+        }
+    }
+    return best;
+}
+/**
+ * Masks the top-level `<style>` that made Svelte throw `css_*`, then parses again with
+ * {@link svelteParseComponentDirect}.
+ *
+ * @param template - The source of the component
+ * @param error - The error from the first `parse` of `template`
+ * @returns The nodes when masking one block is enough, otherwise `null`
+ */
+function svelteParseComponentAfterCssError(template, error) {
+    if (!isSvelteCssParseError(error) || !('start' in error)) {
+        return null;
+    }
+    const { character } = error.start;
+    const block = styleBlockAroundIndex(template, character);
+    if (!block) {
+        return null;
+    }
+    const masked = template.slice(0, block.start) +
+        maskStyleBlock(template.slice(block.start, block.end)) +
+        template.slice(block.end);
+    const parsed = svelteParseComponentDirect(masked);
+    if (!parsed) {
+        return null;
+    }
+    return {
+        nodes: parsed.nodes,
+        topLevelStyleStarts: new Set([...parsed.topLevelStyleStarts, block.start]),
+    };
+}
+/**
+ * Builds nodes from an already-parsed component. The top-level `<style>` is `ast.css`, not in
+ * `ast.fragment`, so a `Comment` at the same span stands in for `SvelteParser` `nodeize`.
+ *
+ * @param ast - The component root from `svelte/compiler` `parse`
+ * @returns The fragment nodes and top-level style offsets in the source
+ */
+function nodesFromParsedComponent(ast) {
+    const topLevelStyleStarts = new Set();
+    let nodes = ast.fragment.nodes ?? [];
+    if (ast.css) {
+        topLevelStyleStarts.add(ast.css.start);
+        const styleNode = {
+            type: 'Comment',
+            start: ast.css.start,
+            end: ast.css.end,
+            data: '',
+        };
+        const index = nodes.findIndex((node) => node.start > ast.css.start);
+        if (index === -1) {
+            nodes = [...nodes, styleNode];
+        }
+        else {
+            nodes = [...nodes.slice(0, index), styleNode, ...nodes.slice(index)];
+        }
+    }
+    return { nodes, topLevelStyleStarts };
+}
+/**
+ * Parses `template` with Svelte when the source is valid markup and CSS.
+ *
+ * @param template - The source of the component
+ * @returns The nodes and offsets, or `null` when `parse` fails and the failure is not fatal
+ */
+function svelteParseComponentDirect(template) {
+    try {
+        return nodesFromParsedComponent(parse(template, { modern: true }));
+    }
+    catch (error) {
+        if (isFatalError(error)) {
+            throw error;
+        }
+        return null;
+    }
+}
+/**
+ * Parses a component, keeping the top-level `<style>` out of Svelte's CSS parser and the nested one in
+ * the markup.
+ *
+ * > There can only be one top-level <style> tag per component.
+ * >
+ * > However, it is possible to have a <style> tag nested inside other elements or logic blocks.
+ * >
+ * > In that case, the <style> tag will be inserted as-is into the DOM; no scoping or processing will
+ * > be done on the <style> tag.
+ *
+ * The top-level one is the CSS of the component, and Svelte reads it as CSS (`lang="scss"` is not CSS and
+ * fails: "Expected a valid CSS identifier"), so it is masked. The nested one is an element whose content
+ * is text, which Svelte reads without parsing it. What is top-level cannot be told from the source by a
+ * pattern. The source is tried with Svelte as-is first (`ast.css` for the top-level one). When CSS parsing
+ * fails (`css_*`), only that style block is masked and parsing is retried. When that is still not enough,
+ * every `<style>` is masked and the ones that are children of the fragment are the top-level ones.
+ *
+ * @see https://svelte.dev/docs/svelte/nested-style-elements#main
+ * @param template - The source of the component
+ * @returns The nodes, and the offsets in `template` where a top-level `<style>` starts: the nodes have
+ * a comment (`Comment`) there, and the positions of every node are positions in `template`
+ */
+export function svelteParseComponent(template) {
+    let caught;
+    try {
+        return nodesFromParsedComponent(parse(template, { modern: true }));
+    }
+    catch (error) {
+        if (isFatalError(error)) {
+            throw error;
+        }
+        caught = error;
+    }
+    const afterCssError = svelteParseComponentAfterCssError(template, caught);
+    if (afterCssError) {
+        return afterCssError;
+    }
+    const blocks = [];
+    const everyStyleMasked = replaceStyleBlocks(template, (block, offset) => {
+        blocks.push({ start: offset, end: offset + block.length });
+        return maskStyleBlock(block);
+    });
+    if (blocks.length === 0) {
+        return { nodes: svelteParse(template), topLevelStyleStarts: new Set() };
+    }
+    const topLevelStyleStarts = new Set();
+    const nodesOfEveryMasked = svelteParse(everyStyleMasked);
+    for (const node of nodesOfEveryMasked) {
+        if (node.type === 'Comment' && blocks.some(block => block.start === node.start && block.end === node.end)) {
+            topLevelStyleStarts.add(node.start);
+        }
+    }
+    if (topLevelStyleStarts.size === blocks.length) {
+        return { nodes: nodesOfEveryMasked, topLevelStyleStarts };
+    }
+    const onlyTopLevelMasked = replaceStyleBlocks(template, (block, offset) => topLevelStyleStarts.has(offset) ? maskStyleBlock(block) : block);
+    return { nodes: svelteParse(onlyTopLevelMasked), topLevelStyleStarts };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/svelte-parser",
-	"version": "5.4.0",
+	"version": "5.6.0",
 	"description": "Svelte parser for markuplint",
 	"repository": {
 		"type": "git",
@@ -40,11 +40,11 @@
 		"clean": "tsc --build --clean tsconfig.build.json"
 	},
 	"dependencies": {
-		"@markuplint/html-parser": "5.4.0",
-		"@markuplint/ml-ast": "5.3.0",
-		"@markuplint/parser-utils": "5.4.0",
-		"@markuplint/shared": "5.4.0",
-		"svelte": "^5.57.2"
+		"@markuplint/html-parser": "5.6.0",
+		"@markuplint/ml-ast": "5.6.0",
+		"@markuplint/parser-utils": "5.6.0",
+		"@markuplint/shared": "5.6.0",
+		"svelte": "^5.57.3"
 	},
-	"gitHead": "647f6fb5d5743f060678599c97e9c84b58970747"
+	"gitHead": "eade3d7202682e567f3c1b6985478f1d4b5c5481"
 }