Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Configurable template resolvers #7036

Open
janechu opened this issue Dec 3, 2024 · 0 comments
Open

Configurable template resolvers #7036

janechu opened this issue Dec 3, 2024 · 0 comments
Assignees
Labels
area:fast-element Pertains to fast-element feature A new feature

Comments

@janechu
Copy link
Collaborator

janechu commented Dec 3, 2024

Introduction

The @microsoft/fast-element is currently bundled with the html tagged template literal, which developers must use to create their templates. This approach is not friendly to SSR (server side rendering) or BTR (build time rendering). The current solution is a NodeJS solution provided by the prereleased package @microsoft/fast-ssr. Due to unknowns, such as what server tech might be used, we have decided to modularize the templating as a first step towards allowing any server stack to implement BTR/SSR.

Background

In order to provide the most flexibility, we are looking into a few changes that would allow a user to provide their own template interpretation. This would allow a few key options:

  1. Templates could be loaded async, after the compose step
  2. Templates may be written in a non-JS manner (JSON, HTML, etc.)
  3. Directives can be selectively chosen for inclusion into the package which would allow smaller bundle sizes

Requirements

  1. Modularize the template resolution
  2. Provide a separate export path for a modular FASTElement

Example custom element definition:

import { ModularFASTElement } from "@microsoft/fast-element/modular.js";

export class MyCustomElement extends ModularFASTElement {}

Example compose with the current html tagged template literal:

import { MyCustomElement } from "./components/my-custom-element";
import { TaggedTemplateResolver } from "@microsoft/fast-element/template-resolvers/tagged-template-literal.js";
import { html } from "@microsoft/fast-element";

MyCustomElement.compose({
    name: "my-custom-element",
    templateResolver: TaggedTemplateResolver,
    template: html`<div></div>`
}).define();

The modular approach will not take a dependency on the html tagged template literal and will allow any template resolver passed to provide interpretation of a template solution.

@janechu janechu added area:fast-element Pertains to fast-element feature A new feature labels Dec 3, 2024
@janechu janechu added this to the FAST Element Future milestone Dec 3, 2024
@janechu janechu self-assigned this Dec 3, 2024
@janechu janechu moved this from Triage to Todo in FAST Architecture Roadmap Dec 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:fast-element Pertains to fast-element feature A new feature
Projects
Status: Todo
Development

No branches or pull requests

1 participant