fix(engine): fixes issue #710 - add better error for invalid template

packages/lwc-engine/src/framework/__tests__/secure.spec.ts

@@ -1,4 +1,4 @@
-import { secure, createElement, LightningElement } from '../main';
+import { createElement, LightningElement } from '../main';
 
 describe('secure', () => {
     it('forbidden access to template', () => {
@@ -14,9 +14,9 @@ describe('secure', () => {
                 return html;
             }
         }
-        const elmt = createElement('x-foo', { is: Foo });
+        const elm = createElement('x-foo', { is: Foo });
         expect(() => {
-            document.body.appendChild(elmt);
-        }).toThrowError('Unknown template');
+            document.body.appendChild(elm);
+        }).toThrowError('The template rendered by [object:vm Foo (1)] must return an imported template tag (e.g.: `import html from "./Foo.html"`) or undefined, instead, it has returned a function');
     });
 });

packages/lwc-engine/src/framework/invoker.ts

@@ -97,7 +97,7 @@ export function invokeComponentRenderMethod(vm: VM): VNodes {
             result = evaluateTemplate(vm, html);
         } else if (!isUndefined(html)) {
             if (process.env.NODE_ENV !== 'production') {
-                assert.fail(`The template rendered by ${vm} must return an imported template tag (e.g.: \`import html from "./mytemplate.html"\`) or undefined, instead, it has returned ${html}.`);
+                assert.fail(`The template rendered by ${vm} must return an imported template tag (e.g.: \`import html from "./${vm.def.name}.html"\`) or undefined, instead, it has returned ${html}.`);
             }
         }
     } catch (e) {

packages/lwc-engine/src/framework/secure-template.ts

@@ -1,14 +1,14 @@
 import { Template } from "./template";
 
-const VERIFIED_TEMPLATE_SET = new Set();
+const signedTemplateSet: Set<Template> = new Set();
 
-export function isTemplateRegistered(tmpl: Template) {
-    if (!VERIFIED_TEMPLATE_SET.has(tmpl)) {
-        throw new TypeError('Unknown template');
-    }
+export function isTemplateRegistered(tpl: Template): boolean {
+    return signedTemplateSet.has(tpl);
 }
 
-export function registerTemplate(tmpl: Template): Template {
-    VERIFIED_TEMPLATE_SET.add(tmpl);
-    return tmpl;
+// chaining this method as a way to wrap existing
+// assignment of templates easily, without too much transformation
+export function registerTemplate(tpl: Template): Template {
+    signedTemplateSet.add(tpl);
+    return tpl;
 }

packages/lwc-engine/src/framework/template.ts

@@ -25,6 +25,12 @@ export interface Template {
      * This attribute is used for style encapsulation when the engine runs in fallback mode.
      */
     shadowToken?: string;
+
+    /**
+     * List of property names that are accessed of the component instance
+     * from the template.
+     */
+    ids?: string[];
 }
 const EmptySlots: SlotSet = create(null);
 
@@ -44,7 +50,7 @@ function validateSlots(vm: VM, html: any) {
     }
 }
 
-function validateFields(vm: VM, html: any) {
+function validateFields(vm: VM, html: Template) {
     if (process.env.NODE_ENV === 'production') {
         // this method should never leak to prod
         throw new ReferenceError();
@@ -99,8 +105,10 @@ export function evaluateTemplate(vm: VM, html: Template): Array<VNode|null> {
             resetShadowRoot(vm);
         }
 
-        // Check that the template is built by the compiler
-        isTemplateRegistered(html);
+        // Check that the template was built by the compiler
+        if (!isTemplateRegistered(html)) {
+            throw new ReferenceError(`The template rendered by ${vm} must return an imported template tag (e.g.: \`import html from "./${vm.def.name}.html"\`) or undefined, instead, it has returned a function.`);
+        }
 
         vm.cmpTemplate = html;