chore: remove hydratable view and unused code (#7489)

# Pull Request

## 📖 Description

This change removes the hydratable views side effects exports, incorporates them into the declarative templating and removes some unused code.

## ✅ Checklist

### General

- [x] I have included a change request file using `$ npm run change`
- [ ] 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.

Author: janechu

change/@microsoft-fast-element-0e87a967-3dbb-4010-9c3f-c5dad8ef3544.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "Remove hydration view template side effect and unused export paths",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

…/@microsoft-fast-element-1776500147.json …1e3e3bd-e227-4449-9ff6-8edc104819d8.jsonchange/@microsoft-fast-element-1776500147.json renamed to change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d8.json change/@microsoft-fast-element-1776500147.json renamed to change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d8.json

@@ -2,6 +2,6 @@
   "type": "major",
   "comment": "Replace HydratableElementController with automatic prerendered content optimization. When a component connects with an existing shadow root, bindings skip attribute/booleanAttribute DOM updates during initial render while still setting up event listeners, observers, and dependency tracking. Added isPrerendered flag to ElementController and ViewController. Added template-pending guard for defineAsync flow.",
   "packageName": "@microsoft/fast-element",
-  "email": "janechu@microsoft.com",
+  "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "patch"
 }

…-fast-element-move-declarative-html.json …1e3e3bd-e227-4449-9ff6-8edc104819d9.jsonchange/@microsoft-fast-element-move-declarative-html.json renamed to change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d9.json change/@microsoft-fast-element-move-declarative-html.json renamed to change/@microsoft-fast-element-61e3e3bd-e227-4449-9ff6-8edc104819d9.json

@@ -4,7 +4,7 @@ Bundle sizes for `@microsoft/fast-element` exports.
 
 | Export | Minified | Gzip | Brotli |
 |--------|----------|------|--------|
-| CDN Rollup Bundle | 62.60 KB | 18.64 KB | 16.77 KB |
+| CDN Rollup Bundle | 62.60 KB | 18.64 KB | 16.75 KB |
 | FASTElement | 22.88 KB | 7.14 KB | 6.46 KB |
 | Updates | 3.03 KB | 1.25 KB | 1.06 KB |
 | Observable | 7.55 KB | 2.76 KB | 2.48 KB |

packages/fast-element/SIZES.md

@@ -109,15 +109,15 @@ export type Callable = typeof Function.prototype.call | {
 };
 
 // @public
-export interface CaptureType<TSource, TParent> {
+export interface CaptureType {
 }
 
 // @public
 export interface ChildListDirectiveOptions<T = any> extends NodeBehaviorOptions<T>, Omit<MutationObserverInit, "subtree" | "childList"> {
 }
 
 // @public
-export function children<TSource = any, TParent = any>(propertyOrOptions: (keyof TSource & string) | ChildrenDirectiveOptions<keyof TSource & string>): CaptureType<TSource, TParent>;
+export function children<TSource = any>(propertyOrOptions: (keyof TSource & string) | ChildrenDirectiveOptions<keyof TSource & string>): CaptureType;
 
 // @public
 export class ChildrenDirective extends NodeObservationDirective<ChildrenDirectiveOptions> {
@@ -753,7 +753,7 @@ export class PropertyChangeNotifier implements Notifier {
 }
 
 // @public
-export const ref: <TSource = any, TParent = any>(propertyName: keyof TSource & string) => CaptureType<TSource, TParent>;
+export const ref: <TSource = any>(propertyName: keyof TSource & string) => CaptureType;
 
 // @public
 export class RefDirective extends StatelessAttachedAttributeDirective<string> {
@@ -762,7 +762,7 @@ export class RefDirective extends StatelessAttachedAttributeDirective<string> {
 }
 
 // @public
-export function render<TSource = any, TItem = any, TParent = any>(value?: Expression<TSource, TItem> | Binding<TSource, TItem> | {}, template?: ContentTemplate | string | Expression<TSource, ContentTemplate | string | Node, TParent> | Binding<TSource, ContentTemplate | string | Node, TParent>): CaptureType<TSource, TParent>;
+export function render<TSource = any, TItem = any, TParent = any>(value?: Expression<TSource, TItem> | Binding<TSource, TItem> | {}, template?: ContentTemplate | string | Expression<TSource, ContentTemplate | string | Node, TParent> | Binding<TSource, ContentTemplate | string | Node, TParent>): CaptureType;
 
 // @public
 export class RenderBehavior<TSource = any> implements ViewBehavior, Subscriber {
@@ -788,7 +788,7 @@ export class RenderDirective<TSource = any> implements HTMLDirective, ViewBehavi
 }
 
 // @public
-export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>, TParent = any>(items: Expression<TSource, TArray, TParent> | Binding<TSource, TArray, TParent> | ReadonlyArray<any>, template: Expression<TSource, ViewTemplate<any, TSource>> | Binding<TSource, ViewTemplate<any, TSource>> | ViewTemplate<any, TSource>, options?: RepeatOptions): CaptureType<TSource, TParent>;
+export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>, TParent = any>(items: Expression<TSource, TArray, TParent> | Binding<TSource, TArray, TParent> | ReadonlyArray<any>, template: Expression<TSource, ViewTemplate<any, TSource>> | Binding<TSource, ViewTemplate<any, TSource>> | ViewTemplate<any, TSource>, options?: RepeatOptions): CaptureType;
 
 // @public
 export class RepeatBehavior<TSource = any> implements ViewBehavior, Subscriber {
@@ -827,7 +827,7 @@ export interface ShadowRootOptions extends ShadowRootInit {
 }
 
 // @public
-export function slotted<TSource = any, TParent = any>(propertyOrOptions: (keyof TSource & string) | SlottedDirectiveOptions<keyof TSource & string>): CaptureType<TSource, TParent>;
+export function slotted<TSource = any>(propertyOrOptions: (keyof TSource & string) | SlottedDirectiveOptions<keyof TSource & string>): CaptureType;
 
 // @public
 export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveOptions> {
@@ -972,7 +972,7 @@ export interface SyntheticView<TSource = any, TParent = any> extends View<TSourc
 // @public
 export interface SyntheticViewTemplate<TSource = any, TParent = any> {
     create(): SyntheticView<TSource, TParent>;
-    inline(): CaptureType<TSource, TParent>;
+    inline(): CaptureType;
 }
 
 // @public
@@ -990,7 +990,7 @@ export const TemplateOptions: {
 export type TemplateOptions = (typeof TemplateOptions)[keyof typeof TemplateOptions];
 
 // @public
-export type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource, TParent>;
+export type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType;
 
 // @public
 export type TrustedTypesPolicy = {
@@ -1072,7 +1072,7 @@ export class ViewTemplate<TSource = any, TParent = any> implements ElementViewTe
     static create<TSource = any, TParent = any>(strings: string[], values: TemplateValue<TSource, TParent>[], policy?: DOMPolicy): ViewTemplate<TSource, TParent>;
     readonly factories: Record<string, ViewBehaviorFactory>;
     readonly html: string | HTMLTemplateElement;
-    inline(): CaptureType<TSource, TParent>;
+    inline(): CaptureType;
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent>;
     withPolicy(policy: DOMPolicy): this;
 }
@@ -1081,7 +1081,7 @@ export class ViewTemplate<TSource = any, TParent = any> implements ElementViewTe
 export function volatile(target: {}, name: string | Accessor, descriptor: PropertyDescriptor): PropertyDescriptor;
 
 // @public
-export function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>, elseTemplateOrTemplateBinding?: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;
+export function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>, elseTemplateOrTemplateBinding?: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType;
 
 // Warnings were encountered during analysis:
 //

packages/fast-element/docs/api-report.api.md

@@ -64,34 +64,10 @@
       "types": "./dist/dts/context.d.ts",
       "default": "./dist/esm/context.js"
     },
-    "./metadata.js": {
-      "types": "./dist/dts/metadata.d.ts",
-      "default": "./dist/esm/metadata.js"
-    },
-    "./testing.js": {
-      "types": "./dist/dts/testing/exports.d.ts",
-      "default": "./dist/esm/testing/exports.js"
-    },
     "./di.js": {
       "types": "./dist/dts/di/di.d.ts",
       "default": "./dist/esm/di/di.js"
     },
-    "./element-hydration.js": {
-      "types": "./dist/dts/components/hydration.d.ts",
-      "default": "./dist/esm/components/hydration.js"
-    },
-    "./install-element-hydration.js": {
-      "types": "./dist/dts/components/install-hydration.d.ts",
-      "default": "./dist/esm/components/install-hydration.js"
-    },
-    "./install-hydratable-view-templates.js": {
-      "types": "./dist/dts/templating/install-hydratable-view-templates.d.ts",
-      "default": "./dist/esm/templating/install-hydratable-view-templates.js"
-    },
-    "./pending-task.js": {
-      "types": "./dist/dts/pending-task.d.ts",
-      "default": "./dist/esm/pending-task.js"
-    },
     "./dom-policy.js": {
       "types": "./dist/dts/dom-policy.d.ts",
       "default": "./dist/esm/dom-policy.js"
@@ -107,8 +83,6 @@
     "./dist/esm/debug.js",
     "./dist/esm/declarative.js",
     "./dist/esm/polyfills.js",
-    "./dist/esm/components/install-hydration.js",
-    "./dist/esm/templating/install-hydratable-view-templates.js",
     "./dist/esm/interfaces.js"
   ],
   "scripts": {

packages/fast-element/package.json

@@ -1,6 +1,34 @@
+import { Hydratable } from "./components/hydration.js";
 import { debugMessages } from "./declarative/debug.js";
 import { FAST } from "./platform.js";
-import "./templating/install-hydratable-view-templates.js";
+import { ViewTemplate } from "./templating/template.js";
+import { HydrationView } from "./templating/view.js";
+
+// Configure ViewTemplate to be hydratable by attaching a symbol identifier
+// and a hydrate method. Augmenting the hydration features is done by
+// property assignment instead of class extension to better allow the
+// hydration feature to be tree-shaken.
+//
+// When hydrate() is called, it creates a HydrationView that wraps the
+// pre-rendered DOM range (firstChild → lastChild) instead of cloning a
+// compiled DocumentFragment. The HydrationView will then use
+// buildViewBindingTargets() to scan for hydration markers and attach
+// reactive bindings to the existing DOM nodes.
+Object.defineProperties(ViewTemplate.prototype, {
+    [Hydratable]: { value: Hydratable, enumerable: false, configurable: false },
+    hydrate: {
+        value: function (
+            this: ViewTemplate,
+            firstChild: Node,
+            lastChild: Node,
+            hostBindingTarget?: Element,
+        ): HydrationView {
+            return new HydrationView(firstChild, lastChild, this, hostBindingTarget);
+        },
+        enumerable: true,
+        configurable: false,
+    },
+});
 
 FAST.addMessages(debugMessages);
 

packages/fast-element/src/components/install-hydration.ts

@@ -106,11 +106,11 @@ HTMLDirective.define(ChildrenDirective);
  * @param propertyOrOptions - The options used to configure child node observation.
  * @public
  */
-export function children<TSource = any, TParent = any>(
+export function children<TSource = any>(
     propertyOrOptions:
         | (keyof TSource & string)
-        | ChildrenDirectiveOptions<keyof TSource & string>
-): CaptureType<TSource, TParent> {
+        | ChildrenDirectiveOptions<keyof TSource & string>,
+): CaptureType {
     if (isString(propertyOrOptions)) {
         propertyOrOptions = {
             property: propertyOrOptions,