spyne 0.20.17 → 0.21.1

package/lib/spyne.umd.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /*!
-     * Spyne 0.20.17
+     * Spyne 0.21.1
      * https://spynejs.org
      *
      * @license
@@ -15,7 +15,7 @@
      */
 
 /*!
- * spynejs 0.20.17
+ * spynejs 0.21.1
  * https://spynejs.org
  * (c) 2017-present Frank Batista
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spyne",
-  "version": "0.20.17",
+  "version": "0.21.1",
   "description": "Reactive Real-DOM Framework for Advanced Javascript applications",
   "sideEffects": true,
   "main": "./lib/spyne.esm.js",
@@ -24,12 +24,13 @@
     "dev": "webpack --config webpack.config.js --mode development",
     "stats": "webpack --profile --json --optimize-minimize --mode production --env build > stats.json",
     "docs": "jsdoc --readme README.md -d docs -c docs/jsdoc.config.json -r",
-    "esdocs": "esdoc -d esdocs -c esdocs/esdoc.config.json -r",
+    "esdocs": "esdoc   -d esdocs -c esdocs/esdoc.config.json -r",
     "test": "karma start karma.conf.js",
     "test:single": "karma start karma.conf.js --single-run",
     "watch:test": "npm test -- --auto-watch --no-single-run",
     "test:mocha": "mocha tests",
     "lint": "eslint 'src/spyne/**' --fix",
+    "verify:dist": "test -f lib/spyne.esm.js && test -f lib/spyne.umd.js",
     "prepare": "husky"
   },
   "repository": {

package/src/spyne/spyne-app.js

@@ -6,7 +6,7 @@ import { sanitizeHTMLConfigure } from './utils/sanitize-html.js'
 import { sanitizeDataConfigure } from './utils/sanitize-data.js'
 
 const _channels = new ChannelsMap()
-const version = '0.20.17'
+const version = '0.21.1'
 
 class SpyneApplication {
   /**
@@ -32,8 +32,6 @@ class SpyneApplication {
 
   constructor() {
     this.version = version
-
-    // console.log('spyne app created')
   }
 
   get channels() {
@@ -43,7 +41,7 @@ class SpyneApplication {
   init(config = {}, testMode = false) {
     // this.channels = new ChannelsMap();
     /*!
-     * Spyne 0.20.17
+     * Spyne 0.21.1
      * https://spynejs.org
      *
      * @license
@@ -59,9 +57,6 @@ class SpyneApplication {
      */
     /* eslint-disable */
 
-
-
-
     if(SpyneAppProperties.initialized === true){
       if (testMode){
         return 'The Spyne Application has already been initialized!';

package/src/spyne/utils/sanitize-data.js

@@ -15,15 +15,16 @@ const SAFE_FOR_RICH_TEXT = {
     'blockquote', 'pre', 'code', 'span', 'div', 'section', 'article', 'aside',
     'header', 'footer', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
     'table', 'thead', 'tbody', 'tr', 'td', 'th', 'img', 'figure', 'figcaption',
-    'video', 'source'
+    'video', 'source', 'iframe', 'input', 'button', 'label', 'link'
   ],
+  ADD_TAGS: ['iframe', 'input', 'button', 'link'],
   ALLOWED_ATTR: [
-    'href', 'src', 'alt', 'title', 'width', 'height', 'style', 'target', 'rel',
+    'href', 'src', 'alt', 'class', 'title', 'width', 'height', 'style', 'target', 'rel',
     'controls', 'poster', 'type', 'rows', 'cols'
   ],
   ALLOW_DATA_ATTR: true,
   FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange'],
-  FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'meta', 'link'],
+  FORBID_TAGS: ['script', 'object', 'embed', 'meta', 'link'],
   SAFE_URL_PATTERN: /^(https?:|mailto:|tel:|data:image\/)/i
 }
 
@@ -38,7 +39,7 @@ const SAFE_FOR_APP = {
  * ------------------------------------------- */
 const resolveDefaultMode = () => {
   try {
-    const mode = SpyneAppProperties?.mode
+    const mode = SpyneAppProperties?.mode || process?.env?.NODE_ENV
     if (mode === 'authoring' || mode === 'development') return 'richtext'
   } catch (e) {
     // Fallback: assume production strict mode
@@ -48,6 +49,10 @@ const resolveDefaultMode = () => {
 
 /* --------------------------------------------- */
 function makeSanitizeFn(mode = 'app') {
+  if (process?.env?.NODE_ENV === 'development') {
+    mode = 'richtext'
+  }
+
   const cfg = mode === 'richtext' ? SAFE_FOR_RICH_TEXT : SAFE_FOR_APP
 
   return (html) => {
@@ -57,7 +62,7 @@ function makeSanitizeFn(mode = 'app') {
     if (mode === 'richtext') {
       clean = clean.replace(/<(a|img)\b([^>]+?)>/gi, (match) => {
         return match.replace(/\b(href|src)="([^"]*)"/gi, (m, attr, val) => {
-          return SAFE_FOR_RICH_TEXT.SAFE_URL_PATTERN.test(val) ? m : `${attr}=""`
+          return m
         })
       })
     }
@@ -114,6 +119,7 @@ const sanitizeData = (data, opts = {}) => {
   if (!isConfigured) {
     throw new Error('sanitizeData is not configured. Call sanitizeDataConfigure() first.')
   }
+  // return data;
   return _sanitizeData(data, opts)
 }
 
@@ -135,8 +141,8 @@ const sanitizeEventTarget = (el, mode) => {
   if (!el) return
   const effectiveMode = mode || resolveDefaultMode()
   const sanitizeStr = makeSanitizeFn(effectiveMode)
-  const UNSAFE_RE = /<(?:script|iframe|object|embed|form|input|button|link|meta)[^>]*>|on\w+=|javascript:/i
-
+  // const UNSAFE_RE = /<(?:script|iframe|object|embed|form|input|button|link|meta)[^>]*>|on\w+=|javascript:/i
+  const UNSAFE_RE = /<(?:script|object|embed|form|input|button|link|meta)[^>]*>|on\w+=|javascript:/i
   if (typeof el.value === 'string' && UNSAFE_RE.test(el.value)) {
     const clean = sanitizeStr(el.value)
     if (clean !== el.value) el.value = clean

package/src/spyne/utils/spyne-app-properties.js

@@ -277,62 +277,10 @@ class SpyneAppPropertiesClass {
   }
 
   setCMSProxyMethod(fn){
-   // this.formatTemplateForProxyData = fn;
     this.enableCMSProxies = true;
-  }
-
-  // SpyneJS Enterprise Code Start
-   formatTemplateForProxyData(tmpl) {
-    const isPrimitiveTag = str => /({{\.\*?}})/.test(str);
-
-    const reLines2 = /(({{(?!loopNum|loopIndex))(.*?)(}}))/gm
-    const reStr = '(?<=>)(.*?)(({{)(.*)(}}))'
-
-    const reLines1 =  new RegExp(reStr, 'gm')
-
-    const formatCmsParam = (str) => {
-      const isArrPrimitive = isPrimitiveTag(str)
-
-      const getKeyAndDataId = (s) => {
-        const re = /({{)([\w_]+(\.))*?(\w+)(}})/gm // this is old, will be deprecated.
-        const reNestedData = /^\{\{([^}]+?)\.[^.}]+}}$/gm
-
-        let dataId = '__cms__dataId'
-        const key = isArrPrimitive ? '{{loopIndex}}' : String(s).replace(re, '$4')
-        if (/(\w\.)/.test(s)) {
-          dataId = String(s).replace(reNestedData, '$1.') + dataId
-        }
-        return { key, dataId }
-      }
-
-      const { key, dataId } = getKeyAndDataId(str)
+    this.formatTemplateForProxyData = fn;
 
-      let prefix = `<spyne-cms-item data-cms-id="{{${dataId}}}" data-cms-key="${key}"`
-
-      // IF AN ARRAY PRIMITIVE CHECK FOR ORIGINAL ARRAY POSITION
-      if (isArrPrimitive) {
-        prefix += ' data-cms-orig-key="{{origKey}}"'
-      }
-
-      // CREATE PROXY TAG
-      const suffix = '</spyne-cms-item>'
-      const param =  isArrPrimitive ? '{{spyneLoopKey}}' : str
-      return `${prefix}><spyne-cms-item-hitbox></spyne-cms-item-hitbox><spyne-cms-item-text>${param}</spyne-cms-item-text>${suffix}`
-    }
-
-    const reSwapTags = (str, m1, m2, m3) => {
-      return formatCmsParam(str)
-    }
-
-    const reMethod = (str, m1, m2, m3, m4) => {
-      const m2Updated = String(m2).replace(reLines2, reSwapTags)
-      return `${m1}${m2Updated}`
-    }
-
-    return String(tmpl).replace(reLines1, reMethod)
   }
-  // SpyneJS Enterprise Code End
-
 
   tempGetChannelsInstance() {
 

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

@@ -2,152 +2,13 @@ import { includes, __, ifElse, path, prop, reject, is, isNil, isEmpty } from 'ra
 import sanitizeHTML from '../utils/sanitize-html.js'
 import { SpyneAppProperties } from '../utils/spyne-app-properties.js'
 
-/**
- * @module DomElTemplate
- * @type util
- *
- * @constructor
- * @param {String|HTMLElement} template
- * @param {Object} data
- *
- * @desc DomElement uses this class when rendering templates.
- *
- * @example
- * TITLE["<h4>Accessing properties using a double bracket {{&nbsp;&nbsp;&nbsp;}} expression</h4>"]
- * const data = {{name:"World}};
- * const template = `<p>Hello {{name}}!</p>`;
- *
- * this.props.el.appendChild(new
- * DocElTemplate(template,data).renderDocFrag());
- *
- * // Outputs
- * <p>Hello World!</p>
- *
- *
- *
- * @example
- * TITLE["<h4>Looping through an an array of objects using loop {{#loopProperty}} {{property}} {{/loopProperty}} expression</h4>"]
- * const data = {animals: [
- *   {animal: 'cat', sound: 'meow'},
- *   {animal: 'dog', sound: 'woof'},
- *   {animal: 'bird', sound: tweet'}
- * ]};
- *
- * const template = `
- * <ul>
- * {{#animals}}
- *   <li>The {{animal}} says '{{sound}}'.</li>
- * {{/animals}}
- * </ul>`;
- *
- * this.props.el.appendChild(new
- * DocElTemplate(template,data).renderDocFrag());
- *
- * // Outputs
- * <ul>
- *    <li>The cat says 'meow'.</li>
- *    <li>The dog says 'woof'.</li>
- *    <li>The bird says 'tweet'.</li>
- * </ul>
- *
- *
- *
- * @example
- * TITLE["<h4>Looping through list items in an array of using {{#arrName}} &nbsp;&nbsp;{{.}}&nbsp;&nbsp; {{/arrName}} expression</h4>"]
- * const data =  {name: 'Jane', pets: ['Milo','Luna','Kiki']};
- * const template = "<article>
- *                  <h3>Welcome, {{name}}, your pets are:</h3>
- *                  <ul>{{#pets}}
- *                    <li>{{.}}, </li>
- *                    {{/pets}}
- *                 </ul></article>";
- *
- * this.props.el.appendChild(new
- * DocElTemplate(template,data).renderDocFrag());
- *
- * // Outputs
- * <article>
- *   <h3>Welcome Jane, your pets are:</h3>
- *    <ul>
- *       <li>Milo</li>
- *       <li>Luna</li>
- *       <li>Kiki</li>
- *    </ul>
- * </article>
- *
- *
- * @example
- * TITLE["<h4>Looping through an array with no property name using {{#}} &nbsp;&nbsp;{{ }}&nbsp;&nbsp; {{/}} expression</h4>"]
- * const data = [
- *      {item: 'Cookie', calories: 142},
- *      {item: 'Apple',  calories: 95},
- *      {item: 'Cheese', calories: 113}];
- *
- * const template = `
- * <article>
- * <h3>Snacks:</h3>
- *   <ul>
- *      {{#}}
- *      <li>{{item}}, calories: {{calories}}</li>
- *      {{/}}
- *   </ul>
- * </article>
- * `;
- *
- * this.props.el.appendChild(new
- * DocElTemplate(template,data).renderDocFrag());
- *
- * // Outputs
- * <article>
- *   <h3>Snacks</h3>
- *    <ul>
- *       <li>Cookie, calories: 142</li>
- *       <li>Apple, calories: 95</li>
- *       <li>Cheese, calories: 113</li>
- *    </ul>
- * </article>
- *
- *
- * @example
- * TITLE["<h4>Looping through an array with no property name using {{#}} &nbsp;&nbsp;{{ . }}&nbsp;&nbsp; {{/}} expression</h4>"]
- * const data = ['Tyrion', 'Arya', 'Jon Snow', 'Sansa'];
- * const template = `
- * <h3>Main GoT Characters</h3>
- * <ul>
- *  {{#}}
- *   <li>{{.}}</li>
- *  {{/}}
- *  </ul>';
- *
- * this.props.el.appendChild(new
- * DocElTemplate(template,data).renderDocFrag());
- *
- * //Outputs
- * <h3>Main GoT Characters</h3>
- * <ul>
- *   <li>Tyrion</li>
- *   <li>Arya</li>
- *   <li>Jon Snow</li>
- *   <li>Sansa</li>
- * </ul>
- *
- *
- */
-
 export class DomElementTemplate {
   constructor(template, data = {}, opts = {}) {
     this.template = this.formatTemplate(template)
     this.isProxyData = data.__cms__isProxy === true
     this.testMode = opts?.testMode
 
-    /*
-    if (this.isProxyData === true) {
-      console.log('PROXY IS ', data.__cms__rootData)
-      this.template = DomElementTemplate.formatTemplateForProxyData(this.template)
-    }
-*/
-
-    if (SpyneAppProperties.enableCMSProxies && this.isProxyData === true) {
+    if (this.isProxyData === true && SpyneAppProperties.enableCMSProxies) {
       this.template = SpyneAppProperties.formatTemplateForProxyData(this.template)
     }
 
@@ -237,7 +98,6 @@ export class DomElementTemplate {
 
   renderDocFrag() {
     let html = DomElementTemplate.replaceImgPath(this.finalArr.join(''))
-    // html = sanitizeHTML(this.finalArr.join(''))
     if (this.testMode !== true) {
       html = sanitizeHTML(html)
     }
@@ -286,24 +146,15 @@ export class DomElementTemplate {
   }
 
   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
-    } */
-
     let elData = DomElementTemplate.getNestedDataReducer(this.templateData, p2)
 
     const arrayStringToObjAdapter = (d, str, i) => {
-      // IF {{.}} RUN parseString
       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

package/src/tests/views/dom-el-template-proxy.test.js

@@ -3,8 +3,6 @@ import { DomElementTemplate } from '../../spyne/views/dom-element-template';
 // Evaluate once at the top
 const isPublic = process.env.IS_PUBLIC === true;
 
-console.log("IS PUBLIC ",isPublic);
-
 
 // If not public, skip this test suite altogether
 (isPublic ? describe : describe.skip)('DomElementTemplate Proxy (Public Test)', () => {
@@ -12,3 +10,73 @@ console.log("IS PUBLIC ",isPublic);
     expect(DomElementTemplate.hasOwnProperty('formatTemplateForProxyData')).to.be.false;
   });
 });
+
+(!isPublic ? describe : describe.skip)('DomElementTemplate Proxy (Internal Test)', () => {
+  describe('formatTemplateForProxyData', () => {
+    it('should wrap text-node placeholders like <h1>{{title}}</h1> in <spyne-cms-item>', () => {
+      const input = '<h1>{{title}}</h1>';
+      const output = DomElementTemplate.formatTemplateForProxyData(input);
+
+      // wrapper exists
+      expect(output).to.include('<spyne-cms-item');
+
+      // text is preserved inside the CMS text wrapper
+      expect(output).to.include(
+        '<spyne-cms-item-text>{{title}}</spyne-cms-item-text>'
+      );
+
+      // structural sanity check
+      expect(output).to.include('</spyne-cms-item>');
+    });
+
+    it('should NOT wrap attribute placeholders like <img src="{{imgUrl}}"> and keep them intact', () => {
+      const input = '<img src="{{imgUrl}}">';
+      const output = DomElementTemplate.formatTemplateForProxyData(input);
+
+      // attributes must remain untouched
+      expect(output).to.equal(input);
+      expect(output).to.not.include('<spyne-cms-item');
+    });
+
+    it('should allow prefixed attr* placeholders inside attributes without CMS wrapping', () => {
+      const input = '<img src="{{attrImgSrc}}" alt="{{attrImgAlt}}">';
+      const output = DomElementTemplate.formatTemplateForProxyData(input);
+
+      // attr* placeholders should remain intact
+      expect(output).to.include('{{attrImgSrc}}');
+      expect(output).to.include('{{attrImgAlt}}');
+
+      // no CMS proxy tags should be injected
+      expect(output).to.not.include('<spyne-cms-item');
+    });
+
+    it('should not wrap loop root elements or corrupt list structure', () => {
+      const input = `
+        <ul>
+          {{#items}}
+            <li><span>{{title}}</span></li>
+          {{/items}}
+        </ul>
+      `;
+
+      const data = {
+        __cms__isProxy: true,
+        items: [
+          { title: 'A' },
+          { title: 'B' },
+          { title: 'C' }
+        ]
+      };
+
+      const tmpl = new DomElementTemplate(input, data);
+      const output = tmpl.renderToString();
+
+      // list structure must be preserved
+      expect(output.match(/<li>/g).length).to.equal(3);
+
+      // CMS proxy should exist only around text nodes
+      expect(output).to.include('<spyne-cms-item');
+      expect(output).to.not.match(/data-cms-key="&lt;li/);
+    });
+  });
+});