💥 support dynamic argument [RFC0003] (refs #39)

This commit contains a breaking change about the tokens of VDirectiveKey
nodes.

Author: mysticatea

docs/ast.md

@@ -141,15 +141,17 @@ interface VFilter <: Node {
 interface VDirectiveKey <: Node {
     type: "VDirectiveKey"
     name: string
-    argument: string | null
+    argument: VExpressionContainer | string | null
     modifiers: [ string ]
     shorthand: boolean
 }
 ```
 
 - The `name` property doesn't have `v-` prefix. It's dropped.
+- The `argument` property is a `VExpressionContainer` node if it's a [dynamic argument].
 - In the shorthand of `v-bind` cases, the `name` property is `"bind"` and the `shorthand` property is `true`.
 - In the shorthand of `v-on` cases, the `name` property is `"on"` and the `shorthand` property is `true`.
+- In the shorthand of `v-slot` cases, the `name` property is `"slot"` and the `shorthand` property is `true`.
 - Otherwise, `shorthand` property is always `false`.
 
 ## VLiteral
@@ -276,3 +278,4 @@ This supports only HTML for now. However, I'm going to add other languages Vue.j
 [`v-slot` directives]: https://vuejs.org/v2/api/#v-slot
 [scope]: https://vuejs.org/v2/guide/components.html#Scoped-Slots
 [`slot-scope` attributes]: https://vuejs.org/v2/guide/components.html#Scoped-Slots
+[dynamic argument]: https://vuejs.org/v2/guide/syntax.html#Dynamic-Arguments

src/ast/nodes.ts

@@ -741,7 +741,7 @@ export interface VText extends HasLocation, HasParent {
  */
 export interface VExpressionContainer extends HasLocation, HasParent {
     type: "VExpressionContainer"
-    parent: VDocumentFragment | VElement | VDirective
+    parent: VDocumentFragment | VElement | VDirective | VDirectiveKey
     expression:
         | ESLintExpression
         | VFilterSequenceExpression
@@ -771,12 +771,12 @@ export interface DirectiveKeyParts {
 /**
  * Attribute name nodes.
  */
-export interface VDirectiveKey
-    extends HasLocation,
-        HasParent,
-        DirectiveKeyParts {
+export interface VDirectiveKey extends HasLocation, HasParent {
     type: "VDirectiveKey"
     parent: VAttribute
+    name: string
+    argument: VExpressionContainer | string | null
+    modifiers: string[]
     shorthand: boolean
     raw: DirectiveKeyParts
 }

src/ast/traverse.ts

@@ -12,7 +12,7 @@ import { Node } from "./nodes"
 
 const KEYS = Evk.unionWith({
     VAttribute: ["key", "value"],
-    VDirectiveKey: [],
+    VDirectiveKey: ["argument"],
     VDocumentFragment: ["children"],
     VElement: ["startTag", "children", "endTag"],
     VEndTag: [],
@@ -59,6 +59,15 @@ function getFallbackKeys(node: Node): string[] {
     return Object.keys(node).filter(fallbackKeysFilter, node)
 }
 
+/**
+ * Check wheather a given value is a node.
+ * @param x The value to check.
+ * @returns `true` if the value is a node.
+ */
+function isNode(x: any): x is Node {
+    return x !== null && typeof x === "object" && typeof x.type === "string"
+}
+
 /**
  * Traverse the given node.
  * @param node The node to traverse.
@@ -78,11 +87,11 @@ function traverse(node: Node, parent: Node | null, visitor: Visitor): void {
 
         if (Array.isArray(child)) {
             for (j = 0; j < child.length; ++j) {
-                if (child[j]) {
+                if (isNode(child[j])) {
                     traverse(child[j], node, visitor)
                 }
             }
-        } else if (child) {
+        } else if (isNode(child)) {
             traverse(child, node, visitor)
         }
     }

src/template/index.ts

@@ -35,6 +35,10 @@ import {
     parseSlotScopeExpression,
 } from "../script"
 
+const shorthandSign = /^[:@#]/u
+const shorthandNameMap = { ":": "bind", "@": "on", "#": "slot" }
+const shorthandSignMap = { bind: ":", on: "@", slot: "#" }
+
 /**
  * Get the belonging document of the given node.
  * @param leafNode The node to get.
@@ -79,7 +83,7 @@ function createSimpleToken(
  * @param node The identifier node to parse.
  * @returns The directive key node.
  */
-function createDirectiveKey(node: VIdentifier): VDirectiveKey {
+function parseDirectiveKeyStatically(node: VIdentifier): VDirectiveKey {
     const raw: DirectiveKeyParts = {
         name: "",
         argument: null,
@@ -100,16 +104,10 @@ function createDirectiveKey(node: VIdentifier): VDirectiveKey {
     const rawId = node.rawName
     let i = 0
 
-    if (node.name.startsWith(":")) {
-        ret.name = raw.name = "bind"
-        ret.shorthand = true
-        i = 1
-    } else if (id.startsWith("@")) {
-        ret.name = raw.name = "on"
-        ret.shorthand = true
-        i = 1
-    } else if (id.startsWith("#")) {
-        ret.name = raw.name = "slot"
+    // Parse.
+    if (shorthandSign.test(id)) {
+        const sign = id[0] as ":" | "@" | "#"
+        ret.name = raw.name = shorthandNameMap[sign]
         ret.shorthand = true
         i = 1
     } else {
@@ -133,11 +131,219 @@ function createDirectiveKey(node: VIdentifier): VDirectiveKey {
     ret.modifiers = dotSplit.slice(1)
     raw.modifiers = dotSplitRaw.slice(1)
 
+    return ret
+}
+
+/**
+ * Parse the tokens of a given key node.
+ * @param node The key node to parse.
+ */
+function parseDirectiveKeyTokens(
+    node: VDirectiveKey,
+    locationCalculator: LocationCalculator,
+): Token[] {
+    const raw = node.raw
+    const tokens: Token[] = []
+    let i = 0
+
+    if (node.shorthand) {
+        const name = raw.name as "bind" | "on" | "slot"
+        tokens.push(
+            createSimpleToken(
+                "Punctuator",
+                node.range[0],
+                node.range[0] + 1,
+                shorthandSignMap[name],
+                locationCalculator,
+            ),
+        )
+        i = 1
+    } else if (raw.name) {
+        tokens.push(
+            createSimpleToken(
+                "HTMLIdentifier",
+                node.range[0],
+                node.range[0] + raw.name.length,
+                raw.name,
+                locationCalculator,
+            ),
+        )
+        i = raw.name.length
+
+        if (raw.argument) {
+            tokens.push(
+                createSimpleToken(
+                    "Punctuator",
+                    node.range[0] + i,
+                    node.range[0] + i + 1,
+                    ":",
+                    locationCalculator,
+                ),
+            )
+            i += 1
+        }
+    }
+
+    if (raw.argument) {
+        tokens.push(
+            createSimpleToken(
+                "HTMLIdentifier",
+                node.range[0] + i,
+                node.range[0] + i + raw.argument.length,
+                raw.argument,
+                locationCalculator,
+            ),
+        )
+        i += raw.argument.length
+    }
+
+    for (const modifier of raw.modifiers) {
+        tokens.push(
+            createSimpleToken(
+                "Punctuator",
+                node.range[0] + i,
+                node.range[0] + i + 1,
+                ".",
+                locationCalculator,
+            ),
+            createSimpleToken(
+                "HTMLIdentifier",
+                node.range[0] + i + 1,
+                node.range[0] + i + 1 + modifier.length,
+                modifier,
+                locationCalculator,
+            ),
+        )
+        i += 1 + modifier.length
+    }
+
+    return tokens
+}
+
+/**
+ * Convert `node.argument` property to a `VExpressionContainer` node if it's a dynamic argument.
+ * @param text The source code text of the directive key node.
+ * @param node The directive key node to convert.
+ * @param document The belonging document node.
+ * @param parserOptions The parser options to parse.
+ * @param locationCalculator The location calculator to parse.
+ */
+function convertDynamicArgument(
+    text: string,
+    node: VDirectiveKey,
+    document: VDocumentFragment | null,
+    parserOptions: any,
+    locationCalculator: LocationCalculator,
+): void {
+    const argument = node.raw.argument
+    if (
+        typeof argument !== "string" ||
+        !argument.startsWith("[") ||
+        !argument.endsWith("]")
+    ) {
+        return
+    }
+
+    const start = node.range[0] + text.indexOf(argument)
+    const end = start + argument.length
+    try {
+        const { comments, expression, references, tokens } = parseExpression(
+            argument.slice(1, -1),
+            locationCalculator.getSubCalculatorAfter(start + 1),
+            parserOptions,
+        )
+
+        node.argument = {
+            type: "VExpressionContainer",
+            range: [start, end],
+            loc: {
+                start: locationCalculator.getLocation(start),
+                end: locationCalculator.getLocation(end),
+            },
+            parent: node,
+            expression,
+            references,
+        }
+
+        if (expression != null) {
+            expression.parent = node.argument
+        }
+
+        // Add tokens of `[` and `]`.
+        tokens.unshift(
+            createSimpleToken(
+                "Punctuator",
+                start,
+                start + 1,
+                "[",
+                locationCalculator,
+            ),
+        )
+        tokens.push(
+            createSimpleToken(
+                "Punctuator",
+                end - 1,
+                end,
+                "]",
+                locationCalculator,
+            ),
+        )
+
+        replaceTokens(document, node.argument, tokens)
+        insertComments(document, comments)
+    } catch (error) {
+        debug("[template] Parse error: %s", error)
+
+        if (ParseError.isParseError(error)) {
+            node.argument = {
+                type: "VExpressionContainer",
+                range: [start, end],
+                loc: {
+                    start: locationCalculator.getLocation(start),
+                    end: locationCalculator.getLocation(end),
+                },
+                parent: node,
+                expression: null,
+                references: [],
+            }
+            insertError(document, error)
+        } else {
+            throw error
+        }
+    }
+}
+
+/**
+ * Parse the given attribute name as a directive key.
+ * @param node The identifier node to parse.
+ * @returns The directive key node.
+ */
+function createDirectiveKey(
+    node: VIdentifier,
+    document: VDocumentFragment | null,
+    parserOptions: any,
+    locationCalculator: LocationCalculator,
+): VDirectiveKey {
+    // Parse node and tokens.
+    const ret = parseDirectiveKeyStatically(node)
+    const tokens = parseDirectiveKeyTokens(ret, locationCalculator)
+    replaceTokens(document, ret, tokens)
+
+    // Drop `v-` prefix.
     if (ret.name.startsWith("v-")) {
         ret.name = ret.name.slice(2)
-        raw.name = raw.name.slice(2)
+        ret.raw.name = ret.raw.name.slice(2)
     }
 
+    // Parse dynamic argument.
+    convertDynamicArgument(
+        node.rawName,
+        ret,
+        document,
+        parserOptions,
+        locationCalculator,
+    )
+
     return ret
 }
 
@@ -382,14 +588,19 @@ export function convertToDirective(
         node.range,
     )
 
+    const document = getOwnerDocument(node)
     const directive: VDirective = node as any
     directive.directive = true
-    directive.key = createDirectiveKey(node.key)
+    directive.key = createDirectiveKey(
+        node.key,
+        document,
+        parserOptions,
+        locationCalculator,
+    )
 
     if (node.value == null) {
         return
     }
-    const document = getOwnerDocument(node)
 
     try {
         const ret = parseAttributeValue(