test(template-compiler): template expressions

packages/@lwc/errors/src/compiler/error-info/template-transform.ts

@@ -951,7 +951,7 @@ export const ParserDiagnostics = {
     // TODO [#3370]: remove this error if template expressions is removed
     INVALID_EXPR_PROHIBITED_NODE_TYPE: {
         code: 1196,
-        message: 'Use of {} is disallowed within template expressions.',
+        message: 'Use of {0} is disallowed within template expressions.',
         level: DiagnosticLevel.Error,
         url: '',
     },

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/array-expr/actual.html

@@ -0,0 +1,6 @@
+<template>
+    <section>
+        <x-pert foo={[1, bar, 'baz']}></x-pert>
+        {['flop', floo, 2].join('')}
+    </section>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/array-expr/config.json

@@ -0,0 +1,3 @@
+{
+	"experimentalComplexExpressions": true
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/array-expr/expected.js

@@ -0,0 +1,27 @@
+import _xPert from "x/pert";
+import { registerTemplate } from "lwc";
+const stc0 = {
+  key: 0,
+};
+function tmpl($api, $cmp, $slotset, $ctx) {
+  const {
+    c: api_custom_element,
+    d: api_dynamic_text,
+    t: api_text,
+    h: api_element,
+  } = $api;
+  return [
+    api_element("section", stc0, [
+      api_custom_element("x-pert", _xPert, {
+        props: {
+          foo: [1, $cmp.bar, "baz"],
+        },
+        key: 1,
+      }),
+      api_text(api_dynamic_text(["flop", $cmp.floo, 2].join(""))),
+    ]),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/array-expr/metadata.json

@@ -0,0 +1,3 @@
+{
+    "warnings": []
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/arrow-function-async/actual.html

@@ -0,0 +1,5 @@
+<template>
+    <section>
+        <button onclick={async () => doSomething()}></button>
+    </section>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/arrow-function-async/ast.json

@@ -0,0 +1 @@
+{}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/arrow-function-async/config.json

@@ -0,0 +1,3 @@
+{
+	"experimentalComplexExpressions": true
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/arrow-function-async/metadata.json

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1194,
+            "message": "Invalid expression {async () => doSomething()} - LWC1194: Arrow functions in template expressions cannot be async.",
+            "level": 1,
+            "location": {
+                "line": 3,
+                "column": 17,
+                "start": 41,
+                "length": 35
+            }
+        }
+    ]
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/arrow-function-block-body/actual.html

@@ -0,0 +1,5 @@
+<template>
+    <section>
+        <button onblick={() => { doSomething(); }}></button>
+    </section>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/arrow-function-block-body/ast.json

@@ -0,0 +1 @@
+{}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/arrow-function-block-body/config.json

@@ -0,0 +1,3 @@
+{
+	"experimentalComplexExpressions": true
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/arrow-function-block-body/metadata.json

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1193,
+            "message": "Invalid expression {() => { doSomething(); }} - LWC1193: The body of arrow functions in template expressions must be an expression.",
+            "level": 1,
+            "location": {
+                "line": 3,
+                "column": 17,
+                "start": 41,
+                "length": 34
+            }
+        }
+    ]
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/assignment-inside-arrow/actual.html

@@ -0,0 +1,5 @@
+<template>
+    <section>
+        <button onclick={() => myField = 'foo'}></button>
+    </section>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/assignment-inside-arrow/ast.json

@@ -0,0 +1,160 @@
+{
+    "root": {
+        "type": "Root",
+        "location": {
+            "startLine": 1,
+            "startColumn": 1,
+            "endLine": 5,
+            "endColumn": 12,
+            "start": 0,
+            "end": 109,
+            "startTag": {
+                "startLine": 1,
+                "startColumn": 1,
+                "endLine": 1,
+                "endColumn": 11,
+                "start": 0,
+                "end": 10
+            },
+            "endTag": {
+                "startLine": 5,
+                "startColumn": 1,
+                "endLine": 5,
+                "endColumn": 12,
+                "start": 98,
+                "end": 109
+            }
+        },
+        "directives": [],
+        "children": [
+            {
+                "type": "Element",
+                "name": "section",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "location": {
+                    "startLine": 2,
+                    "startColumn": 5,
+                    "endLine": 4,
+                    "endColumn": 15,
+                    "start": 15,
+                    "end": 97,
+                    "startTag": {
+                        "startLine": 2,
+                        "startColumn": 5,
+                        "endLine": 2,
+                        "endColumn": 14,
+                        "start": 15,
+                        "end": 24
+                    },
+                    "endTag": {
+                        "startLine": 4,
+                        "startColumn": 5,
+                        "endLine": 4,
+                        "endColumn": 15,
+                        "start": 87,
+                        "end": 97
+                    }
+                },
+                "attributes": [],
+                "properties": [],
+                "directives": [],
+                "listeners": [],
+                "children": [
+                    {
+                        "type": "Element",
+                        "name": "button",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "location": {
+                            "startLine": 3,
+                            "startColumn": 9,
+                            "endLine": 3,
+                            "endColumn": 58,
+                            "start": 33,
+                            "end": 82,
+                            "startTag": {
+                                "startLine": 3,
+                                "startColumn": 9,
+                                "endLine": 3,
+                                "endColumn": 49,
+                                "start": 33,
+                                "end": 73
+                            },
+                            "endTag": {
+                                "startLine": 3,
+                                "startColumn": 49,
+                                "endLine": 3,
+                                "endColumn": 58,
+                                "start": 73,
+                                "end": 82
+                            }
+                        },
+                        "attributes": [],
+                        "properties": [],
+                        "directives": [],
+                        "listeners": [
+                            {
+                                "type": "EventListener",
+                                "name": "click",
+                                "handler": {
+                                    "type": "ArrowFunctionExpression",
+                                    "start": 1,
+                                    "end": 22,
+                                    "id": null,
+                                    "expression": true,
+                                    "generator": false,
+                                    "async": false,
+                                    "params": [],
+                                    "body": {
+                                        "type": "AssignmentExpression",
+                                        "start": 7,
+                                        "end": 22,
+                                        "operator": "=",
+                                        "left": {
+                                            "type": "MemberExpression",
+                                            "object": {
+                                                "type": "Identifier",
+                                                "name": "$cmp"
+                                            },
+                                            "property": {
+                                                "type": "Identifier",
+                                                "start": 7,
+                                                "end": 14,
+                                                "name": "myField"
+                                            },
+                                            "computed": false,
+                                            "optional": false
+                                        },
+                                        "right": {
+                                            "type": "Literal",
+                                            "start": 17,
+                                            "end": 22,
+                                            "value": "foo",
+                                            "raw": "'foo'"
+                                        }
+                                    },
+                                    "location": {
+                                        "startLine": 3,
+                                        "startColumn": 17,
+                                        "endLine": 3,
+                                        "endColumn": 48,
+                                        "start": 41,
+                                        "end": 72
+                                    }
+                                },
+                                "location": {
+                                    "startLine": 3,
+                                    "startColumn": 17,
+                                    "endLine": 3,
+                                    "endColumn": 48,
+                                    "start": 41,
+                                    "end": 72
+                                }
+                            }
+                        ],
+                        "children": []
+                    }
+                ]
+            }
+        ]
+    }
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/assignment-inside-arrow/config.json

@@ -0,0 +1,3 @@
+{
+	"experimentalComplexExpressions": true
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/assignment-inside-arrow/expected.js

@@ -0,0 +1,21 @@
+import { registerTemplate } from "lwc";
+const stc0 = {
+  key: 0,
+};
+function tmpl($api, $cmp, $slotset, $ctx) {
+  const { b: api_bind, h: api_element } = $api;
+  const { _m0 } = $ctx;
+  return [
+    api_element("section", stc0, [
+      api_element("button", {
+        key: 1,
+        on: {
+          click: _m0 || ($ctx._m0 = api_bind(() => ($cmp.myField = "foo"))),
+        },
+      }),
+    ]),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/assignment-inside-arrow/metadata.json

@@ -0,0 +1,3 @@
+{
+    "warnings": []
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/assignment-outside-arrow/actual.html

@@ -0,0 +1,5 @@
+<template>
+    <section>
+        <button onclick={myField = 'foo'}></button>
+    </section>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/assignment-outside-arrow/ast.json

@@ -0,0 +1 @@
+{}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/assignment-outside-arrow/config.json

@@ -0,0 +1,3 @@
+{
+	"experimentalComplexExpressions": true
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/assignment-outside-arrow/metadata.json

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1191,
+            "message": "Invalid expression {myField = 'foo'} - LWC1191: Field mutations are only permitted within arrow functions.",
+            "level": 1,
+            "location": {
+                "line": 3,
+                "column": 17,
+                "start": 41,
+                "length": 25
+            }
+        }
+    ]
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/await/actual.html

@@ -0,0 +1,5 @@
+<template>
+    <section>
+        <button onclick={ await something() }></button>
+    </section>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/await/ast.json

@@ -0,0 +1 @@
+{}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/await/config.json

@@ -0,0 +1,3 @@
+{
+	"experimentalComplexExpressions": true
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/await/metadata.json

@@ -0,0 +1,9 @@
+{
+    "warnings": [
+        {
+            "code": 1083,
+            "message": "Unexpected compilation error: LWC1083: Error parsing template expression: expression must end with curly brace.",
+            "level": 1
+        }
+    ]
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/bigint-literal/actual.html

@@ -0,0 +1,5 @@
+<template>
+    <section>
+        <x-child foo={transformBigInt(1n)}></x-child>
+    </section>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/bigint-literal/ast.json

@@ -0,0 +1 @@
+{}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/bigint-literal/config.json

@@ -0,0 +1,3 @@
+{
+	"experimentalComplexExpressions": true
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/bigint-literal/metadata.json

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1196,
+            "message": "Invalid expression {transformBigInt(1n)} - LWC1196: Use of BigInts is disallowed within template expressions.",
+            "level": 1,
+            "location": {
+                "line": 3,
+                "column": 18,
+                "start": 42,
+                "length": 25
+            }
+        }
+    ]
+}