removed references to JSUtils and fixed preview editor events

Author: ppaska

projects/core/src/lib/components/base-ui-component.ts

@@ -1,6 +1,5 @@
 import { OnDestroy, HostBinding, SimpleChanges, OnChanges, Directive, Input, Output, EventEmitter } from '@angular/core';
 import { AttributesMap, UIModel, ComponentEvent } from '../models';
-import { JSONUtils } from '../utils/json.utils';
 import { kebabStrToCamel, queryValue, setValue } from '../utils';
 import { StyleProperties, DataModelProperties, StylePropertiesList, BaseProperties } from '../properties';
 import { InputProperties } from '../ui-components/input/input.component';

projects/core/src/lib/services/core.service.ts

@@ -87,11 +87,15 @@ export class CoreService {
       if (res) {
         const type = Object.keys(res)[0];
         const xmlObj = res[type];
+        if(typeof xmlObj === 'string')
+        {
+          throw Error(`Invalid XML, please make sure file can't start with comment <!-- -->`);
+        }
         xmlObj['#name'] = type;
         return CoreService.getUIModel(toXMLResult(xmlObj));
       }
     } catch (e) {
-      console.log(e);
+      console.error(e);
       throw e;
     }
   }
@@ -126,7 +130,9 @@ export class CoreService {
       }
 
       if (xmlRes.childNodes && !uiModel.children) {
-        uiModel.children = xmlRes.childNodes.map((r: any) => CoreService.getUIModel(toXMLResult(r)));
+        uiModel.children = xmlRes.childNodes
+          .filter(n => n['#name'] !== '#comment')
+          .map((r: any) => CoreService.getUIModel(toXMLResult(r)));
       }
       return uiModel;
     } else {

projects/core/src/lib/ui-components/select/select.component.ts

@@ -119,7 +119,7 @@ export const example: ComponentExample<UIModel<SelectProperties>> = {
     <section class="flex-column">
       <section class="form-group">
         <label class="col-form-label" width="60px">Country</label>
-        <select class="form-control" onSelect="countryChanged()" width="300px" binding="$.country">
+        <select class="form-control" onSelect="countryChanged(selectedItem)" width="300px" binding="$.country">
           <option>Select country</option>
           <option value="uk">United Kingdom</option>
           <option value="ua">Ukraine</option>
@@ -137,14 +137,20 @@ export const example: ComponentExample<UIModel<SelectProperties>> = {
 
   def countryChanged():
     dataModel.city = null
-    if dataModel.country == null:
-      dataModel.cities = []
-    if dataModel.country == "uk":
-      dataModel.cities = [{label: "Select city", value: null}, {label: "London", value: "lon"}, {label: "Liverpool", value: "liv"}]
-    if dataModel.country == "ua":
-      dataModel.cities = [{label: "Select city", value: null}, {label: "Kyiv", value: "kyiv"}, {label: "Lviv", value: "lviv"}]
-
-    print(dataModel)
+
+    if selectedItem?.value == "uk":
+      dataModel.cities = [
+        {label: "Select city", value: null},
+        {label: "London", value: "lon"},
+        {label: "Liverpool", value: "liv"}
+      ]
+
+    if selectedItem?.value == "ua":
+      dataModel.cities = [
+        {label: "Select city", value: null},
+        {label: "Kyiv", value: "kyiv"},
+        {label: "Lviv", value: "lviv"}
+      ]
 
   `,
   title: 'Basic select example'

projects/core/src/lib/utils/index.ts

@@ -2,7 +2,6 @@ import { BaseUIComponent } from '../components/base-ui-component';
 import { BaseHTMLElement } from '../components/base-html-element';
 import { BaseDynamicComponent } from '../components/base-dynamic-component';
 import { UIModel } from '../models';
-import { JSONUtils } from './json.utils';
 
 export * from './helpers';
 export type BaseUIComponentConstructor = new () => BaseUIComponent;
@@ -36,10 +35,41 @@ export function getComponentById(uiModel: UIModel, id: string): BaseDynamicCompo
   return componentUIModel?.getComponent();
 }
 
+/**
+ * A helper method that sets value based on path.
+ * e.g. setValue({}, 'obj.prop1.value', 22) will create a corresponding object and assign value = 22
+ */
 export function setValue(objectValue: object, path: string, value: any): void {
-  JSONUtils.setValue(objectValue, path, value);
+  if (!objectValue) {
+    objectValue = {};
+  }
+
+  if (path === '$' || path === '') {
+    Object.assign(objectValue, value);
+    return;
+  }
+
+  if (path.startsWith('$.')) {
+    path = path.substring(2);
+  }
+
+  const props = path.indexOf('/') > 0 ? path.split('/') : path.split('.');
+  let res: any = objectValue;
+
+  for (let i = 0; i < props.length - 1; i++) {
+    res = objectValue[props[i]];
+    if (typeof res !== 'object') {
+      objectValue[props[i]] = {};
+      res = objectValue[props[i]];
+    }
+  }
+
+  res[props[props.length - 1]] = value;
 }
 
+/**
+ * a helper methods that query JS Object for a value based on path. obj.subObject.value
+ */
 export function queryValue(obj: any, path: string, defaultValue: any = null): any {
   if (path === '$' || path === '') {
     return defaultValue;
@@ -49,7 +79,7 @@ export function queryValue(obj: any, path: string, defaultValue: any = null): an
     path = path.substring(2);
   }
 
-  const props = path.indexOf('/') > 0 ? path.split('/') : path.split('.')
+  const props = path.indexOf('/') > 0 ? path.split('/') : path.split('.');
 
   let res = obj;
   for (const p of props) {