spyne 0.19.1 → 0.20.0

package/src/spyne/views/dom-element-template.js

@@ -1,5 +1,6 @@
-import {includes, __, ifElse, path, prop, reject, is, isNil, isEmpty} from 'ramda';
-
+import { includes, __, ifElse, path, prop, reject, is, isNil, isEmpty } from 'ramda'
+import sanitizeHTML from '../utils/sanitize-html'
+import { SpyneAppProperties } from '../utils/spyne-app-properties'
 
 /**
  * @module DomElTemplate
@@ -134,221 +135,217 @@ import {includes, __, ifElse, path, prop, reject, is, isNil, isEmpty} from 'ramd
  */
 
 export class DomElementTemplate {
-  constructor(template, data={}) {
-    this.template = this.formatTemplate(template);
-    this.isProxyData = data.__cms__isProxy === true;
-
+  constructor(template, data = {}) {
+    this.template = this.formatTemplate(template)
+    this.isProxyData = data.__cms__isProxy === true
 
-
-    const checkForArrayData = ()=>{
+    const checkForArrayData = () => {
       if (is(Array, data) === true) {
-        data = {spyneData:data};
-        this.template = this.template.replace("{{/}}", "{{/spyneData}}");
-        this.template = this.template.replace("{{#}}", "{{#spyneData}}");
+        data = { spyneData:data }
+        this.template = this.template.replace('{{/}}', '{{/spyneData}}')
+        this.template = this.template.replace('{{#}}', '{{#spyneData}}')
       }
-    };
-
+    }
 
-    checkForArrayData();
+    checkForArrayData()
 
-    this.templateData = data;
+    this.templateData = data
 
-    let strArr = DomElementTemplate.getStringArray(this.template);
+    const strArr = DomElementTemplate.getStringArray(this.template)
 
-    let strMatches = this.template.match(DomElementTemplate.findTmplLoopsRE());
-    strMatches = strMatches === null ? [] : strMatches;
+    let strMatches = this.template.match(DomElementTemplate.findTmplLoopsRE())
+    strMatches = strMatches === null ? [] : strMatches
 
-    const parseTmplLoopsRE = DomElementTemplate.parseTmplLoopsRE();
+    const parseTmplLoopsRE = DomElementTemplate.parseTmplLoopsRE()
 
-    const parseTmplLoopFn =  this.parseTheTmplLoop.bind(this);
+    const parseTmplLoopFn =  this.parseTheTmplLoop.bind(this)
 
     const mapTmplLoop = (str, data) => {
-      return str.replace(parseTmplLoopsRE, parseTmplLoopFn);
+      return str.replace(parseTmplLoopsRE, parseTmplLoopFn)
     }
 
-    const findTmplLoopsPred = includes(__, strMatches);
+    const findTmplLoopsPred = includes(__, strMatches)
     const checkForMatches = ifElse(
-        findTmplLoopsPred,
-        mapTmplLoop,
-        this.addParams.bind(this));
-
-    this.finalArr = strArr.map(checkForMatches);
+      findTmplLoopsPred,
+      mapTmplLoop,
+      this.addParams.bind(this))
 
+    this.finalArr = strArr.map(checkForMatches)
   }
 
-  static isPrimitiveTag(str){
-    return  /({{\.\*?}})/.test(str);;
+  static isPrimitiveTag(str) {
+    return /({{\.\*?}})/.test(str)
   }
 
   // FIND CORRECT NESTED DATA
-  static getNestedDataReducer(data={}, param=""){
-    const dataReducer = (nestedData, str) =>{
-      if (nestedData[str]){
-        return nestedData[str];
+  static getNestedDataReducer(data = {}, param = '') {
+    const dataReducer = (nestedData, str) => {
+      if (nestedData[str]) {
+        return nestedData[str]
       }
-      return nestedData;
+      return typeof nestedData === 'string' ? nestedData : ''
     }
-    return  /(\.)/gm.test(String(param)) ?  String(param).split('.').reduce(dataReducer,data) : data[param];
+
+    return /(\.)/gm.test(String(param)) ? String(param).split('.').reduce(dataReducer, data) : data[param] ?? ''
   }
 
   static getStringArray(template) {
-    let strArr = template.split(DomElementTemplate.findTmplLoopsRE());
-    const emptyRE = /^([\\n\s\W]+)$/;
-    const filterOutEmptyStrings = s => s.match(emptyRE);
-    const finalStr =  reject(filterOutEmptyStrings, strArr);
-
-    return finalStr;
+    const strArr = template.split(DomElementTemplate.findTmplLoopsRE())
+    const emptyRE = /^([\\n\s\W]+)$/
+    const filterOutEmptyStrings = s => s.match(emptyRE)
+    const finalStr =  reject(filterOutEmptyStrings, strArr)
 
+    return finalStr
   }
 
   static findTmplLoopsRE() {
-    return /({{#[\w.]+}}[\w\n\s\W]+?{{\/[\w.]+}})/gm;
+    return /({{#[\w.]+}}[\w\n\s\W]+?{{\/[\w.]+}})/gm
   }
 
   static parseTmplLoopsRE() {
-    return /({{#([\w.]+)}})([\w\n\s\W]+?)({{\/\2}})/gm;
+    return /({{#([\w.]+)}})([\w\n\s\W]+?)({{\/\2}})/gm
   }
 
   static swapParamsForTagsRE() {
-    return /({{)(.*?)(}})/gm;
+    return /({{)(.*?)(}})/gm
   }
 
   removeThis() {
-    this.finalArr = undefined;
-    this.templateData = undefined;
-    this.template = undefined;
+    if (this !== undefined) {
+      this.finalArr = undefined
+      this.templateData = undefined
+      this.template = undefined
+    }
   }
 
-
   /**
    *
    * @desc Returns a document fragment generated from the template and any added data.
    */
 
-
   renderDocFrag() {
-    const html = this.finalArr.join('');
-    const isTableSubTag =   /^([^>]*?)(<){1}(\b)(thead|col|colgroup|tbody|td|tfoot|tr|th)(\b)([^\0]*)$/.test(html);
-    const el = isTableSubTag ? html : document.createRange().createContextualFragment(html);
-
-    window.setTimeout(this.removeThis(), 2);
-    return el;
-
+    let html = DomElementTemplate.replaceImgPath(this.finalArr.join(''))
+    // html = sanitizeHTML(this.finalArr.join(''))
+    html = sanitizeHTML(html)
+    const isTableSubTag =   /^([^>]*?)(<){1}(\b)(thead|col|colgroup|tbody|td|tfoot|tr|th)(\b)([^\0]*)$/.test(html)
+    const el = isTableSubTag ? html : document.createRange().createContextualFragment(html)
+
+    window.setTimeout(this.removeThis, 2)
+    return el
   }
 
-  renderToString(){
-    const html = this.finalArr.join('');
-    window.setTimeout(this.removeThis(), 2);
-    return html;
+  renderToString() {
+    let html = this.finalArr.join('')
+    html = DomElementTemplate.replaceImgPath(html)
+    window.setTimeout(this.removeThis, 2)
+    return html
   }
 
   getTemplateString() {
-    return this.finalArr.join('');
+    return this.finalArr.join('')
   }
 
   formatTemplate(template) {
-    return prop('nodeName', template)==='SCRIPT' ? template.innerHTML : template;
+    return ['SCRIPT', 'TEMPLATE'].includes(prop('nodeName', template)) === true ? template.innerHTML : template
   }
 
-  getDataValFromPathStr(pathStr, dataFile){
-    const pathArr = String(pathStr).split('.');
-    const pathData = path(pathArr, dataFile);
-    return pathData || '';
+  getDataValFromPathStr(pathStr, dataFile) {
+    const pathArr = String(pathStr).split('.')
+    const pathData = path(pathArr, dataFile)
+    return pathData || ''
   }
 
   addParams(str) {
-    const re = /(\.)/gm;
     const replaceTags = (str, p1, p2, p3) => {
-      return DomElementTemplate.getNestedDataReducer(this.templateData, p2);
-    };
-    return str.replace(DomElementTemplate.swapParamsForTagsRE(), replaceTags);
-
+      return DomElementTemplate.getNestedDataReducer(this.templateData, p2)
+    }
+    return str.replace(DomElementTemplate.swapParamsForTagsRE(), replaceTags)
   }
 
-
-
-
-  parseTheTmplLoop(str, p1, p2, p3) {
-    const dotConverter = str=>`${str.replace(/(\.)/g, "][")}`
-    const reDot = /(\.)/gm;
-    const subStr = p3;
-
-    const dataReducer = (acc, str) =>{
-      acc = acc[str];
-      return acc;
+  static replaceImgPath(templateStr) {
+    const { IMG_PATH } = SpyneAppProperties
+    if (IMG_PATH !== undefined) {
+      templateStr = templateStr.replaceAll(/src\s*=\s*(['"])imgs\//g, `src=$1${IMG_PATH}`)
+      return templateStr.replaceAll(/url\(\s*(['"]?)imgs\//g, `url($1${IMG_PATH}`)
     }
+    return templateStr
+  }
 
+  parseTheTmplLoop(str, p1, p2, p3) {
+    // const dotConverter = str => `${str.replace(/(\.)/g, '][')}`
+    const reDot = /(\.)/gm
+    const subStr = p3
 
-    let elData = DomElementTemplate.getNestedDataReducer(this.templateData, p2);
+    /*     const dataReducer = (acc, str) => {
+      acc = acc[str]
+      return acc
+    } */
 
-    const arrayStringToObjAdapter = (d,str, i)=>{
+    let elData = DomElementTemplate.getNestedDataReducer(this.templateData, p2)
 
+    const arrayStringToObjAdapter = (d, str, i) => {
       // IF {{.}} RUN parseString
-      if (DomElementTemplate.isPrimitiveTag(str)){
-        return parseString(d, str, i);
+      if (DomElementTemplate.isPrimitiveTag(str)) {
+        return parseString(d, str, i)
       }
 
       // CREATE DATA OBJ -- CHECK TO ADD PROXY VALUES
-      const createDataObj = ()=>{
-        const spyneLoopKey = d;
-        const loopIndex = i;
-        const loopNum = i+1;
+      const createDataObj = () => {
+        const spyneLoopKey = d
+        const loopIndex = i
+        const loopNum = i + 1
 
         if (this.isProxyData) {
-          const __cms__dataId = elData.__cms__dataId;
+          const __cms__dataId = elData.__cms__dataId
           const keyIdStr = `__cms__keyFor_${d}`
-          const origKey = elData[keyIdStr];
-          return {spyneLoopKey, __cms__dataId, origKey, loopIndex, loopNum, d}
-
+          const origKey = elData[keyIdStr]
+          return { spyneLoopKey, __cms__dataId, origKey, loopIndex, loopNum, d }
         }
-        return {spyneLoopKey, loopIndex, loopNum};
+        return { spyneLoopKey, loopIndex, loopNum }
       }
 
-      return parseObject(createDataObj(), str, i);
+      return parseObject(createDataObj(), str, i)
     }
 
     const parseString = (item, str, index, origIndex) => {
-      return str.replace(DomElementTemplate.swapParamsForTagsRE(), item);
-    };
-
+      return str.replace(DomElementTemplate.swapParamsForTagsRE(), item)
+    }
 
     // PARSING ARRAYS AND OBJECTS
     const parseObject = (obj, str, i) => {
       /// LOOP NUMBER VALUES AUTO ADDED
 
-      //const loopIndex = i;
-      //const loopNum = i+1;
+      // const loopIndex = i;
+      // const loopNum = i+1;
 
       const loopObj = (str, p1, p2) => {
         // DOT SYNTAX CHECK
         const hash = {
           loopIndex: i,
-          loopNum: i+1
+          loopNum: i + 1
         }
 
         // IF {{.}}
-        if (reDot.test(p2) === false && obj[p2] !==undefined) {
+        if (reDot.test(p2) === false && obj[p2] !== undefined) {
           return hash[p2] !== undefined ? hash[p2] : obj[p2]
         }
 
-        const dataReducedVal  = this.getDataValFromPathStr(p2, obj);
+        const dataReducedVal  = this.getDataValFromPathStr(p2, obj)
         return hash[p2] !== undefined ? hash[p2] : dataReducedVal
-      };
-      return str.replace(DomElementTemplate.swapParamsForTagsRE(), loopObj);
-    };
+      }
+      return str.replace(DomElementTemplate.swapParamsForTagsRE(), loopObj)
+    }
 
-    const mapStringData = (d, i) => typeof(d) === 'string' ? arrayStringToObjAdapter(d, subStr,  i) : parseObject(d, subStr, i);
+    const mapStringData = (d, i) => typeof (d) === 'string' ? arrayStringToObjAdapter(d, subStr, i) : parseObject(d, subStr, i)
 
     if (isNil(elData) === true || isEmpty(elData)) {
-      return '';
+      return ''
     }
 
-    if (elData.length===undefined) {
-      elData = [elData];
+    if (elData.length === undefined) {
+      elData = [elData]
     }
 
-    return elData.map(mapStringData).join('');
-
-
+    return elData.map(mapStringData).join('')
   }
 }

package/src/spyne/views/dom-element.js

@@ -1,7 +1,7 @@
-import { baseCoreMixins } from '../utils/mixins/base-core-mixins';
-import { DomElementTemplate } from './dom-element-template';
-import { deepMerge } from '../utils/deep-merge';
-import {is, defaultTo, pick, mapObjIndexed, forEachObjIndexed, pipe} from 'ramda';
+import { baseCoreMixins } from '../utils/mixins/base-core-mixins'
+import { DomElementTemplate } from './dom-element-template'
+import { deepMerge } from '../utils/deep-merge'
+import { is, defaultTo, pick, mapObjIndexed, forEachObjIndexed, pipe } from 'ramda'
 
 class DomElement {
   /**
@@ -25,91 +25,90 @@ class DomElement {
    *
    */
 
-  constructor(props={}) {
+  constructor(props = {}) {
+    const checkDefault = (dflt, val) => defaultTo(dflt)(val)
 
-    const checkDefault = (dflt, val)=>defaultTo(dflt)(val);
+    props.tagName = checkDefault('div', props.tagName)
 
-    props.tagName = checkDefault('div', props.tagName);
+    props.attributes = props.attributes !== undefined ? props.attributes : this.getDomAttributes(props)
+    props.attrs = this.updateAttrs(props.attributes)
 
-    props.attributes = props.attributes!==undefined ? props.attributes : this.getDomAttributes(props);
-    props.attrs = this.updateAttrs(props.attributes);
+    props.fragment = document.createDocumentFragment()
+    this.props = props
 
-    props.fragment =  document.createDocumentFragment()
-    this.props = props;
-
-    this.addMixins();
+    this.addMixins()
   }
 
   setProp(key, val) {
-    this.props[key] = val;
+    this.props[key] = val
   }
 
   getProp(val) {
-    return this.props[val];
+    return this.props[val]
   }
 
   get el() {
-    return this.props.el;
+    return this.props.el
   }
 
   setElAttrs(el, params) {
-    let addAttributes = (val, key) => {
-      let addToDataset = (val, key) => { el.dataset[key] = val; };
+    const addAttributes = (val, key) => {
+      const addToDataset = (val, key) => { el.dataset[key] = val }
       if (key === 'dataset') {
-        forEachObjIndexed(addToDataset, val);
+        forEachObjIndexed(addToDataset, val)
       } else {
-        el.setAttribute(key, val);
+        el.setAttribute(key, val)
       }
-    };
-    this.getProp('attrs').forEach(addAttributes);
-    return el;
+    }
+    this.getProp('attrs').forEach(addAttributes)
+    return el
   }
 
   updateAttrs(params, m) {
-    let theMap = m !== undefined ? m : new Map();
-    let addAttributes = (val, key) => theMap.set(key, val);
-    mapObjIndexed(addAttributes, params);
-    return theMap;
+    const theMap = m !== undefined ? m : new Map()
+    const addAttributes = (val, key) => theMap.set(key, val)
+    mapObjIndexed(addAttributes, params)
+    return theMap
   }
 
   addTemplate(el) {
-    let template = this.getProp('template');
+    const template = this.getProp('template')
 
-    let addTmpl = (template) => {
-      let data = this.getProp('data');
-      data = is(Object, data) ? data : {};
-      let frag = new DomElementTemplate(template, data).renderDocFrag();
-      const fragIsString = is(String, frag);
-      fragIsString ? el.innerHTML = frag : el.appendChild(frag);
-      return el;
-    };
-    let doNothing = (el) => el;
-    return template !== undefined ? addTmpl(template) : doNothing(el);
+    const addTmpl = (template) => {
+      let data = this.getProp('data')
+      data = is(Object, data) ? data : {}
+      const frag = new DomElementTemplate(template, data).renderDocFrag()
+      const fragIsString = is(String, frag)
+      fragIsString ? el.innerHTML = frag : el.appendChild(frag)
+      return el
+    }
+    const doNothing = (el) => el
+    return template !== undefined ? addTmpl(template) : doNothing(el)
   }
 
   createElement(tagName = 'div') {
-    return document.createElement(tagName);
+    return document.createElement(tagName)
   }
 
   addContent(el) {
-    let text = (this.getProp('data'));
-    let isText = is(String, text);
+    const text = (this.getProp('data'))
+    const isText = is(String, text)
     if (isText === true) {
-      let txt = document.createTextNode(text);
-      el.appendChild(txt);
+      const txt = document.createTextNode(text)
+      el.appendChild(txt)
     }
-    return el;
+    return el
   }
 
   execute() {
-    let el = pipe(
+    const el = pipe(
       this.createElement.bind(this),
       this.setElAttrs.bind(this),
       this.addTemplate.bind(this),
       this.addContent.bind(this)
-    )(this.getProp('tagName'));
+    )(this.getProp('tagName'))
     // this.getProp('fragment').appendChild(el);
-    this.props.el = el;
+    this.props.el = el
   }
 
   /**
@@ -117,67 +116,67 @@ class DomElement {
    * @returns {HTMLElement} HTMLElement
    */
   render() {
-    this.execute();
-    this.props.template = undefined;
-    this.props.data = undefined;
-    this.props.attributes = undefined;
-    return this.getProp('el');
+    this.execute()
+    this.props.template = undefined
+    this.props.data = undefined
+    this.props.attributes = undefined
+    return this.getProp('el')
   }
 
   renderToHTMLString() {
-    this.execute();
-    this.props.template = undefined;
-    this.props.data = undefined;
-    this.props.attributes = undefined;
-    return this.getProp('el').outerHTML;
+    this.execute()
+    this.props.template = undefined
+    this.props.data = undefined
+    this.props.attributes = undefined
+    return this.getProp('el').outerHTML
   }
 
-
   returnIfDefined(obj, val) {
     if (val !== undefined) {
-      let isObj = typeof (val) === 'undefined';
-      isObj === false ? obj[val] = val : obj[val] = deepMerge(obj[val], val);
+      const isObj = typeof (val) === 'undefined'
+      isObj === false ? obj[val] = val : obj[val] = deepMerge(obj[val], val)
     }
   }
 
   updateprops(val) {
-    this.returnIfDefined(this.props, val);
-    return this;
+    this.returnIfDefined(this.props, val)
+    return this
   }
 
   updatepropsAndRun(val) {
-    this.updateprops(val);
-    this.execute();
-    return this.getProp('fragment');
+    this.updateprops(val)
+    this.execute()
+    return this.getProp('fragment')
   }
 
   unmount() {
     if (this.props !== undefined) {
-      this.getProp('el').remove();
-      this.props = undefined;
-      this.gc();
+      this.getProp('el').remove()
+      this.props = undefined
+      this.gc()
     }
   }
 
-  updateTag(tagName = 'div') { this.updateprops(tagName); }
-  updateAttributes(attrs = {}) { this.updateprops(attrs); }
-  updateTemplate(template) { this.updateprops(template); }
-  updateData(data = {}) { this.updateprops(data); }
-  addTagAndRender(tagName = 'div') { this.updatepropsAndRun(tagName); }
-  addAttrsibutesAndRender(attrs = {}) { this.updatepropsAndRun(attrs); }
-  addTemplateAndRender(template) { this.updatepropsAndRun(template); }
-  addDataAndRender(data = {}) { this.updatepropsAndRun(data); }
+  updateTag(tagName = 'div') { this.updateprops(tagName) }
+  updateAttributes(attrs = {}) { this.updateprops(attrs) }
+  updateTemplate(template) { this.updateprops(template) }
+  updateData(data = {}) { this.updateprops(data) }
+  addTagAndRender(tagName = 'div') { this.updatepropsAndRun(tagName) }
+  addAttrsibutesAndRender(attrs = {}) { this.updatepropsAndRun(attrs) }
+  addTemplateAndRender(template) { this.updatepropsAndRun(template) }
+  addDataAndRender(data = {}) { this.updatepropsAndRun(data) }
   //  ==================================
   // BASE CORE MIXINS
   //  ==================================
   addMixins() {
-    let coreMixins = baseCoreMixins();
-    this.gc = coreMixins.gc.bind(this);
+    const coreMixins = baseCoreMixins()
+    this.gc = coreMixins.gc.bind(this)
   }
 
-  getDomAttributes(props){
-    return pick(this.attributesArray, props);
+  getDomAttributes(props) {
+    return pick(this.attributesArray, props)
   }
+
   get attributesArray() {
     return [
       'accept',
@@ -302,9 +301,8 @@ class DomElement {
       'value',
       'width',
       'wrap'
-    ];
+    ]
   }
-
 }
-const DomEl = DomElement;
-export {DomElement, DomEl}
+const DomEl = DomElement
+export { DomElement, DomEl }