@markuplint/pug-parser 4.0.0-dev.23 → 4.0.0-rc.0

package/lib/parser.d.ts

@@ -1,10 +1,10 @@
 import type { ASTNode } from './pug-parser/index.js';
 import type { MLASTAttr, MLASTNodeTreeItem, MLASTParentNode } from '@markuplint/ml-ast';
-import type { ChildToken, Token } from '@markuplint/parser-utils';
+import type { ChildToken, ParseOptions, Token } from '@markuplint/parser-utils';
 import { ParserError, Parser } from '@markuplint/parser-utils';
 declare class PugParser extends Parser<ASTNode> {
     constructor();
-    tokenize(): {
+    tokenize(options?: ParseOptions): {
         ast: ASTNode[];
         isFragment: boolean;
     };
@@ -19,11 +19,7 @@ declare class PugParser extends Parser<ASTNode> {
             readonly attributes: readonly MLASTAttr[];
         };
     }): MLASTNodeTreeItem[];
-    visitAttr(token: Token): (import("@markuplint/ml-ast").MLASTHTMLAttr & {
-        __rightText?: string | undefined;
-    }) | (import("@markuplint/ml-ast").MLASTSpreadAttr & {
-        __rightText?: string | undefined;
-    });
+    visitAttr(token: Token): MLASTAttr;
 }
 export declare const parser: PugParser;
 export {};

package/lib/parser.js

@@ -1,15 +1,34 @@
-import { getNamespace, parser as htmlParser } from '@markuplint/html-parser';
-import { ParserError, Parser, AttrState, removeQuote, scriptParser } from '@markuplint/parser-utils';
+import { HtmlParser, getNamespace } from '@markuplint/html-parser';
+import { ParserError, Parser, AttrState, scriptParser } from '@markuplint/parser-utils';
 import { pugParse } from './pug-parser/index.js';
+class HtmlInPugParser extends HtmlParser {
+    constructor() {
+        super({
+            ignoreTags: [
+                /**
+                 * Tag Interpolation
+                 *
+                 * @see https://pugjs.org/language/interpolation.html#tag-interpolation
+                 */
+                {
+                    type: 'tag-interpolation',
+                    start: '#[',
+                    end: ']',
+                },
+            ],
+        });
+    }
+}
 class PugParser extends Parser {
     constructor() {
         super({
             endTagType: 'never',
         });
     }
-    tokenize() {
+    tokenize(options) {
+        const offsetOffset = options?.offsetOffset ?? 0;
         return {
-            ast: pugParse(this.rawCode).nodes,
+            ast: pugParse(this.rawCode, offsetOffset >= 1).nodes,
             isFragment: true,
         };
     }
@@ -43,13 +62,29 @@ class PugParser extends Parser {
                 if (originNode.raw.trim() === '') {
                     return [];
                 }
-                const htmlDoc = htmlParser.parse(originNode.raw, {
+                const htmlDoc = new HtmlInPugParser().parse(originNode.raw, {
                     offsetOffset: originNode.offset,
                     offsetLine: originNode.line,
                     offsetColumn: originNode.column,
                     depth,
                 });
-                return htmlDoc.nodeList;
+                const newNodeList = [];
+                for (const node of htmlDoc.nodeList) {
+                    if (node.nodeName === '#ps:tag-interpolation') {
+                        // Remove `#[` and `]`
+                        const raw = node.raw.slice(2, -1);
+                        const innerNodes = new PugParser().parse(raw, {
+                            offsetOffset: node.startOffset + 2,
+                            offsetLine: node.startLine,
+                            offsetColumn: node.startCol + 2,
+                            depth: node.depth,
+                        });
+                        newNodeList.push(...innerNodes.nodeList);
+                        continue;
+                    }
+                    newNodeList.push(node);
+                }
+                return newNodeList;
             }
             case 'Comment': {
                 return this.visitComment({
@@ -62,6 +97,37 @@ class PugParser extends Parser {
             }
             case 'Tag': {
                 const namespace = getNamespace(originNode.name, parentNamespace);
+                const attrs = originNode.attrs.map(attr => {
+                    // eslint-disable-next-line prefer-const
+                    let { offset, endOffset } = this.getOffsetsFromCode(attr.line, attr.column, attr.endLine, attr.endColumn);
+                    if ((attr.name === 'id' || attr.name === 'class') &&
+                        attr.offset === attr.endOffset &&
+                        typeof attr.val === 'string') {
+                        /**
+                         * #value =>
+                         * {
+                         *   name: 'id',
+                         *   val: "'value'",
+                         * }
+                         * Remove single quotes and add (#|.) prefix
+                         */
+                        endOffset = attr.offset + attr.val.length - 1;
+                    }
+                    const token = this.sliceFragment(offset, endOffset);
+                    return this.visitAttr(token);
+                });
+                // &attributes(syntax)
+                const andAttr = originNode.attributeBlocks.map(block => {
+                    const blockLength = '&attributes('.length;
+                    const { offset, endOffset } = this.getOffsetsFromCode(block.line, block.column + blockLength, block.line, block.column + blockLength + block.val.length);
+                    const token = this.sliceFragment(offset, endOffset);
+                    const node = this.createToken(token.raw, token.startOffset, token.startLine, token.startCol);
+                    return {
+                        ...node,
+                        type: 'spread',
+                        nodeName: '#spread',
+                    };
+                });
                 return this.visitElement({
                     ...token,
                     depth,
@@ -70,10 +136,7 @@ class PugParser extends Parser {
                     namespace,
                 }, originNode.block.nodes, {
                     overwriteProps: {
-                        attributes: originNode.attrs.map(attr => {
-                            const token = this.sliceFragment(attr.offset, attr.endOffset);
-                            return this.visitAttr(token);
-                        }),
+                        attributes: [...attrs, ...andAttr],
                     },
                 });
             }
@@ -122,10 +185,11 @@ class PugParser extends Parser {
             if (attr.type === 'spread') {
                 return attr;
             }
+            const potentialName = token.raw[0] === '#' ? 'id' : 'class';
             this.updateAttr(attr, {
-                potentialName: token.raw[0] === '#' ? 'id' : 'class',
-                potentialValue: attr.value.raw.slice(1),
-                isDuplicatable: attr.potentialName === 'class',
+                potentialName,
+                potentialValue: attr.raw.slice(1),
+                isDuplicatable: potentialName === 'class',
             });
             return attr;
         }
@@ -140,23 +204,66 @@ class PugParser extends Parser {
         if (attr.name.raw.toLowerCase() === 'class') {
             this.updateAttr(attr, { isDuplicatable: true });
         }
+        if (attr.name.raw.startsWith("'") && attr.name.raw.endsWith("'")) {
+            this.updateAttr(attr, {
+                potentialName: attr.name.raw.slice(1, -1),
+            });
+        }
+        if (attr.name.raw.endsWith('!')) {
+            this.updateAttr(attr, {
+                potentialName: attr.name.raw.slice(0, -1),
+            });
+        }
         const valueCodeTokens = scriptParser(attr.value.raw.trim());
         if (valueCodeTokens.length === 1) {
             const token = valueCodeTokens[0];
-            if (token.type === 'Numeric' || token.type === 'Boolean') {
-                this.updateAttr(attr, { potentialValue: token.value });
-            }
-            else if (token.type === 'String' || token.type === 'Template') {
-                this.updateAttr(attr, { potentialValue: removeQuote(token.value) });
-            }
-            else {
-                this.updateAttr(attr, { isDynamicValue: true });
+            switch (token.type) {
+                case 'Numeric': {
+                    return {
+                        ...attr,
+                        valueType: 'number',
+                    };
+                }
+                case 'Boolean': {
+                    return {
+                        ...attr,
+                        valueType: 'boolean',
+                    };
+                }
+                case 'String':
+                case 'Template': {
+                    const value = super.visitAttr(attr.value, {
+                        startState: AttrState.BeforeValue,
+                        quoteSet: [
+                            { start: '"', end: '"' },
+                            { start: "'", end: "'" },
+                            { start: '`', end: '`' },
+                        ],
+                        quoteInValueChars: [
+                            { start: '"', end: '"' },
+                            { start: "'", end: "'" },
+                            { start: '`', end: '`' },
+                            { start: '${', end: '}' },
+                        ],
+                    });
+                    if (value.type === 'spread') {
+                        throw new ParserError('Unexpected attribute value', value);
+                    }
+                    return {
+                        ...attr,
+                        startQuote: value.startQuote,
+                        value: value.value,
+                        endQuote: value.endQuote,
+                        ...(attr.name.raw.endsWith('!') ? { valueType: 'code' } : {}),
+                    };
+                }
             }
         }
-        else {
-            this.updateAttr(attr, { isDynamicValue: true });
-        }
-        return attr;
+        return {
+            ...attr,
+            isDynamicValue: true,
+            valueType: 'code',
+        };
     }
 }
 export const parser = new PugParser();

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

@@ -1,8 +1,9 @@
-export declare function pugParse(pug: string): ASTBlock;
+export declare function pugParse(pug: string, useOffset?: boolean): ASTBlock;
 export type ASTBlock = PugAST<ASTNode>;
-export type ASTNode = ASTTagNode | ASTTextNode | ASTCodeNode | ASTComment | ASTDoctype | ASTIncludeNode | ASTMixinNode | ASTMixinSlotNode | ASTFilterNode | ASTEachNode | ASTConditionalNode | ASTCaseNode | ASTCaseWhenNode;
-export type ASTTagNode = Omit<PugASTTagNode<ASTAttr, ASTBlock>, 'attributeBlocks' | 'selfClosing' | 'isInline'> & AdditionalASTData;
+export type ASTNode = ASTTagNode | ASTTextNode | ASTEmptyPipeNode | ASTCodeNode | ASTComment | ASTDoctype | ASTIncludeNode | ASTMixinNode | ASTMixinSlotNode | ASTFilterNode | ASTEachNode | ASTConditionalNode | ASTCaseNode | ASTCaseWhenNode;
+export type ASTTagNode = Omit<PugASTTagNode<ASTAttr, ASTBlock>, 'selfClosing' | 'isInline'> & AdditionalASTData;
 export type ASTTextNode = Omit<PugASTTextNode, 'val'> & AdditionalASTData;
+export type ASTEmptyPipeNode = PugASTEmptyPipeNode & AdditionalASTData;
 export type ASTCodeNode = PugASTCodeNode & AdditionalASTData;
 export type ASTComment = PugASTCommentNode & AdditionalASTData;
 export type ASTDoctype = PugASTDoctypeNode & AdditionalASTData;
@@ -34,7 +35,12 @@ type PugASTTagNode<A, B> = {
     name: string;
     selfClosing: boolean;
     attrs: A[];
-    attributeBlocks: never[];
+    attributeBlocks: {
+        type: 'AttributeBlock';
+        val: string;
+        line: number;
+        column: number;
+    }[];
     isInline: boolean;
     line: number;
     column: number;
@@ -47,6 +53,12 @@ type PugASTTextNode = {
     line: number;
     column: number;
 };
+type PugASTEmptyPipeNode = {
+    type: 'EmptyPipe';
+    val: string;
+    line: number;
+    column: number;
+};
 type PugASTCodeNode = {
     type: 'Code';
     val: string;

package/lib/pug-parser/index.js

@@ -1,10 +1,22 @@
-// @ts-ignore
 import lexer from 'pug-lexer';
 // @ts-ignore
 import parser from 'pug-parser';
 import { getOffsetFromLineAndCol } from '../utils/get-offset-from-line-and-col.js';
-export function pugParse(pug) {
-    const lexOrigin = lexer(pug);
+export function pugParse(pug, useOffset = false) {
+    let lexOrigin = lexer(pug);
+    /**
+     * Exclude indent and outdent tokens when offset is received to avoid indentation errors
+     */
+    if (useOffset) {
+        const newLexOrigin = [];
+        for (const token of lexOrigin) {
+            if (token.type === 'indent' || token.type === 'outdent') {
+                continue;
+            }
+            newLexOrigin.push(token);
+        }
+        lexOrigin = newLexOrigin;
+    }
     const lex = JSON.parse(JSON.stringify(lexOrigin));
     const originAst = parser(lexOrigin);
     const ast = optimizeAST(originAst, lex, pug);
@@ -74,6 +86,7 @@ tokens, pug) {
                     endColumn,
                     block,
                     attrs,
+                    attributeBlocks: node.attributeBlocks,
                 };
                 nodes.push(tagNode);
                 continue;
@@ -222,6 +235,27 @@ tokens, pug) {
                 const { endOffset, endLine, endColumn } = getRawTextAndLocationEnd(node.val, offset, line, column, tokens, offsets, pug);
                 const raw = pug.slice(offset, endOffset);
                 // console.log({ v: node.val, r: raw });
+                /**
+                 *
+                 * Empty piped line
+                 *
+                 * @see https://pugjs.org/language/plain-text.html#recommended-solutions
+                 */
+                if (raw === '|') {
+                    const newNode = {
+                        type: 'EmptyPipe',
+                        raw,
+                        val: node.val,
+                        offset,
+                        endOffset,
+                        line,
+                        endLine,
+                        column,
+                        endColumn,
+                    };
+                    nodes.push(newNode);
+                    continue;
+                }
                 const textNode = {
                     type: node.type,
                     raw,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/pug-parser",
-	"version": "4.0.0-dev.23+d6f2aa9bc",
+	"version": "4.0.0-rc.0",
 	"description": "Pug parser for markuplint",
 	"repository": "git@github.com:markuplint/markuplint.git",
 	"author": "Yusuke Hirao <yusukehirao@me.com>",
@@ -21,11 +21,11 @@
 		"clean": "tsc --build --clean"
 	},
 	"dependencies": {
-		"@markuplint/html-parser": "4.0.0-dev.23+d6f2aa9bc",
-		"@markuplint/ml-ast": "4.0.0-dev.23+d6f2aa9bc",
-		"@markuplint/parser-utils": "4.0.0-dev.23+d6f2aa9bc",
+		"@markuplint/html-parser": "4.0.0-rc.0",
+		"@markuplint/ml-ast": "4.0.0-rc.0",
+		"@markuplint/parser-utils": "4.0.0-rc.0",
 		"pug-lexer": "^5.0.1",
 		"pug-parser": "^6.0.0"
 	},
-	"gitHead": "d6f2aa9bc287768466f23b5340e4e0eecfa30d59"
+	"gitHead": "3fdeb45cb69ed52b3a215a7520cea1181601443f"
 }