@claspo/renderer 17.0.3-theme.30 → 17.0.3-theme.32

package/StaticEntryModule.js

@@ -1 +1 @@
-import CompositionRoot from"./CompositionRoot";import ViewRouter from"./ViewRouter";import TranslateUtils from"./i18n/TranslateUtils";import{DocumentModelUpdateType}from"./document-model/DocumentModelService";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";import wcStaticDecorator from"./wc-renderer/decorators/wcStaticDecorator";import{RenderMode}from"@claspo/common/RenderMode";export default class StaticEntryModule{constructor(e,o,t,i,s,r,n){this.renderMode=RenderMode.STATIC,this.componentResolver=o,this.componentRegister=t,this.config=Object.assign(Object.assign({},i),{renderMode:this.renderMode}),this.documentJson=e,this.translations=s,this.compositionRoot=null,this.viewRenderer=null,this.viewRouter=null,this.trackingService=r||{send:()=>{},trackClick:()=>{},trackTargetAction:()=>{}},this.layoutType=n,this.componentFactory=null,t.register(wcStaticDecorator,this.renderMode)}init(e){var o;const t=e||document;this.documentJson=TranslateUtils.applyTranslationObjectToComponentsIfNeeded(JSON.parse(JSON.stringify(this.documentJson)),this.componentResolver.getComponentManifests(),this.translations);const i=new CompositionRoot(this.documentJson,this.config,this.trackingService,null,"",this.layoutType,this.renderMode,this.componentRegister,t),s=new ViewRouter(i.services.eventEmitter,i.services.documentModel,i.services.viewRenderer,this.config&&this.config.optionalDocumentStyles,i.services);i.services.viewRouter=s,this.compositionRoot=i,this.viewRenderer=i.services.viewRenderer,this.componentFactory=i.services.componentFactory,this.viewRouter=s;const r=null===(o=this.compositionRoot.services.documentModel.getShared().theme)||void 0===o?void 0:o.schema;return Promise.resolve().then(()=>ThemeCssVars.override(r,this.viewRouter.getDocumentContainer())),s.start(this.config.viewIndex)}destroy(){var e,o;null===(e=this.viewRouter)||void 0===e||e.destroy(),null===(o=this.compositionRoot)||void 0===o||o.destroy()}performAction(e,o){var t;const i=this.compositionRoot.services.documentService.handleModelUpdate(e,o);switch(e){case DocumentModelUpdateType.THEME_UPDATE:{const e=null===(t=this.compositionRoot.services.documentModel.getShared().theme)||void 0===t?void 0:t.schema;ThemeCssVars.override(e,this.viewRouter.getDocumentContainer());break}}return i}listenAction(e,o){this.compositionRoot.services.eventEmitter.on(e,(e,t)=>{o(e,t)})}}
+import CompositionRoot from"./CompositionRoot";import ViewRouter from"./ViewRouter";import TranslateUtils from"./i18n/TranslateUtils";import{DocumentModelUpdateType}from"./document-model/DocumentModelService";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";import wcStaticDecorator from"./wc-renderer/decorators/wcStaticDecorator";import{RenderMode}from"@claspo/common/RenderMode";import CssVarsOperations from"@claspo/common/element/CssVarsOperations";export default class StaticEntryModule{constructor(e,o,t,s,i,r,n){this.renderMode=RenderMode.STATIC,this.componentResolver=o,this.componentRegister=t,this.config=Object.assign(Object.assign({},s),{renderMode:this.renderMode}),this.documentJson=e,this.translations=i,this.compositionRoot=null,this.viewRenderer=null,this.viewRouter=null,this.trackingService=r||{send:()=>{},trackClick:()=>{},trackTargetAction:()=>{}},this.layoutType=n,this.componentFactory=null,t.register(wcStaticDecorator,this.renderMode)}init(e){var o;const t=e||document;this.documentJson=TranslateUtils.applyTranslationObjectToComponentsIfNeeded(JSON.parse(JSON.stringify(this.documentJson)),this.componentResolver.getComponentManifests(),this.translations);const s=new CompositionRoot(this.documentJson,this.config,this.trackingService,null,"",this.layoutType,this.renderMode,this.componentRegister,t),i=new ViewRouter(s.services.eventEmitter,s.services.documentModel,s.services.viewRenderer,this.config&&this.config.optionalDocumentStyles,s.services);s.services.viewRouter=i,this.compositionRoot=s,this.viewRenderer=s.services.viewRenderer,this.componentFactory=s.services.componentFactory,this.viewRouter=i;const r=this.compositionRoot.services.documentModel.getShared(),n=r.cssVars,c=null===(o=r.theme)||void 0===o?void 0:o.schema;return Promise.resolve().then(()=>{const e=this.viewRouter.getDocumentContainer();CssVarsOperations.override(n,e),ThemeCssVars.override(c,e)}),i.start(this.config.viewIndex)}destroy(){var e,o;null===(e=this.viewRouter)||void 0===e||e.destroy(),null===(o=this.compositionRoot)||void 0===o||o.destroy()}performAction(e,o){var t;const s=this.compositionRoot.services.documentService.handleModelUpdate(e,o);switch(e){case DocumentModelUpdateType.THEME_UPDATE:{const e=null===(t=this.compositionRoot.services.documentModel.getShared().theme)||void 0===t?void 0:t.schema;ThemeCssVars.override(e,this.viewRouter.getDocumentContainer());break}}return s}listenAction(e,o){this.compositionRoot.services.eventEmitter.on(e,(e,t)=>{o(e,t)})}}

package/UpdatingEntryModule.js

@@ -1 +1 @@
-import CompositionRoot from"./CompositionRoot";import{DocumentModelUpdateType}from"./document-model/DocumentModelService";import DocumentUtils from"@claspo/common/document/DocumentUtils";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";import DragEventListener from"./renderer/DragEventListener";import{RenderMode}from"@claspo/common/RenderMode";import wcUpdatingDecorator from"./wc-renderer/decorators/wcUpdatingDecorator";import{asyncActionEmitter}from"./action/asyncAction";export default class UpdatingEntryModule{constructor(e,o,t,i,s={},n){this.renderMode=RenderMode.UPDATING,this.documentJson=JSON.parse(JSON.stringify(e)),this.componentResolver=o,this.componentRegister=t,this.componentCommonStyles=i,this.config=Object.assign(Object.assign({},s),{renderMode:this.renderMode}),this.compositionRoot=null,this.viewRenderer=null,this.viewComponents=[],this.layoutType=n,t.register(wcUpdatingDecorator,this.renderMode)}init(e){const o=new CompositionRoot(this.documentJson,this.config,{send:()=>{}},e,this.componentCommonStyles,this.layoutType,this.renderMode,this.componentRegister,document);return this.compositionRoot=o,this.viewRenderer=o.services.viewRenderer,this.componentFactory=o.services.componentFactory,this.dragEventListener=new DragEventListener(this.compositionRoot.services.eventEmitter,this.compositionRoot.services.documentModel),this.viewComponents=this.compositionRoot.services.documentModel.getViews().map((e,o)=>this.viewRenderer.render(e,o,this.config.renderMode)),this.viewComponents.forEach(e=>{var o;const t=null===(o=this.compositionRoot.services.documentModel.getShared().theme)||void 0===o?void 0:o.schema;ThemeCssVars.override(t,e)}),this.viewComponents}destroy(){var e,o;this.viewComponents.forEach(e=>e.remove()),null===(e=this.dragEventListener)||void 0===e||e.destroy(),null===(o=this.compositionRoot)||void 0===o||o.destroy()}performAction(e,o){var t;switch(e){case DocumentModelUpdateType.COMPONENT_REMOVE:case DocumentModelUpdateType.COMPONENT_MOVE:case DocumentModelUpdateType.COMPONENT_INSERT:case DocumentModelUpdateType.COMPONENT_PROPS_UPDATE:case DocumentModelUpdateType.COMPONENT_UPDATE:case DocumentModelUpdateType.MOBILE_BREAKPOINT_UPDATE:case DocumentModelUpdateType.ENVIRONMENT_UPDATE:case DocumentModelUpdateType.TEXT_CLASS_ADDED:case DocumentModelUpdateType.TEXT_CLASS_UPDATED:case DocumentModelUpdateType.TEXT_CLASS_REMOVED:case DocumentModelUpdateType.HEADER_FONT_FAMILY_UPDATE:case DocumentModelUpdateType.TEXT_FONT_FAMILY_UPDATE:case DocumentModelUpdateType.SHARED_UPDATE:return asyncActionEmitter(this.compositionRoot.services.eventEmitter.emit.bind(this.compositionRoot.services.eventEmitter))(this.compositionRoot.services.documentService.handleModelUpdate.bind(this.compositionRoot.services.documentService),e)(e,o);case DocumentModelUpdateType.THEME_UPDATE:{const i=o.schema||(null===(t=this.compositionRoot.services.documentModel.getShared().theme)||void 0===t?void 0:t.schema);return this.viewComponents.forEach(e=>{ThemeCssVars.override(i,e)}),asyncActionEmitter(this.compositionRoot.services.eventEmitter.emit.bind(this.compositionRoot.services.eventEmitter))(this.compositionRoot.services.documentService.handleModelUpdate.bind(this.compositionRoot.services.documentService),e)(e,o)}default:this.compositionRoot.services.eventEmitter.emit(e,o)}}listenAction(e,o){this.compositionRoot.services.eventEmitter.on(e,(e,t)=>{o(e,t)})}getHostElementById(e){const o=DocumentUtils.getNodeById(this.viewComponents.map(e=>e.getModel()),e);return o&&o.componentRef}getHostElementByPath(e){const o=DocumentUtils.getNodeByPath(this.viewComponents.map(e=>e.getModel()),e);return o&&o.componentRef}getContextRecordsMap(){var e;return(null===(e=this.compositionRoot)||void 0===e?void 0:e.services.context.getRecordsMap())||{}}listenContextAction(e,o){this.compositionRoot.services.context.on(e,(e,t)=>{o(e,t)})}}
+import CompositionRoot from"./CompositionRoot";import{DocumentModelUpdateType}from"./document-model/DocumentModelService";import DocumentUtils from"@claspo/common/document/DocumentUtils";import DragEventListener from"./renderer/DragEventListener";import{RenderMode}from"@claspo/common/RenderMode";import wcUpdatingDecorator from"./wc-renderer/decorators/wcUpdatingDecorator";import{asyncActionEmitter}from"./action/asyncAction";import CssVarsOperations from"@claspo/common/element/CssVarsOperations";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";export default class UpdatingEntryModule{constructor(e,o,t,s,i={},n){this.renderMode=RenderMode.UPDATING,this.documentJson=JSON.parse(JSON.stringify(e)),this.componentResolver=o,this.componentRegister=t,this.componentCommonStyles=s,this.config=Object.assign(Object.assign({},i),{renderMode:this.renderMode}),this.compositionRoot=null,this.viewRenderer=null,this.viewComponents=[],this.layoutType=n,t.register(wcUpdatingDecorator,this.renderMode)}init(e){const o=new CompositionRoot(this.documentJson,this.config,{send:()=>{}},e,this.componentCommonStyles,this.layoutType,this.renderMode,this.componentRegister,document);this.compositionRoot=o,this.viewRenderer=o.services.viewRenderer,this.componentFactory=o.services.componentFactory,this.dragEventListener=new DragEventListener(this.compositionRoot.services.eventEmitter,this.compositionRoot.services.documentModel),this.viewComponents=this.compositionRoot.services.documentModel.getViews().map((e,o)=>this.viewRenderer.render(e,o,this.config.renderMode));const t=this.compositionRoot.services.documentModel.getShared();return this.viewComponents.forEach(e=>{var o;const s=t.cssVars,i=null===(o=t.theme)||void 0===o?void 0:o.schema;CssVarsOperations.override(s,e),ThemeCssVars.override(i,e)}),this.viewComponents}destroy(){var e,o;this.viewComponents.forEach(e=>e.remove()),null===(e=this.dragEventListener)||void 0===e||e.destroy(),null===(o=this.compositionRoot)||void 0===o||o.destroy()}performAction(e,o){var t;switch(e){case DocumentModelUpdateType.COMPONENT_REMOVE:case DocumentModelUpdateType.COMPONENT_MOVE:case DocumentModelUpdateType.COMPONENT_INSERT:case DocumentModelUpdateType.COMPONENT_PROPS_UPDATE:case DocumentModelUpdateType.COMPONENT_UPDATE:case DocumentModelUpdateType.MOBILE_BREAKPOINT_UPDATE:case DocumentModelUpdateType.ENVIRONMENT_UPDATE:case DocumentModelUpdateType.TEXT_CLASS_ADDED:case DocumentModelUpdateType.TEXT_CLASS_UPDATED:case DocumentModelUpdateType.TEXT_CLASS_REMOVED:case DocumentModelUpdateType.HEADER_FONT_FAMILY_UPDATE:case DocumentModelUpdateType.TEXT_FONT_FAMILY_UPDATE:case DocumentModelUpdateType.SHARED_UPDATE:return asyncActionEmitter(this.compositionRoot.services.eventEmitter.emit.bind(this.compositionRoot.services.eventEmitter))(this.compositionRoot.services.documentService.handleModelUpdate.bind(this.compositionRoot.services.documentService),e)(e,o);case DocumentModelUpdateType.THEME_UPDATE:{const s=o.schema||(null===(t=this.compositionRoot.services.documentModel.getShared().theme)||void 0===t?void 0:t.schema);return this.viewComponents.forEach(e=>{ThemeCssVars.override(s,e)}),asyncActionEmitter(this.compositionRoot.services.eventEmitter.emit.bind(this.compositionRoot.services.eventEmitter))(this.compositionRoot.services.documentService.handleModelUpdate.bind(this.compositionRoot.services.documentService),e)(e,o)}default:this.compositionRoot.services.eventEmitter.emit(e,o)}}listenAction(e,o){this.compositionRoot.services.eventEmitter.on(e,(e,t)=>{o(e,t)})}getHostElementById(e){const o=DocumentUtils.getNodeById(this.viewComponents.map(e=>e.getModel()),e);return o&&o.componentRef}getHostElementByPath(e){const o=DocumentUtils.getNodeByPath(this.viewComponents.map(e=>e.getModel()),e);return o&&o.componentRef}getContextRecordsMap(){var e;return(null===(e=this.compositionRoot)||void 0===e?void 0:e.services.context.getRecordsMap())||{}}listenContextAction(e,o){this.compositionRoot.services.context.on(e,(e,t)=>{o(e,t)})}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/renderer",
-  "version": "17.0.3-theme.30",
+  "version": "17.0.3-theme.32",
   "scripts": {
     "dev": " tsc --project tsconfig.json --watch",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
@@ -14,7 +14,7 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@claspo/common": "6.0.8-theme.30",
+    "@claspo/common": "6.0.8-theme.31",
     "@testing-library/dom": "^10.4.0"
   },
   "devDependencies": {

package/renderer/style/ColorSchemaListener.js

@@ -1 +1 @@
-import{DocumentModelUpdateType}from"../../document-model/DocumentModelService";import ErrorLogger from"../../error/ErrorLogger";import{DefaultSchemaTokens}from"@claspo/common/document/Document.interface";import{toCssVarToken}from"@claspo/common/theme/theme.utils";export default class ColorSchemaListener{constructor(e,t,o,n,i,s){this.hostElement=t,this.documentModel=e,this.getSharedCb=o,this.getPropsCb=n,this.getEnvCb=i,this.httpClient=s,this.subscription=null,this.envUrlMaps={desktop:new Map,mobile:new Map}}parseBackground(e){const t=String(e||"");if(t.includes("url")){const[e,o]=t.split("(")[1].split(")");return{url:e.replace(/['"]+/g,""),positionOptions:o.replace(";","")}}return{url:null,positionOptions:null}}apply(e){const t=this.getPropsCb();return t.backgroundDynamicInlineSVGElements[e].forEach(o=>{var n,i,s,r,l;const a=null===(i=null===(n=t.adaptiveStyles)||void 0===n?void 0:n[e])||void 0===i?void 0:i.find(e=>e.element===o),u=(null===(s=t.styles)||void 0===s?void 0:s.find(e=>e.element===o))||{},c=(null===(r=null==u?void 0:u.styleAttributes)||void 0===r?void 0:r.background)||(null===(l=null==a?void 0:a.styleAttributes)||void 0===l?void 0:l.background),p=this.parseBackground(c);p.url&&this.envUrlMaps[e].set(o,{originalSVGResourceURL:p.url,inlineSvgString:null,positionOptions:p.positionOptions})}),Promise.all([...this.envUrlMaps[e].entries()].map(([t,o])=>this.httpClient.execute(o.originalSVGResourceURL).then(e=>e.text()).then(n=>{this.envUrlMaps[e].set(t,Object.assign(Object.assign({},o),{inlineSvgString:n}))}))).then(()=>{var t;this._applyHostElementBackground(this.envUrlMaps[e].get("host"),null===(t=this.getSharedCb().theme)||void 0===t?void 0:t.schema)}).catch(e=>{console.error(e),ErrorLogger.log(`Failed to load/apply backgroundDynamicInlineSVGElements[${this.getPropsCb().backgroundDynamicInlineSVGElements}] ${e}`)})}on(){return this.subscription=this.documentModel.on(DocumentModelUpdateType.THEME_UPDATE,e=>{this._applyHostElementBackground(this.envUrlMaps[this.getEnvCb()].get("host"),e.schema)}),this}_applyHostElementBackground(e,t){e&&t&&(this.hostElement.style.background=this._buildBackgroundUrl(e,t))}_buildBackgroundUrl(e,t){const o=e.inlineSvgString.trim().replace(`var(--${toCssVarToken(DefaultSchemaTokens.ACCENT)})`,t[DefaultSchemaTokens.ACCENT]);return`url('data:image/svg+xml,${encodeURIComponent(o)}')${e.positionOptions}`}off(){var e;null===(e=this.subscription)||void 0===e||e.off()}}
+import{DocumentModelUpdateType}from"../../document-model/DocumentModelService";import ErrorLogger from"../../error/ErrorLogger";import{toCssVarToken,formCssVarToSchemaToken}from"@claspo/common/theme/theme.utils";export default class ColorSchemaListener{constructor(t,e,o,n,s,i){this.hostElement=e,this.documentModel=t,this.getSharedCb=o,this.getPropsCb=n,this.getEnvCb=s,this.httpClient=i,this.subscription=null,this.envUrlMaps={desktop:new Map,mobile:new Map}}parseBackground(t){const e=String(t||"");if(e.includes("url")){const[t,o]=e.split("(")[1].split(")");return{url:t.replace(/['"]+/g,""),positionOptions:o.replace(";","")}}return{url:null,positionOptions:null}}apply(t){const e=this.getPropsCb();return e.backgroundDynamicInlineSVGElements[t].forEach(o=>{var n,s,i,r,l;const a=null===(s=null===(n=e.adaptiveStyles)||void 0===n?void 0:n[t])||void 0===s?void 0:s.find(t=>t.element===o),c=(null===(i=e.styles)||void 0===i?void 0:i.find(t=>t.element===o))||{},u=(null===(r=null==c?void 0:c.styleAttributes)||void 0===r?void 0:r.background)||(null===(l=null==a?void 0:a.styleAttributes)||void 0===l?void 0:l.background),p=this.parseBackground(u);p.url&&this.envUrlMaps[t].set(o,{originalSVGResourceURL:p.url,inlineSvgString:null,positionOptions:p.positionOptions})}),Promise.all([...this.envUrlMaps[t].entries()].map(([e,o])=>this.httpClient.execute(o.originalSVGResourceURL).then(t=>t.text()).then(n=>{this.envUrlMaps[t].set(e,Object.assign(Object.assign({},o),{inlineSvgString:n}))}))).then(()=>{var e;this._applyHostElementBackground(this.envUrlMaps[t].get("host"),null===(e=this.getSharedCb().theme)||void 0===e?void 0:e.schema)}).catch(t=>{console.error(t),ErrorLogger.log(`Failed to load/apply backgroundDynamicInlineSVGElements[${this.getPropsCb().backgroundDynamicInlineSVGElements}] ${t}`)})}on(){return this.subscription=this.documentModel.on(DocumentModelUpdateType.THEME_UPDATE,t=>{this._applyHostElementBackground(this.envUrlMaps[this.getEnvCb()].get("host"),t.schema)}),this}_applyHostElementBackground(t,e){t&&e&&(this.hostElement.style.background=this._buildBackgroundUrl(t,e))}_buildBackgroundUrl(t,e){const o=t.inlineSvgString.trim();let n=o;[...o.matchAll(/var\(--cl-schema-([^)]+)\)/g)].forEach(t=>{const o=formCssVarToSchemaToken(t[1]);n=n.replace(`var(--${toCssVarToken(o)})`,e[o])});return`url('data:image/svg+xml,${encodeURIComponent(n)}')${t.positionOptions}`}off(){var t;null===(t=this.subscription)||void 0===t||t.off()}}