@claspo/renderer 18.6.0-ctx.4 → 18.6.0-ctx.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/renderer",
-  "version": "18.6.0-ctx.4",
+  "version": "18.6.0-ctx.5",
   "scripts": {
     "dev": " tsc --project tsconfig.json --watch",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",

package/sdk/context/ContextSDK.d.ts

@@ -7,6 +7,9 @@ export interface SourceUpdateDataI {
     value: string;
     componentId?: string;
 }
+export interface ContextRecordUpdatedParamsI extends SourceUpdateDataI {
+    sourceId: string;
+}
 export default class ContextSDK extends DefaultEventEmitter {
     sourceRegistry: SourceRegistry;
     data: ContextData;
@@ -14,7 +17,7 @@ export default class ContextSDK extends DefaultEventEmitter {
     constructor(sourceRegistry: SourceRegistry, contextData: ContextData, isStaticMode: boolean);
     getRegistry(): SourceRegistry;
     addRecord: (key: string, params: ContextRecordValueI) => void;
-    updateRecord: (key: string, params: Partial<ContextRecordValueI>) => void;
+    updateRecord: (key: string, params: Partial<ContextRecordValueI>, eventParams?: ContextRecordUpdatedParamsI | null) => void;
     deleteRecord(key: string): void;
     getRecord: (key: string) => Record | undefined;
     getRecordsMap(): {
@@ -25,4 +28,9 @@ export default class ContextSDK extends DefaultEventEmitter {
     };
     initSources(): void;
     subscribeToSource(params: ContextRecordValueI): void;
+    getAffectedRecordKeys(sourceId: string, changedKey: string, componentId?: string): string[];
+    resolveRecordValueFromSource(record: ContextRecordValueI, source: {
+        getValue: (key?: string) => any;
+    }, fallbackValue: any): any;
+    arePathsOverlapping(targetPath: string, changedPath: string): boolean;
 }

package/sdk/context/ContextSDK.js

@@ -1 +1 @@
-import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{ContextEvents}from"./ContextEvents";export default class ContextSDK extends DefaultEventEmitter{constructor(t,e,s){super(),this.addRecord=(t,e)=>{const s=this.data.addRecord(t,e);this.subscribeToSource(e),this.emit(ContextEvents.RECORD_ADDED,s)},this.updateRecord=(t,e)=>{const s=this.data.getRecord(t);(null==s?void 0:s.update(e))&&this.emit(ContextEvents.RECORD_UPDATED,s.getValue())},this.getRecord=t=>this.data.getRecord(t),this.sourceRegistry=t,this.data=e,this.isStaticMode=s,this.initSources()}getRegistry(){return this.sourceRegistry}deleteRecord(t){const e=this.data.getRecord(t);e&&!this.isStaticMode&&(this.data.deleteRecord(t),this.emit(ContextEvents.RECORD_DELETED,e))}getRecordsMap(){return this.data.getRecordsMap()}getKVMap(){return this.data.getKVMap()}initSources(){this.sourceRegistry.registerInitialSources(),this.sourceRegistry.getSources().forEach(t=>{const e=t.getValue();!this.isStaticMode&&e&&Object.keys(e).length&&Object.entries(e).forEach(([t,e])=>{this.addRecord(t,e)})})}subscribeToSource(t){const e=this.sourceRegistry.getSource(t.sourceId);e&&!e.isSubscribed()&&e.subscribe(({key:t,value:e,componentId:s})=>{this.updateRecord(s||t,{value:e})})}}
+import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{ContextEvents}from"./ContextEvents";export default class ContextSDK extends DefaultEventEmitter{constructor(e,t,s){super(),this.addRecord=(e,t)=>{const s=this.data.addRecord(e,t);this.subscribeToSource(t),this.emit(ContextEvents.RECORD_ADDED,s)},this.updateRecord=(e,t,s=null)=>{const r=this.data.getRecord(e);(null==r?void 0:r.update(t))&&this.emit(ContextEvents.RECORD_UPDATED,r.getValue(),s)},this.getRecord=e=>this.data.getRecord(e),this.sourceRegistry=e,this.data=t,this.isStaticMode=s,this.initSources()}getRegistry(){return this.sourceRegistry}deleteRecord(e){const t=this.data.getRecord(e);t&&!this.isStaticMode&&(this.data.deleteRecord(e),this.emit(ContextEvents.RECORD_DELETED,t))}getRecordsMap(){return this.data.getRecordsMap()}getKVMap(){return this.data.getKVMap()}initSources(){this.sourceRegistry.registerInitialSources(),this.sourceRegistry.getSources().forEach(e=>{const t=e.getValue();!this.isStaticMode&&t&&Object.keys(t).length&&Object.entries(t).forEach(([e,t])=>{this.addRecord(e,t)})})}subscribeToSource(e){const t=this.sourceRegistry.getSource(e.sourceId);t&&!t.isSubscribed()&&t.subscribe(({key:e,value:s,componentId:r})=>{const o={sourceId:t.id,key:e,value:s,componentId:r};this.getAffectedRecordKeys(t.id,e,r).forEach(e=>{const r=this.data.getRecord(e);if(!r)return;const c=this.resolveRecordValueFromSource(r.getValue(),t,s);this.updateRecord(e,{value:c},o)})})}getAffectedRecordKeys(e,t,s){const r=s||t,o=new Set;return this.data.getRecord(r)&&o.add(r),Object.entries(this.data.getRecordsMap()).forEach(([s,r])=>{const c=r.getValue();c.sourceId===e&&c.sourceDependencyKey&&this.arePathsOverlapping(c.sourceDependencyKey,t)&&o.add(s)}),Array.from(o)}resolveRecordValueFromSource(e,t,s){var r;if(!e.sourceModel)return s;const o=t.getValue(e.sourceDependencyKey||e.id);return o&&"function"==typeof o.processor?o.processor(t,e.sourceModel):null!==(r=null==o?void 0:o.value)&&void 0!==r?r:e.value}arePathsOverlapping(e,t){return e===t||e.startsWith(`${t}.`)||t.startsWith(`${e}.`)}}

package/sdk/merge-tags/AbstractMergeTagsProcessor.d.ts

@@ -16,8 +16,17 @@ export default class AbstractMergeTagsProcessor {
     element: HTMLElement | null;
     mergeTags: MergeTagsMapI | null;
     componentId: string | null;
+    contextRecordUpdatesSubscription: {
+        off: () => void;
+    } | null;
     constructor(context: ContextSDK, configService: ConfigService);
     destroy(): void;
     process(element: HTMLElement, mergeTags: MergeTagsMapI, componentId: string): void;
     processSingleMergeTag(containerElement: HTMLElement, mergeTag: MergeTagI): void;
+    _subscribeToDynamicMergeTagUpdates(): void;
+    _processDynamicMergeTags(record: {
+        key?: string;
+        id?: string;
+    } | null): void;
+    _findMergeTagElement(mergeTagId: string): HTMLElement | null;
 }

package/sdk/merge-tags/AbstractMergeTagsProcessor.js

@@ -1 +1 @@
-export default class AbstractMergeTagsProcessor{constructor(e,t){this.context=e,this.configService=t,this.element=null,this.mergeTags=null,this.componentId=null}destroy(){}process(e,t,s){this.element=e,this.mergeTags=t,this.componentId=s,this.mergeTags&&0!==Object.keys(this.mergeTags).length&&this.element.childNodes.forEach(e=>{if(e.nodeType!==Node.TEXT_NODE&&"MERGE_TAG"===e.getAttribute("cl-type")){const t=e.getAttribute("cl-id"),s=this.mergeTags[t];if(!s)return;setTimeout(()=>{this.processSingleMergeTag(e,s)})}})}processSingleMergeTag(e,t){throw new Error("BaseMergeTagsProcessor: processSingleMergeTag is not implemented")}}
+import{ContextEvents}from"../context/ContextEvents";export default class AbstractMergeTagsProcessor{constructor(e,t){this.context=e,this.configService=t,this.element=null,this.mergeTags=null,this.componentId=null,this.contextRecordUpdatesSubscription=null}destroy(){this.contextRecordUpdatesSubscription&&(this.contextRecordUpdatesSubscription.off(),this.contextRecordUpdatesSubscription=null)}process(e,t,s){this.element=e,this.mergeTags=t,this.componentId=s,this._subscribeToDynamicMergeTagUpdates(),this.mergeTags&&0!==Object.keys(this.mergeTags).length&&this.element.childNodes.forEach(e=>{if(e.nodeType!==Node.TEXT_NODE&&"MERGE_TAG"===e.getAttribute("cl-type")){const t=e.getAttribute("cl-id"),s=this.mergeTags[t];if(!s)return;this.processSingleMergeTag(e,s)}})}processSingleMergeTag(e,t){throw new Error("BaseMergeTagsProcessor: processSingleMergeTag is not implemented")}_subscribeToDynamicMergeTagUpdates(){this.contextRecordUpdatesSubscription&&(this.contextRecordUpdatesSubscription.off(),this.contextRecordUpdatesSubscription=null),this.contextRecordUpdatesSubscription=this.context.on(ContextEvents.RECORD_UPDATED,e=>{this._processDynamicMergeTags(e)})}_processDynamicMergeTags(e){if(!this.element||!this.mergeTags)return;const t=(null==e?void 0:e.key)||(null==e?void 0:e.id);if(!t)return;const s=this.mergeTags[t];if(!s)return;const i=this._findMergeTagElement(s.id);i&&this.processSingleMergeTag(i,s)}_findMergeTagElement(e){return this.element?this.element.getAttribute("cl-id")===e?this.element:this.element.querySelector(`[cl-id="${e}"]`):null}}

package/sdk/merge-tags/StaticMergeTagsProcessor.d.ts

@@ -1,5 +1,6 @@
 import AbstractMergeTagsProcessor, { MergeTagI } from './AbstractMergeTagsProcessor';
 export default class StaticMergeTagsProcessor extends AbstractMergeTagsProcessor {
     _getRecordId(mergeTag: MergeTagI): string;
+    _getMergeTagDependencyPath(mergeTag: MergeTagI): string;
     processSingleMergeTag(tagContainerElement: HTMLElement, mergeTag: MergeTagI): void;
 }

package/sdk/merge-tags/StaticMergeTagsProcessor.js

@@ -1 +1 @@
-import AbstractMergeTagsProcessor from"./AbstractMergeTagsProcessor";import getMostNestedNode from"@claspo/common/dom/getMostNestedNode";import{PreviewMode}from"../PreviewMode";export default class StaticMergeTagsProcessor extends AbstractMergeTagsProcessor{_getRecordId(e){return e.id}processSingleMergeTag(e,t){const o=this._getRecordId(t),s=this.context.getRecord(o),r=this.context.getRegistry().getSource(t.sourceId),i=this.context.getKVMap();let c,g;if(!s&&i[o]&&(g=i[o]),r){const e=r.getValue((null==s?void 0:s.value.id)||o);g=(null==e?void 0:e.value)||g,e&&"function"==typeof e.processor&&(c=e.processor(r,t))}const d=this.configService.getConfig(PreviewMode.CABINET_PREVIEW)||this.configService.getConfig(PreviewMode.EDITOR_PREVIEW)||this.configService.getConfig(PreviewMode.DEMO);let a=c||g||(null==s?void 0:s.value.value)||t.fallbackValue||(d?t.exampleValue:"");s||this.context.addRecord(o,Object.assign(Object.assign({recordKey:o,id:o,sourceId:t.sourceId},r?r.getValue(o):{}),{value:a})),e.style.fontFamily="inherit",getMostNestedNode(e).textContent=a}}
+import AbstractMergeTagsProcessor from"./AbstractMergeTagsProcessor";import getMostNestedNode from"@claspo/common/dom/getMostNestedNode";import{PreviewMode}from"../PreviewMode";import JSApiVariablesSource from"../source/sources/JSApiVariablesSource";import DataLayerSource from"../source/sources/DataLayerSource";import UrlQueryParamsSource from"../source/sources/UrlQueryParamsSource";import CookieSource from"../source/sources/CookieSource";import LocalStorageSource from"../source/sources/LocalStorageSource";export default class StaticMergeTagsProcessor extends AbstractMergeTagsProcessor{_getRecordId(e){return e.id}_getMergeTagDependencyPath(e){if(!e.arguments||!Array.isArray(e.arguments))return"";const r={[JSApiVariablesSource.sourceId]:"JavaScriptVariable",[DataLayerSource.sourceId]:"dataLayerPropPath",[UrlQueryParamsSource.sourceId]:"urlQueryParamName",[CookieSource.sourceId]:"cookieName",[LocalStorageSource.sourceId]:"localStorageKey"},o=e.sourceId?r[e.sourceId]:void 0;if(!o)return"";const t=e.arguments.find(e=>e.name===o);return(null==t?void 0:t.value)||""}processSingleMergeTag(e,r){const o=this._getRecordId(r),t=this.context.getRecord(o),s=this.context.getRegistry().getSource(r.sourceId),c=this.context.getKVMap();let a,u;if(!t&&c[o]&&(u=c[o]),s){const e=s.getValue((null==t?void 0:t.value.id)||o);u=(null==e?void 0:e.value)||u,e&&"function"==typeof e.processor&&(a=e.processor(s,r))}const i=this.configService.getConfig(PreviewMode.CABINET_PREVIEW)||this.configService.getConfig(PreviewMode.EDITOR_PREVIEW)||this.configService.getConfig(PreviewMode.DEMO);let d=a||u||(null==t?void 0:t.value.value)||r.fallbackValue||(i?r.exampleValue:"");t||this.context.addRecord(o,Object.assign(Object.assign({recordKey:o,id:o,sourceId:r.sourceId,sourceDependencyKey:this._getMergeTagDependencyPath(r),sourceModel:r},s?s.getValue(o):{}),{value:d})),e.style.fontFamily="inherit",getMostNestedNode(e).textContent=d}}

package/sdk/merge-tags/UpdatingMergeTagsProcessor.js

@@ -1 +1 @@
-import{ContextEvents}from"../context/ContextEvents";import AbstractMergeTagsProcessor from"./AbstractMergeTagsProcessor";import getMostNestedNode from"@claspo/common/dom/getMostNestedNode";import DataLayerSource from"../source/sources/DataLayerSource";import UrlQueryParamsSource from"../source/sources/UrlQueryParamsSource";import JSApiVariablesSource from"../source/sources/JSApiVariablesSource";import CookieSource from"../source/sources/CookieSource";import LocalStorageSource from"../source/sources/LocalStorageSource";export default class UpdatingMergeTagsProcessor extends AbstractMergeTagsProcessor{constructor(e,t){super(e,t),this.contextSubscriptions=[this.context.on(ContextEvents.RECORD_ADDED,this._handleContextEvents.bind(this)),this.context.on(ContextEvents.RECORD_UPDATED,this._handleContextEvents.bind(this)),this.context.on(ContextEvents.RECORD_DELETED,this._handleContextEvents.bind(this))]}destroy(){super.destroy(),this.contextSubscriptions&&this.contextSubscriptions.forEach(e=>e.off())}processSingleMergeTag(e,t){if(!e)return;const o=this.context.getRecord(t.id);e.style.fontFamily="inherit",getMostNestedNode(e).textContent=t.exampleValue,this._setMergeTagValidity(o,t,e)}_setMergeTagValidity(e,t,o){let r=!1;if(e||t.sourceId===DataLayerSource.sourceId||t.sourceId===UrlQueryParamsSource.sourceId||t.sourceId===JSApiVariablesSource.sourceId||t.sourceId===CookieSource.sourceId||t.sourceId===LocalStorageSource.sourceId||(r=!0),t.sourceId===DataLayerSource.sourceId){const e=t.arguments.find(e=>"dataLayerPropPath"===e.name);e&&e.value||(r=!0)}else{(!t.exampleValue||t.arguments&&!t.arguments.find(e=>e.value))&&(r=!0)}const s="tag-error";r?o.classList.add(s):o.classList.remove(s)}_handleContextEvents(e){var t;const o=null===(t=this.mergeTags)||void 0===t?void 0:t[e.key];o&&setTimeout(()=>{this.processSingleMergeTag(this.element.querySelector(`[cl-id="${o.id}"]`),o)})}}
+import{ContextEvents}from"../context/ContextEvents";import AbstractMergeTagsProcessor from"./AbstractMergeTagsProcessor";import getMostNestedNode from"@claspo/common/dom/getMostNestedNode";import DataLayerSource from"../source/sources/DataLayerSource";import UrlQueryParamsSource from"../source/sources/UrlQueryParamsSource";import JSApiVariablesSource from"../source/sources/JSApiVariablesSource";import CookieSource from"../source/sources/CookieSource";import LocalStorageSource from"../source/sources/LocalStorageSource";export default class UpdatingMergeTagsProcessor extends AbstractMergeTagsProcessor{constructor(e,o){super(e,o),this.contextSubscriptions=[this.context.on(ContextEvents.RECORD_ADDED,this._handleContextEvents.bind(this)),this.context.on(ContextEvents.RECORD_DELETED,this._handleContextEvents.bind(this))]}destroy(){super.destroy(),this.contextSubscriptions&&this.contextSubscriptions.forEach(e=>e.off())}processSingleMergeTag(e,o){if(!e)return;const r=this.context.getRecord(o.id);e.style.fontFamily="inherit",getMostNestedNode(e).textContent=o.exampleValue,this._setMergeTagValidity(r,o,e)}_setMergeTagValidity(e,o,r){let t=!1;if(e||o.sourceId===DataLayerSource.sourceId||o.sourceId===UrlQueryParamsSource.sourceId||o.sourceId===JSApiVariablesSource.sourceId||o.sourceId===CookieSource.sourceId||o.sourceId===LocalStorageSource.sourceId||(t=!0),o.sourceId===DataLayerSource.sourceId){const e=o.arguments.find(e=>"dataLayerPropPath"===e.name);e&&e.value||(t=!0)}else{(!o.exampleValue||o.arguments&&!o.arguments.find(e=>e.value))&&(t=!0)}const s="tag-error";t?r.classList.add(s):r.classList.remove(s)}_handleContextEvents(e){var o;const r=(null==e?void 0:e.key)||(null==e?void 0:e.id);if(!r)return;const t=null===(o=this.mergeTags)||void 0===o?void 0:o[r];t&&this.processSingleMergeTag(this.element.querySelector(`[cl-id="${t.id}"]`),t)}}

package/sdk/source/sources/JSApiVariablesSource.js

@@ -1 +1 @@
-import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{SourceType}from"@claspo/common/document/hidden-fields.interface";class JSApiVariablesSource extends DefaultEventEmitter{constructor(e={}){super(),this.instanceName=e.instanceName}get appInstance(){return window[this.instanceName]}get variables(){var e;return(null===(e=this.appInstance)||void 0===e?void 0:e.variables)||{}}subscribe(e){this.on("CHANGE",({values:r})=>{for(let t in r)e({key:t,value:r[t]})})}getValue(e){return e?{processor:(e,r)=>JSApiVariablesSource.processModel(r,this.instanceName)}:{}}addValues(e){if(!this.appInstance)throw new Error("Instatiate first");if(!e||"object"!=typeof e)throw new Error("Values should be object");Object.keys(e).length&&(this.appInstance.variables=Object.assign(Object.assign({},this.variables),e),this.emit("CHANGE",{values:e}))}static processModel(e,r){var t;if(!e.arguments)return"";const a=e.arguments.find(e=>"JavaScriptVariable"===e.name);if(!(null==a?void 0:a.value)||!r||!(null===(t=window[r])||void 0===t?void 0:t.variables))return"";try{return window[r].variables[a.value]||""}catch(r){return console.error("JSApiVariablesSource: error while getting variable. Model: ",e,"Error: ",r),""}}}JSApiVariablesSource.sourceId=SourceType.JS_API_VARIABLE;export default JSApiVariablesSource;
+import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{SourceType}from"@claspo/common/document/hidden-fields.interface";import resolveVariableValue from"./resolveVariableValue";class JSApiVariablesSource extends DefaultEventEmitter{constructor(e={}){super(),this.instanceName=e.instanceName}get appInstance(){return window[this.instanceName]}get variables(){var e;return(null===(e=this.appInstance)||void 0===e?void 0:e.variables)||{}}subscribe(e){this.on("CHANGE",({values:r})=>{for(let a in r)e({key:a,value:r[a]})})}getValue(e){return e?{processor:(e,r)=>JSApiVariablesSource.processModel(r,this.instanceName)}:{}}addValues(e){if(!this.appInstance)throw new Error("Instatiate first");if(!e||"object"!=typeof e)throw new Error("Values should be object");Object.keys(e).length&&(this.appInstance.variables=Object.assign(Object.assign({},this.variables),e),this.emit("CHANGE",{values:e}))}static processModel(e,r){var a;if(!e.arguments)return"";const t=e.arguments.find(e=>"JavaScriptVariable"===e.name);if(!(null==t?void 0:t.value)||!r||!(null===(a=window[r])||void 0===a?void 0:a.variables))return"";try{const e=resolveVariableValue(window[r].variables,t.value);return null==e?"":e}catch(r){return console.error("JSApiVariablesSource: error while getting variable. Model: ",e,"Error: ",r),""}}}JSApiVariablesSource.sourceId=SourceType.JS_API_VARIABLE;export default JSApiVariablesSource;

package/sdk/source/sources/resolveVariableValue.d.ts

@@ -0,0 +1 @@
+export default function resolveVariableValue(variables: Record<string, any> | undefined, key: string | undefined): any;

package/sdk/source/sources/resolveVariableValue.js

@@ -0,0 +1 @@
+function flattenDefined(e){return e.reduce((e,r)=>void 0===r?e:Array.isArray(r)?(e.push(...flattenDefined(r)),e):(e.push(r),e),[])}export default function resolveVariableValue(e,r){if(!e||!r)return;if(Object.prototype.hasOwnProperty.call(e,r))return e[r];const t=r.split(".").filter(Boolean);if(!t.length)return;const n=(e,r)=>{if(r>=t.length)return e;if(null!=e){if(Array.isArray(e)){const t=flattenDefined(e.map(e=>n(e,r)));return t.length?t:void 0}return n(e[t[r]],r+1)}};return n(e,0)}