fix(compiler-core): support interpolation in RCDATA mode (e.g. textarea)

vuejs · Mar 23, 2020 · 0831b98 · 0831b98
1 parent 455a153
commit 0831b98
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/compiler-core/src/parse.ts b/packages/compiler-core/src/parse.ts
@@ -111,11 +111,11 @@ function parseChildren(
     const s = context.source
     let node: TemplateChildNode | TemplateChildNode[] | undefined = undefined
 
-    if (mode === TextModes.DATA) {
+    if (mode === TextModes.DATA || mode === TextModes.RCDATA) {
       if (!context.inPre && startsWith(s, context.options.delimiters[0])) {
         // '{{'
         node = parseInterpolation(context, mode)
-      } else if (s[0] === '<') {
+      } else if (mode === TextModes.DATA && s[0] === '<') {
         // https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
         if (s.length === 1) {
           emitError(context, ErrorCodes.EOF_BEFORE_TAG_NAME, 1)

diff --git a/packages/compiler-dom/__tests__/parse.spec.ts b/packages/compiler-dom/__tests__/parse.spec.ts
@@ -49,6 +49,22 @@ describe('DOM parser', () => {
       })
     })
 
+    test('textarea support interpolation', () => {
+      const ast = parse('<textarea><div>{{ foo }}</textarea>', parserOptions)
+      const element = ast.children[0] as ElementNode
+      expect(element.children).toMatchObject([
+        { type: NodeTypes.TEXT, content: `<div>` },
+        {
+          type: NodeTypes.INTERPOLATION,
+          content: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `foo`,
+            isStatic: false
+          }
+        }
+      ])
+    })
+
     test('style handles comments/elements as just a text', () => {
       const ast = parse(
         '<style>some<div>text</div>and<!--comment--></style>',