Move core helpers to subpath exports

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: janechu

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

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "Move core helpers such as Updates, Observable, attr, html, css, template directives, volatile, and ArrayObserver to dedicated fast-element subpath exports.",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

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

@@ -1,5 +1,4 @@
-import { css } from "@microsoft/fast-element/styles.js";
-
+import { css } from "@microsoft/fast-element/css.js";
 export const styles = css`
     :host {
         display: block;

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

@@ -1,5 +1,6 @@
-import { html, repeat } from "@microsoft/fast-element";
 import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
+import { repeat } from "@microsoft/fast-element/directives/repeat.js";
+import { html } from "@microsoft/fast-element/html.js";
 import type { TodoApp } from "./todo-app.js";
 import type { Todo } from "./todo-list.js";
 import "./todo-form.js";
@@ -34,7 +35,7 @@ export const template = html<TodoApp>`
                         &times;
                     </button>
                 </li>
-            `
+            `,
         )}
     </ul>
 `;

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

@@ -1,5 +1,4 @@
-import { css } from "@microsoft/fast-element/styles.js";
-
+import { css } from "@microsoft/fast-element/css.js";
 export const styles = css`
     form {
         display: flex;

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

@@ -1,5 +1,5 @@
-import { html } from "@microsoft/fast-element";
 import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
+import { html } from "@microsoft/fast-element/html.js";
 import type { TodoForm } from "./todo-form.js";
 
 export const template = html<TodoForm>`

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

@@ -1,4 +1,5 @@
-import { customElement, FASTElement, observable } from "@microsoft/fast-element";
+import { customElement, FASTElement } from "@microsoft/fast-element";
+import { observable } from "@microsoft/fast-element/observable.js";
 import { styles } from "./todo-form.styles.js";
 import { template } from "./todo-form.template.js";
 import { TodoList } from "./todo-list.js";

examples/todo-app/src/todo-list.ts

@@ -1,6 +1,7 @@
-import { Observable, observable, volatile } from "@microsoft/fast-element";
 import { Context } from "@microsoft/fast-element/context.js";
+import { Observable, observable } from "@microsoft/fast-element/observable.js";
 import { reactive } from "@microsoft/fast-element/state.js";
+import { volatile } from "@microsoft/fast-element/volatile.js";
 
 export type Todo = { description: string; done: boolean };
 export type TodoListFilter = "all" | "active" | "completed";

packages/fast-element/ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md

@@ -1,6 +1,6 @@
 # `html` tagged template literal
 
-The `html` export from `@microsoft/fast-element` is used to create the template logic for the custom element.
+The `html` export from `@microsoft/fast-element/html.js` is used to create the template logic for the custom element.
 
 ## Pre-processing the `html` tagged template literal contents
 
@@ -33,4 +33,4 @@ flowchart TD
     C --> E
     F[When a <code>createObserver</code> is called, the instance of the one time binding is returned which includes a bind method returning the arrow function executed against the controller source and context]
     B --> F
-```
+```

packages/fast-element/ARCHITECTURE_OVERVIEW.md

@@ -28,7 +28,7 @@ Let's step back from defining the Custom Element and consider what is happening
 
 First, a global `FAST` property will be created if one does not already exist, typically in browser on the `window`.
 
-Additionally, when Custom Elements are included in a script a few things might happen even before a Custom Element gets detected by the browser. First, there are initial side effects caused by the use of decorators. These include the `attr` and `observable` decorators made available by the `@microsoft/fast-element` package.
+Additionally, when Custom Elements are included in a script a few things might happen even before a Custom Element gets detected by the browser. First, there are initial side effects caused by the use of decorators. These include the `attr` decorator from `@microsoft/fast-element/attr.js` and the `observable` decorator from `@microsoft/fast-element/observable.js`.
 
 Here is a basic flow of what code is executed and when during initial load of a script that contains a FAST defined Custom Element:
 
@@ -49,4 +49,4 @@ flowchart TD
     I@{ shape: dbl-circ, label: "The lifecycle steps for <code>FASTElement</code> are executed" }
     G --> H
     H --> I
-```
+```

packages/fast-element/DECLARATIVE_DESIGN.md

@@ -58,7 +58,7 @@ registry-aware declarative template bridge.
 |---|---|
 | **Server-agnostic rendering** | Templates are plain HTML strings with no dependency on Node.js or any specific SSR framework. |
 | **Progressive enhancement** | Components can be server-rendered and then hydrated client-side without a full re-render. |
-| **FAST parity** | The declarative syntax maps 1-to-1 to `@microsoft/fast-element` directives (`repeat`, `when`, `slotted`, `children`, `ref`). |
+| **FAST parity** | The declarative syntax maps 1-to-1 to FAST Element directive helpers (`repeat`, `when`, `slotted`, `children`, `ref`) from their `@microsoft/fast-element/directives/*` subpaths. |
 | **Minimal authoring overhead** | Component authors write HTML, not tagged template strings, while retaining full reactive capabilities. |
 
 ---