Cleanup

packages/core/src/css_composer/model/CssRule.ts

@@ -7,7 +7,6 @@ import { isEmptyObj, hasWin } from '../../utils/mixins';
 import Selector, { SelectorProps } from '../../selector_manager/model/Selector';
 import EditorModel from '../../editor/model/Editor';
 import CssRuleView from '../view/CssRuleView';
-import DynamicVariableListenerManager from '../../data_sources/model/DataVariableListenerManager';
 
 /** @private */
 export interface CssRuleProperties {
@@ -95,7 +94,6 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
   em?: EditorModel;
   opt: any;
   views: CssRuleView[] = [];
-  dynamicVariableListeners: Record<string, DynamicVariableListenerManager> = {};
 
   defaults() {
     return {

packages/core/src/data_sources/model/StyleDataVariable.ts

@@ -1,9 +0,0 @@
-import DataVariable from './DataVariable';
-
-export default class StyleDataVariable extends DataVariable {
-  defaults() {
-    return {
-      ...super.defaults(),
-    };
-  }
-}

packages/core/src/data_sources/model/conditional_variables/ComponentDataCondition.ts

@@ -5,28 +5,25 @@ import { DataCondition, DataConditionProps, DataConditionType } from './DataCond
 
 export default class ComponentDataCondition extends Component {
   dataCondition: DataCondition;
-  componentDefinition: DataConditionProps;
 
   constructor(props: DataConditionProps, opt: ComponentOptions) {
     const { condition, ifTrue, ifFalse } = props;
     const dataConditionInstance = new DataCondition(condition, ifTrue, ifFalse, { em: opt.em });
-    const initialComponentsProps = dataConditionInstance.getDataValue();
-    const conditionalCmptDef = {
-      type: DataConditionType,
-      components: initialComponentsProps,
-    };
-    super(conditionalCmptDef, opt);
-
-    this.componentDefinition = props;
+    super(
+      {
+        ...props,
+        type: DataConditionType,
+        components: dataConditionInstance.getDataValue(),
+      },
+      opt,
+    );
     this.dataCondition = dataConditionInstance;
     this.dataCondition.onValueChange = this.handleConditionChange.bind(this);
   }
 
   private handleConditionChange() {
     this.dataCondition.reevaluate();
-    const updatedComponents = this.dataCondition.getDataValue();
-    this.components().reset();
-    this.components().add(updatedComponents);
+    this.components(this.dataCondition.getDataValue());
   }
 
   static isComponent(el: HTMLElement) {

packages/core/src/domain_abstract/model/StyleableModel.ts

@@ -4,8 +4,7 @@ import ParserHtml from '../../parser/model/ParserHtml';
 import Selectors from '../../selector_manager/model/Selectors';
 import { shallowDiff } from '../../utils/mixins';
 import EditorModel from '../../editor/model/Editor';
-import StyleDataVariable from '../../data_sources/model/StyleDataVariable';
-import { DataVariableProps, DataVariableType } from '../../data_sources/model/DataVariable';
+import DataVariable, { DataVariableProps, DataVariableType } from '../../data_sources/model/DataVariable';
 import DynamicVariableListenerManager from '../../data_sources/model/DataVariableListenerManager';
 import CssRuleView from '../../css_composer/view/CssRuleView';
 import ComponentView from '../../dom_components/view/ComponentView';
@@ -112,8 +111,10 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
       const styleValue = newStyle[key];
       if (isDynamicValueDefinition(styleValue)) {
         const styleDynamicVariable = this.resolveDynamicValue(styleValue);
-        newStyle[key] = styleDynamicVariable;
-        this.manageDataVariableListener(styleDynamicVariable, key);
+        if (styleDynamicVariable) {
+          newStyle[key] = styleDynamicVariable;
+          this.manageDataVariableListener(styleDynamicVariable, key);
+        }
       }
     });
 
@@ -140,21 +141,19 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
   }
 
   private resolveDynamicValue(styleValue: DynamicValueProps) {
+    const em = this.em!;
     const dynamicType = styleValue.type;
     let styleDynamicVariable;
+
     switch (dynamicType) {
       case DataVariableType:
-        styleDynamicVariable = new StyleDataVariable(styleValue, { em: this.em });
+        styleDynamicVariable = new DataVariable(styleValue, { em });
         break;
       case DataConditionType: {
         const { condition, ifTrue, ifFalse } = styleValue;
-        styleDynamicVariable = new DataCondition(condition, ifTrue, ifFalse, { em: this.em! });
+        styleDynamicVariable = new DataCondition(condition, ifTrue, ifFalse, { em });
         break;
       }
-      default:
-        throw new Error(
-          `Unsupported dynamic value type for styles. Only '${DataVariableType}' and '${DataConditionType}' are supported. Received '${dynamicType}'.`,
-        );
     }
 
     return styleDynamicVariable;
@@ -163,7 +162,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
   /**
    * Manage DataVariableListenerManager for a style property
    */
-  manageDataVariableListener(dataVar: StyleDataVariable | DataCondition, styleProp: string) {
+  manageDataVariableListener(dataVar: DataVariable | DataCondition, styleProp: string) {
     if (this.dynamicVariableListeners[styleProp]) {
       this.dynamicVariableListeners[styleProp].listenToDynamicVariable();
     } else {
@@ -209,7 +208,9 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
 
       if (isDynamicValueDefinition(styleValue)) {
         const dataVar = this.resolveDynamicValue(styleValue);
-        resolvedStyle[key] = dataVar.getDataValue();
+        if (dataVar) {
+          resolvedStyle[key] = dataVar.getDataValue();
+        }
       }
 
       if (isDynamicValue(styleValue)) {