diff --git a/change/@microsoft-fast-element-a9eeaf96-82b9-4229-980f-d1e8cd562bab.json b/change/@microsoft-fast-element-a9eeaf96-82b9-4229-980f-d1e8cd562bab.json new file mode 100644 index 00000000000..042c6bf9122 --- /dev/null +++ b/change/@microsoft-fast-element-a9eeaf96-82b9-4229-980f-d1e8cd562bab.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add the svg tagged template literal, which creates template content in the SVG namespace so that SVG elements authored in nested templates, such as a repeat item template, render correctly.", + "packageName": "@microsoft/fast-element", + "email": "144495202+AKnassa@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/fast-element/DESIGN.md b/packages/fast-element/DESIGN.md index 5e6a8a8c6fb..3a04434d565 100644 --- a/packages/fast-element/DESIGN.md +++ b/packages/fast-element/DESIGN.md @@ -296,6 +296,20 @@ No DOM nodes are created at this point; compilation is deferred. See [docs/architecture/html-tagged-template-literal.md](./docs/architecture/html-tagged-template-literal.md) for more detail on directives and the `Markup`/`Parser` helpers. +#### svg Tagged Template Literal + +Each tagged template literal is parsed into its own `DocumentFragment`, so a template nested inside an `svg` element through a directive (for example the item template of a `repeat`) has no SVG parsing context and its elements would be created in the HTML namespace, where they never render. The `svg` tag builds the same `ViewTemplate` but marks it so that `compile()` parses its html inside a temporary `svg` element, which puts the resulting nodes in the SVG namespace: + +```typescript +const template = html` + + ${repeat(x => x.points, svg``)} + +`; +``` + +The template must not include the `svg` element itself. Elements written directly inside an `svg` element in the same `html` template need no special handling. + --- ### ViewTemplate & Compiler @@ -656,7 +670,7 @@ src/ │ ├── one-time.ts # oneTime │ └── normalize.ts # normalizeBinding helper ├── templating/ -│ ├── template.ts # ViewTemplate, html tag, InlineTemplateDirective +│ ├── template.ts # ViewTemplate, html/svg tags, InlineTemplateDirective │ ├── compiler.ts # Compiler, CompilationContext │ ├── view.ts # HTMLView, ElementView, SyntheticView │ ├── html-directive.ts # HTMLDirective, ViewBehavior, ViewBehaviorFactory diff --git a/packages/fast-element/SIZES.md b/packages/fast-element/SIZES.md index 92d854e5126..100b62fcc13 100644 --- a/packages/fast-element/SIZES.md +++ b/packages/fast-element/SIZES.md @@ -4,7 +4,7 @@ Bundle sizes for `@microsoft/fast-element` exports. | Export | Minified | Gzip | Brotli | |--------|----------|------|--------| -| CDN Rollup Bundle | 78.61 KB | 23.40 KB | 20.77 KB | +| CDN Rollup Bundle | 79.08 KB | 23.51 KB | 20.88 KB | | FASTElement (@microsoft/fast-element/fast-element.js) | 23.11 KB | 7.12 KB | 6.41 KB | | Updates (@microsoft/fast-element/updates.js) | 473 B | 335 B | 290 B | | Observable (@microsoft/fast-element/observable.js) | 6.75 KB | 2.51 KB | 2.23 KB | @@ -15,11 +15,11 @@ Bundle sizes for `@microsoft/fast-element` exports. | slotted (@microsoft/fast-element/slotted.js) | 4.66 KB | 1.81 KB | 1.59 KB | | volatile (@microsoft/fast-element/volatile.js) | 6.84 KB | 2.54 KB | 2.26 KB | | when (@microsoft/fast-element/when.js) | 1.88 KB | 731 B | 589 B | -| html (@microsoft/fast-element/html.js) | 27.73 KB | 8.96 KB | 8.02 KB | +| html (@microsoft/fast-element/html.js) | 28.06 KB | 9.05 KB | 8.11 KB | | repeat (@microsoft/fast-element/repeat.js) | 31.80 KB | 10.00 KB | 9.03 KB | | css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B | -| enableHydration (@microsoft/fast-element/hydration.js) | 46.53 KB | 13.91 KB | 12.49 KB | -| declarativeTemplate (@microsoft/fast-element/declarative.js) | 62.15 KB | 19.46 KB | 17.42 KB | +| enableHydration (@microsoft/fast-element/hydration.js) | 46.86 KB | 14.02 KB | 12.59 KB | +| declarativeTemplate (@microsoft/fast-element/declarative.js) | 62.48 KB | 19.56 KB | 17.50 KB | | ArrayObserver (@microsoft/fast-element/arrays.js) | 12.55 KB | 4.46 KB | 4.03 KB | | observerMap (@microsoft/fast-element/observer-map.js) | 21.96 KB | 7.73 KB | 6.97 KB | | attributeMap (@microsoft/fast-element/attribute-map.js) | 15.31 KB | 5.41 KB | 4.88 KB | diff --git a/packages/fast-element/docs/api-report.api.md b/packages/fast-element/docs/api-report.api.md index 5a660bf37f0..84a509855be 100644 --- a/packages/fast-element/docs/api-report.api.md +++ b/packages/fast-element/docs/api-report.api.md @@ -1126,6 +1126,9 @@ export interface SubtreeDirectiveOptions extends NodeBehaviorOptions subtree: boolean; } +// @public +export const svg: (strings: TemplateStringsArray, ...values: TemplateValue[]) => ViewTemplate; + // @public export interface SyntheticView extends View { readonly firstChild: Node; @@ -1259,11 +1262,11 @@ export interface ViewController extends Expression // @public export class ViewTemplate implements ElementViewTemplate, SyntheticViewTemplate { - constructor(html: string | HTMLTemplateElement, factories?: Record, policy?: DOMPolicy | undefined); + constructor(html: string | HTMLTemplateElement, factories?: Record, policy?: DOMPolicy | undefined, isSVG?: boolean); // @internal (undocumented) compile(): HTMLTemplateCompilationResult; create(hostBindingTarget?: Element): HTMLView; - static create(strings: string[], values: TemplateValue[], policy?: DOMPolicy): ViewTemplate; + static create(strings: string[], values: TemplateValue[], policy?: DOMPolicy, isSVG?: boolean): ViewTemplate; readonly factories: Record; readonly html: string | HTMLTemplateElement; inline(): CaptureType; diff --git a/packages/fast-element/docs/declarative/api-report.api.md b/packages/fast-element/docs/declarative/api-report.api.md index cd1f7e08af9..8985806e63d 100644 --- a/packages/fast-element/docs/declarative/api-report.api.md +++ b/packages/fast-element/docs/declarative/api-report.api.md @@ -414,11 +414,11 @@ export interface ViewBehaviorFactory { // @public export class ViewTemplate implements ElementViewTemplate, SyntheticViewTemplate { - constructor(html: string | HTMLTemplateElement, factories?: Record, policy?: DOMPolicy | undefined); + constructor(html: string | HTMLTemplateElement, factories?: Record, policy?: DOMPolicy | undefined, isSVG?: boolean); // @internal (undocumented) compile(): HTMLTemplateCompilationResult; create(hostBindingTarget?: Element): HTMLView; - static create(strings: string[], values: TemplateValue[], policy?: DOMPolicy): ViewTemplate; + static create(strings: string[], values: TemplateValue[], policy?: DOMPolicy, isSVG?: boolean): ViewTemplate; readonly factories: Record; readonly html: string | HTMLTemplateElement; inline(): CaptureType; diff --git a/packages/fast-element/src/index.ts b/packages/fast-element/src/index.ts index 7f604432d19..db53a815ec6 100644 --- a/packages/fast-element/src/index.ts +++ b/packages/fast-element/src/index.ts @@ -189,6 +189,7 @@ export { html, InlineTemplateDirective, type SyntheticViewTemplate, + svg, type TemplateValue, ViewTemplate, } from "./templating/template.js"; diff --git a/packages/fast-element/src/templating/template.pw.spec.ts b/packages/fast-element/src/templating/template.pw.spec.ts index 5160235173d..3372d4feaa4 100644 --- a/packages/fast-element/src/templating/template.pw.spec.ts +++ b/packages/fast-element/src/templating/template.pw.spec.ts @@ -1514,3 +1514,214 @@ test.describe("The ViewTemplate", () => { expect(result).toBe(true); }); }); + +test.describe("The svg tag template helper", () => { + test("creates elements in the SVG namespace when used as a repeat item template", async ({ + page, + }) => { + await page.goto("/"); + + const result = await page.evaluate(async () => { + // @ts-expect-error: Client module. + const { html, svg, repeat, Updates } = await import("/main.js"); + + const host = document.createElement("div"); + document.body.appendChild(host); + + const template = html` + + ${repeat( + x => x.items, + svg` + ${x => x.label} + `, + )} + + `; + + template.render({ items: [{ label: "hello" }] }, host); + await Updates.next(); + + const text = host.querySelector("text")!; + const result = { + namespaceURI: text.namespaceURI, + isSVGElement: text instanceof SVGElement, + isRendered: + text instanceof SVGGraphicsElement && text.getBBox().width > 0, + }; + + host.remove(); + return result; + }); + + expect(result).toEqual({ + namespaceURI: "http://www.w3.org/2000/svg", + isSVGElement: true, + isRendered: true, + }); + }); + + test("binds attributes on SVG elements", async ({ page }) => { + await page.goto("/"); + + const result = await page.evaluate(async () => { + // @ts-expect-error: Client module. + const { html, svg, repeat, Observable, Updates } = await import("/main.js"); + + const host = document.createElement("div"); + document.body.appendChild(host); + + const item: { cx: number } = {} as any; + Observable.defineProperty(item, "cx"); + item.cx = 10; + const source = { items: [item] }; + + const template = html` + + ${repeat( + x => x.items, + svg` + + `, + )} + + `; + + template.render(source, host); + await Updates.next(); + + const circle = host.querySelector("circle")!; + const initial = circle.getAttribute("cx"); + + item.cx = 42; + await Updates.next(); + + const result = { initial, updated: circle.getAttribute("cx") }; + host.remove(); + return result; + }); + + expect(result).toEqual({ initial: "10", updated: "42" }); + }); + + test("creates foreignObject children in the HTML namespace", async ({ page }) => { + await page.goto("/"); + + const result = await page.evaluate(async () => { + // @ts-expect-error: Client module. + const { html, svg, repeat, Updates } = await import("/main.js"); + + const host = document.createElement("div"); + document.body.appendChild(host); + + const template = html` + + ${repeat( + x => x.items, + svg` + +
${x => x.label}
+ + `, + )} + + `; + + template.render({ items: [{ label: "hello" }] }, host); + await Updates.next(); + + const result = { + foreignObject: host.querySelector("foreignObject")!.namespaceURI, + div: host.querySelector("div")!.namespaceURI, + }; + + host.remove(); + return result; + }); + + expect(result).toEqual({ + foreignObject: "http://www.w3.org/2000/svg", + div: "http://www.w3.org/1999/xhtml", + }); + }); + + test("creates elements in the SVG namespace for nested directives", async ({ + page, + }) => { + await page.goto("/"); + + const result = await page.evaluate(async () => { + // @ts-expect-error: Client module. + const { html, svg, repeat, when, Updates } = await import("/main.js"); + + const host = document.createElement("div"); + document.body.appendChild(host); + + const template = html` + + ${repeat( + x => x.items, + svg` + + ${when( + x => x.visible, + svg` + + `, + )} + + `, + )} + + `; + + template.render({ items: [{ visible: true }] }, host); + await Updates.next(); + + const result = { + g: host.querySelector("g")!.namespaceURI, + circle: host.querySelector("circle")!.namespaceURI, + }; + + host.remove(); + return result; + }); + + expect(result).toEqual({ + g: "http://www.w3.org/2000/svg", + circle: "http://www.w3.org/2000/svg", + }); + }); + + test("does not change the namespace of elements created by the html tag", async ({ + page, + }) => { + await page.goto("/"); + + const result = await page.evaluate(async () => { + // @ts-expect-error: Client module. + const { html, repeat, Updates } = await import("/main.js"); + + const host = document.createElement("div"); + document.body.appendChild(host); + + const template = html` + ${repeat( + x => x.items, + html` + ${x => x.label} + `, + )} + `; + + template.render({ items: [{ label: "hello" }] }, host); + await Updates.next(); + + const result = host.querySelector("span")!.namespaceURI; + host.remove(); + return result; + }); + + expect(result).toBe("http://www.w3.org/1999/xhtml"); + }); +}); diff --git a/packages/fast-element/src/templating/template.ts b/packages/fast-element/src/templating/template.ts index a1d57fd0eb5..b4dbd88f491 100644 --- a/packages/fast-element/src/templating/template.ts +++ b/packages/fast-element/src/templating/template.ts @@ -1,6 +1,7 @@ import { Binding } from "../binding/binding.js"; import { oneTime } from "../binding/one-time.js"; import { oneWay } from "../binding/one-way.js"; +import { DOM } from "../dom.js"; import type { DOMPolicy } from "../dom-policy.js"; import { isFunction, isString, Message } from "../interfaces.js"; import type { Expression } from "../observation/observable.js"; @@ -120,6 +121,27 @@ export type TemplateValue = const noFactories = Object.create(null); +/** + * Parses html in the SVG namespace by round-tripping it through an svg element, + * which the HTML fragment parser uses to switch namespaces. The parsed nodes keep + * their namespace when the wrapper is removed. + */ +function createSVGTemplateElement(html: string, policy: DOMPolicy): HTMLTemplateElement { + const template = document.createElement("template"); + template.innerHTML = policy.createHTML(`${html}`); + + const content = template.content; + const wrapper = content.firstElementChild!; + + while (wrapper.firstChild) { + content.insertBefore(wrapper.firstChild, wrapper); + } + + content.removeChild(wrapper); + + return template; +} + /** * Inlines a template into another template. * @public @@ -203,6 +225,7 @@ export class ViewTemplate html: string | HTMLTemplateElement, factories: Record = {}, private policy?: DOMPolicy, + private isSVG: boolean = false, ) { this.html = html; this.factories = factories; @@ -214,7 +237,9 @@ export class ViewTemplate public compile() { if (this.result === null) { this.result = Compiler.compile( - this.html, + this.isSVG && isString(this.html) + ? createSVGTemplateElement(this.html, this.policy ?? DOM.policy) + : this.html, this.factories, this.policy, ); @@ -303,6 +328,7 @@ export class ViewTemplate * @param strings - The static strings to create the template with. * @param values - The dynamic values to create the template with. * @param policy - The DOMPolicy to associated with the template. + * @param isSVG - Whether the template's html must be parsed in the SVG namespace. * @returns A ViewTemplate. * @remarks * This API should not be used directly under normal circumstances because constructing @@ -315,6 +341,7 @@ export class ViewTemplate strings: string[], values: TemplateValue[], policy?: DOMPolicy, + isSVG: boolean = false, ): ViewTemplate { let html = ""; const factories: Record = Object.create(null); @@ -354,6 +381,7 @@ export class ViewTemplate html + strings[strings.length - 1], factories, policy, + isSVG, ); } } @@ -404,3 +432,30 @@ export const html: HTMLTemplateTag = (( html.partial = (html: string): InlineTemplateDirective => { return new InlineTemplateDirective(html); }; + +/** + * Transforms a template literal string into a ViewTemplate whose content is + * created in the SVG namespace. + * @param strings - The string fragments that are interpolated with the values. + * @param values - The values that are interpolated with the string fragments. + * @remarks + * Use this in place of the html helper for any template whose root nodes are SVG + * elements rendered inside an `svg` element, such as the item template of a repeat + * directive. The template must not include the `svg` element itself. + * @public + */ +export const svg = ( + strings: TemplateStringsArray, + ...values: TemplateValue[] +): ViewTemplate => { + if (Array.isArray(strings) && Array.isArray(strings.raw)) { + return ViewTemplate.create( + strings as any as string[], + values, + undefined, + /* isSVG */ true, + ); + } + + throw FAST.error(Message.directCallToHTMLTagNotAllowed); +}; diff --git a/packages/fast-element/test/main.ts b/packages/fast-element/test/main.ts index 4dc195ba11f..65328bc8da9 100644 --- a/packages/fast-element/test/main.ts +++ b/packages/fast-element/test/main.ts @@ -52,7 +52,7 @@ export { volatile } from "../src/observation/volatile.js"; export { css } from "../src/styles/css.js"; export { ElementStyles } from "../src/styles/element-styles.js"; export { ref } from "../src/templating/ref.js"; -export { html } from "../src/templating/template.js"; +export { html, svg } from "../src/templating/template.js"; export { Fake } from "../src/testing/fakes.js"; export { uniqueElementName } from "../src/testing/fixture.js"; export { ChildModel, DerivedModel, Model } from "../src/testing/models.js"; diff --git a/sites/website/src/docs/3.x/api/fast-element.md b/sites/website/src/docs/3.x/api/fast-element.md index 403198a13ba..780c2e36901 100644 --- a/sites/website/src/docs/3.x/api/fast-element.md +++ b/sites/website/src/docs/3.x/api/fast-element.md @@ -644,6 +644,17 @@ Enables observing the sorted property of an array. **_(BETA)_** Creates a reactive state value. + + + +[svg(strings, values)](../fast-element.svg/) + + + + +Transforms a template literal string into a ViewTemplate whose content is created in the SVG namespace. + + diff --git a/sites/website/src/docs/3.x/api/fast-element.svg.md b/sites/website/src/docs/3.x/api/fast-element.svg.md new file mode 100644 index 00000000000..bbad8a9da25 --- /dev/null +++ b/sites/website/src/docs/3.x/api/fast-element.svg.md @@ -0,0 +1,84 @@ +--- +id: "fast-element.svg" +title: "svg() function" +layout: 3x-api +eleventyNavigation: + key: "api3xfast-element.svg" + parent: "api3xfast-element" + title: "svg() function" +navigationOptions: + activeKey: "api3xfast-element.svg" +--- + + +[@microsoft/fast-element](../fast-element/index.html) > [svg](../fast-element.svg/index.html) + +## svg() function + +Transforms a template literal string into a ViewTemplate whose content is created in the SVG namespace. + +**Signature:** + +```typescript +svg: (strings: TemplateStringsArray, ...values: TemplateValue[]) => ViewTemplate +``` + +## Parameters + + + + +
+ +Parameter + + + + +Type + + + + +Description + + +
+ +strings + + + + +TemplateStringsArray + + + + +The string fragments that are interpolated with the values. + + +
+ +values + + + + +[TemplateValue](../fast-element.templatevalue/)<TSource, TParent>\[\] + + + + +The values that are interpolated with the string fragments. + + +
+ +**Returns:** + +[ViewTemplate](../fast-element.viewtemplate/)<TSource, TParent> + +## Remarks + +Use this in place of the html helper for any template whose root nodes are SVG elements rendered inside an `svg` element, such as the item template of a repeat directive. The template must not include the `svg` element itself. diff --git a/sites/website/src/docs/3.x/api/fast-element.viewtemplate._constructor_.md b/sites/website/src/docs/3.x/api/fast-element.viewtemplate._constructor_.md index 5c420faab62..3bd9f8b639e 100644 --- a/sites/website/src/docs/3.x/api/fast-element.viewtemplate._constructor_.md +++ b/sites/website/src/docs/3.x/api/fast-element.viewtemplate._constructor_.md @@ -20,7 +20,7 @@ Creates an instance of ViewTemplate. **Signature:** ```typescript -constructor(html: string | HTMLTemplateElement, factories?: Record, policy?: DOMPolicy | undefined); +constructor(html: string | HTMLTemplateElement, factories?: Record, policy?: DOMPolicy | undefined, isSVG?: boolean); ``` ## Parameters @@ -88,5 +88,21 @@ policy _(Optional)_ The security policy to use when compiling this template. + + + +isSVG + + + + +boolean + + + + +_(Optional)_ + + diff --git a/sites/website/src/docs/3.x/api/fast-element.viewtemplate.create.md b/sites/website/src/docs/3.x/api/fast-element.viewtemplate.create.md index 179f6868a18..d8e9e8fd39f 100644 --- a/sites/website/src/docs/3.x/api/fast-element.viewtemplate.create.md +++ b/sites/website/src/docs/3.x/api/fast-element.viewtemplate.create.md @@ -26,7 +26,7 @@ Aspect detection happens here too: the `lastAttributeNameRegex` checks whether t **Signature:** ```typescript -static create(strings: string[], values: TemplateValue[], policy?: DOMPolicy): ViewTemplate; +static create(strings: string[], values: TemplateValue[], policy?: DOMPolicy, isSVG?: boolean): ViewTemplate; ``` ## Parameters @@ -94,6 +94,22 @@ policy _(Optional)_ The DOMPolicy to associated with the template. + + + +isSVG + + + + +boolean + + + + +_(Optional)_ Whether the template's html must be parsed in the SVG namespace. + + diff --git a/sites/website/src/docs/3.x/api/fast-element.viewtemplate.md b/sites/website/src/docs/3.x/api/fast-element.viewtemplate.md index 974179c10bf..8fcd18f6fb1 100644 --- a/sites/website/src/docs/3.x/api/fast-element.viewtemplate.md +++ b/sites/website/src/docs/3.x/api/fast-element.viewtemplate.md @@ -44,7 +44,7 @@ Description -[(constructor)(html, factories, policy)](../fast-element.viewtemplate._constructor_/) +[(constructor)(html, factories, policy, isSVG)](../fast-element.viewtemplate._constructor_/) @@ -159,7 +159,7 @@ Creates an HTMLView instance based on this template definition. -[create(strings, values, policy)](../fast-element.viewtemplate.create/) +[create(strings, values, policy, isSVG)](../fast-element.viewtemplate.create/) diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate._constructor_.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate._constructor_.md index 2d035857a38..1a7a9499953 100644 --- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate._constructor_.md +++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate._constructor_.md @@ -20,7 +20,7 @@ Creates an instance of ViewTemplate. **Signature:** ```typescript -constructor(html: string | HTMLTemplateElement, factories?: Record, policy?: DOMPolicy | undefined); +constructor(html: string | HTMLTemplateElement, factories?: Record, policy?: DOMPolicy | undefined, isSVG?: boolean); ``` ## Parameters @@ -88,5 +88,21 @@ policy _(Optional)_ The security policy to use when compiling this template. + + + +isSVG + + + + +boolean + + + + +_(Optional)_ + + diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate.create.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate.create.md index c83aec32b7c..e7e0824f320 100644 --- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate.create.md +++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate.create.md @@ -26,7 +26,7 @@ Aspect detection happens here too: the `lastAttributeNameRegex` checks whether t **Signature:** ```typescript -static create(strings: string[], values: TemplateValue[], policy?: DOMPolicy): ViewTemplate; +static create(strings: string[], values: TemplateValue[], policy?: DOMPolicy, isSVG?: boolean): ViewTemplate; ``` ## Parameters @@ -94,6 +94,22 @@ policy _(Optional)_ The DOMPolicy to associated with the template. + + + +isSVG + + + + +boolean + + + + +_(Optional)_ Whether the template's html must be parsed in the SVG namespace. + + diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate.md index ea2e00ad285..06df605f05c 100644 --- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate.md +++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.viewtemplate.md @@ -44,7 +44,7 @@ Description -[(constructor)(html, factories, policy)](../fast-element.viewtemplate._constructor_/) +[(constructor)(html, factories, policy, isSVG)](../fast-element.viewtemplate._constructor_/) @@ -159,7 +159,7 @@ Creates an HTMLView instance based on this template definition. -[create(strings, values, policy)](../fast-element.viewtemplate.create/) +[create(strings, values, policy, isSVG)](../fast-element.viewtemplate.create/) diff --git a/sites/website/src/docs/3.x/resources/export-sizes.md b/sites/website/src/docs/3.x/resources/export-sizes.md index 8cc65070e6d..a18c7eb750f 100644 --- a/sites/website/src/docs/3.x/resources/export-sizes.md +++ b/sites/website/src/docs/3.x/resources/export-sizes.md @@ -19,7 +19,7 @@ Bundle sizes for `@microsoft/fast-element` exports. | Export | Minified | Gzip | Brotli | |--------|----------|------|--------| -| CDN Rollup Bundle | 78.61 KB | 23.40 KB | 20.77 KB | +| CDN Rollup Bundle | 79.08 KB | 23.51 KB | 20.88 KB | | FASTElement (@microsoft/fast-element/fast-element.js) | 23.11 KB | 7.12 KB | 6.41 KB | | Updates (@microsoft/fast-element/updates.js) | 473 B | 335 B | 290 B | | Observable (@microsoft/fast-element/observable.js) | 6.75 KB | 2.51 KB | 2.23 KB | @@ -30,11 +30,11 @@ Bundle sizes for `@microsoft/fast-element` exports. | slotted (@microsoft/fast-element/slotted.js) | 4.66 KB | 1.81 KB | 1.59 KB | | volatile (@microsoft/fast-element/volatile.js) | 6.84 KB | 2.54 KB | 2.26 KB | | when (@microsoft/fast-element/when.js) | 1.88 KB | 731 B | 589 B | -| html (@microsoft/fast-element/html.js) | 27.73 KB | 8.96 KB | 8.02 KB | +| html (@microsoft/fast-element/html.js) | 28.06 KB | 9.05 KB | 8.11 KB | | repeat (@microsoft/fast-element/repeat.js) | 31.80 KB | 10.00 KB | 9.03 KB | | css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B | -| enableHydration (@microsoft/fast-element/hydration.js) | 46.53 KB | 13.91 KB | 12.49 KB | -| declarativeTemplate (@microsoft/fast-element/declarative.js) | 62.15 KB | 19.46 KB | 17.42 KB | +| enableHydration (@microsoft/fast-element/hydration.js) | 46.86 KB | 14.02 KB | 12.59 KB | +| declarativeTemplate (@microsoft/fast-element/declarative.js) | 62.48 KB | 19.56 KB | 17.50 KB | | ArrayObserver (@microsoft/fast-element/arrays.js) | 12.55 KB | 4.46 KB | 4.03 KB | | observerMap (@microsoft/fast-element/observer-map.js) | 21.96 KB | 7.73 KB | 6.97 KB | | attributeMap (@microsoft/fast-element/attribute-map.js) | 15.31 KB | 5.41 KB | 4.88 KB |