Programmatically Construct ViewTemplates with Bindings

[KingOfTac]

I'm wondering if it is at all possible to create a ViewTemplate instance with attribute bindings from only a tag name and an array of html attributes. The bindings source would just be an object passed into the render method on ViewTemplate.

[EisenbergEffect]

Yes, this is completely possible. At the lowest level, you can instantiate ViewTemplate directly and pass it the raw data it needs. That's a bit tedious, but possible. I hesitate to show you how to do that because the API is changing in fast-element 2.0 and you'd have to rework it. 😉 So, I wonder if we could come up with something together that used the html tagged template literal inside of a function to manufacture templates, which won't need to be reworked (or only very little).

Let me show you a simple example, and then maybe you can provided me a bit more info and we can figure out how to build the full thing.

import { html } from "@microsoft/fast-element";

export function createSingleElementTemplate(tagName: string, attributes: Map<string, string>) {
    let markup = `<${tagName}`;

    for (const [key, value] of attributes) {
        markup += ` ${key}="${value}"`;
    }

    markup += `></${tagName}>`;

    return html(markup as any as TemplateStringsArray);
}

The trick here is that tagged template functions are just functions.

[KingOfTac]

Would this let me use an object as the binding source or is it unnecessary here? I need to be able to unbind and rebind the template when the data changes, and the template is meant to be used outside the context of a custom element.

[EisenbergEffect]

Ignore that code above. Markup should be an array rather than a string. New example below.

[EisenbergEffect]

Here's a function that will create a template for a single element, with an arbitrary list of attributes that can be strings, bindings, directives, etc.

Note: This is using fast-element 2.0. It should be very similar with the current version.

export function createSingleElementView<
    TSource = any,
    TParent = any,
    TContext extends ExecutionContext<TParent> = ExecutionContext<TParent> // I think just ExecutionContext in current
>(tagName: string, attributes: Record<string, string | TemplateValue<TSource, TParent, TContext>> = {}) {
    const markup = [`<${tagName}`];
    const values: TemplateValue<TSource, TParent, TContext>[] = [];

    for (const key in attributes) {
        markup.push(` ${key}="`);
        values.push(attributes[key]);
        markup.push(`"`);
    }

    markup.push(`></${tagName}>`);

    return html(markup as any as TemplateStringsArray, values);
}

class Person {
    firstName: string;
}

const firstNameEditor = createSingleElementView<Person>("input", {
    "type": "text",
    ":value": x => x.firstName,
    "@input": (x, c) => x.firstName = (c.event.target as any).value
});

// use the template and view directly
const view = firstNameEditor.create();
view.bind(new Person(), ExecutionContext.default); // current uses defaultExecutionContext
view.appendTo(someParentElement);

// later
view.remove()
view.unbind();

// Can also be used inside another template...

const template = html<Person>`
  First Name: ${firstNameEditor}
`;

I haven't tested this... 🤣

[KingOfTac]

For not being tested, the example code was pretty spot on. I just had to make some adjustments to the loop for the bindings. There's still some work to do, but I think this is a solid starting point. https://stackblitz.com/edit/typescript-crfsuw?file=index.ts

[KingOfTac]

Ok... after playing around with this for a bit, there's some pretty gnarly stuff you can do. I updated the linked stackblitz with some more examples to test it with.

Another thing to note. I realized I don't actually need to unbind/rebind the template when the bindings source changes, because I can just use the manual observation pattern on the source, even if it is a static js object.

[EisenbergEffect]

@KingOfTac May I have your permission to include a variation of your implementation in FASTElement 2.0? I think it actually fits nicely with the work I'm doing on the new render directive. You can see how I've incorporated it here: https://github.com/microsoft/fast/blob/users/eisenbergeffect/render-directive/packages/web-components/fast-element/src/templating/render.ts#L278

[KingOfTac]

Go for it. I think there is enough utility in it that others could benefit. Would it still be usable outside of templates?

[EisenbergEffect]

Yes.