feat(template-compiler): experimental template expressions

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

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 /**
- * Next error code: 1189
+ * Next error code: 1198
  */
 
 export * from './compiler';

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

@@ -875,4 +875,76 @@ export const ParserDiagnostics = {
         level: DiagnosticLevel.Error,
         url: '',
     },
+
+    // TODO [#3370]: remove this error if template expressions is removed
+    INVALID_EXPR_ARROW_FN_PARAM: {
+        code: 1189,
+        message: "Template expression doesn't allow {0} in arrow function params.",
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    // TODO [#3370]: remove this error if template expressions is removed
+    INVALID_EXPR_STATEMENTS_PROHIBITED: {
+        code: 1190,
+        message: 'Statements are disallowed in template expressions.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    // TODO [#3370]: remove this error if template expressions is removed
+    INVALID_EXPR_MUTATION_OUTSIDE_ARROW: {
+        code: 1191,
+        message: 'Field mutations are only permitted within arrow functions.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    // TODO [#3370]: remove this error if template expressions is removed
+    INVALID_EXPR_DELETE_OP: {
+        code: 1192,
+        message: 'Use of the delete operator is prohibited within template expressions.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    // TODO [#3370]: remove this error if template expressions is removed
+    INVALID_EXPR_ARROW_FN_BODY: {
+        code: 1193,
+        message: 'The body of arrow functions in template expressions must be an expression.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    // TODO [#3370]: remove this error if template expressions is removed
+    INVALID_EXPR_ARROW_FN_KIND: {
+        code: 1194,
+        message: 'Arrow functions in template expressions cannot be {0}.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    // TODO [#3370]: remove this error if template expressions is removed
+    INVALID_EXPR_EARLY_STAGE_FEATURE: {
+        code: 1195,
+        message: 'Early-stage JS features are disallowed in template expressions.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    // TODO [#3370]: remove this error if template expressions is removed
+    INVALID_EXPR_PROHIBITED_NODE_TYPE: {
+        code: 1196,
+        message: 'Use of {0} is disallowed within template expressions.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    // TODO [#3370]: remove this error if template expressions is removed
+    INVALID_EXPR_COMMENTS_DISALLOWED: {
+        code: 1197,
+        message: 'Use of comments is disallowed within template expressions.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
 };

packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js

@@ -41,6 +41,9 @@ function createPreprocessor(config, emitter, logger) {
             .join('\n');
         const outro = ancestorDirectories.map(() => `});`).join('\n');
 
+        // TODO [#3370]: remove experimental template expression flag
+        const experimentalComplexExpressions = suiteDir.includes('template-expressions');
+
         const plugins = [
             lwcRollupPlugin({
                 sourcemap: true,
@@ -50,6 +53,7 @@ function createPreprocessor(config, emitter, logger) {
                 },
                 enableLwcSpread: true,
                 enableDynamicComponents: true,
+                experimentalComplexExpressions,
                 disableSyntheticShadowSupport: DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER,
             }),
         ];

packages/@lwc/integration-karma/test/template-expressions/errors/index.spec.js

@@ -0,0 +1,16 @@
+import { createElement } from 'lwc';
+
+import UndefinedMemberExpressionObjParent from 'x/undefinedMemberExpressionObjParent';
+import ThrowDuringCallParent from 'x/throwDuringCallParent';
+
+it(`should handle member expression with undefined object`, () => {
+    const parent = createElement('x-parent', { is: UndefinedMemberExpressionObjParent });
+    document.body.appendChild(parent);
+    expect(parent.caughtError).toContain('undefined');
+});
+
+it(`should handle errors thrown during call expression`, () => {
+    const parent = createElement('x-parent', { is: ThrowDuringCallParent });
+    document.body.appendChild(parent);
+    expect(parent.caughtError).toContain("I'm the Gingerbread man!");
+});

packages/@lwc/integration-karma/test/template-expressions/errors/x/throwDuringCallChild/throwDuringCallChild.html

@@ -0,0 +1,3 @@
+<template>
+    <div foo={runRunAsFastAsYouCan()}></div>
+</template>

packages/@lwc/integration-karma/test/template-expressions/errors/x/throwDuringCallChild/throwDuringCallChild.js

@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class Test extends LightningElement {
+    runRunAsFastAsYouCan() {
+        throw new Error("You can't catch me, I'm the Gingerbread man!");
+    }
+}

packages/@lwc/integration-karma/test/template-expressions/errors/x/throwDuringCallParent/throwDuringCallParent.html

@@ -0,0 +1,3 @@
+<template>
+    <x-throw-during-call-child></x-throw-during-call-child>
+</template>

packages/@lwc/integration-karma/test/template-expressions/errors/x/throwDuringCallParent/throwDuringCallParent.js

@@ -0,0 +1,8 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Parent extends LightningElement {
+    @api caughtError = null;
+    errorCallback(err) {
+        this.caughtError = err.message;
+    }
+}

packages/@lwc/integration-karma/test/template-expressions/errors/x/undefinedMemberExpressionObjChild/undefinedMemberExpressionObjChild.html

@@ -0,0 +1,3 @@
+<template>
+    <div foo={nonexistent.thing}></div>
+</template>

packages/@lwc/integration-karma/test/template-expressions/errors/x/undefinedMemberExpressionObjChild/undefinedMemberExpressionObjChild.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class Test extends LightningElement {}

packages/@lwc/integration-karma/test/template-expressions/errors/x/undefinedMemberExpressionObjParent/undefinedMemberExpressionObjParent.html

@@ -0,0 +1,3 @@
+<template>
+    <x-undefined-member-expression-obj-child></x-undefined-member-expression-obj-child>
+</template>

packages/@lwc/integration-karma/test/template-expressions/errors/x/undefinedMemberExpressionObjParent/undefinedMemberExpressionObjParent.js

@@ -0,0 +1,8 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Parent extends LightningElement {
+    @api caughtError = null;
+    errorCallback(err) {
+        this.caughtError = err.message;
+    }
+}

packages/@lwc/integration-karma/test/template-expressions/smoke-test/index.spec.js

@@ -0,0 +1,10 @@
+import { createElement } from 'lwc';
+
+import Test from 'x/test';
+
+it(`should support call expressions`, () => {
+    const elm = createElement('x-test', { is: Test });
+    document.body.appendChild(elm);
+
+    expect(elm.shadowRoot.querySelector('div').getAttribute('foo')).toBe('bar');
+});

packages/@lwc/integration-karma/test/template-expressions/smoke-test/x/test/test.html

@@ -0,0 +1,3 @@
+<template>
+    <div foo={bar()}></div>
+</template>

packages/@lwc/integration-karma/test/template-expressions/smoke-test/x/test/test.js

@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class Test extends LightningElement {
+    bar() {
+        return 'bar';
+    }
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/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/invalid/arrow-function-async/ast.json

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

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

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

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/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/invalid/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/invalid/arrow-function-block-body/ast.json

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

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

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

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/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/invalid/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/invalid/assignment-outside-arrow/ast.json

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

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

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

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/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/invalid/await/actual.html

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1196,
+            "message": "Invalid expression {await foo()} - LWC1196: Use of await expressions is disallowed within template expressions.",
+            "level": 1,
+            "location": {
+                "line": 3,
+                "column": 17,
+                "start": 41,
+                "length": 21
+            }
+        }
+    ]
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/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/invalid/bigint-literal/ast.json

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

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

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

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/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
+            }
+        }
+    ]
+}

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

@@ -0,0 +1,9 @@
+<template>
+    <section>
+        <x-foo jsclass={
+            class Bar {
+                method() {}
+            }
+        }></x-foo>
+    </section>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/class-expr/ast.json

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

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

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

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

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1196,
+            "message": "Invalid expression {\n            class Bar {\n                method() {}\n            }\n        } - LWC1196: Use of classes is disallowed within template expressions.",
+            "level": 1,
+            "location": {
+                "line": 3,
+                "column": 16,
+                "start": 40,
+                "length": 85
+            }
+        }
+    ]
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/comma-operator/actual.html

@@ -0,0 +1,5 @@
+<template>
+    <section>
+        <button onclick={(one(), two(), three(), iAmTheCount())}></button>
+    </section>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/comma-operator/ast.json

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

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/comma-operator/config.json

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