@claspo/document-connector 16.7.19-atf1 → 16.7.19-scf2

package/StaticDocumentConnector.d.ts

@@ -3,12 +3,14 @@ import { WidgetInitConfigI } from "@claspo/common/WidgetInitConfig.interface";
 import WcResolver from '@claspo/renderer/wc-renderer/WcResolver';
 import { WcRegister } from '@claspo/renderer/wc-renderer/WcRegister';
 import GoogleFontsLoader from './layouts/GoogleFontsLoader';
+import CustomFontsLoader from './layouts/CustomFontsLoader';
 import { DocumentConnectorEventName } from './DocumentConnectorEvents.interface';
 export default class StaticDocumentConnector extends BaseDocumentConnector {
     componentRegister: WcRegister;
     componentResolver: WcResolver;
     googleFontsLoader: GoogleFontsLoader | null;
     closeSubmitPromise: Promise<boolean> | null;
+    customFontsLoader: CustomFontsLoader | null;
     constructor(params: WidgetInitConfigI);
     emit(eventName: string, value: any, params?: any): void;
     connect(containerElement: HTMLElement): Promise<any>;

package/StaticDocumentConnector.js

@@ -1 +1 @@
-import BaseDocumentConnector from"./BaseDocumentConnector";import DocumentConnectorEventType from"./DocumentConnectorEventType";import{getZIndexByLayoutType}from"./layouts/getZindex";import LayoutFactory from"./layouts/LayoutFactory";import StaticEntryModule from"@claspo/renderer/StaticEntryModule";import WcResolver from"@claspo/renderer/wc-renderer/WcResolver";import{RenderMode}from"@claspo/common/RenderMode";import{WcRegister}from"@claspo/renderer/wc-renderer/WcRegister";import GoogleFontsLoader from"./layouts/GoogleFontsLoader";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";const DIRTY_SUBMIT_STATE="dirty",SUBMITTING_SUBMIT_STATE="submitting";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.componentResolver=null,this.googleFontsLoader=null,this.closeSubmitPromise=null;const{documentModel:t,translations:o,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r,e.productKeyPrefix),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister,e.productKeyPrefix);const i=new StaticEntryModule(t,this.componentResolver,this.componentRegister,e,o,s,n);this.setEntryModule(i)}emit(e,t,o=null){e!==DocumentConnectorEventType.CLOSE_WIDGET?super.emit(e,t,o):this.handleCloseWidget(t)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader({widgetId:this.params.widgetId,siteId:this.params.siteId});const t=e.getRootNode();if(!this.params.disableGoogleFonts){const e=GoogleFontsLoader.getUsedGoogleFonts(this.params.documentModel);await this.googleFontsLoader.load(e,t)}return this._initializeRenderer(e,t)}disconnect(){var e;super.disconnect(),this.controllers[0]&&this.controllers[0].disconnect(()=>{this.entryModule&&this.entryModule.viewRouter&&this.entryModule.compositionRoot&&this.entryModule.destroy()}),this.controllers=[],null===(e=this.googleFontsLoader)||void 0===e||e.cleanup()}destroy(){this.disconnect()}on(e,t){return super.on(e,t)}async _initializeRenderer(e,t){var o,s,n,r;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const i=this.entryModule.init(t);i.style.display="flex";const{layoutFactoryClass:l=LayoutFactory,layoutType:a,documentModel:d}=this.params,c=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(o=null==d?void 0:d.shared)||void 0===o?void 0:o.zIndex)&&void 0!==s?s:getZIndexByLayoutType(a)}),m=l.create(Object.assign(Object.assign({},c),{layoutType:this.params.layoutType,widgetType:this.params.widgetType,viewIndex:0,renderMode:this.entryModule.renderMode}),this,this.entryModule.viewRouter,this.entryModule.compositionRoot.services.documentModel,this.entryModule.compositionRoot.services.resizeListener);return this.controllers.push(m),super.addPropsRequestEventListener(i),this.params.formVariantId?i.classList.add("cl-widget-"+this.params.formVariantId):i.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,t)=>{this.emit(t,e)}),m.connect(i,e,this.entryModule),(null===(r=null===(n=d.shared)||void 0===n?void 0:n.theme)||void 0===r?void 0:r.schema)&&ThemeCssVars.override(d.shared.theme.schema,m.getConnectedElement()),m.getConnectedElement()}handleCloseWidget(e){this.trySubmitOnClose();try{super.emit(DocumentConnectorEventType.CLOSE_WIDGET,e)}finally{"function"==typeof e&&e()}}trySubmitOnClose(){const e=this.params.submitOnClose||{enabled:!1,skipValidation:!0},t=this.getSubmitState();e.enabled&&!this.closeSubmitPromise&&"submitting"!==t&&"dirty"===t&&this.hasDirtyFormData()&&(this.closeSubmitPromise=Promise.resolve(this.submitOnClose()).catch(e=>(console.error(e),!1)).finally(()=>{this.closeSubmitPromise=null}))}}
+import BaseDocumentConnector from"./BaseDocumentConnector";import DocumentConnectorEventType from"./DocumentConnectorEventType";import{getZIndexByLayoutType}from"./layouts/getZindex";import LayoutFactory from"./layouts/LayoutFactory";import StaticEntryModule from"@claspo/renderer/StaticEntryModule";import WcResolver from"@claspo/renderer/wc-renderer/WcResolver";import{RenderMode}from"@claspo/common/RenderMode";import{WcRegister}from"@claspo/renderer/wc-renderer/WcRegister";import GoogleFontsLoader from"./layouts/GoogleFontsLoader";import CustomFontsLoader from"./layouts/CustomFontsLoader";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";const DIRTY_SUBMIT_STATE="dirty",SUBMITTING_SUBMIT_STATE="submitting";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.componentResolver=null,this.googleFontsLoader=null,this.closeSubmitPromise=null,this.customFontsLoader=null;const{documentModel:t,translations:o,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r,e.productKeyPrefix),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister,e.productKeyPrefix);const i=new StaticEntryModule(t,this.componentResolver,this.componentRegister,e,o,s,n);this.setEntryModule(i)}emit(e,t,o=null){e!==DocumentConnectorEventType.CLOSE_WIDGET?super.emit(e,t,o):this.handleCloseWidget(t)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader({widgetId:this.params.widgetId,siteId:this.params.siteId}),this.customFontsLoader=new CustomFontsLoader;const t=e.getRootNode(),o=CustomFontsLoader.getUsedCustomFonts(this.params.documentModel),s=[this.customFontsLoader.load(o,t)];if(!this.params.disableGoogleFonts){const e=GoogleFontsLoader.getUsedGoogleFonts(this.params.documentModel);s.push(this.googleFontsLoader.load(e,t))}return await Promise.all(s),this._initializeRenderer(e,t)}disconnect(){var e,t;super.disconnect(),this.controllers[0]&&this.controllers[0].disconnect(()=>{this.entryModule&&this.entryModule.viewRouter&&this.entryModule.compositionRoot&&this.entryModule.destroy()}),this.controllers=[],null===(e=this.googleFontsLoader)||void 0===e||e.cleanup(),null===(t=this.customFontsLoader)||void 0===t||t.cleanup()}destroy(){this.disconnect()}on(e,t){return super.on(e,t)}async _initializeRenderer(e,t){var o,s,n,r;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const i=this.entryModule.init(t);i.style.display="flex";const{layoutFactoryClass:a=LayoutFactory,layoutType:l,documentModel:d}=this.params,c=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(o=null==d?void 0:d.shared)||void 0===o?void 0:o.zIndex)&&void 0!==s?s:getZIndexByLayoutType(l)}),m=a.create(Object.assign(Object.assign({},c),{layoutType:this.params.layoutType,widgetType:this.params.widgetType,viewIndex:0,renderMode:this.entryModule.renderMode}),this,this.entryModule.viewRouter,this.entryModule.compositionRoot.services.documentModel,this.entryModule.compositionRoot.services.resizeListener);return this.controllers.push(m),super.addPropsRequestEventListener(i),this.params.formVariantId?i.classList.add("cl-widget-"+this.params.formVariantId):i.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,t)=>{this.emit(t,e)}),m.connect(i,e,this.entryModule),(null===(r=null===(n=d.shared)||void 0===n?void 0:n.theme)||void 0===r?void 0:r.schema)&&ThemeCssVars.override(d.shared.theme.schema,m.getConnectedElement()),m.getConnectedElement()}handleCloseWidget(e){this.trySubmitOnClose();try{super.emit(DocumentConnectorEventType.CLOSE_WIDGET,e)}finally{"function"==typeof e&&e()}}trySubmitOnClose(){const e=this.params.submitOnClose||{enabled:!1,skipValidation:!0},t=this.getSubmitState();e.enabled&&!this.closeSubmitPromise&&"submitting"!==t&&"dirty"===t&&this.hasDirtyFormData()&&(this.closeSubmitPromise=Promise.resolve(this.submitOnClose()).catch(e=>(console.error(e),!1)).finally(()=>{this.closeSubmitPromise=null}))}}

package/layouts/BaseFontsLoader.d.ts

@@ -0,0 +1,16 @@
+export interface FontsLoaderOptionsI {
+    widgetId?: number;
+    siteId?: string;
+}
+export default class BaseFontsLoader {
+    widgetId?: number;
+    siteId?: string;
+    ownerId: string;
+    protected htmlDocumentObject?: Document;
+    protected loadedStylesheetElements: HTMLElement[];
+    constructor(options?: FontsLoaderOptionsI);
+    protected getOwnerIdPrefix(): string;
+    protected setHtmlDocumentObject(htmlDocumentObject?: Document): Document;
+    protected addStylesheetLinks(urls: string[], htmlDocumentObject: Document): Promise<void>;
+    protected cleanupStylesheetElements(): void;
+}

package/layouts/BaseFontsLoader.js

@@ -0,0 +1 @@
+let nextFontsLoaderOwnerId=1;export default class BaseFontsLoader{constructor(e){this.loadedStylesheetElements=[],e=e||{},this.widgetId=e.widgetId,this.siteId=e.siteId,this.ownerId=`${this.getOwnerIdPrefix()}-${nextFontsLoaderOwnerId++}`}getOwnerIdPrefix(){return"fonts-loader"}setHtmlDocumentObject(e){return this.htmlDocumentObject=e||document,this.htmlDocumentObject}async addStylesheetLinks(e,t){if(!t.head||!(e||[]).length)return;const s=new Set(Array.from(t.querySelectorAll('link[rel="stylesheet"]')).map(e=>e.href)),r=Array.from(new Set(e.filter(e=>e&&!s.has(e)))).map(e=>{const s=document.createElement("link");s.rel="stylesheet",s.href=e;const r=new Promise((t,r)=>{s.onload=()=>t({url:e,success:!0}),s.onerror=()=>r(new Error(`Failed to load font stylesheet: ${e}`))}),n=new Promise((t,s)=>setTimeout(()=>s(new Error(`Timeout while loading font stylesheet: ${e}`)),2e3));return t.head.appendChild(s),this.loadedStylesheetElements.push(s),Promise.race([r,n])});await Promise.allSettled(r)}cleanupStylesheetElements(){this.loadedStylesheetElements.forEach(e=>e.remove()),this.loadedStylesheetElements=[]}}

package/layouts/CustomFontsLoader.d.ts

@@ -0,0 +1,9 @@
+import { ClDocumentCustomFontResourceI } from '@claspo/common/document/Document.interface';
+import BaseFontsLoader, { FontsLoaderOptionsI } from './BaseFontsLoader';
+export default class CustomFontsLoader extends BaseFontsLoader {
+    static getUsedCustomFonts(documentModel: any): ClDocumentCustomFontResourceI[];
+    constructor(options?: FontsLoaderOptionsI);
+    protected getOwnerIdPrefix(): string;
+    load(customFonts: ClDocumentCustomFontResourceI[], htmlDocumentObject?: Document): Promise<void>;
+    cleanup(): void;
+}

package/layouts/CustomFontsLoader.js

@@ -0,0 +1 @@
+import BaseFontsLoader from"./BaseFontsLoader";import{getUsedFontFamilies}from"./UsedFontFamiliesResolver";import{extractFirstCssFontFamily,normalizeFontFamilyName}from"./google-fonts/GoogleFontsUtils";export default class CustomFontsLoader extends BaseFontsLoader{static getUsedCustomFonts(t){const e=t.shared.customFontResources||[];if(!e.length)return[];const o=getUsedFontFamilies(t),s=new Set(Array.from(o).map(t=>normalizeFontFamilyName(extractFirstCssFontFamily(t))));return e.filter(t=>{if(!(null==t?void 0:t.fontFamily)||!(null==t?void 0:t.url))return!1;const e=normalizeFontFamilyName(extractFirstCssFontFamily(t.fontFamily));return s.has(e)})}constructor(t){super(t)}getOwnerIdPrefix(){return"custom-fonts-loader"}async load(t,e){try{const o=this.setHtmlDocumentObject(e);if(!(t||[]).length)return;const s=Array.from(new Set(t.map(t=>t.url).filter(Boolean)));await this.addStylesheetLinks(s,o)}catch(t){console.error("Error while loading custom fonts",t)}}cleanup(){this.cleanupStylesheetElements(),this.htmlDocumentObject=void 0}}

package/layouts/GoogleFontsLoader.d.ts

@@ -1,11 +1,9 @@
 import { GoogleFontInput, GoogleFontsLoaderOptionsI, ResolvedGoogleFontRequestI } from './google-fonts/GoogleFonts.types';
-export default class GoogleFontsLoader {
+import BaseFontsLoader from './BaseFontsLoader';
+export default class GoogleFontsLoader extends BaseFontsLoader {
     static getUsedGoogleFonts(documentModel: any): ResolvedGoogleFontRequestI[];
-    widgetId?: number;
-    siteId?: string;
-    ownerId: string;
-    htmlDocumentObject?: Document;
     constructor(options?: GoogleFontsLoaderOptionsI);
+    protected getOwnerIdPrefix(): string;
     load(fonts: GoogleFontInput[], htmlDocumentObject?: Document): Promise<void>;
     cleanup(): void;
 }

package/layouts/GoogleFontsLoader.js

@@ -1 +1 @@
-import GoogleFontsRegistry from"./google-fonts/GoogleFontsRegistry";import{getUsedGoogleFonts}from"./google-fonts/GoogleFontsUsageExtractor";let nextGoogleFontsLoaderOwnerId=1;export default class GoogleFontsLoader{static getUsedGoogleFonts(t){return getUsedGoogleFonts(t)}constructor(t){t=t||{},this.widgetId=t.widgetId,this.siteId=t.siteId,this.ownerId="google-fonts-loader-"+nextGoogleFontsLoaderOwnerId++}async load(t,o){this.htmlDocumentObject=o||document,await GoogleFontsRegistry.loadFonts({ownerId:this.ownerId,document:this.htmlDocumentObject,fonts:t,context:{widgetId:this.widgetId,siteId:this.siteId}})}cleanup(){GoogleFontsRegistry.releaseOwner({ownerId:this.ownerId,document:this.htmlDocumentObject}),this.htmlDocumentObject=void 0}}
+import GoogleFontsRegistry from"./google-fonts/GoogleFontsRegistry";import{getUsedGoogleFonts}from"./google-fonts/GoogleFontsUsageExtractor";import BaseFontsLoader from"./BaseFontsLoader";export default class GoogleFontsLoader extends BaseFontsLoader{static getUsedGoogleFonts(t){return getUsedGoogleFonts(t)}constructor(t){super(t)}getOwnerIdPrefix(){return"google-fonts-loader"}async load(t,o){this.htmlDocumentObject=this.setHtmlDocumentObject(o),await GoogleFontsRegistry.loadFonts({ownerId:this.ownerId,document:this.htmlDocumentObject,fonts:t,context:{widgetId:this.widgetId,siteId:this.siteId}})}cleanup(){GoogleFontsRegistry.releaseOwner({ownerId:this.ownerId,document:this.htmlDocumentObject}),this.htmlDocumentObject=void 0}}

package/layouts/UsedFontFamiliesResolver.d.ts

@@ -0,0 +1 @@
+export declare function getUsedFontFamilies(documentModel: any): Set<string>;

package/layouts/UsedFontFamiliesResolver.js

@@ -0,0 +1 @@
+import DocumentUtils from"@claspo/common/document/DocumentUtils";import{getEnabledStyleEntries,splitClassNames}from"./google-fonts/GoogleFontsUsageExtractor";export function getUsedFontFamilies(t){const e=new Set,s=new Set;for(const o of t.views||[])DocumentUtils.iterateDepthFirst(o,t=>{const o=getEnabledStyleEntries(t);for(const t of o){if(t.classes)for(const e of splitClassNames(t.classes))e&&e.startsWith("cl-")&&s.add(e);t.styleAttributes&&t.styleAttributes.fontFamily&&e.add(t.styleAttributes.fontFamily)}});const o=t.shared;for(const t of s){const s=o.textClasses&&o.textClasses[t];s&&(s.styleAttributes&&s.styleAttributes.fontFamily?e.add(s.styleAttributes.fontFamily):(s.isHeader&&o.headerFontFamily&&e.add(o.headerFontFamily),!s.isHeader&&o.textFontFamily&&e.add(o.textFontFamily)))}return o.textFontFamily&&e.add(o.textFontFamily),e}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/document-connector",
-  "version": "16.7.19-atf1",
+  "version": "16.7.19-scf2",
   "scripts": {
     "test": "jest --no-cache --coverage",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
@@ -14,8 +14,8 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@claspo/common": "7.3.0-atf1",
-    "@claspo/renderer": "18.7.9-atf1"
+    "@claspo/common": "7.3.0-scf2",
+    "@claspo/renderer": "18.7.9-scf2"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",