Skip to content

Commit 855033c

Browse files
janechuCopilot
janechu
and
Copilot
committed
Move remaining FAST Element exports to subpaths
Adds remaining optional export subpaths for binding, DOM, schema, templating, render, hydration, and node observation, while keeping Observable/observable together and controller/definition internals on the root entrypoint. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent cfc4285 commit 855033c

471 files changed

Lines changed: 9556 additions & 6151 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: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -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/directives/repeat.js";
71+
import { when } from "@microsoft/fast-element/directives/when.js";
7072
import type { MyElement } from "./my-element.js";
7173

7274
export const template = html<MyElement>`
@@ -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";
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-22265526-9ae0-4996-878d-ec0bd68133c2.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 core helpers such as Updates, Observable, attr, html, css, template directives, volatile, and ArrayObserver to dedicated fast-element subpath exports.",
3+
"comment": "Move optional helpers such as Updates, Observable, attr, binding, DOM, Schema, html, templating, render, hydration, directives, volatile, and ArrayObserver to dedicated fast-element subpath exports while keeping controller and definition internals on the root entrypoint.",
44
"packageName": "@microsoft/fast-element",
55
"email": "7559015+janechu@users.noreply.github.com",
66
"dependentChangeType": "none"

‎packages/fast-element/DECLARATIVE_DESIGN.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,8 @@ are observed.
165165
For non-declarative elements, pass a schema directly to `observerMap()`:
166166

167167
```typescript
168-
import { FASTElement, Schema } from "@microsoft/fast-element";
168+
import { FASTElement } from "@microsoft/fast-element";
169+
import { Schema } from "@microsoft/fast-element/schema.js";
169170
import { observerMap } from "@microsoft/fast-element/extensions/observer-map.js";
170171

171172
class MyElement extends FASTElement {}

‎packages/fast-element/DECLARATIVE_HTML.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,8 @@ are observed.
197197
Manual schema example:
198198

199199
```typescript
200-
import { FASTElement, Schema } from "@microsoft/fast-element";
200+
import { FASTElement } from "@microsoft/fast-element";
201+
import { Schema } from "@microsoft/fast-element/schema.js";
201202
import { observerMap } from "@microsoft/fast-element/extensions/observer-map.js";
202203

203204
class MyElement extends FASTElement {}

‎packages/fast-element/DECLARATIVE_MIGRATION.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,8 @@ a schema in the element definition, and `observerMap()` can also take a schema
194194
directly in configuration:
195195

196196
```ts
197-
import { FASTElement, Schema } from "@microsoft/fast-element";
197+
import { FASTElement } from "@microsoft/fast-element";
198+
import { Schema } from "@microsoft/fast-element/schema.js";
198199
import { observerMap } from "@microsoft/fast-element/extensions/observer-map.js";
199200

200201
class MyElement extends FASTElement {}

‎packages/fast-element/DECLARATIVE_SCHEMA_OBSERVER_MAP.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,8 @@ For non-declarative/manual schema use, pass the schema in the observer map
186186
configuration:
187187

188188
```typescript
189-
import { FASTElement, Schema } from "@microsoft/fast-element";
189+
import { FASTElement } from "@microsoft/fast-element";
190+
import { Schema } from "@microsoft/fast-element/schema.js";
190191
import { observerMap } from "@microsoft/fast-element/extensions/observer-map.js";
191192

192193
class MyElement extends FASTElement {}
@@ -460,7 +461,7 @@ The schema system tracks binding contexts using special metadata:
460461
You can inspect generated schemas using the module-level `schemaRegistry` import:
461462

462463
```typescript
463-
import { schemaRegistry } from "@microsoft/fast-element";
464+
import { schemaRegistry } from "@microsoft/fast-element/schema.js";
464465
465466
// Get all schemas for an element:
466467
const elementSchemas = schemaRegistry.get('my-element');
@@ -476,7 +477,7 @@ To verify that observer mapping ran, inspect the generated schema and the
476477
observable accessors on the element prototype:
477478

478479
```typescript
479-
import { schemaRegistry } from "@microsoft/fast-element";
480+
import { schemaRegistry } from "@microsoft/fast-element/schema.js";
480481
import { Observable } from "@microsoft/fast-element/observable.js";
481482
482483
const schemas = schemaRegistry.get("my-element");

‎packages/fast-element/DESIGN.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ For deep dives into specific areas, see the linked detailed documents.
5252

5353
The library's kernel is module-scoped rather than stored on `globalThis`: import `FAST` from `@microsoft/fast-element`, `Updates` from `@microsoft/fast-element/updates.js`, and `Observable` from `@microsoft/fast-element/observable.js`.
5454

55+
The root entrypoint intentionally stays small: it keeps `FASTElement`, `FAST`,
56+
`ElementController`, `FASTElementDefinition`, and related controller/definition
57+
types. Optional feature groups use dedicated subpaths, such as `attr.js`,
58+
`binding.js`, `dom.js`, `schema.js`, `html.js`, `templating.js`, `render.js`,
59+
`hydration.js`, and the directive subpaths.
60+
5561
---
5662

5763
## Core Concepts

‎packages/fast-element/MIGRATION.md‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,19 @@ Core FAST Element helpers now use dedicated subpaths:
5454
|---|---|
5555
| `Updates` | `@microsoft/fast-element/updates.js` |
5656
| `Observable`, `observable` | `@microsoft/fast-element/observable.js` |
57-
| `attr` | `@microsoft/fast-element/attr.js` |
57+
| `attr`, `AttributeDefinition`, converters, `ValueConverter` | `@microsoft/fast-element/attr.js` |
58+
| `Binding`, `oneWay`, `oneTime`, `listener` | `@microsoft/fast-element/binding.js` |
59+
| `DOM`, `DOMAspect`, `DOMPolicy` | `@microsoft/fast-element/dom.js` |
60+
| `Schema`, `schemaRegistry`, schema types | `@microsoft/fast-element/schema.js` |
5861
| `css` | `@microsoft/fast-element/css.js` |
59-
| `html` | `@microsoft/fast-element/html.js` |
62+
| `html`, `ViewTemplate`, `HTMLView` | `@microsoft/fast-element/html.js` |
63+
| `Compiler`, `HTMLDirective`, `htmlDirective`, templating/view types | `@microsoft/fast-element/templating.js` |
64+
| `render`, `RenderBehavior`, `RenderDirective` | `@microsoft/fast-element/render.js` |
65+
| `enableHydration`, `HydrationTracker`, hydration types | `@microsoft/fast-element/hydration.js` |
6066
| `ArrayObserver` | `@microsoft/fast-element/array-observer.js` |
6167
| `volatile` | `@microsoft/fast-element/volatile.js` |
6268
| `children` | `@microsoft/fast-element/directives/children.js` |
69+
| `elements`, `NodeObservationDirective` | `@microsoft/fast-element/directives/node-observation.js` |
6370
| `ref` | `@microsoft/fast-element/directives/ref.js` |
6471
| `slotted` | `@microsoft/fast-element/directives/slotted.js` |
6572
| `when` | `@microsoft/fast-element/directives/when.js` |
@@ -71,10 +78,12 @@ Core FAST Element helpers now use dedicated subpaths:
7178
`@microsoft/fast-element/declarative.js`.
7279
2. Update declarative utility imports such as `deepMerge` to
7380
`@microsoft/fast-element/declarative/utilities.js`.
74-
3. Keep importing root FAST Element APIs such as `FASTElement` from
81+
3. Keep importing root FAST Element APIs such as `FASTElement`, `FAST`,
82+
`ElementController`, and definition/controller types from
7583
`@microsoft/fast-element`, and import moved helpers from their dedicated
76-
subpaths (for example `attr` from `@microsoft/fast-element/attr.js` and
77-
`observable` from `@microsoft/fast-element/observable.js`).
84+
subpaths (for example `attr` from `@microsoft/fast-element/attr.js`,
85+
`Schema` from `@microsoft/fast-element/schema.js`, and `observable` from
86+
`@microsoft/fast-element/observable.js`).
7887
4. Do not switch to the root `@microsoft/fast-element` barrel for declarative
7988
APIs; the declarative entrypoint owns the declarative runtime but does not
8089
install hydration. Call `enableHydration()` from

‎packages/fast-element/README.md‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -78,20 +78,28 @@ Bundle sizes for each tree-shakeable export are tracked in [`SIZES.md`](./SIZES.
7878

7979
## Core Helper Subpaths
8080

81-
The root `@microsoft/fast-element` entrypoint keeps core types and unrelated
82-
exports such as `FASTElement`, `FAST`, and `Schema`. Import these helpers from
83-
their dedicated subpaths:
81+
The root `@microsoft/fast-element` entrypoint keeps the element base class,
82+
kernel, controller, and definition APIs such as `FASTElement`, `FAST`,
83+
`ElementController`, `FASTElementDefinition`, and related controller/definition
84+
types. Optional feature groups are available from dedicated subpaths:
8485

8586
| API | Import path |
8687
|---|---|
8788
| `Updates` | `@microsoft/fast-element/updates.js` |
8889
| `Observable`, `observable` | `@microsoft/fast-element/observable.js` |
89-
| `attr` | `@microsoft/fast-element/attr.js` |
90+
| `attr`, `AttributeDefinition`, converters, `ValueConverter` | `@microsoft/fast-element/attr.js` |
91+
| `Binding`, `oneWay`, `oneTime`, `listener` | `@microsoft/fast-element/binding.js` |
92+
| `DOM`, `DOMAspect`, `DOMPolicy` | `@microsoft/fast-element/dom.js` |
93+
| `Schema`, `schemaRegistry`, schema types | `@microsoft/fast-element/schema.js` |
9094
| `css` | `@microsoft/fast-element/css.js` |
91-
| `html` | `@microsoft/fast-element/html.js` |
95+
| `html`, `ViewTemplate`, `HTMLView` | `@microsoft/fast-element/html.js` |
96+
| `Compiler`, `HTMLDirective`, `htmlDirective`, templating/view types | `@microsoft/fast-element/templating.js` |
97+
| `render`, `RenderBehavior`, `RenderDirective` | `@microsoft/fast-element/render.js` |
98+
| `enableHydration`, `HydrationTracker`, hydration types | `@microsoft/fast-element/hydration.js` |
9299
| `ArrayObserver` | `@microsoft/fast-element/array-observer.js` |
93100
| `volatile` | `@microsoft/fast-element/volatile.js` |
94101
| `children` | `@microsoft/fast-element/directives/children.js` |
102+
| `elements`, `NodeObservationDirective` | `@microsoft/fast-element/directives/node-observation.js` |
95103
| `ref` | `@microsoft/fast-element/directives/ref.js` |
96104
| `slotted` | `@microsoft/fast-element/directives/slotted.js` |
97105
| `when` | `@microsoft/fast-element/directives/when.js` |
@@ -176,8 +184,9 @@ MyElement.define(
176184
`observerMap()` creates deep observable accessors for discovered root
177185
properties. Declarative templates assign `definition.schema` during template
178186
resolution so these extensions always have schema data when used with
179-
`declarativeTemplate()`. For non-declarative/manual schema use, pass a `Schema`
180-
on the element definition; `observerMap()` can also receive
187+
`declarativeTemplate()`. For non-declarative/manual schema use, import `Schema`
188+
from `@microsoft/fast-element/schema.js` and pass it on the element definition;
189+
`observerMap()` can also receive
181190
`observerMap({ schema })` directly. When both extensions are present, attribute
182191
mapping runs before observer mapping.
183192

‎packages/fast-element/SIZES.md‎

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

55
| Export | Minified | Gzip | Brotli |
66
|--------|----------|------|--------|
7-
| CDN Rollup Bundle | 67.42 KB | 19.92 KB | 17.79 KB |
8-
| FASTElement (@microsoft/fast-element) | 23.73 KB | 7.38 KB | 6.64 KB |
7+
| CDN Rollup Bundle | 27.49 KB | 8.31 KB | 7.48 KB |
8+
| FASTElement (@microsoft/fast-element) | 23.73 KB | 7.38 KB | 6.63 KB |
99
| Updates (@microsoft/fast-element/updates.js) | 473 B | 335 B | 288 B |
1010
| Observable (@microsoft/fast-element/observable.js) | 6.70 KB | 2.50 KB | 2.22 KB |
1111
| observable (@microsoft/fast-element/observable.js) | 6.74 KB | 2.51 KB | 2.23 KB |
1212
| attr (@microsoft/fast-element/attr.js) | 477 B | 288 B | 244 B |
13+
| AttributeConfiguration (@microsoft/fast-element/attr.js) | 321 B | 224 B | 204 B |
14+
| AttributeDefinition (@microsoft/fast-element/attr.js) | 8.61 KB | 3.17 KB | 2.84 KB |
15+
| booleanConverter (@microsoft/fast-element/attr.js) | 412 B | 270 B | 230 B |
16+
| nullableBooleanConverter (@microsoft/fast-element/attr.js) | 549 B | 325 B | 277 B |
17+
| nullableNumberConverter (@microsoft/fast-element/attr.js) | 456 B | 291 B | 249 B |
18+
| Binding (@microsoft/fast-element/binding.js) | 106 B | 113 B | 90 B |
19+
| normalizeBinding (@microsoft/fast-element/binding.js) | 7.13 KB | 2.64 KB | 2.37 KB |
20+
| oneTime (@microsoft/fast-element/binding.js) | 1.94 KB | 781 B | 628 B |
21+
| oneWay (@microsoft/fast-element/binding.js) | 6.93 KB | 2.57 KB | 2.29 KB |
22+
| listener (@microsoft/fast-element/binding.js) | 6.92 KB | 2.58 KB | 2.30 KB |
1323
| children (@microsoft/fast-element/directives/children.js) | 4.81 KB | 1.86 KB | 1.64 KB |
24+
| ChildrenDirective (@microsoft/fast-element/directives/children.js) | 4.74 KB | 1.83 KB | 1.62 KB |
25+
| elements (@microsoft/fast-element/directives/node-observation.js) | 88 B | 94 B | 79 B |
26+
| NodeObservationDirective (@microsoft/fast-element/directives/node-observation.js) | 4.27 KB | 1.67 KB | 1.47 KB |
1427
| ref (@microsoft/fast-element/directives/ref.js) | 3.78 KB | 1.52 KB | 1.34 KB |
28+
| RefDirective (@microsoft/fast-element/directives/ref.js) | 3.77 KB | 1.52 KB | 1.33 KB |
1529
| slotted (@microsoft/fast-element/directives/slotted.js) | 4.60 KB | 1.79 KB | 1.58 KB |
30+
| SlottedDirective (@microsoft/fast-element/directives/slotted.js) | 4.53 KB | 1.76 KB | 1.55 KB |
1631
| volatile (@microsoft/fast-element/volatile.js) | 6.79 KB | 2.53 KB | 2.25 KB |
1732
| when (@microsoft/fast-element/directives/when.js) | 1.82 KB | 712 B | 565 B |
1833
| html (@microsoft/fast-element/html.js) | 25.92 KB | 8.50 KB | 7.61 KB |
34+
| ViewTemplate (@microsoft/fast-element/html.js) | 25.92 KB | 8.50 KB | 7.62 KB |
1935
| repeat (@microsoft/fast-element/directives/repeat.js) | 29.57 KB | 9.41 KB | 8.47 KB |
36+
| RepeatBehavior (@microsoft/fast-element/directives/repeat.js) | 29.04 KB | 9.25 KB | 8.32 KB |
37+
| RepeatDirective (@microsoft/fast-element/directives/repeat.js) | 29.04 KB | 9.26 KB | 8.32 KB |
2038
| css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B |
2139
| ArrayObserver (@microsoft/fast-element/array-observer.js) | 12.51 KB | 4.45 KB | 4.01 KB |
40+
| DOM (@microsoft/fast-element/dom.js) | 2.33 KB | 923 B | 771 B |
41+
| DOMAspect (@microsoft/fast-element/dom.js) | 2.33 KB | 927 B | 777 B |
2242
| enableHydration (@microsoft/fast-element/hydration.js) | 43.25 KB | 13.22 KB | 11.89 KB |
43+
| HydrationTracker (@microsoft/fast-element/hydration.js) | 807 B | 349 B | 294 B |
44+
| isHydratable (@microsoft/fast-element/hydration.js) | 2.78 KB | 1020 B | 839 B |
45+
| HydrationBindingError (@microsoft/fast-element/hydration.js) | 16.39 KB | 5.26 KB | 4.67 KB |
46+
| render (@microsoft/fast-element/render.js) | 36.76 KB | 11.75 KB | 10.56 KB |
47+
| RenderBehavior (@microsoft/fast-element/render.js) | 35.66 KB | 11.49 KB | 10.30 KB |
48+
| RenderDirective (@microsoft/fast-element/render.js) | 35.66 KB | 11.48 KB | 10.30 KB |
49+
| Schema (@microsoft/fast-element/schema.js) | 3.12 KB | 1.01 KB | 919 B |
50+
| schemaRegistry (@microsoft/fast-element/schema.js) | 43 B | 63 B | 47 B |
51+
| Compiler (@microsoft/fast-element/templating.js) | 24.40 KB | 7.97 KB | 7.13 KB |
52+
| HTMLBindingDirective (@microsoft/fast-element/templating.js) | 20.82 KB | 6.72 KB | 6.01 KB |
53+
| HTMLDirective (@microsoft/fast-element/templating.js) | 3.68 KB | 1.48 KB | 1.29 KB |
54+
| htmlDirective (@microsoft/fast-element/templating.js) | 3.73 KB | 1.50 KB | 1.31 KB |
55+
| StatelessAttachedAttributeDirective (@microsoft/fast-element/templating.js) | 3.70 KB | 1.49 KB | 1.30 KB |
56+
| Markup (@microsoft/fast-element/templating.js) | 501 B | 341 B | 292 B |
57+
| Parser (@microsoft/fast-element/templating.js) | 501 B | 340 B | 291 B |
58+
| InlineTemplateDirective (@microsoft/fast-element/templating.js) | 25.93 KB | 8.50 KB | 7.62 KB |
59+
| HTMLView (@microsoft/fast-element/templating.js) | 8.99 KB | 3.20 KB | 2.85 KB |
2360
| declarativeTemplate (@microsoft/fast-element/declarative.js) | 58.68 KB | 18.42 KB | 16.45 KB |
2461
| observerMap (@microsoft/fast-element/extensions/observer-map.js) | 20.36 KB | 7.23 KB | 6.50 KB |
2562
| attributeMap (@microsoft/fast-element/extensions/attribute-map.js) | 15.61 KB | 5.52 KB | 4.97 KB |

0 commit comments

Comments
 (0)
⚡