@markuplint/vue-parser 4.0.0-dev.28 → 4.0.0-rc.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017-2019 Yusuke Hirao
+Copyright (c) 2017-2024 Yusuke Hirao
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/lib/index.d.ts

@@ -1,2 +1 @@
-export { parse } from './parse.js';
-export declare const endTag = "xml";
+export { parser } from './parser.js';

package/lib/index.js

@@ -1,2 +1 @@
-export { parse } from './parse.js';
-export const endTag = 'xml';
+export { parser } from './parser.js';

package/lib/parser.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="vue-eslint-parser" />
+import type { ASTNode, ASTComment } from './vue-parser/index.js';
+import type { MLASTParentNode, MLASTNodeTreeItem } from '@markuplint/ml-ast';
+import type { Token } from '@markuplint/parser-utils';
+import { ParserError, Parser } from '@markuplint/parser-utils';
+type State = {
+    comments: readonly ASTComment[];
+};
+declare class VueParser extends Parser<ASTNode, State> {
+    readonly duplicatableAttrs: Set<string>;
+    constructor();
+    tokenize(): {
+        ast: (import("vue-eslint-parser/ast/nodes").VElement | import("vue-eslint-parser/ast/nodes").VText | import("vue-eslint-parser/ast/nodes").VExpressionContainer)[];
+        isFragment: boolean;
+    };
+    parseError(error: any): ParserError;
+    nodeize(originNode: ASTNode, parentNode: MLASTParentNode | null, depth: number): readonly MLASTNodeTreeItem[];
+    flattenNodes(nodeTree: readonly MLASTNodeTreeItem[]): MLASTNodeTreeItem[];
+    afterFlattenNodes(nodeList: readonly MLASTNodeTreeItem[]): MLASTNodeTreeItem[];
+    visitAttr(token: Token): (import("@markuplint/ml-ast").MLASTHTMLAttr & {
+        __rightText?: string | undefined;
+    }) | (import("@markuplint/ml-ast").MLASTSpreadAttr & {
+        __rightText?: string | undefined;
+    });
+    detectElementType(nodeName: string): import("@markuplint/ml-ast").ElementType;
+}
+export declare const parser: VueParser;
+export {};

package/lib/parser.js

@@ -0,0 +1,238 @@
+import { ParserError, Parser } from '@markuplint/parser-utils';
+import { vueParse } from './vue-parser/index.js';
+class VueParser extends Parser {
+    constructor() {
+        super({
+            endTagType: 'xml',
+        }, {
+            comments: [],
+        });
+        this.duplicatableAttrs = new Set(['class', 'style']);
+    }
+    tokenize() {
+        const ast = vueParse(this.rawCode);
+        if (ast.templateBody?.comments) {
+            this.state.comments = ast.templateBody.comments;
+        }
+        return {
+            ast: ast.templateBody?.children ?? [],
+            isFragment: true,
+        };
+    }
+    parseError(error) {
+        if (error instanceof SyntaxError && 'lineNumber' in error && 'column' in error) {
+            throw new ParserError(error.message, {
+                line: error.lineNumber,
+                col: error.column,
+                raw: '',
+            });
+        }
+        return super.parseError(error);
+    }
+    nodeize(
+    // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+    originNode, parentNode, depth) {
+        const token = this.sliceFragment(originNode.range[0], originNode.range[1]);
+        switch (originNode.type) {
+            case 'VText': {
+                return this.visitText({
+                    ...token,
+                    depth,
+                    parentNode,
+                });
+            }
+            case 'VExpressionContainer': {
+                return this.visitPsBlock({
+                    ...token,
+                    depth,
+                    parentNode,
+                    nodeName: 'vue-expression-container',
+                });
+            }
+            default: {
+                const token = this.sliceFragment(originNode.startTag.range[0], originNode.startTag.range[1]);
+                return this.visitElement({
+                    ...token,
+                    depth,
+                    parentNode,
+                    nodeName: originNode.name,
+                    namespace: originNode.namespace,
+                }, originNode.children, {
+                    createEndTagToken: () => {
+                        if (!originNode.endTag) {
+                            return null;
+                        }
+                        const token = this.sliceFragment(originNode.endTag.range[0], originNode.endTag.range[1]);
+                        return {
+                            ...token,
+                            depth,
+                            parentNode,
+                        };
+                    },
+                });
+            }
+        }
+    }
+    flattenNodes(nodeTree) {
+        const nodeList = super.flattenNodes(nodeTree);
+        const newNodeList = [];
+        let prevNode = null;
+        for (const node of nodeList) {
+            const lastOffset = prevNode?.endOffset ?? node.parentNode?.endOffset ?? 0;
+            const betweenComment = this.state.comments.find(comment => {
+                return lastOffset <= comment.range[0] && comment.range[1] <= node.startOffset;
+            });
+            if (betweenComment) {
+                const token = this.sliceFragment(betweenComment.range[0], betweenComment.range[1]);
+                const comment = this.visitComment({
+                    ...token,
+                    depth: node.depth,
+                    parentNode: node.parentNode,
+                }, {
+                    isBogus: betweenComment.type === 'HTMLBogusComment',
+                })[0];
+                if (comment && comment.type === 'comment') {
+                    newNodeList.push(comment);
+                    if (node.parentNode) {
+                        this.appendChild(node.parentNode, comment);
+                    }
+                }
+            }
+            newNodeList.push(node);
+            prevNode = node;
+        }
+        return newNodeList;
+    }
+    afterFlattenNodes(nodeList) {
+        const optimizedNodeList = super.afterFlattenNodes(nodeList);
+        const newNodeList = [];
+        let openTemplateTag = false;
+        let closeTemplateTag = false;
+        for (const node of optimizedNodeList) {
+            if (!openTemplateTag && node.type === 'text') {
+                continue;
+            }
+            if (node.type === 'starttag' && node.nodeName === 'template' && node.depth === 0) {
+                openTemplateTag = true;
+                continue;
+            }
+            if (/^<\/template>$/i.test(node.raw) && node.depth === 0) {
+                closeTemplateTag = true;
+                continue;
+            }
+            if (closeTemplateTag && node.type === 'text') {
+                continue;
+            }
+            newNodeList.push(node);
+        }
+        return newNodeList;
+    }
+    visitAttr(token) {
+        const attr = super.visitAttr(token);
+        if (attr.type === 'spread') {
+            return attr;
+        }
+        {
+            /**
+             * `v-on`
+             */
+            const [, directive, potentialName] = attr.name.raw.match(/^(v-on:|@)([^.]+)(?:\.([^.]+))?$/i) ?? [];
+            if (directive && potentialName) {
+                return {
+                    ...attr,
+                    potentialName: `on${potentialName.toLowerCase()}`,
+                    isDynamicValue: true,
+                };
+            }
+        }
+        {
+            /**
+             * `v-bind`
+             */
+            const [, directive, potentialName, modifier] = attr.name.raw.match(/^(v-bind:|:)([^.]+)(?:\.([^.]+))?$/i) ?? [];
+            if (directive && potentialName) {
+                if (this.duplicatableAttrs.has(potentialName.toLowerCase())) {
+                    this.updateAttr(attr, { isDuplicatable: true });
+                }
+                if (!modifier) {
+                    return {
+                        ...attr,
+                        potentialName,
+                        isDynamicValue: true,
+                    };
+                }
+                switch (modifier) {
+                    case '.attr': {
+                        return {
+                            ...attr,
+                            potentialName,
+                            isDynamicValue: true,
+                        };
+                    }
+                    /* eslint-disable unicorn/no-useless-switch-case */
+                    case '.prop':
+                    case '.camel':
+                    default: {
+                        const name = `v-bind:${potentialName}${modifier ?? ''}`;
+                        return {
+                            ...attr,
+                            potentialName: attr.name.raw === name ? undefined : name,
+                            isDirective: true,
+                        };
+                    }
+                    /* eslint-enable unicorn/no-useless-switch-case */
+                }
+            }
+        }
+        {
+            /**
+             * `v-model`
+             */
+            const [, directive] = attr.name.raw.match(/^(v-model)(?:\.([^.]+))?$/i) ?? [];
+            if (directive) {
+                return {
+                    ...attr,
+                    isDirective: true,
+                };
+            }
+        }
+        {
+            /**
+             * `v-slot`
+             */
+            const slotName = (attr.name.raw.match(/^(v-slot:|#)(.+)$/i) ?? [])[2];
+            const name = `v-slot:${slotName}`;
+            if (slotName) {
+                return {
+                    ...attr,
+                    potentialName: attr.name.raw === name ? undefined : name,
+                    isDirective: true,
+                };
+            }
+        }
+        /**
+         * If directives
+         */
+        if (attr.name.raw.startsWith('v-')) {
+            return {
+                ...attr,
+                isDirective: true,
+            };
+        }
+        return attr;
+    }
+    detectElementType(nodeName) {
+        return super.detectElementType(nodeName, [
+            'component',
+            'slot',
+            'Transition',
+            'TransitionGroup',
+            'KeepAlive',
+            'Teleport',
+            'Suspense',
+            // Backward compatibility
+            /^[A-Z]/,
+        ]);
+    }
+}
+export const parser = new VueParser();

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

@@ -1,4 +1,5 @@
 import * as VueESLintParser from 'vue-eslint-parser';
 export type VueTokens = VueESLintParser.AST.ESLintProgram;
-export default function vueParse(vueTemplate: string): VueTokens;
+export declare function vueParse(vueTemplate: string): VueTokens;
 export type ASTNode = VueESLintParser.AST.VElement | VueESLintParser.AST.VText | VueESLintParser.AST.VExpressionContainer;
+export type ASTComment = VueESLintParser.AST.Token & VueESLintParser.AST.HasLocation;

package/lib/vue-parser/index.js

@@ -1,5 +1,5 @@
 import * as VueESLintParser from 'vue-eslint-parser';
-export default function vueParse(vueTemplate) {
+export function vueParse(vueTemplate) {
     const ast = VueESLintParser.parse(vueTemplate, { parser: false });
     return ast;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/vue-parser",
-	"version": "4.0.0-dev.28+0131de5e",
+	"version": "4.0.0-rc.0",
 	"description": "Vue parser for markuplint",
 	"repository": "git@github.com:markuplint/markuplint.git",
 	"author": "Yusuke Hirao <yusukehirao@me.com>",
@@ -21,10 +21,10 @@
 		"clean": "tsc --build --clean"
 	},
 	"dependencies": {
-		"@markuplint/html-parser": "4.0.0-dev.28+0131de5e",
-		"@markuplint/ml-ast": "4.0.0-dev.28+0131de5e",
-		"@markuplint/parser-utils": "4.0.0-dev.28+0131de5e",
-		"vue-eslint-parser": "^9.3.1"
+		"@markuplint/html-parser": "4.0.0-rc.0",
+		"@markuplint/ml-ast": "4.0.0-rc.0",
+		"@markuplint/parser-utils": "4.0.0-rc.0",
+		"vue-eslint-parser": "^9.4.2"
 	},
-	"gitHead": "0131de5ea9dd6d3fd5472d7b414b66644c758881"
+	"gitHead": "3fdeb45cb69ed52b3a215a7520cea1181601443f"
 }

package/lib/attr.d.ts

@@ -1,2 +0,0 @@
-import type { MLASTAttr } from '@markuplint/ml-ast';
-export declare function attr(attr: MLASTAttr): MLASTAttr;

package/lib/attr.js

@@ -1,110 +0,0 @@
-const duplicatableAttrs = new Set(['class', 'style']);
-export function attr(
-// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-attr) {
-    if (attr.type !== 'html-attr') {
-        const name = attr.potentialName;
-        if (duplicatableAttrs.has(name)) {
-            attr.isDuplicatable = true;
-        }
-        return attr;
-    }
-    {
-        /**
-         * `v-on`
-         */
-        const [, directive, potentialName, modifier] = attr.name.raw.match(/^(v-on:|@)([^.]+)(?:\.([^.]+))?$/i) ?? [];
-        if (directive && potentialName) {
-            return {
-                ...attr,
-                potentialName: `on${potentialName.toLowerCase()}`,
-                isDynamicValue: true,
-                // @ts-ignore
-                _modifier: modifier,
-            };
-        }
-    }
-    {
-        /**
-         * `v-bind`
-         */
-        const [, directive, potentialName, modifier] = attr.name.raw.match(/^(v-bind:|:)([^.]+)(?:\.([^.]+))?$/i) ?? [];
-        if (directive && potentialName) {
-            if (duplicatableAttrs.has(potentialName.toLowerCase())) {
-                attr.isDuplicatable = true;
-            }
-            if (!modifier) {
-                return {
-                    ...attr,
-                    potentialName,
-                    isDynamicValue: true,
-                };
-            }
-            switch (modifier) {
-                case '.attr': {
-                    return {
-                        ...attr,
-                        potentialName,
-                        isDynamicValue: true,
-                        // @ts-ignore
-                        _modifier: modifier,
-                    };
-                }
-                /* eslint-disable unicorn/no-useless-switch-case */
-                // TODO: Supporting for `prop` and `camel` https://github.com/markuplint/markuplint/pull/681
-                case '.prop':
-                case '.camel':
-                default: {
-                    const name = `v-bind:${potentialName}${modifier ?? ''}`;
-                    return {
-                        ...attr,
-                        potentialName: attr.name.raw === name ? undefined : name,
-                        isDirective: true,
-                        // @ts-ignore
-                        _modifier: modifier,
-                    };
-                }
-                /* eslint-enable unicorn/no-useless-switch-case */
-            }
-        }
-    }
-    {
-        /**
-         * `v-model`
-         */
-        const [, directive, modifier] = attr.name.raw.match(/^(v-model)(?:\.([^.]+))?$/i) ?? [];
-        if (directive) {
-            // TODO: Supporting for `v-model` https://github.com/markuplint/markuplint/pull/681
-            return {
-                ...attr,
-                isDirective: true,
-                // @ts-ignore
-                _modifier: modifier,
-            };
-        }
-    }
-    {
-        /**
-         * `v-slot`
-         */
-        const slotName = (attr.name.raw.match(/^(v-slot:|#)(.+)$/i) ?? [])[2];
-        const name = `v-slot:${slotName}`;
-        if (slotName) {
-            return {
-                ...attr,
-                potentialName: attr.name.raw === name ? undefined : name,
-                isDirective: true,
-            };
-        }
-    }
-    /**
-     * If directives
-     */
-    if (attr.name.raw.startsWith('v-')) {
-        return {
-            ...attr,
-            isDirective: true,
-        };
-    }
-    return attr;
-}

package/lib/parse.d.ts

@@ -1,2 +0,0 @@
-import type { Parse } from '@markuplint/ml-ast';
-export declare const parse: Parse;

package/lib/parse.js

@@ -1,208 +0,0 @@
-import { parseRawTag } from '@markuplint/html-parser';
-import { flattenNodes, getEndCol, getEndLine, uuid, ParserError, detectElementType } from '@markuplint/parser-utils';
-import { attr } from './attr.js';
-import vueParse from './vue-parser/index.js';
-export const parse = (rawCode, options) => {
-    let ast;
-    try {
-        ast = vueParse(rawCode);
-    }
-    catch (error) {
-        if (error instanceof SyntaxError && 'lineNumber' in error && 'column' in error) {
-            throw new ParserError(
-            // @ts-ignore
-            error.message, {
-                // @ts-ignore
-                line: error.lineNumber,
-                // @ts-ignore
-                col: error.column,
-                raw: '',
-            });
-        }
-        return {
-            nodeList: [],
-            isFragment: true,
-            parseError: error instanceof Error ? error.message : new Error(`${error}`).message,
-        };
-    }
-    const nodeList = ast.templateBody
-        ? flattenNodes(traverse(ast.templateBody, null, rawCode, options), rawCode)
-        : [];
-    // Remove `</template>`
-    const templateEndTagIndex = nodeList.findIndex(node => /\s*<\/\s*template\s*>\s*/i.test(node.raw));
-    if (templateEndTagIndex !== -1) {
-        const templateEndTag = nodeList[templateEndTagIndex];
-        for (const node of nodeList) {
-            if (node.nextNode && node.nextNode.uuid === templateEndTag?.uuid) {
-                node.nextNode = null;
-            }
-        }
-        nodeList.splice(templateEndTagIndex, 1);
-    }
-    return {
-        nodeList,
-        isFragment: true,
-    };
-};
-function traverse(
-// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-rootNode, parentNode = null, rawHtml, options) {
-    const nodeList = [];
-    if (rootNode.type !== 'VElement') {
-        return [];
-    }
-    let prevNode = null;
-    for (const vNode of rootNode.children) {
-        const node = nodeize(vNode, prevNode, parentNode, rawHtml, options);
-        if (!node) {
-            continue;
-        }
-        if (prevNode) {
-            if (node.type !== 'endtag') {
-                prevNode.nextNode = node;
-            }
-            node.prevNode = prevNode;
-        }
-        prevNode = node;
-        nodeList.push(node);
-    }
-    return nodeList;
-}
-function nodeize(
-// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-originNode, 
-// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-prevNode, 
-// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-parentNode, rawHtml, options) {
-    const nextNode = null;
-    const startOffset = originNode.range[0];
-    const endOffset = originNode.range[1];
-    const startLine = originNode.loc.start.line;
-    const endLine = originNode.loc.end.line;
-    const startCol = originNode.loc.start.column + 1;
-    const endCol = originNode.loc.end.column + 1;
-    const raw = rawHtml.slice(startOffset, endOffset ?? startOffset);
-    switch (originNode.type) {
-        case 'VText': {
-            const node = {
-                uuid: uuid(),
-                raw,
-                startOffset,
-                endOffset,
-                startLine,
-                endLine,
-                startCol,
-                endCol,
-                nodeName: '#text',
-                type: 'text',
-                parentNode,
-                prevNode,
-                nextNode,
-                isFragment: false,
-                isGhost: false,
-            };
-            return node;
-        }
-        case 'VExpressionContainer': {
-            return {
-                uuid: uuid(),
-                raw,
-                startOffset,
-                endOffset,
-                startLine,
-                endLine,
-                startCol,
-                endCol,
-                nodeName: '#vue-expression-container',
-                type: 'psblock',
-                parentNode,
-                prevNode,
-                nextNode,
-                isFragment: false,
-                isGhost: false,
-            };
-        }
-        default: {
-            const tagLoc = originNode.startTag;
-            const startTagRaw = rawHtml.slice(tagLoc.range[0], tagLoc.range[1]);
-            const tagTokens = parseRawTag(startTagRaw, startLine, startCol, startOffset);
-            const tagName = tagTokens.tagName;
-            let endTag = null;
-            const endTagLoc = originNode.endTag;
-            if (endTagLoc) {
-                const endTagRaw = rawHtml.slice(endTagLoc.range[0], endTagLoc.range[1]);
-                const endTagTokens = parseRawTag(endTagRaw, endTagLoc.loc.start.line, endTagLoc.loc.start.column, endTagLoc.range[0]);
-                const endTagName = endTagTokens.tagName;
-                endTag = {
-                    uuid: uuid(),
-                    raw: endTagRaw,
-                    startOffset: endTagLoc.range[0],
-                    endOffset: endTagLoc.range[1],
-                    startLine: endTagLoc.loc.start.line,
-                    endLine: endTagLoc.loc.end.line,
-                    startCol: endTagLoc.loc.start.column + 1,
-                    endCol: endTagLoc.loc.end.column + 1,
-                    nodeName: endTagName,
-                    type: 'endtag',
-                    namespace: originNode.namespace,
-                    attributes: endTagTokens.attrs,
-                    parentNode,
-                    prevNode,
-                    nextNode,
-                    pearNode: null,
-                    isFragment: false,
-                    isGhost: false,
-                    tagOpenChar: '</',
-                    tagCloseChar: '>',
-                };
-            }
-            const startTag = {
-                uuid: uuid(),
-                raw: startTagRaw,
-                startOffset,
-                endOffset: startOffset + startTagRaw.length,
-                startLine,
-                endLine: getEndLine(startTagRaw, startLine),
-                startCol,
-                endCol: getEndCol(startTagRaw, startCol),
-                nodeName: tagName,
-                type: 'starttag',
-                namespace: originNode.namespace,
-                elementType: detectElementType(tagName, options?.authoredElementName, 
-                /**
-                 * @see https://vuejs.org/api/built-in-components.html
-                 * @see https://vuejs.org/api/built-in-special-elements.html
-                 */
-                [
-                    'component',
-                    'slot',
-                    'Transition',
-                    'TransitionGroup',
-                    'KeepAlive',
-                    'Teleport',
-                    'Suspense',
-                    // Backward compatibility
-                    /^[A-Z]/,
-                ]),
-                attributes: tagTokens.attrs.map(attr),
-                hasSpreadAttr: false,
-                parentNode,
-                prevNode,
-                nextNode,
-                pearNode: endTag,
-                selfClosingSolidus: tagTokens.selfClosingSolidus,
-                endSpace: tagTokens.endSpace,
-                isFragment: false,
-                isGhost: false,
-                tagOpenChar: '<',
-                tagCloseChar: '>',
-            };
-            if (endTag) {
-                endTag.pearNode = startTag;
-            }
-            startTag.childNodes = traverse(originNode, startTag, rawHtml, options);
-            return startTag;
-        }
-    }
-}