Skip to content

Commit a663ff3

Browse files
janechuCopilot
andcommitted
Refresh docs for focused fast-element exports
Update package docs, website content, generated API pages, and size reports to match the new fast-element entrypoint structure. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 852bbf5 commit a663ff3

489 files changed

Lines changed: 261 additions & 29796 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.

packages/fast-element/DECLARATIVE_RENDERING.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,9 @@ Include the DI service to your component.
6060

6161
Example:
6262
```typescript
63-
import { attr, FASTElement, Observable } from "@microsoft/fast-element";
63+
import { FASTElement } from "@microsoft/fast-element";
64+
import { attr } from "@microsoft/fast-element/attr.js";
65+
import { Observable } from "@microsoft/fast-element/observable.js";
6466
import {
6567
initialStateFactory,
6668
InitialStateService,

packages/fast-element/DESIGN.md

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ engines must install their own `globalThis` polyfill before FAST loads.
6161

6262
### FAST Global
6363

64-
**File**: `src/platform.ts`, `src/interfaces.ts`
64+
**File**: `src/platform.ts`, `src/kernel.ts`
6565

6666
`FAST` is a singleton object attached to `globalThis`. It provides:
6767

@@ -171,6 +171,10 @@ This gives FAST automatic, fine-grained dependency tracking without explicit dec
171171

172172
`normalizeBinding(value)` converts raw arrow functions or static values into a `Binding` object.
173173

174+
Optional binding helpers remain on dedicated public subpaths:
175+
`@microsoft/fast-element/binding/two-way.js` and
176+
`@microsoft/fast-element/binding/signal.js`.
177+
174178
---
175179

176180
### html Tagged Template Literal
@@ -344,11 +348,14 @@ the imperative `html` API:
344348
- `ObserverMap` and `AttributeMap` layer on top of the core observable and
345349
attribute-definition systems.
346350

347-
The `src/declarative.ts` entrypoint owns the declarative-only side effects:
348-
registering debug messages and installing hydratable view templates. This keeps
349-
the root `@microsoft/fast-element` barrel free of declarative side effects and
350-
utility-subpath collisions. See [`DECLARATIVE_DESIGN.md`](./DECLARATIVE_DESIGN.md)
351-
for the detailed architecture.
351+
The `src/declarative.ts` entrypoint owns the declarative-only exports and
352+
registers debug messages for that runtime. This keeps the root
353+
`@microsoft/fast-element` barrel free of declarative APIs, while hydration
354+
support stays built into `ViewTemplate` and low-level hydration APIs remain on
355+
the dedicated `src/components/hydration.ts` and
356+
`src/components/hydration-tracker.ts` modules. See
357+
[`DECLARATIVE_DESIGN.md`](./DECLARATIVE_DESIGN.md) for the detailed
358+
architecture.
352359

353360
---
354361

@@ -510,9 +517,10 @@ Below is a conceptual map of the major subsystems and their relationships:
510517

511518
```
512519
src/
513-
├── interfaces.ts # Core types: Callable, Constructable, FASTGlobal, Message codes
514-
├── platform.ts # FAST global initialisation, KernelServiceId, TypeRegistry
515-
├── declarative.ts # Declarative entrypoint (debug messages + hydratable view install)
520+
├── kernel.ts # FASTGlobal and KernelServiceId
521+
├── interfaces.ts # Core types: Callable, Constructable, Message codes
522+
├── platform.ts # FAST global initialisation and TypeRegistry
523+
├── declarative.ts # Declarative entrypoint (debug messages + declarative exports)
516524
├── dom.ts # DOMAspect enum, DOMPolicy, DOMSink
517525
├── dom-policy.ts # Default DOM security policy (TrustedTypes integration)
518526
├── metadata.ts # Reflect-based metadata helpers
@@ -525,11 +533,13 @@ src/
525533
│ └── update-queue.ts # Updates (UpdateQueue)
526534
├── binding/
527535
│ ├── binding.ts # Binding abstract base class, BindingDirective
536+
│ ├── signal.ts # signal() and Signal
537+
│ ├── two-way.ts # twoWay()
528538
│ ├── one-way.ts # oneWay, listener
529539
│ ├── one-time.ts # oneTime
530540
│ └── normalize.ts # normalizeBinding helper
531541
├── templating/
532-
│ ├── template.ts # ViewTemplate, html tag, InlineTemplateDirective
542+
│ ├── template.ts # ViewTemplate, html tag, InlineTemplateDirective, hydration
533543
│ ├── compiler.ts # Compiler, CompilationContext
534544
│ ├── view.ts # HTMLView, ElementView, SyntheticView
535545
│ ├── html-directive.ts # HTMLDirective, ViewBehavior, ViewBehaviorFactory
@@ -551,6 +561,7 @@ src/
551561
│ ├── fast-element.ts # FASTElement, @customElement
552562
│ ├── element-controller.ts # ElementController, Stages
553563
│ ├── fast-definitions.ts # FASTElementDefinition, TemplateOptions
564+
│ ├── hydration.ts # HydrationMarkup and hydration helpers
554565
│ └── attributes.ts # AttributeDefinition, @attr, converters
555566
├── di/
556567
│ └── di.ts # DI container, decorators, resolvers, Registration
@@ -564,6 +575,7 @@ src/
564575
│ ├── utilities.ts # Declarative parsing and proxy utilities
565576
│ └── syntax.ts # Declarative syntax constants
566577
├── state/
578+
│ ├── exports.ts # Focused state entrypoint (state.js)
567579
│ ├── state.ts # state() helper (beta)
568580
│ └── watch.ts # watch() helper (beta)
569581
└── hydration/

packages/fast-element/MIGRATION.md

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,44 @@ removed `@microsoft/fast-html` package.
5454
`@microsoft/fast-element/declarative.js`.
5555
2. Update declarative utility imports such as `deepMerge` to
5656
`@microsoft/fast-element/declarative/utilities.js`.
57-
3. Keep importing core FAST Element APIs (for example `FASTElement`, `attr`,
58-
`observable`) from `@microsoft/fast-element`.
59-
4. Do not switch to the root `@microsoft/fast-element` barrel for declarative
60-
APIs; the declarative entrypoint owns the debug-message and hydratable-view
61-
side effects.
57+
3. Import core FAST Element helpers from focused entrypoints such as
58+
`@microsoft/fast-element/attr.js`,
59+
`@microsoft/fast-element/observable.js`, and
60+
`@microsoft/fast-element/template.js`. The root
61+
`@microsoft/fast-element` export now only provides `FASTElement`.
62+
4. Keep declarative APIs on `@microsoft/fast-element/declarative.js`; they are
63+
still separate from the root export surface.
64+
65+
## Export path cleanup (v3)
66+
67+
Optional binding helpers remain on their dedicated public sub-entrypoints, and
68+
hydration utilities now live on `@microsoft/fast-element/hydration.js`:
69+
70+
- `@microsoft/fast-element/binding/two-way.js`
71+
- `@microsoft/fast-element/binding/signal.js`
72+
- `@microsoft/fast-element/hydration.js`
73+
74+
### Removed exports
75+
76+
| Import | Replacement |
77+
|---|---|
78+
| `@microsoft/fast-element/testing.js` | No public replacement |
79+
| `@microsoft/fast-element/element-hydration.js` | `@microsoft/fast-element/hydration.js` |
80+
| `@microsoft/fast-element/install-element-hydration.js` | No replacement needed |
81+
| `@microsoft/fast-element/install-hydratable-view-templates.js` | No replacement needed |
82+
| `@microsoft/fast-element/metadata.js` | No public replacement |
83+
| `@microsoft/fast-element/pending-task.js` | No public replacement |
84+
85+
### Migration steps
86+
87+
1. Move `attr`, `observable`, `html`, `css`, and other helpers off the root
88+
`@microsoft/fast-element` barrel onto focused subpaths.
89+
2. Replace `@microsoft/fast-element/element-hydration.js` with
90+
`@microsoft/fast-element/hydration.js`.
91+
3. Remove any direct imports from `metadata.js`, `testing.js`,
92+
`pending-task.js`, `install-element-hydration.js`, or
93+
`install-hydratable-view-templates.js`.
94+
4. Keep optional binding helpers on their dedicated `binding/*` subpaths.
6295

6396
## Declarative event handler `e` removal (v3)
6497

@@ -95,11 +128,11 @@ data source.
95128

96129
| Import | Replacement |
97130
|---|---|
98-
| `@microsoft/fast-element/install-hydration.js` | No replacement needed — prerendered path is built into `ElementController` |
131+
| `@microsoft/fast-element/install-element-hydration.js` | No replacement needed — prerendered path is built into `ElementController` |
132+
| `@microsoft/fast-element/install-hydratable-view-templates.js` | No replacement needed — `ViewTemplate.hydrate()` is built into the template runtime |
99133

100-
The `install-hydratable-view-templates.js` side-effect import is still
101-
available and is applied automatically by
102-
`@microsoft/fast-element/declarative.js` for hydration marker support.
134+
`@microsoft/fast-element/declarative.js` still exposes declarative-only APIs,
135+
but it no longer patches hydration behavior through installer side effects.
103136

104137
### Changed behavior
105138

@@ -115,7 +148,9 @@ available and is applied automatically by
115148
### Migration steps
116149

117150
1. Remove `HydratableElementController.install()` calls.
118-
2. Remove `import "@microsoft/fast-element/install-hydration.js"` side-effect imports.
151+
2. Remove `import "@microsoft/fast-element/install-element-hydration.js"` and
152+
`import "@microsoft/fast-element/install-hydratable-view-templates.js"`
153+
side-effect imports.
119154
3. Replace `element.$fastController instanceof HydratableElementController` checks with `await element.$fastController.isPrerendered`.
120155
4. Remove `defer-hydration` and `needs-hydration` attributes from server-rendered markup.
121156

packages/fast-element/README.md

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ npm install --save @microsoft/fast-element
1818
Within your JavaScript or TypeScript code, you can then import library APIs like this:
1919

2020
```ts
21-
import { FASTElement } from '@microsoft/fast-element';
21+
import { FASTElement } from "@microsoft/fast-element";
2222
```
2323

2424
### From CDN
@@ -65,6 +65,26 @@ importing `@microsoft/fast-element`.
6565

6666
Bundle sizes for each tree-shakeable export are tracked in [`SIZES.md`](./SIZES.md) and regenerated on every build. See the [Export Sizes](https://www.fast.design/docs/3.x/resources/export-sizes/) documentation page for the latest numbers.
6767

68+
## Dedicated Entry Points
69+
70+
`@microsoft/fast-element` only exports `FASTElement`. Import decorators,
71+
templating, styling, binding, and hydration APIs from focused sub-entrypoints:
72+
73+
```ts
74+
import { FASTElement } from "@microsoft/fast-element";
75+
import { attr } from "@microsoft/fast-element/attr.js";
76+
import { css } from "@microsoft/fast-element/css.js";
77+
import { html } from "@microsoft/fast-element/template.js";
78+
import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
79+
import { HydrationMarkup } from "@microsoft/fast-element/hydration.js";
80+
```
81+
82+
Hydratable `ViewTemplate` support is built into the template runtime, so no
83+
installer import is needed. The legacy `metadata.js`, `testing.js`,
84+
`pending-task.js`, `element-hydration.js`, `install-element-hydration.js`, and
85+
`install-hydratable-view-templates.js` subpaths are no longer part of the
86+
public export map.
87+
6888
## Dynamic Style Application
6989

7090
When runtime state or external signals need to add or remove styles, create the
@@ -82,8 +102,8 @@ controller when styles need to change.
82102
FAST Element also publishes a declarative HTML runtime from
83103
`@microsoft/fast-element/declarative.js`. This entrypoint defines `<f-template>`,
84104
exports `TemplateElement`, `TemplateParser`, `Schema`, `ObserverMap`, and
85-
`AttributeMap`, and installs the hydratable `ViewTemplate` behavior without
86-
adding those side effects to the root `@microsoft/fast-element` import.
105+
`AttributeMap`, while keeping declarative-only APIs off the root
106+
`@microsoft/fast-element` import.
87107

88108
```ts
89109
import { FASTElement } from "@microsoft/fast-element";
@@ -101,7 +121,10 @@ TemplateElement.define({ name: "f-template" });
101121

102122
Declarative utilities such as `deepMerge` are available from
103123
`@microsoft/fast-element/declarative/utilities.js`. See
104-
[`DECLARATIVE_HTML.md`](./DECLARATIVE_HTML.md) for declarative usage details.
124+
[`DECLARATIVE_RENDERING.md`](./DECLARATIVE_RENDERING.md) for declarative usage
125+
details.
126+
Declarative event bindings use `$e` for the DOM event object and `$c` for the
127+
execution context.
105128
Declarative event bindings use `$e` for the DOM event object and `$c` for the
106129
execution context.
107130

@@ -132,7 +155,7 @@ Custom directives can also await `controller.isPrerendered` (a `Promise<boolean>
132155

133156
```typescript
134157
import { FASTElement } from "@microsoft/fast-element";
135-
import type { FASTElementExtension } from "@microsoft/fast-element";
158+
import type { FASTElementExtension } from "@microsoft/fast-element/fast-definitions.js";
136159

137160
function logger(): FASTElementExtension {
138161
return definition => {

packages/fast-element/SIZES.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ Bundle sizes for `@microsoft/fast-element` exports.
44

55
| Export | Minified | Gzip | Brotli |
66
|--------|----------|------|--------|
7-
| CDN Rollup Bundle | 62.60 KB | 18.64 KB | 16.77 KB |
8-
| FASTElement | 22.88 KB | 7.14 KB | 6.46 KB |
9-
| Updates | 3.03 KB | 1.25 KB | 1.06 KB |
10-
| Observable | 7.55 KB | 2.76 KB | 2.48 KB |
11-
| observable | 7.58 KB | 2.77 KB | 2.50 KB |
12-
| attr | 2.98 KB | 1.18 KB | 1011 B |
13-
| children | 5.58 KB | 2.15 KB | 1.90 KB |
14-
| css | 4.06 KB | 1.60 KB | 1.40 KB |
15-
| ref | 4.55 KB | 1.81 KB | 1.60 KB |
16-
| slotted | 5.36 KB | 2.08 KB | 1.83 KB |
17-
| volatile | 7.64 KB | 2.79 KB | 2.51 KB |
18-
| when | 1.99 KB | 770 B | 625 B |
19-
| html | 26.71 KB | 8.74 KB | 7.84 KB |
20-
| repeat | 30.37 KB | 9.67 KB | 8.70 KB |
7+
| CDN Rollup Bundle | 63.66 KB | 18.97 KB | 17.02 KB |
8+
| FASTElement | 23.82 KB | 7.48 KB | 6.76 KB |
9+
| Updates | 3.53 KB | 1.48 KB | 1.25 KB |
10+
| Observable | 8.05 KB | 2.97 KB | 2.67 KB |
11+
| observable | 8.08 KB | 2.98 KB | 2.68 KB |
12+
| attr | 8.79 KB | 3.25 KB | 2.91 KB |
13+
| children | 5.49 KB | 2.14 KB | 1.90 KB |
14+
| css | 3.97 KB | 1.58 KB | 1.39 KB |
15+
| ref | 4.46 KB | 1.80 KB | 1.58 KB |
16+
| slotted | 5.27 KB | 2.07 KB | 1.82 KB |
17+
| volatile | 8.14 KB | 3.00 KB | 2.69 KB |
18+
| when | 1.82 KB | 712 B | 565 B |
19+
| html | 27.29 KB | 8.95 KB | 8.04 KB |
20+
| repeat | 30.89 KB | 9.84 KB | 8.87 KB |

0 commit comments

Comments
 (0)