@claspo/document-connector 16.0.2 → 16.0.4

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";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.googleFontsLoader=null;const{documentModel:o,translations:t,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(o,this.componentResolver,this.componentRegister,e,t,s,n);this.setEntryModule(i)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader;const o=e.getRootNode();return this.params.disableGoogleFonts||await this.googleFontsLoader.load(this.params.documentModel.shared.googleFonts,o),this._initializeRenderer(e,o)}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,o){return super.on(e,o)}async _initializeRenderer(e,o){var t,s,n,r;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const i=this.entryModule.init(o);i.style.display="flex";const{layoutFactoryClass:a=LayoutFactory,layoutType:c,documentModel:d}=this.params,l=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(t=null==d?void 0:d.shared)||void 0===t?void 0:t.zIndex)&&void 0!==s?s:getZIndexByLayoutType(c)}),m=a.create(Object.assign(Object.assign({},l),{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);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,o)=>{this.emit(o,e),o===DocumentConnectorEventType.CLOSE_WIDGET&&e&&"function"==typeof e&&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())}}
+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";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.googleFontsLoader=null;const{documentModel:o,translations:t,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(o,this.componentResolver,this.componentRegister,e,t,s,n);this.setEntryModule(i)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader;const o=e.getRootNode();if(!this.params.disableGoogleFonts){const e=GoogleFontsLoader.getUsedGoogleFonts(this.params.documentModel);await this.googleFontsLoader.load(e,o)}return this._initializeRenderer(e,o)}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,o){return super.on(e,o)}async _initializeRenderer(e,o){var t,s,n,r;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const i=this.entryModule.init(o);i.style.display="flex";const{layoutFactoryClass:a=LayoutFactory,layoutType:c,documentModel:d}=this.params,l=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(t=null==d?void 0:d.shared)||void 0===t?void 0:t.zIndex)&&void 0!==s?s:getZIndexByLayoutType(c)}),m=a.create(Object.assign(Object.assign({},l),{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);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,o)=>{this.emit(o,e),o===DocumentConnectorEventType.CLOSE_WIDGET&&e&&"function"==typeof e&&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())}}

package/layouts/GoogleFontsLoader.d.ts

@@ -1,4 +1,5 @@
 export default class GoogleFontsLoader {
+    static getUsedGoogleFonts(documentModel: any): any;
     loadedGoogleFonts: any[];
     testStrings: {
         latin: string;

package/layouts/GoogleFontsLoader.js

@@ -1 +1 @@
-export default class GoogleFontsLoader{constructor(){this.loadedGoogleFonts=[],this.testStrings={latin:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",cyrillic:"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя"}}async load(t,e){try{if(e=e||document,!(t||[]).length)return;const o=this._getDynamicUrlPart(t,e);if(!o||0===o.length)return;await this._addFontsLinkToDocument(o,e);const n=this._generateFontVariations(t),s=this._createFontTester(n,e);e.body.appendChild(s);const r=this._waitForAllFontsToLoad(n,e),a=new Promise((t,e)=>setTimeout(()=>e(new Error("Timeout")),2e3));await Promise.race([r,a]),s.remove()}catch(t){console.error("Error while loading fonts",t)}}cleanup(){this.loadedGoogleFonts.forEach(t=>t.remove()),this.loadedGoogleFonts=[]}_getDynamicUrlPart(t,e){let o=[];(e.fonts||[]).forEach(t=>o.push(`${t.family} ${t.weight} ${t.style}`));const n=new Set(o);return this._combineUrlDynamicPart(t,n)}_combineUrlDynamicPart(t,e){const o=[];let n=this._makeFontOptions();return t.forEach(t=>{let s="",r="";n.forEach(o=>{if(!e.has(`${t} ${o} normal`)){const t=`1,${o}`;r+=r?`;${t}`:t}if(!e.has(`${t} ${o} italic`)){const t=`0,${o}`;s+=s?`;${t}`:t}}),(s||r)&&o.push({fontFamily:t,urlPart:`&family=${t.replace(/ /g,"+")}:ital,wght@${s};${r}`})}),o}_makeFontOptions(){const t=[];for(let e=0;e<9;e++){const o=100*(e+1);t.push(o)}return t}_addFontsLinkToDocument(t,e){if(!e.head)return Promise.resolve();const o=t.map(({fontFamily:t,urlPart:o})=>new Promise((n,s)=>{const r=document.createElement("link");r.rel="stylesheet",r.href="https://fonts.googleapis.com/css2?display=swap"+o,r.onload=()=>n({fontFamily:t,success:!0}),r.onerror=()=>{console.error(`Failed to load font: ${t}`),s(new Error(`Failed to load font: ${t}`))},e.head.appendChild(r),this.loadedGoogleFonts.push(r)}));return Promise.allSettled(o)}_generateFontVariations(t){const e=[100,200,300,400,500,600,700,800,900],o=["normal","italic"],n=[];return t.forEach(t=>{e.forEach(e=>{o.forEach(o=>{n.push({family:t,weight:e,style:o,descriptor:`${o} ${e} 1em "${t}"`})})})}),n}_createFontTester(t,e){const o=e.createElement("div");return o.setAttribute("aria-hidden","true"),o.style.cssText="\n      position: fixed;\n      top: -9999px;\n      left: -9999px;\n      width: 1px;\n      height: 1px;\n      overflow: hidden;\n      visibility: hidden;\n      pointer-events: none;\n      user-select: none;\n      z-index: -1;\n    ",t.forEach(t=>{Object.entries(this.testStrings).forEach(([n,s])=>{const r=e.createElement("span");r.textContent=s,r.style.cssText=`\n          font-family: "${t.family}", sans-serif;\n          font-weight: ${t.weight};\n          font-style: ${t.style};\n          font-size: 20px;\n          display: inline-block;\n          white-space: nowrap;\n        `,r.dataset.font=`${t.family}-${t.weight}-${t.style}`,r.dataset.subset=n,o.appendChild(r)})}),o}async _waitForAllFontsToLoad(t,e){const o=[];for(let e=0;e<t.length;e+=10)o.push(t.slice(e,e+10));for(const t of o)await this._waitForFontBatchLoad(t,e)}async _waitForFontBatchLoad(t,e){const o=t.map(async t=>{try{e.fonts.check(t.descriptor)||await e.fonts.load(t.descriptor)}catch(e){console.error(`Failed to load: ${t.descriptor}`,e)}});return Promise.all(o)}}
+import{ComponentPropsExtractor}from"@claspo/renderer/document-model/ComponentPropsExtractor";import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class GoogleFontsLoader{constructor(){this.loadedGoogleFonts=[],this.testStrings={latin:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",cyrillic:"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя"}}static getUsedGoogleFonts(t){const e=t.shared.googleFonts;if(!e||0===e.length)return[];const o=new Set,s=new Set;for(const e of t.views||[])DocumentUtils.iterateDepthFirst(e,t=>{const e=ComponentPropsExtractor.extractClassesFromStyles(t);for(const t of e)t&&t.startsWith("cl-")&&s.add(t);const n=[];t.props&&t.props.adaptiveStyles&&(n.push(...t.props.adaptiveStyles.desktop||[]),n.push(...t.props.adaptiveStyles.mobile||[])),t.props&&t.props.styles&&n.push(...t.props.styles);for(const t of n)t.styleAttributes&&t.styleAttributes.fontFamily&&o.add(t.styleAttributes.fontFamily)});const n=t.shared;for(const t of s){const e=n.textClasses&&n.textClasses[t];e&&(e.styleAttributes&&e.styleAttributes.fontFamily?o.add(e.styleAttributes.fontFamily):(e.isHeader&&n.headerFontFamily&&o.add(n.headerFontFamily),!e.isHeader&&n.textFontFamily&&o.add(n.textFontFamily)))}return n.textFontFamily&&o.add(n.textFontFamily),e.filter(t=>o.has(t))}async load(t,e){try{if(e=e||document,!(t||[]).length)return;const o=this._getDynamicUrlPart(t,e);if(!o||0===o.length)return;await this._addFontsLinkToDocument(o,e);const s=this._generateFontVariations(t),n=this._createFontTester(s,e);e.body.appendChild(n);const r=this._waitForAllFontsToLoad(s,e),a=new Promise((t,e)=>setTimeout(()=>e(new Error("Timeout")),2e3));await Promise.race([r,a]),n.remove()}catch(t){console.error("Error while loading fonts",t)}}cleanup(){this.loadedGoogleFonts.forEach(t=>t.remove()),this.loadedGoogleFonts=[]}_getDynamicUrlPart(t,e){let o=[];(e.fonts||[]).forEach(t=>o.push(`${t.family} ${t.weight} ${t.style}`));const s=new Set(o);return this._combineUrlDynamicPart(t,s)}_combineUrlDynamicPart(t,e){const o=[];let s=this._makeFontOptions();return t.forEach(t=>{let n="",r="";s.forEach(o=>{if(!e.has(`${t} ${o} normal`)){const t=`1,${o}`;r+=r?`;${t}`:t}if(!e.has(`${t} ${o} italic`)){const t=`0,${o}`;n+=n?`;${t}`:t}}),(n||r)&&o.push({fontFamily:t,urlPart:`&family=${t.replace(/ /g,"+")}:ital,wght@${n};${r}`})}),o}_makeFontOptions(){const t=[];for(let e=0;e<9;e++){const o=100*(e+1);t.push(o)}return t}_addFontsLinkToDocument(t,e){if(!e.head)return Promise.resolve();const o=t.map(({fontFamily:t,urlPart:o})=>new Promise((s,n)=>{const r=document.createElement("link");r.rel="stylesheet",r.href="https://fonts.googleapis.com/css2?display=swap"+o,r.onload=()=>s({fontFamily:t,success:!0}),r.onerror=()=>{console.error(`Failed to load font: ${t}`),n(new Error(`Failed to load font: ${t}`))},e.head.appendChild(r),this.loadedGoogleFonts.push(r)}));return Promise.allSettled(o)}_generateFontVariations(t){const e=[100,200,300,400,500,600,700,800,900],o=["normal","italic"],s=[];return t.forEach(t=>{e.forEach(e=>{o.forEach(o=>{s.push({family:t,weight:e,style:o,descriptor:`${o} ${e} 1em "${t}"`})})})}),s}_createFontTester(t,e){const o=e.createElement("div");return o.setAttribute("aria-hidden","true"),o.style.cssText="\n      position: fixed;\n      top: -9999px;\n      left: -9999px;\n      width: 1px;\n      height: 1px;\n      overflow: hidden;\n      visibility: hidden;\n      pointer-events: none;\n      user-select: none;\n      z-index: -1;\n    ",t.forEach(t=>{Object.entries(this.testStrings).forEach(([s,n])=>{const r=e.createElement("span");r.textContent=n,r.style.cssText=`\n          font-family: "${t.family}", sans-serif;\n          font-weight: ${t.weight};\n          font-style: ${t.style};\n          font-size: 20px;\n          display: inline-block;\n          white-space: nowrap;\n        `,r.dataset.font=`${t.family}-${t.weight}-${t.style}`,r.dataset.subset=s,o.appendChild(r)})}),o}async _waitForAllFontsToLoad(t,e){const o=[];for(let e=0;e<t.length;e+=10)o.push(t.slice(e,e+10));for(const t of o)await this._waitForFontBatchLoad(t,e)}async _waitForFontBatchLoad(t,e){const o=t.map(async t=>{try{e.fonts.check(t.descriptor)||await e.fonts.load(t.descriptor)}catch(e){console.error(`Failed to load: ${t.descriptor}`,e)}});return Promise.all(o)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/document-connector",
-  "version": "16.0.2",
+  "version": "16.0.4",
   "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.0.0",
-    "@claspo/renderer": "18.0.1"
+    "@claspo/common": "7.0.2",
+    "@claspo/renderer": "18.0.2"
   },
   "devDependencies": {
     "concat-md": "^0.5.1",