@tylertech/forge-core - npm Package Compare versions

Comparing version 3.0.1 to 3.1.0

dist/custom-elements/component-utils.d.ts

@@ -47,7 +47,7 @@ /**
  * @param {string} elementName The name of the element the shadow root is to be attached to.
- * @param {string} template The shadow root template HTML string.
+ * @param {string | HTMLTemplateElement} template The shadow root template HTML string or element.
  * @param {string | string[]} styles The shadow root styles string to be encapsulated by this shadow root.
  * @param {boolean} [delegatesFocus=false] Should the component delegate focus.
  */
-export declare function attachShadowTemplate<T extends HTMLElement>(componentInstance: T, template: string, styles?: string | string[], delegatesFocus?: boolean): void;
+export declare function attachShadowTemplate<T extends HTMLElement>(componentInstance: T, template: string | HTMLTemplateElement, styles?: string | string[], delegatesFocus?: boolean): void;
 /**
@@ -57,6 +57,6 @@ * Replaces the template of an existing shadow root with the provided template.
  * @param {string} elementName The name of the element the shadow root is to be attached to.
- * @param {string} template The shadow root template HTML string.
+ * @param {string | HTMLTemplateElement} template The shadow root template HTML string or element.
  * @param {string | string[]} styles The shadow root styles string to be encapsulated by this shadow root.
  */
-export declare function replaceShadowTemplate<T extends HTMLElement>(componentInstance: T, template: string, styles?: string | string[]): void;
+export declare function replaceShadowTemplate<T extends HTMLElement>(componentInstance: T, template: string | HTMLTemplateElement, styles?: string | string[]): void;
 /**
@@ -72,5 +72,7 @@ * Creates and prepares an HTML template element for rendering within a shadow root.
  * @param {T} componentInstance A component instance.
- * @param {HTMLTemplateElement} templateElement A template element to be cloned.
+ * @param {string | HTMLTemplateElement} template A template string or template element to be cloned.
  */
-export declare function setShadowTemplate<T extends HTMLElement>(componentInstance: T, templateElement: HTMLTemplateElement): void;
+export declare function setShadowTemplate<T extends HTMLElement>(componentInstance: T, template: string | HTMLTemplateElement, { force }?: {
+    force: boolean;
+}): void;
 /**
@@ -86,5 +88,5 @@ * Applies styles to the shadow root of the provided element instance.
 /**
- * Reapplies styles to the shadow root of the provided element instance. This function was
+ * Re-applies styles to the shadow root of the provided element instance. This function is
  * intended to be called after an element has been adopted by a new document to reconstruct the
- * adopted stylesheet instances within the context of the new document.
+ * adopted stylesheet instances within the context (view) of the new document.
  *
@@ -91,0 +93,0 @@ * @param componentInstance The component instance to reapply styles to.

dist/custom-elements/component-utils.js

 import { replaceElement, isArray, removeAllChildren, walkUpUntil } from '../utils';
-import { CUSTOM_ELEMENT_CSS_PROPERTY, CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, CUSTOM_ELEMENT_NAME_PROPERTY, CUSTOM_ELEMENT_STYLESHEETS_PROPERTY, supportsConstructableStyleSheets } from './constants';
+import { CUSTOM_ELEMENT_CSS_PROPERTY, CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, CUSTOM_ELEMENT_NAME_PROPERTY, CUSTOM_ELEMENT_STYLESHEETS_PROPERTY, CUSTOM_ELEMENT_TEMPLATE_PROPERTY, supportsConstructableStyleSheets } from './constants';
 /**
@@ -84,3 +84,3 @@ * Recursively defines a component as a custom elements and all of its dependencies.
  * @param {string} elementName The name of the element the shadow root is to be attached to.
- * @param {string} template The shadow root template HTML string.
+ * @param {string | HTMLTemplateElement} template The shadow root template HTML string or element.
  * @param {string | string[]} styles The shadow root styles string to be encapsulated by this shadow root.
@@ -90,3 +90,2 @@ * @param {boolean} [delegatesFocus=false] Should the component delegate focus.
 export function attachShadowTemplate(componentInstance, template, styles, delegatesFocus = false) {
-    const templateElement = prepareShadowTemplate(template);
     componentInstance.attachShadow({ mode: 'open', delegatesFocus });
@@ -96,3 +95,3 @@ if (styles) {
     }
-    setShadowTemplate(componentInstance, templateElement);
+    setShadowTemplate(componentInstance, template);
 }
@@ -103,3 +102,3 @@ /**
  * @param {string} elementName The name of the element the shadow root is to be attached to.
- * @param {string} template The shadow root template HTML string.
+ * @param {string | HTMLTemplateElement} template The shadow root template HTML string or element.
  * @param {string | string[]} styles The shadow root styles string to be encapsulated by this shadow root.
@@ -111,3 +110,2 @@ */
     }
-    const templateElement = prepareShadowTemplate(template);
     if (componentInstance.shadowRoot.children.length) {
@@ -119,3 +117,3 @@ removeAllChildren(componentInstance.shadowRoot);
     }
-    setShadowTemplate(componentInstance, templateElement);
+    setShadowTemplate(componentInstance, template, { force: true });
 }
@@ -148,6 +146,12 @@ /**
  * @param {T} componentInstance A component instance.
- * @param {HTMLTemplateElement} templateElement A template element to be cloned.
+ * @param {string | HTMLTemplateElement} template A template string or template element to be cloned.
  */
-export function setShadowTemplate(componentInstance, templateElement) {
-    componentInstance.shadowRoot.appendChild(templateElement.content.cloneNode(true));
+export function setShadowTemplate(componentInstance, template, { force } = { force: false }) {
+    const ctor = componentInstance.constructor;
+    if (force || !ctor[CUSTOM_ELEMENT_TEMPLATE_PROPERTY]) {
+        const templateElement = template instanceof HTMLTemplateElement ? template : parseTemplateString(template);
+        ctor[CUSTOM_ELEMENT_TEMPLATE_PROPERTY] = templateElement;
+    }
+    const resolvedTemplate = ctor[CUSTOM_ELEMENT_TEMPLATE_PROPERTY];
+    componentInstance.shadowRoot.appendChild(resolvedTemplate.content.cloneNode(true));
 }
@@ -197,5 +201,5 @@ /**
 /**
- * Reapplies styles to the shadow root of the provided element instance. This function was
+ * Re-applies styles to the shadow root of the provided element instance. This function is
  * intended to be called after an element has been adopted by a new document to reconstruct the
- * adopted stylesheet instances within the context of the new document.
+ * adopted stylesheet instances within the context (view) of the new document.
  *
@@ -207,9 +211,8 @@ * @param componentInstance The component instance to reapply styles to.
         !componentInstance.shadowRoot ||
-        !componentInstance.constructor[CUSTOM_ELEMENT_CSS_PROPERTY]) {
+        !componentInstance.constructor[CUSTOM_ELEMENT_CSS_PROPERTY] ||
+        !componentInstance.ownerDocument.defaultView) {
         return;
     }
-    const cssText = componentInstance.constructor[CUSTOM_ELEMENT_CSS_PROPERTY];
-    const context = componentInstance.ownerDocument.defaultView ?? window;
-    const sheet = new context.CSSStyleSheet();
-    sheet.replaceSync(cssText);
+    const sheet = new componentInstance.ownerDocument.defaultView.CSSStyleSheet();
+    sheet.replaceSync(componentInstance.constructor[CUSTOM_ELEMENT_CSS_PROPERTY]);
     componentInstance.shadowRoot.adoptedStyleSheets = [sheet];
@@ -216,0 +219,0 @@ }

dist/custom-elements/constants.d.ts

 export declare const CUSTOM_ELEMENT_NAME_PROPERTY: unique symbol;
 export declare const CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY: unique symbol;
+export declare const CUSTOM_ELEMENT_TEMPLATE_PROPERTY: unique symbol;
 export declare const CUSTOM_ELEMENT_CSS_PROPERTY: unique symbol;
@@ -4,0 +5,0 @@ export declare const CUSTOM_ELEMENT_STYLESHEETS_PROPERTY: unique symbol;

dist/custom-elements/constants.js

 export const CUSTOM_ELEMENT_NAME_PROPERTY = Symbol('Forge custom element tag name');
 export const CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY = Symbol('Forge custom element dependencies');
+export const CUSTOM_ELEMENT_TEMPLATE_PROPERTY = Symbol('Forge custom element parsed template');
 export const CUSTOM_ELEMENT_CSS_PROPERTY = Symbol('Forge custom element CSS text');
@@ -4,0 +5,0 @@ export const CUSTOM_ELEMENT_STYLESHEETS_PROPERTY = Symbol('Forge custom element CSSStyleSheet instances');

package.json

 {
   "name": "@tylertech/forge-core",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "A library of core web utilities that support Tyler Forge™ based libraries.",
@@ -5,0 +5,0 @@ "author": "Tyler Technologies, Inc.",

No alert changes

Improved metrics

Total package byte prevSize

172027

0.43%

Lines of code

4048

0.17%

No dependency changes