Skip to content

Commit a165e94

Browse files
janechujanechu
authored
feat: reduce declarative template size (#7498)
# Pull Request ## 📖 Description Reduces the declarative template entrypoint size by making optional attribute/observer map and hydration lifecycle support tree-shakable through schema transforms, replacing the custom `TemplateElement` FASTElement with a native `<f-template>` publisher, and updating declarative docs, generated API docs, fixtures, benchmarks, size docs, and the change file. Optional helpers now use dedicated flat `@microsoft/fast-element` subpaths and are no longer exported from the root entrypoint or the old nested helper paths. The package export map keeps the public paths flat while targeting the actual source and output file locations for `types`, `test`, and `default`. Examples of the flat subpaths: - `@microsoft/fast-element/attribute-map.js` - `@microsoft/fast-element/observer-map.js` - `@microsoft/fast-element/children.js` - `@microsoft/fast-element/ref.js` - `@microsoft/fast-element/slotted.js` - `@microsoft/fast-element/when.js` - `@microsoft/fast-element/repeat.js` - `@microsoft/fast-element/node-observation.js` - `@microsoft/fast-element/two-way.js` - `@microsoft/fast-element/signal.js` - `@microsoft/fast-element/declarative-utilities.js` Additional dedicated paths include `updates.js`, `observable.js`, `attr.js`, `volatile.js`, `css.js`, `html.js`, `array-observer.js`, `binding.js`, `dom.js`, `schema.js`, `templating.js`, `render.js`, and `hydration.js`. `FASTElementDefinition.schema` is optional; declarative templates assign or augment it during template resolution, and non-declarative/manual schema users can use `observerMap({ schema })` or provide a schema on the definition. Explicitly supplied schemas are preserved. This also addresses PR review feedback by replacing shell-string API document generation with argument-based `execFile` usage. ## 📑 Test Plan - `npm run build:tsc -w @microsoft/fast-element -- --pretty false` - `npm run doc:exports -w @microsoft/fast-element` - `npm run doc:exports:ci -w @microsoft/fast-element` - `npm run build:sizes -w @microsoft/fast-element` - `npm run prebuild -w @microsoft/fast-site` - `npm run biome:check` - `npm run checkchange` - `node -c sites/website/scripts/generate-docs.cjs` - `git diff --check` - Targeted Chromium declarative template bridge tests - Flat subpath positive resolution checks for default and test conditions - Stale nested export/import path searches ## ✅ Checklist ### General - [x] I have included a change request file using `$ npm run change` - [x] I have added tests for my changes. - [x] I have tested my changes. - [x] I have updated the project documentation to reflect my changes. - [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.
1 parent b78786a commit a165e94

579 files changed

Lines changed: 20559 additions & 5564 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/skills/typescript/SKILL.md‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { type Constructable, isFunction } from "../interfaces.js";
1818
Sub-entry-points expose focused APIs through the `exports` map:
1919

2020
```ts
21-
import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
21+
import { twoWay } from "@microsoft/fast-element/two-way.js";
2222
import { reactive } from "@microsoft/fast-element/state.js";
2323
import { composedParent } from "@microsoft/fast-element/utilities.js";
2424
```
@@ -66,7 +66,9 @@ definition.define();
6666
Templates use the `html` tagged template literal typed to the element class:
6767

6868
```ts
69-
import { html, repeat, when } from "@microsoft/fast-element";
69+
import { html } from "@microsoft/fast-element/html.js";
70+
import { repeat } from "@microsoft/fast-element/repeat.js";
71+
import { when } from "@microsoft/fast-element/when.js";
7072
import type { MyElement } from "./my-element.js";
7173

7274
export const template = html<MyElement>`
@@ -95,7 +97,7 @@ export const template = html<MyElement>`
9597
Two-way bindings require a sub-entry-point import:
9698

9799
```ts
98-
import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
100+
import { twoWay } from "@microsoft/fast-element/two-way.js";
99101
```
100102

101103
### Partial HTML
@@ -115,7 +117,7 @@ Styles use the `css` tagged template literal. They attach through the element de
115117
`styles` property:
116118

117119
```ts
118-
import { css } from "@microsoft/fast-element";
120+
import { css } from "@microsoft/fast-element/css.js";
119121

120122
export const styles = css`
121123
:host {
@@ -144,14 +146,10 @@ both the initial shadow root template and the `<f-template>`:
144146
tracked by templates. `@volatile` marks getters whose dependencies change between calls:
145147

146148
```ts
147-
import {
148-
attr,
149-
FASTElement,
150-
nullableNumberConverter,
151-
Observable,
152-
observable,
153-
volatile,
154-
} from "@microsoft/fast-element";
149+
import { FASTElement } from "@microsoft/fast-element/fast-element.js";
150+
import { attr, nullableNumberConverter } from "@microsoft/fast-element/attr.js";
151+
import { Observable, observable } from "@microsoft/fast-element/observable.js";
152+
import { volatile } from "@microsoft/fast-element/volatile.js";
155153

156154
class MyElement extends FASTElement {
157155
@attr label?: string;

‎change/@microsoft-fast-element-106e0dee-a966-4f2d-9d9b-857c10599260.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"type": "minor",
3-
"comment": "Add definition-scoped declarative map extensions.",
3+
"comment": "Add schema-driven attributeMap and observerMap extension subpaths, optional definition schema, and observerMap schema configuration.",
44
"packageName": "@microsoft/fast-element",
55
"email": "7559015+janechu@users.noreply.github.com",
66
"dependentChangeType": "none"

‎change/@microsoft-fast-element-22265526-9ae0-4996-878d-ec0bd68133c2.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "major",
3+
"comment": "Move optional helpers to dedicated flat fast-element subpath exports such as @microsoft/fast-element/children.js, @microsoft/fast-element/repeat.js, @microsoft/fast-element/two-way.js, @microsoft/fast-element/signal.js, @microsoft/fast-element/attribute-map.js, and @microsoft/fast-element/observer-map.js while keeping controller and definition internals on the root entrypoint.",
4+
"packageName": "@microsoft/fast-element",
5+
"email": "7559015+janechu@users.noreply.github.com",
6+
"dependentChangeType": "none"
7+
}

‎change/@microsoft-fast-element-3f6b286b-8276-4142-b903-7306b4c76808.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "major",
3+
"comment": "Remove the public declarative TemplateElement configuration APIs and make declarative templates use an internal native f-template publisher with explicit hydration opt-in.",
4+
"packageName": "@microsoft/fast-element",
5+
"email": "7559015+janechu@users.noreply.github.com",
6+
"dependentChangeType": "none"
7+
}

‎change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d9.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"type": "major",
3-
"comment": "Move declarative HTML APIs into @microsoft/fast-element/declarative.js and remove the @microsoft/fast-html package.",
3+
"comment": "Move declarative HTML APIs into @microsoft/fast-element/declarative.js, expose schema map helpers from extension subpaths, and remove the @microsoft/fast-html package.",
44
"packageName": "@microsoft/fast-element",
55
"dependentChangeType": "none",
66
"email": "7559015+janechu@users.noreply.github.com"

‎examples/todo-app/src/todo-app.styles.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { css } from "@microsoft/fast-element/styles.js";
2-
1+
import { css } from "@microsoft/fast-element/css.js";
32
export const styles = css`
43
:host {
54
display: block;

‎examples/todo-app/src/todo-app.template.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { html, repeat } from "@microsoft/fast-element";
2-
import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
1+
import { html } from "@microsoft/fast-element/html.js";
2+
import { repeat } from "@microsoft/fast-element/repeat.js";
3+
import { twoWay } from "@microsoft/fast-element/two-way.js";
34
import type { TodoApp } from "./todo-app.js";
45
import type { Todo } from "./todo-list.js";
56
import "./todo-form.js";
@@ -34,7 +35,7 @@ export const template = html<TodoApp>`
3435
&times;
3536
</button>
3637
</li>
37-
`
38+
`,
3839
)}
3940
</ul>
4041
`;

‎examples/todo-app/src/todo-form.styles.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { css } from "@microsoft/fast-element/styles.js";
2-
1+
import { css } from "@microsoft/fast-element/css.js";
32
export const styles = css`
43
form {
54
display: flex;

‎examples/todo-app/src/todo-form.template.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { html } from "@microsoft/fast-element";
2-
import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
1+
import { html } from "@microsoft/fast-element/html.js";
2+
import { twoWay } from "@microsoft/fast-element/two-way.js";
33
import type { TodoForm } from "./todo-form.js";
44

55
export const template = html<TodoForm>`

‎examples/todo-app/src/todo-form.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { customElement, FASTElement, observable } from "@microsoft/fast-element";
1+
import { customElement, FASTElement } from "@microsoft/fast-element/fast-element.js";
2+
import { observable } from "@microsoft/fast-element/observable.js";
23
import { styles } from "./todo-form.styles.js";
34
import { template } from "./todo-form.template.js";
45
import { TodoList } from "./todo-list.js";

0 commit comments

Comments
 (0)
⚡