@microsoft/fast-element 2.10.1 → 2.10.3

package/ARCHITECTURE_FASTELEMENT.md

@@ -42,7 +42,7 @@ flowchart TD
 
 The rendering of the template on the `ElementController` is by the `renderTemplate` method which is called during the `ElementController.connect` method which is triggered by `HTMLElement`s `connectedCallback` lifecycle.
 
-The `renderTemplate` identifies the Custom Element, and the shadow root associated with the Custom Element. This then places a rendering of the template (an `ElementView`) onto the internal `view` of the controller. When creating the `ElementView`/`HTMLView` using the `ViewTemplate.render`, the `Compile.compile()` method identifies a `DocumentFragment` either by using an existing `<template>` tag, or creating one to wrap the contents of the shadow root. A new `CompilationContext` is created and the `compileAttributes` function is called, this results in the replacement of the placeholder attributes initally set-up during the pre-render step with their values if a value has been assigned. The factories with the associated nodes identified are then passed to the context. The view then binds all behaviors to the source element. The `CompilationContext.createView` is executed with the `DocumentFragment` as the root, and returns an `HTMLView`. This `HTMLView` includes an `appendTo` method to attach the fragment to the host element, which it then does. It should be noted that the compiled HTML is a `string`, which when set on the `DocumentFragment` as `innerHTML`, this allows the browser to dictate the creation of HTML nodes.
+The `renderTemplate` identifies the Custom Element, and the shadow root associated with the Custom Element. This then places a rendering of the template (an `ElementView`) onto the internal `view` of the controller. When creating the `ElementView`/`HTMLView` using the `ViewTemplate.render`, the `Compiler.compile()` method identifies a `DocumentFragment` either by using an existing `<template>` tag, or creating one to wrap the contents of the shadow root. A new `CompilationContext` is created and the `compileAttributes` function is called, this results in the replacement of the placeholder attributes initally set-up during the pre-render step with their values if a value has been assigned. The factories with the associated nodes identified are then passed to the context. The view then binds all behaviors to the source element. The `CompilationContext.createView` is executed with the `DocumentFragment` as the root, and returns an `HTMLView`. This `HTMLView` includes an `appendTo` method to attach the fragment to the host element, which it then does. It should be noted that the compiled HTML is a `string`, which when set on the `DocumentFragment` as `innerHTML`, this allows the browser to dictate the creation of HTML nodes.
 
 ### 🔄 **Lifecycle**: Component is disconnected
 

package/ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md

@@ -6,10 +6,12 @@ The `html` export from `@microsoft/fast-element` is used to create the template
 
 Before the template can be used it goes through a step to convert it into a `ViewTemplate` which it does via the `ViewTemplate.create()` method. This is then used during the `compose` step, before `FASTElement` is instantiated.
 
-During the `Compiler.compile()` method(triggered by `ViewTemplate.create()` method), the following happens for each string:
+During the static `ViewTemplate.create()` method (called by the `html` tag), the following happens for each string:
 - Factories with unique IDs are created for each tag template literal argument (or `TemplateValue`) which matches with the corresponding string
 - A binding is created from the `TemplateValue`
 
+The `Compiler.compile()` method is called lazily the first time the template is rendered (via `ViewTemplate.compile()`, which is triggered by `ViewTemplate.create()` instance method or `ViewTemplate.render()`).
+
 A resulting string using a `createHTML()` function is produced using the `HTMLDirective`s executed for each factory. The behavior is augmented by the previous string from the `html` tag template which determines the aspect if one exists, these aspects are the `@`, `:`, or other binding aspect attached to attributes.
 
 The `createHTML()` function utilizes a `Markup` attribute which is assigned to a factory's unique ID. The strings are concatenated and passed to a new `ViewTemplate` with all the factories (empty until one is assigned) that act as a dictionary with the unique IDs as the key to look up each factory once it has been created. The string this creates is injected into a `<template>` as `innerHTML`, which allows the browser to create the nodes and placeholder factory IDs, with the only `DOM` node that is explicitly created being the wrapping `<template>` element.

package/ARCHITECTURE_INTRO.md

@@ -6,5 +6,5 @@ This document (and the linked documents) explains how the exports and side effec
 
 - [Overview](./ARCHITECTURE_OVERVIEW.md): How the `@microsoft/fast-element` should be used by a developer and what code is executed during the first render.
 - [`FASTElement`](./ARCHITECTURE_FASTELEMENT.md): How the `FASTElement` is architected.
-- [`html` tagged template literal](./ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md): How the `html` tagged template literal takes and converts the contents into a `VIEWTemplate`.
+- [`html` tagged template literal](./ARCHITECTURE_HTML_TAGGED_TEMPLATE_LITERAL.md): How the `html` tagged template literal takes and converts the contents into a `ViewTemplate`.
 - [`Updates` queue](./ARCHITECTURE_UPDATES.md): How updates to attributes and observables are processed.

package/ARCHITECTURE_OVERVIEW.md

@@ -39,7 +39,7 @@ flowchart TD
     A --> B
     C@{ shape: rect, label: "A Custom Element executes the <code>compose</code> step"}
     B --> C
-    D@{ shape: procs, label: "<ul style="text-align: left"><li>Any defined observable decorators are added to the FAST global</li><li>An attribute decorator locates the associated Custom Elements constructor which it uses to push itself to the Custom Elements attribute collection</li></ul>"}
+    D@{ shape: procs, label: "<ul style='text-align: left'><li>Any defined observable decorators are added to the FAST global</li><li>An attribute decorator locates the associated Custom Elements constructor which it uses to push itself to the Custom Elements attribute collection</li></ul>"}
     C --> D
     F@{ shape: rect, label: "An HTML tagged template literal is executed for the FAST Custom Element and applied to the definition" }
     D --> F

package/CHANGELOG.json

@@ -2,7 +2,159 @@
   "name": "@microsoft/fast-element",
   "entries": [
     {
-      "date": "Mon, 02 Mar 2026 22:31:53 GMT",
+      "date": "Wed, 08 Apr 2026 00:19:52 GMT",
+      "version": "2.10.3",
+      "tag": "@microsoft/fast-element_v2.10.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "e222ea1a8f0dfce91622f3b8504539c5fed1ddbd",
+            "comment": "fix: replace direct property access with Reflect.get for lazy getter resolution"
+          }
+        ],
+        "none": [
+          {
+            "author": "7559015+janechu@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "72e9f0d675f7a08de40eff911fefb783d1c43b3a",
+            "comment": "chore: add DESIGN.md and fix architecture doc errors"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 07 Apr 2026 00:50:48 GMT",
+      "version": "2.10.2",
+      "tag": "@microsoft/fast-element_v2.10.2",
+      "comments": {
+        "none": [
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "05ccb88f41eb44ec6cbe263335cc030de99f80a4",
+            "comment": "chore: add biome script to run biome on changed files in packages"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sat, 04 Apr 2026 00:22:26 GMT",
+      "version": "2.10.2",
+      "tag": "@microsoft/fast-element_v2.10.2",
+      "comments": {
+        "none": [
+          {
+            "author": "7559015+janechu@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "4371b6c6124feaec26dd51116cb6d777a6507a99",
+            "comment": "Add documentation on FAST templating"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 Mar 2026 00:04:08 GMT",
+      "version": "2.10.2",
+      "tag": "@microsoft/fast-element_v2.10.2",
+      "comments": {
+        "none": [
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "6b0fd6c4a4b0c635d4e5c18d251b28abbf32bab5",
+            "comment": "chore: migrate to biome for linting and formatting"
+          },
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "11227f6085b9aa2a3048c70427867a1f8d2f6873",
+            "comment": "chore: replace old clean script with new implementation"
+          },
+          {
+            "author": "7559015+janechu@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "ea46496f56cd94cb0dae65b7026998c88604aaac",
+            "comment": "chore: fix publish blocker due to biome"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 20 Mar 2026 00:07:36 GMT",
+      "version": "2.10.2",
+      "tag": "@microsoft/fast-element_v2.10.2",
+      "comments": {
+        "none": [
+          {
+            "author": "7559015+janechu@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "6df43be90d257a49389c188935400792b7108cc6",
+            "comment": "Split tests to assist in base PR build gate times"
+          },
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "1dd81b899a21eb28ed7dd15bdf1c558196775c3e",
+            "comment": "chore: update dependencies and configurations"
+          },
+          {
+            "author": "7559015+janechu@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "8f79bdbf1d7c3af827ca807347fc1134bbf45731",
+            "comment": "Remove karma/mocha/chai and related unused dependencies"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 13 Mar 2026 18:13:56 GMT",
+      "version": "2.10.2",
+      "tag": "@microsoft/fast-element_v2.10.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "3ade63edb5abe7b5454e96390aac5ad13fdb4cc7",
+            "comment": "fix: add hydrating instance when needsHydration is true in HydratableElementController"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 10 Mar 2026 00:17:17 GMT",
+      "version": "2.10.1",
+      "tag": "@microsoft/fast-element_v2.10.1",
+      "comments": {
+        "none": [
+          {
+            "author": "7559015+janechu@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "f91c57b5df062d6a1bb46a692070b89e31df384d",
+            "comment": "Remove webpack-env from tsconfig"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sun, 08 Mar 2026 00:09:02 GMT",
+      "version": "2.10.1",
+      "tag": "@microsoft/fast-element_v2.10.1",
+      "comments": {
+        "none": [
+          {
+            "author": "7559015+janechu@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "37734050ee0b61e9ea58a567882359ed5ab78eb6",
+            "comment": "Update Karma tests to Playwright"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 02 Mar 2026 22:31:57 GMT",
       "version": "2.10.1",
       "tag": "@microsoft/fast-element_v2.10.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @microsoft/fast-element
 
-<!-- This log was last generated on Mon, 02 Mar 2026 22:31:53 GMT and should not be manually modified. -->
+<!-- This log was last generated on Wed, 08 Apr 2026 00:19:52 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 2.10.3
+
+Wed, 08 Apr 2026 00:19:52 GMT
+
+### Patches
+
+- fix: replace direct property access with Reflect.get for lazy getter resolution (863023+radium-v@users.noreply.github.com)
+
+## 2.10.2
+
+Fri, 13 Mar 2026 18:13:56 GMT
+
+### Patches
+
+- fix: add hydrating instance when needsHydration is true in HydratableElementController (863023+radium-v@users.noreply.github.com)
+
 ## 2.10.1
 
-Mon, 02 Mar 2026 22:31:53 GMT
+Mon, 02 Mar 2026 22:31:57 GMT
 
 ### Patches