Chore: improve handling of v-expressions

Author: mysticatea

src/html/intermediate-tokenizer.ts

@@ -79,6 +79,16 @@ export class IntermediateTokenizer {
         this.tokenizer.namespace = value
     }
 
+    /**
+     * The current flag of expression enabled.
+     */
+    get expressionEnabled(): boolean {
+        return this.tokenizer.expressionEnabled
+    }
+    set expressionEnabled(value: boolean) { //eslint-disable-line require-jsdoc
+        this.tokenizer.expressionEnabled = value
+    }
+
     /**
      * Initialize this intermediate tokenizer.
      * @param tokenizer The tokenizer.

src/html/parser.ts

@@ -110,34 +110,44 @@ export class Parser {
     /**
      * The tokens.
      */
-    get tokens(): Token[] {
+    private get tokens(): Token[] {
         return this.tokenizer.tokens
     }
 
     /**
      * The comments.
      */
-    get comments(): Token[] {
+    private get comments(): Token[] {
         return this.tokenizer.comments
     }
 
     /**
      * The syntax errors which are found in this parsing.
      */
-    get errors(): ParseError[] {
+    private get errors(): ParseError[] {
         return this.tokenizer.errors
     }
 
     /**
      * The current namespace.
      */
-    get namespace(): Namespace {
+    private get namespace(): Namespace {
         return this.tokenizer.namespace
     }
-    set namespace(value: Namespace) { //eslint-disable-line require-jsdoc
+    private set namespace(value: Namespace) { //eslint-disable-line require-jsdoc
         this.tokenizer.namespace = value
     }
 
+    /**
+     * The current flag of expression enabled.
+     */
+    private get expressionEnabled(): boolean {
+        return this.tokenizer.expressionEnabled
+    }
+    private set expressionEnabled(value: boolean) { //eslint-disable-line require-jsdoc
+        this.tokenizer.expressionEnabled = value
+    }
+
     /**
      * Get the current node.
      */
@@ -207,6 +217,11 @@ export class Parser {
         // Update the current namespace.
         const current = this.currentNode
         this.namespace = (current.type === "VElement") ? current.namespace : NS.HTML
+
+        // Update expression flag.
+        if (this.elementStack.length === 0) {
+            this.expressionEnabled = false
+        }
     }
 
     /**
@@ -341,6 +356,15 @@ export class Parser {
 
         // Update the content type of this element.
         if (namespace === NS.HTML) {
+            if (element.name === "template" && element.parent.type === "VDocumentFragment") {
+                const langAttr = element.startTag.attributes.find(a => !a.directive && a.key.name === "lang") as (VAttribute | undefined)
+                const lang = (langAttr && langAttr.value && langAttr.value.value) || "html"
+
+                if (lang !== "html") {
+                    this.tokenizer.state = "RAWTEXT"
+                }
+                this.expressionEnabled = true
+            }
             if (HTML_RCDATA_TAGS.has(element.name)) {
                 this.tokenizer.state = "RCDATA"
             }

src/html/tokenizer.ts

@@ -167,6 +167,12 @@ export class Tokenizer {
      */
     public namespace: Namespace
 
+    /**
+     * The flag which enables expression tokens.
+     * If this is true, this tokenizer will generate V_EXPRESSION_START and V_EXPRESSION_END tokens.
+     */
+    public expressionEnabled: boolean
+
     /**
      * Initialize this tokenizer.
      * @param text The source code to tokenize.
@@ -195,6 +201,7 @@ export class Tokenizer {
         this.tokenStartColumn = -1
         this.tokenStartLine = 1
         this.namespace = NS.HTML
+        this.expressionEnabled = false
     }
 
     /**
@@ -535,12 +542,12 @@ export class Tokenizer {
                 this.setStartTokenMark()
                 return "TAG_OPEN"
             }
-            if (cp === LEFT_CURLY_BRACKET) {
+            if (cp === LEFT_CURLY_BRACKET && this.expressionEnabled) {
                 this.setStartTokenMark()
                 this.returnState = "DATA"
                 return "V_EXPRESSION_START"
             }
-            if (cp === RIGHT_CURLY_BRACKET) {
+            if (cp === RIGHT_CURLY_BRACKET && this.expressionEnabled) {
                 this.setStartTokenMark()
                 this.returnState = "DATA"
                 return "V_EXPRESSION_END"
@@ -584,12 +591,12 @@ export class Tokenizer {
                 this.setStartTokenMark()
                 return "RCDATA_LESS_THAN_SIGN"
             }
-            if (cp === LEFT_CURLY_BRACKET) {
+            if (cp === LEFT_CURLY_BRACKET && this.expressionEnabled) {
                 this.setStartTokenMark()
                 this.returnState = "RCDATA"
                 return "V_EXPRESSION_START"
             }
-            if (cp === RIGHT_CURLY_BRACKET) {
+            if (cp === RIGHT_CURLY_BRACKET && this.expressionEnabled) {
                 this.setStartTokenMark()
                 this.returnState = "RCDATA"
                 return "V_EXPRESSION_END"
@@ -630,12 +637,12 @@ export class Tokenizer {
                 this.setStartTokenMark()
                 return "RAWTEXT_LESS_THAN_SIGN"
             }
-            if (cp === LEFT_CURLY_BRACKET) {
+            if (cp === LEFT_CURLY_BRACKET && this.expressionEnabled) {
                 this.setStartTokenMark()
                 this.returnState = "RAWTEXT"
                 return "V_EXPRESSION_START"
             }
-            if (cp === RIGHT_CURLY_BRACKET) {
+            if (cp === RIGHT_CURLY_BRACKET && this.expressionEnabled) {
                 this.setStartTokenMark()
                 this.returnState = "RAWTEXT"
                 return "V_EXPRESSION_END"