feat: <template lang="..."> to parse as raw text (#244)

* ignore template tag

* Create real-dolphins-nail.md

Author: ota-meshi

.changeset/real-dolphins-nail.md

@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+feat: `<template lang="...">` to parse as raw text

docs/AST.md

@@ -15,7 +15,7 @@ See [ESTree] for the AST node of the script generated by `espree`.
 [variabledeclarator]: https://github.com/estree/estree/blob/master/es5.md#variabledeclarator
 [pattern]: https://github.com/estree/estree/blob/master/es5.md#patterns
 
-See details: [../src/ast.ts](../src/ast.ts)
+See details: [../src/ast/*](../src/ast/)
 
 ## Common
 

src/ast/base.ts

@@ -0,0 +1,6 @@
+import type { Locations } from "./common";
+
+// internals
+export interface BaseNode extends Locations {
+  type: string;
+}

src/ast/common.ts

@@ -0,0 +1,43 @@
+import type { BaseNode } from "./base";
+
+export interface Position {
+  /** >= 1 */
+  line: number;
+  /** >= 0 */
+  column: number;
+}
+export type Range = [number, number];
+export interface SourceLocation {
+  start: Position;
+  end: Position;
+}
+export interface Locations {
+  loc: SourceLocation;
+  range: Range;
+}
+
+export interface Token extends BaseNode {
+  type:
+    | "Boolean"
+    | "Null"
+    | "Identifier"
+    | "Keyword"
+    | "Punctuator"
+    | "JSXIdentifier"
+    | "JSXText"
+    | "Numeric"
+    | "String"
+    | "RegularExpression"
+    | "Template"
+    // HTML
+    | "HTMLText"
+    | "HTMLIdentifier"
+    | "MustacheKeyword"
+    | "HTMLComment";
+  value: string;
+}
+
+export interface Comment extends BaseNode {
+  type: "Line" | "Block";
+  value: string;
+}

src/ast.ts renamed to src/ast/html.ts

@@ -1,53 +1,8 @@
 import type ESTree from "estree";
-export type Range = [number, number];
+import type { BaseNode } from "./base";
+import type { Token, Comment } from "./common";
 
-export interface SourceLocation {
-  start: Position;
-  end: Position;
-}
-export interface Locations {
-  loc: SourceLocation;
-  range: Range;
-}
-
-interface BaseNode extends Locations {
-  type: string;
-}
-
-export interface Token extends BaseNode {
-  type:
-    | "Boolean"
-    | "Null"
-    | "Identifier"
-    | "Keyword"
-    | "Punctuator"
-    | "JSXIdentifier"
-    | "JSXText"
-    | "Numeric"
-    | "String"
-    | "RegularExpression"
-    | "Template"
-    // HTML
-    | "HTMLText"
-    | "HTMLIdentifier"
-    | "MustacheKeyword"
-    | "HTMLComment";
-  value: string;
-}
-
-export interface Comment extends BaseNode {
-  type: "Line" | "Block";
-  value: string;
-}
-
-export interface Position {
-  /** >= 1 */
-  line: number;
-  /** >= 0 */
-  column: number;
-}
-
-export type SvelteNode =
+export type SvelteHTMLNode =
   | SvelteProgram
   | SvelteScriptElement
   | SvelteStyleElement
@@ -77,8 +32,7 @@ export type SvelteNode =
   | SvelteSpecialDirective
   | SvelteDirectiveKey
   | SvelteSpecialDirectiveKey
-  | SvelteHTMLComment
-  | SvelteReactiveStatement;
+  | SvelteHTMLComment;
 
 /** Node of Svelte program root */
 export interface SvelteProgram extends BaseNode {
@@ -95,6 +49,7 @@ export type SvelteElement =
   | SvelteHTMLElement
   | SvelteComponentElement
   | SvelteSpecialElement;
+
 type BaseSvelteElement = BaseNode;
 
 /** Node of `<script>` element. */
@@ -616,11 +571,3 @@ export interface SvelteSpecialDirective extends BaseNode {
   expression: ESTree.Expression;
   parent: SvelteStartTag /* & { parent: SvelteSpecialElement } */;
 }
-
-/** Node of `$` statement. */
-export interface SvelteReactiveStatement extends BaseNode {
-  type: "SvelteReactiveStatement";
-  label: ESTree.Identifier & { name: "$" };
-  body: ESTree.Statement;
-  parent: ESTree.Node;
-}

src/ast/index.ts

@@ -0,0 +1,8 @@
+import type { SvelteHTMLNode } from "./html";
+import type { SvelteScriptNode } from "./script";
+
+export * from "./common";
+export * from "./html";
+export * from "./script";
+
+export type SvelteNode = SvelteHTMLNode | SvelteScriptNode;

src/ast/script.ts

@@ -0,0 +1,12 @@
+import type ESTree from "estree";
+import type { BaseNode } from "./base";
+
+export type SvelteScriptNode = SvelteReactiveStatement;
+
+/** Node of `$` statement. */
+export interface SvelteReactiveStatement extends BaseNode {
+  type: "SvelteReactiveStatement";
+  label: ESTree.Identifier & { name: "$" };
+  body: ESTree.Statement;
+  parent: ESTree.Node;
+}

src/context/index.ts

@@ -4,6 +4,8 @@ import type {
   Comment,
   Locations,
   Position,
+  SvelteElement,
+  SvelteName,
   SvelteScriptElement,
   SvelteStyleElement,
   Token,
@@ -145,6 +147,12 @@ export class Context {
 
     let start = 0;
     for (const block of extractBlocks(code)) {
+      if (block.tag === "template") {
+        const lang = block.attrs.find((attr) => attr.key.name === "lang");
+        if (!lang || !lang.value || lang.value.value === "html") {
+          continue;
+        }
+      }
       this.blocks.push(block);
       templateCode +=
         code.slice(start, block.contentRange[0]) +
@@ -183,6 +191,10 @@ export class Context {
     };
   }
 
+  public getIndexFromLoc(loc: { line: number; column: number }): number {
+    return this.locs.getIndexFromLoc(loc);
+  }
+
   /**
    * Get the location information of the given node.
    * @param node The node.
@@ -278,9 +290,14 @@ export class Context {
   }
 
   public findBlock(
-    element: SvelteScriptElement | SvelteStyleElement
+    element: SvelteScriptElement | SvelteStyleElement | SvelteElement
   ): Block | undefined {
-    const tag = element.type === "SvelteScriptElement" ? "script" : "style";
+    const tag =
+      element.type === "SvelteScriptElement"
+        ? "script"
+        : element.type === "SvelteStyleElement"
+        ? "style"
+        : (element.name as SvelteName).name.toLowerCase();
     return this.blocks.find(
       (block) =>
         block.tag === tag &&
@@ -291,16 +308,17 @@ export class Context {
 }
 
 type Block = {
-  tag: "script" | "style";
+  tag: "script" | "style" | "template";
   attrs: AttributeToken[];
   contentRange: [number, number];
 };
 
 /** Extract <script> blocks */
 function* extractBlocks(code: string): IterableIterator<Block> {
-  const startTagOpenRe = /<!--[\s\S]*?-->|<(script|style)([\s>])/giu;
+  const startTagOpenRe = /<!--[\s\S]*?-->|<(script|style|template)([\s>])/giu;
   const endScriptTagRe = /<\/script>/giu;
   const endStyleTagRe = /<\/style>/giu;
+  const endTemplateTagRe = /<\/template>/giu;
   let startTagOpenMatch;
   while ((startTagOpenMatch = startTagOpenRe.exec(code))) {
     const [, tag, nextChar] = startTagOpenMatch;
@@ -323,8 +341,13 @@ function* extractBlocks(code: string): IterableIterator<Block> {
         continue;
       }
     }
+    const lowerTag = tag.toLowerCase() as "script" | "style" | "template";
     const endTagRe =
-      tag.toLowerCase() === "script" ? endScriptTagRe : endStyleTagRe;
+      lowerTag === "script"
+        ? endScriptTagRe
+        : lowerTag === "style"
+        ? endStyleTagRe
+        : endTemplateTagRe;
     endTagRe.lastIndex = startTagEnd;
     const endTagMatch = endTagRe.exec(code);
     if (endTagMatch) {
@@ -333,7 +356,7 @@ function* extractBlocks(code: string): IterableIterator<Block> {
       yield {
         contentRange,
         attrs,
-        tag: tag as "script" | "style",
+        tag: lowerTag,
       };
       startTagOpenRe.lastIndex = endTagRe.lastIndex;
     }

src/parser/converts/element.ts

@@ -263,7 +263,11 @@ function convertHTMLElement(
     },
   });
 
-  if (element.name.name === "script" || element.name.name === "style") {
+  if (
+    element.name.name === "script" ||
+    element.name.name === "style" ||
+    (element.name.name === "template" && ctx.findBlock(element))
+  ) {
     for (const child of element.children) {
       if (child.type === "SvelteText") {
         child.value = ctx.code.slice(...child.range);

tests/fixtures/parser/ast/pug/each/each01-input.svelte

@@ -0,0 +1,8 @@
+<script>
+let objs = [{a: 1, b: 2}, {a: 2, b: 3}]
+</script>
+
+<template lang="pug">
++each("objs as obj")
+    p("{...obj}") {obj.a}
+</template>