[feature request] ability to typecheck template

[bigopon]

🔦 Context

Currently, the template expressions are compiled at runtime, and evaluated then. Because of this, it doesn't have the information whether there's a typo or typing issue. This is normally fine, until it's kind of less fine: when project size grows bigger, there's a need to have some assistance in discovering the typo/types validity of expressions in the template. Currently the Webstorm and Vscode plugins are doing a decent job with refactoring, but this should be part of the build process.

Originally this was considered part of AOT, but since we want more realistic and short term quantifiable goals, this should stay in a separate issue as it's quite the first part to tackle.

💻 Examples

For the following component:

1. my-input.ts

   export class MyInput {
       @bindable value = '';
       items: { id: number; name: string}[] = [];
   
       public constructor(private readonly b: ServiceB) {}
   }

2. my-input-html

   <import from="./my-text.html" as="the-text"></import>
   <bindable name="notUsed"></bindable>
   <textarea value.bind="value"></textarea>
   <p>${value}</p>
   <the-text text.bind="value"></the-text>
   <div>${b.doComplex()}</div>
   <div repeat.for="item of items">${item.id} -- ${item.name}</div>

Generate code for my-input.ts should have this unused function for type checking:

// ... import statements

// eslint-disable-next-line
function __typecheck_template_MyInput__() {
    const access = <T extends MyInput>(typecheck: (o: T) => any, expr: string) => expr;

    return `<import from="./my-text.html" as="the-text"></import>
    <bindable name="notUsed"></bindable>
    <textarea value="${access<MyInput>(o => o.value, 'value')}"></textarea>
    <p>${access<MyInput>(o => o.value, 'value')}</p>
    <the-text value="${access<MyInput>(o => o.value, 'value')}"></the-text>
    <div>${access<MyInput>(o => o.b.doComplex(), 'b.doComplex()')}</div>
    <div repeat.for="${access<MyInput & { item: MyInput['items'] }>(o => o.item, 'item')} of ${access<MyInput['items']>(o => o.items, 'items')}">${access<MyInput>(o => o.item.id, 'item.id')} -- ${access<MyInput>(o => o.item.name, 'item.name')}`
}

// ... the rest of my-input.ts code

The __typecheck_template_MyInput__ function will be performing the task of type checking for the template. A POC has been done to our convention plugin and it's working good enough so we will pursue this direct, at least in the mean time, to provide some basic for future improvements.

Scope

• We may not need to implement full build time template precompilation, but if there's a lot of overlap with this work then we may as well get everything out at once.
• Sourcemap should be helpful in pointing our where the issues are in the original html