@claspo/renderer 17.0.13-theme.80 → 17.0.13-theme.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/renderer",
-  "version": "17.0.13-theme.80",
+  "version": "17.0.13-theme.82",
   "scripts": {
     "dev": " tsc --project tsconfig.json --watch",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
@@ -15,7 +15,7 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@claspo/common": "6.0.16-theme.80",
+    "@claspo/common": "6.0.16-theme.81",
     "@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{formCssVarToSchemaToken,toCssVarToken}from"@claspo/common/theme/theme.utils";export default class ColorSchemaListener{constructor(e,t,o,s,n,r){this.hostElement=t,this.documentModel=e,this.getSharedCb=o,this.getPropsCb=s,this.getEnvCb=n,this.httpClient=r,this.schemaSubscription=null,this.themeSubscription=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 s,n,r,i,l;const a=null===(n=null===(s=t.adaptiveStyles)||void 0===s?void 0:s[e])||void 0===n?void 0:n.find(e=>e.element===o),c=(null===(r=t.styles)||void 0===r?void 0:r.find(e=>e.element===o))||{},m=(null===(i=null==c?void 0:c.styleAttributes)||void 0===i?void 0:i.background)||(null===(l=null==a?void 0:a.styleAttributes)||void 0===l?void 0:l.background),h=this.parseBackground(m);h.url&&this.envUrlMaps[e].set(o,{originalSVGResourceURL:h.url,inlineSvgString:null,positionOptions:h.positionOptions})}),Promise.all([...this.envUrlMaps[e].entries()].map(([t,o])=>this.httpClient.execute(o.originalSVGResourceURL).then(e=>e.text()).then(s=>{this.envUrlMaps[e].set(t,Object.assign(Object.assign({},o),{inlineSvgString:s}))}))).then(()=>{const t=this.getSharedCb();return t.theme?this._applyHostElementBackgroundFromTheme(this.envUrlMaps[e].get("host"),t.theme.schema):this._applyHostElementBackgroundFromCssVars(this.envUrlMaps[e].get("host"),t.cssVars)}).catch(e=>{console.error(e),ErrorLogger.log(`Failed to load/apply backgroundDynamicInlineSVGElements[${this.getPropsCb().backgroundDynamicInlineSVGElements}] ${e}`)})}on(){return this.schemaSubscription=this.documentModel.on(DocumentModelUpdateType.COLOR_SCHEMA_UPDATE,e=>{this._applyHostElementBackgroundFromCssVars(this.envUrlMaps[this.getEnvCb()].get("host"),e)}),this.themeSubscription=this.documentModel.on(DocumentModelUpdateType.THEME_UPDATE,e=>{this._applyHostElementBackgroundFromTheme(this.envUrlMaps[this.getEnvCb()].get("host"),e.schema)}),this}_applyHostElementBackgroundFromCssVars(e,t){e&&t&&(this.hostElement.style.background=this._buildBackgroundUrlFromCssVars(e,t))}_applyHostElementBackgroundFromTheme(e,t){e&&t&&(this.hostElement.style.background=this._buildBackgroundUrlFromTheme(e,t))}_buildBackgroundUrlFromCssVars(e,t){const o=e.inlineSvgString.trim().replace("var(--cl-schema-accent)",t["cl-schema-accent"]);return`url('data:image/svg+xml,${encodeURIComponent(o)}')${e.positionOptions}`}_buildBackgroundUrlFromTheme(e,t){const o=e.inlineSvgString.trim();let s=o;[...o.matchAll(/var\(--cl-schema-([^)]+)\)/g)].forEach(e=>{const o=formCssVarToSchemaToken(e[1]);s=s.replace(`var(--${toCssVarToken(o)})`,t[o])});return`url('data:image/svg+xml,${encodeURIComponent(s)}')${e.positionOptions}`}off(){var e,t;null===(e=this.schemaSubscription)||void 0===e||e.off(),null===(t=this.themeSubscription)||void 0===t||t.off()}}
+import{DocumentModelUpdateType}from"../../document-model/DocumentModelService";import ErrorLogger from"../../error/ErrorLogger";import{formCssVarToSchemaToken,toCssVarToken}from"@claspo/common/theme/theme.utils";export default class ColorSchemaListener{constructor(e,t,o,s,n,r){this.hostElement=t,this.documentModel=e,this.getSharedCb=o,this.getPropsCb=s,this.getEnvCb=n,this.httpClient=r,this.schemaSubscription=null,this.themeSubscription=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 s,n,r,i,l;const a=null===(n=null===(s=t.adaptiveStyles)||void 0===s?void 0:s[e])||void 0===n?void 0:n.find(e=>e.element===o),c=(null===(r=t.styles)||void 0===r?void 0:r.find(e=>e.element===o))||{},m=(null===(i=null==c?void 0:c.styleAttributes)||void 0===i?void 0:i.background)||(null===(l=null==a?void 0:a.styleAttributes)||void 0===l?void 0:l.background),h=this.parseBackground(m);h.url&&this.envUrlMaps[e].set(o,{originalSVGResourceURL:h.url,inlineSvgString:null,positionOptions:h.positionOptions})}),Promise.all([...this.envUrlMaps[e].entries()].map(([t,o])=>this.httpClient.execute(o.originalSVGResourceURL).then(e=>e.text()).then(s=>{this.envUrlMaps[e].set(t,Object.assign(Object.assign({},o),{inlineSvgString:s}))}))).then(()=>{var t;const o=this.getSharedCb();return Object.keys((null===(t=o.theme)||void 0===t?void 0:t.schema)||{}).length>0?this._applyHostElementBackgroundFromTheme(this.envUrlMaps[e].get("host"),o.theme.schema):this._applyHostElementBackgroundFromCssVars(this.envUrlMaps[e].get("host"),o.cssVars)}).catch(e=>{console.error(e),ErrorLogger.log(`Failed to load/apply backgroundDynamicInlineSVGElements[${this.getPropsCb().backgroundDynamicInlineSVGElements}] ${e}`)})}on(){return this.schemaSubscription=this.documentModel.on(DocumentModelUpdateType.COLOR_SCHEMA_UPDATE,e=>{this._applyHostElementBackgroundFromCssVars(this.envUrlMaps[this.getEnvCb()].get("host"),e)}),this.themeSubscription=this.documentModel.on(DocumentModelUpdateType.THEME_UPDATE,e=>{this._applyHostElementBackgroundFromTheme(this.envUrlMaps[this.getEnvCb()].get("host"),e.schema)}),this}_applyHostElementBackgroundFromCssVars(e,t){e&&t&&(this.hostElement.style.background=this._buildBackgroundUrlFromCssVars(e,t))}_applyHostElementBackgroundFromTheme(e,t){e&&t&&(this.hostElement.style.background=this._buildBackgroundUrlFromTheme(e,t))}_buildBackgroundUrlFromCssVars(e,t){const o=e.inlineSvgString.trim().replace("var(--cl-schema-accent)",t["cl-schema-accent"]);return`url('data:image/svg+xml,${encodeURIComponent(o)}')${e.positionOptions}`}_buildBackgroundUrlFromTheme(e,t){const o=e.inlineSvgString.trim();let s=o;[...o.matchAll(/var\(--cl-schema-([^)]+)\)/g)].forEach(e=>{const o=formCssVarToSchemaToken(e[1]);s=s.replace(`var(--${toCssVarToken(o)})`,t[o])});return`url('data:image/svg+xml,${encodeURIComponent(s)}')${e.positionOptions}`}off(){var e,t;null===(e=this.schemaSubscription)||void 0===e||e.off(),null===(t=this.themeSubscription)||void 0===t||t.off()}}

package/wc-renderer/WcRegister.d.ts

@@ -5,7 +5,7 @@ export interface ModelNameToTagMapI {
     [modelName: string]: string;
 }
 export declare class WcRegister {
-    private productKeyPrefix?;
+    private productKeyPrefix;
     classes: ComponentClassI[];
     modelNameToTagMap: ModelNameToTagMapI;
     decorator: DecoratorFnT | null;

package/wc-renderer/WcRegister.js

@@ -1 +1 @@
-import wcStaticDecorator from"./decorators/wcStaticDecorator";import wcUpdatingDecorator from"./decorators/wcUpdatingDecorator";import{RenderMode}from"@claspo/common/RenderMode";function getModelNameFromClass(e){return e.define.manifest.name}function getTagNameFromClass(e){const o=getModelNameFromClass(e);return(t=o,t.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(e,o)=>(o?"-":"")+e.toLowerCase())).replace("-component","");var t}export class WcRegister{constructor(e,o){this.productKeyPrefix=o,this.classes=e||[],this.modelNameToTagMap=this.classes.reduce((e,o)=>Object.assign(Object.assign({},e),{[getModelNameFromClass(o)]:getTagNameFromClass(o)}),{}),this.decorator=null}register(e,o){this.decorator=e,this.classes.forEach(e=>this.registerComponent(e,o))}registerComponent(e,o){const t=this.getComponentTagName(getTagNameFromClass(e),o),a=o===RenderMode.STATIC?wcStaticDecorator(e):wcUpdatingDecorator(e);customElements.get(t)||customElements.define(t,a),this.modelNameToTagMap[getModelNameFromClass(a)]||(this.modelNameToTagMap[getModelNameFromClass(a)]=getTagNameFromClass(a))}getComponent(e,o){const t=(a=e,a.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(e,o)=>(o?"-":"")+e.toLowerCase())).replace("-component","");var a;const s=this.getComponentTagName(t,o),r=customElements.get(s);if(!r){const t=`Claspo: the component named "${e}" was found in the document model, but the component class was not found.`,a=o===RenderMode.STATIC?'Check if the component can be downloaded from the server, or pass the class to "bundledComponentClasses".':'Add the component to the "availableComponentsPanel", or pass the class to the "bundledComponentClasses".';throw new Error(`${t} ${a}`)}return r}getComponentTagName(e,o){const t=o.toLowerCase();return`${this.productKeyPrefix||"cl"}-${e}-${t}`}}export default WcRegister;
+import wcStaticDecorator from"./decorators/wcStaticDecorator";import wcUpdatingDecorator from"./decorators/wcUpdatingDecorator";import{RenderMode}from"@claspo/common/RenderMode";function getModelNameFromClass(e){return e.define.manifest.name}function getTagNameFromClass(e){const o=getModelNameFromClass(e);return(t=o,t.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(e,o)=>(o?"-":"")+e.toLowerCase())).replace("-component","");var t}export class WcRegister{constructor(e,o="cl"){this.productKeyPrefix=o,this.classes=e||[],this.modelNameToTagMap=this.classes.reduce((e,o)=>Object.assign(Object.assign({},e),{[getModelNameFromClass(o)]:getTagNameFromClass(o)}),{}),this.decorator=null}register(e,o){this.decorator=e,this.classes.forEach(e=>this.registerComponent(e,o))}registerComponent(e,o){const t=this.getComponentTagName(getTagNameFromClass(e),o),a=o===RenderMode.STATIC?wcStaticDecorator(e):wcUpdatingDecorator(e);customElements.get(t)||customElements.define(t,a),this.modelNameToTagMap[getModelNameFromClass(a)]||(this.modelNameToTagMap[getModelNameFromClass(a)]=getTagNameFromClass(a))}getComponent(e,o){const t=(a=e,a.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(e,o)=>(o?"-":"")+e.toLowerCase())).replace("-component","");var a;const s=this.getComponentTagName(t,o),r=customElements.get(s);if(!r){const t=`Claspo: the component named "${e}" was found in the document model, but the component class was not found.`,a=o===RenderMode.STATIC?'Check if the component can be downloaded from the server, or pass the class to "bundledComponentClasses".':'Add the component to the "availableComponentsPanel", or pass the class to the "bundledComponentClasses".';throw new Error(`${t} ${a}`)}return r}getComponentTagName(e,o){const t=o.toLowerCase();return`${this.productKeyPrefix}-${e}-${t}`}}export default WcRegister;

package/wc-renderer/WcResolver.d.ts

@@ -12,16 +12,16 @@ export interface LoadComponentsResultI {
     manifests: ComponentManifestI[];
 }
 export default class WcResolver {
+    private productKeyPrefix;
     renderMode: RenderMode;
     wcRegister: WcRegister;
-    constructor(renderMode: RenderMode, wcRegister: WcRegister);
+    constructor(renderMode: RenderMode, wcRegister: WcRegister, productKeyPrefix?: string);
     getComponentManifests(): ComponentManifestI[];
     getAllComponents(): (CustomElementConstructor | undefined)[];
     loadComponentsIfNecessary(documentModel: ClDocumentI, staticResourcesUrl: string): Promise<LoadComponentsResultI>;
-    loadComponents(componentNames: string[], staticResourcesUrl: string): Promise<unknown[]>;
+    loadComponents(componentNames: string[], staticResourcesUrl: string): Promise<any>;
     getComponentNamesToLoad(componentNames: string[] | null | undefined): string[];
     buildComponentFilePaths(componentNames: string[], staticResourcesUrl: string): string[];
     loadComponentClasses(modulePaths: string[], componentNamesToLoad: string[]): Promise<unknown[]>;
     getWindowKeyForComponentClass(componentName: string): string;
-    registerModules(modules: unknown[]): void;
 }

package/wc-renderer/WcResolver.js

@@ -1 +1 @@
-import DocumentUtils from"@claspo/common/document/DocumentUtils";import{RenderMode}from"@claspo/common/RenderMode";export default class WcResolver{constructor(e=RenderMode.STATIC,t){this.renderMode=e,this.wcRegister=t}getComponentManifests(){return this.getAllComponents().map(e=>{var t;return null===(t=e.define)||void 0===t?void 0:t.manifest}).filter(e=>!!e)}getAllComponents(){return Object.values(this.wcRegister.modelNameToTagMap).map(e=>this.wcRegister.getComponentTagName(e,this.renderMode)).map(e=>customElements.get(e)).filter(e=>!!e)}async loadComponentsIfNecessary(e,t){const o=new Set;e.views.forEach(e=>{DocumentUtils.iterateDepthFirst(e,e=>{o.add(e.name)})});const n=this.getComponentManifests(),s=n.map(e=>e.name),r=[...o].filter(e=>!s.includes(e));return r.length?(await this.loadComponents(r,t),{manifests:this.getComponentManifests()}):{manifests:n}}async loadComponents(e,t){const o=this.getComponentNamesToLoad(e),n=this.buildComponentFilePaths(o,t),s=await this.loadComponentClasses(n,o);return this.registerModules(s),s}getComponentNamesToLoad(e){return e||[]}buildComponentFilePaths(e,t){return e.map(e=>`${t.replace(/\/$/,"")}/${e}/${e}.js`)}loadComponentClasses(e,t){return Promise.all(e.map((e,o)=>new Promise((n,s)=>{const r=document.createElement("script");r.type="module",r.onload=()=>{const e=t[o];n(window[this.getWindowKeyForComponentClass(e)])},r.onerror=s,r.src=e,document.body.appendChild(r)})))}getWindowKeyForComponentClass(e){return`clComponentClass_${e}`}registerModules(e){e.forEach(e=>{this.wcRegister.registerComponent(e,this.renderMode)})}}
+import DocumentUtils from"@claspo/common/document/DocumentUtils";import{RenderMode}from"@claspo/common/RenderMode";export default class WcResolver{constructor(e=RenderMode.STATIC,t,o="cl"){this.productKeyPrefix=o,this.renderMode=e,this.wcRegister=t}getComponentManifests(){return this.getAllComponents().map(e=>{var t;return null===(t=e.define)||void 0===t?void 0:t.manifest}).filter(e=>!!e)}getAllComponents(){return Object.values(this.wcRegister.modelNameToTagMap).map(e=>this.wcRegister.getComponentTagName(e,this.renderMode)).map(e=>customElements.get(e)).filter(e=>!!e)}async loadComponentsIfNecessary(e,t){const o=new Set;e.views.forEach(e=>{DocumentUtils.iterateDepthFirst(e,e=>{o.add(e.name)})});const n=this.getComponentManifests(),s=n.map(e=>e.name),i=[...o].filter(e=>!s.includes(e));return i.length?(await this.loadComponents(i,t),{manifests:this.getComponentManifests()}):{manifests:n}}async loadComponents(e,t){const o=this.getComponentNamesToLoad(e),n=this.buildComponentFilePaths(o,t);await this.loadComponentClasses(n,o)}getComponentNamesToLoad(e){return e||[]}buildComponentFilePaths(e,t){return e.map(e=>`${t.replace(/\/$/,"")}/${e}/${e}.js`)}loadComponentClasses(e,t){return Promise.all(e.map((e,o)=>new Promise((n,s)=>{const i=t[o],r=`${this.productKeyPrefix}_${this.getWindowKeyForComponentClass(i)}`;if(window[r])this.wcRegister.registerComponent(window[r],this.renderMode),n(window[r]);else{const t=document.createElement("script");t.type="module",t.onload=()=>{const e=window[this.getWindowKeyForComponentClass(i)];window[r]=e,this.wcRegister.registerComponent(e,this.renderMode),n(e)},t.onerror=s,t.src=e,document.body.appendChild(t)}})))}getWindowKeyForComponentClass(e){return`clComponentClass_${e}`}}