Move Observer Maps and declarative templates to the define method

[janechu]

Description

This would allow easier integration with FASTElement.

Solution

Using declarative templates

import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";

class MyComponent extends FASTElement { }

MyComponent.define({
    name: "my-component",
    template: declarativeTemplate(), // returns a Promise<ViewTemplate>
});

Using declarative templates with Observer Maps

import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
import { observerMap } from "@microsoft/fast-element/augments/observer-map.js";

class MyComponent extends FASTElement { }

MyComponent.define({
    name: "my-component",
    template: declarativeTemplate(),
},
// code augmentations that are typically complex and have an opt-out style
// such as implicitly decorating a custom elements class for observation
// exist as a new additional argument to the .define call
[
    observerMap() // with declarative templates this will auto generate the JSON schema
]);

Using html tag template with Observer Maps

import { observerMap } from "@microsoft/fast-element/augments/observer-map.js";

class MyComponent extends FASTElement { }

MyComponent.define({
    name: "my-component",
    template: html`<div>${(x) => x.a}</div>`,
},
[
    observerMaps({ schemas: {
        "a": {}
    }}) // add JSON schemas manually since we cannot scan the html tag template
]);

[radium-v]

There's also the @customElement decorator that accepts nameOrDef. The decorator function calls the local standalone define() function and passes the class directly as the first parameter.

Since the 2.x migration doc suggests that we already prefer using MyElementClass.define() over @customElement, maybe we should consider removing the decorator entirely in FAST v3.

[janechu]

Closed with #7498