spyne 0.24.0 → 0.25.0

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spyne",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Reactive Real-DOM Framework for Advanced Javascript applications",
   "sideEffects": true,
   "main": "./lib/spyne.esm.js",

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.24.0'
+const version = '0.25.0'
 
 class SpyneApplication {
   /**
@@ -41,7 +41,7 @@ class SpyneApplication {
   init(config = {}, testMode = false) {
     // this.channels = new ChannelsMap();
     /*!
-     * Spyne 0.24.0
+     * Spyne 0.25.0
      * https://spynejs.org
      *
      * @license
@@ -77,6 +77,7 @@ class SpyneApplication {
       mode: 'app',
       disableSanitize: false,
       iframes: {},
+      customElements: [],
       baseHref: undefined,
       IMG_PATH: imgPath,
       pluginMethods:{

package/src/spyne/spyne.js

@@ -17,7 +17,8 @@ import { deepMerge } from './utils/deep-merge.js'
 import { safeClone } from './utils/safe-clone.js'
 import { SpyneAppProperties } from './utils/spyne-app-properties.js'
 import { SpyneApp } from './spyne-app.js'
-import sanitizeData, { sanitizeEventTarget } from './utils/sanitize-data.js'
+import { setSpyneWarningsDisabled } from './utils/spyne-warn.js'
+import sanitizeData, { sanitizeEventTarget, allowCustomElements } from './utils/sanitize-data.js'
 
 export {
   ViewStreamElement,
@@ -40,5 +41,7 @@ export {
   deepMerge,
   safeClone,
   sanitizeData,
-  sanitizeEventTarget
+  sanitizeEventTarget,
+  allowCustomElements,
+  setSpyneWarningsDisabled
 }

package/src/spyne/utils/channel-fetch-util.js

@@ -2,6 +2,7 @@ import { from, of } from 'rxjs'
 import { catchError, map, mergeMap, share, tap } from 'rxjs/operators'
 import { compose, prop, defaultTo, pick, mergeDeepRight } from 'ramda'
 import sanitizeData from './sanitize-data.js'
+import { spyneWarn } from './spyne-warn.js'
 
 export class ChannelFetchUtil {
   /**
@@ -236,7 +237,7 @@ export class ChannelFetchUtil {
     const url = prop('url', opts)
 
     if (url === undefined) {
-      console.warn('SPYNE WARNING: URL is undefined for data channel')
+      spyneWarn('SPYNE WARNING: URL is undefined for data channel')
     }
 
     return url
@@ -292,7 +293,7 @@ export class ChannelFetchUtil {
     const method = opts?.method || 'GET'
 
     if (hasBody && method.toUpperCase() === 'GET') {
-      console.warn(
+      spyneWarn(
         'SPYNE WARNING: Fetch body was provided with method GET. Changing method to POST.',
         opts
       )

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

@@ -1,5 +1,6 @@
 // src/utils/sanitize-data.js
 import DOMPurify from 'dompurify'
+import { spyneWarn } from './spyne-warn.js'
 import { SpyneAppProperties } from './spyne-app-properties.js'
 
 let _sanitizeData
@@ -23,6 +24,56 @@ const normalizeUriForCheck = (val) => String(val).replace(/[\u0000-\u0020]/g, ''
 
 const isSafeUri = (val) => SAFE_URI_REGEXP.test(normalizeUriForCheck(val))
 
+/* ---------------------------------------------
+ * Custom elements
+ *
+ * The framework's own custom elements (spyne-*) are first-party output —
+ * the CMS proxy wraps editable content in <spyne-cms-item> etc. — and are
+ * admitted in every mode. They are inert without their defining plugin
+ * and the attribute check below only admits data-* on them.
+ *
+ * Additional elements register via allowCustomElements() (additive only;
+ * names must contain a hyphen per the custom-element spec, so built-in
+ * tags like script or iframe can never be admitted through this path)
+ * or via config.customElements at SpyneApp.init.
+ * ------------------------------------------- */
+const SPYNE_CUSTOM_ELEMENT_RE = /^spyne-[a-z][a-z0-9-]*$/i
+
+const allowedCustomElementPatterns = []
+
+const allowCustomElements = (elements = []) => {
+  const arr = Array.isArray(elements) ? elements : [elements]
+
+  arr.forEach((entry) => {
+    if (entry instanceof RegExp) {
+      allowedCustomElementPatterns.push(entry)
+      return
+    }
+
+    const name = String(entry).toLowerCase()
+    if (/^[a-z][a-z0-9]*-[a-z0-9-]+$/.test(name) !== true) {
+      spyneWarn(`SPYNE WARNING: "${entry}" is not a valid custom element name (a hyphen is required) and was not added to the sanitizer allowlist.`)
+      return
+    }
+
+    allowedCustomElementPatterns.push(name)
+  })
+}
+
+const customElementTagCheck = (tagName) => {
+  if (SPYNE_CUSTOM_ELEMENT_RE.test(tagName)) return true
+
+  return allowedCustomElementPatterns.some(p =>
+    p instanceof RegExp ? p.test(tagName) : p === tagName
+  )
+}
+
+const CUSTOM_ELEMENT_HANDLING = {
+  tagNameCheck: customElementTagCheck,
+  attributeNameCheck: /^data-[a-z0-9-]+$/i,
+  allowCustomizedBuiltInElements: false
+}
+
 /* ---------------------------------------------
  * Mode configurations
  * ------------------------------------------- */
@@ -42,14 +93,16 @@ const SAFE_FOR_RICH_TEXT = {
   ALLOW_DATA_ATTR: true,
   FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange'],
   FORBID_TAGS: ['script', 'object', 'embed', 'meta'],
-  ALLOWED_URI_REGEXP: SAFE_URI_REGEXP
+  ALLOWED_URI_REGEXP: SAFE_URI_REGEXP,
+  CUSTOM_ELEMENT_HANDLING
 }
 
 const SAFE_FOR_APP = {
   FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'link', 'meta'],
   FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange'],
   ALLOW_DATA_ATTR: false,
-  ALLOWED_URI_REGEXP: SAFE_URI_REGEXP
+  ALLOWED_URI_REGEXP: SAFE_URI_REGEXP,
+  CUSTOM_ELEMENT_HANDLING
 }
 
 /* ---------------------------------------------
@@ -136,7 +189,7 @@ const addIframeHardeningHook = () => {
 
     const src = node.getAttribute('src') || ''
     if (src !== '' && isAllowedIframeSrc(src) !== true) {
-      console.warn(`SPYNE WARNING: iframe src "${src}" was removed by the iframe policy (same-origin, https, or an allowed origin is required).`)
+      spyneWarn(`SPYNE WARNING: iframe src "${src}" was removed by the iframe policy (same-origin, https, or an allowed origin is required).`)
       node.removeAttribute('src')
     }
 
@@ -209,14 +262,18 @@ function makeSanitizeFn(mode = 'app') {
  * ------------------------------------------- */
 const sanitizeDataConfigure = (config = {}) => {
   if (isConfigured) {
-    console.warn('sanitizeData is already configured. Reconfiguration is not allowed.')
+    spyneWarn('sanitizeData is already configured. Reconfiguration is not allowed.')
     return
   }
 
-  const { strict = false, disableSanitize = false, iframes } = config
+  const { strict = false, disableSanitize = false, iframes, customElements } = config
 
   globalDisable = disableSanitize === true
 
+  if (customElements !== undefined) {
+    allowCustomElements(customElements)
+  }
+
   if (iframes && typeof iframes === 'object') {
     configuredIframePolicy = resolveIframePolicy(iframes)
     activeIframePolicy = configuredIframePolicy
@@ -376,7 +433,7 @@ const sanitizeEventTarget = (el, mode) => {
  * config.mode at SpyneApp.init. Retained for backward compatibility.
  * ------------------------------------------- */
 const setSanitizeDataForceStrict = (bool = true) => {
-  console.warn('SPYNE DEPRECATION: setSanitizeDataForceStrict is deprecated. Pass { mode: "app" } to sanitizeData, or set config.mode in SpyneApp.init.')
+  spyneWarn('SPYNE DEPRECATION: setSanitizeDataForceStrict is deprecated. Pass { mode: "app" } to sanitizeData, or set config.mode in SpyneApp.init.')
   forceStrict = !!bool
 }
 
@@ -386,6 +443,8 @@ export {
   sanitizeDataForce,
   sanitizeAttribute,
   applyIframeHardening,
+  allowCustomElements,
+  CUSTOM_ELEMENT_HANDLING as customElementHandling,
   sanitizeEventTarget,
   setSanitizeDataForceStrict
 }

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

@@ -1,4 +1,6 @@
 import DOMPurify from 'dompurify'
+import { spyneWarn } from './spyne-warn.js'
+import { customElementHandling } from './sanitize-data.js'
 
 let _sanitizeHTML
 let isConfigured = false
@@ -17,7 +19,7 @@ let isConfigured = false
  */
 const sanitizeHTMLConfigure = (config = {}) => {
   if (isConfigured) {
-    console.warn('sanitizeHTML is already configured. Reconfiguration is not allowed.')
+    spyneWarn('sanitizeHTML is already configured. Reconfiguration is not allowed.')
     return
   }
 
@@ -56,6 +58,10 @@ const sanitizeHTMLConfigure = (config = {}) => {
       ...(allowTargetAttr ? ['target'] : []),
       ...(allowIframe ? ['sandbox'] : [])
     ],
+    // Admits the framework's spyne-* elements (CMS proxy wrappers) and any
+    // elements registered via allowCustomElements/config.customElements.
+    // The tag check is a closure, so late plugin registration is honored.
+    CUSTOM_ELEMENT_HANDLING: customElementHandling,
     ...(allowIframe !== true && isRichtext ? { FORBID_TAGS: ['iframe'] } : {})
   }
 
@@ -110,7 +116,7 @@ const sanitizeHTMLConfigure = (config = {}) => {
         console.log('SPYNE: Trusted Types default policy registered. Note that browser enforcement additionally requires the CSP header: require-trusted-types-for \'script\'.')
       }
     } catch (err) {
-      console.warn('SPYNE WARNING: A Trusted Types "default" policy already exists on this page. Falling back to direct sanitization.', err)
+      spyneWarn('SPYNE WARNING: A Trusted Types "default" policy already exists on this page. Falling back to direct sanitization.', err)
     }
   }
 

package/src/spyne/utils/spyne-warn.js

@@ -0,0 +1,26 @@
+/**
+ * Central outlet for SpyneJS developer-hint warnings (invalid selectors,
+ * sanitized attributes, policy removals, deprecations).
+ *
+ * Warnings are suppressed when window.SPYNE_SUPPRESS_WARNINGS is true —
+ * primarily for test runs, where expected-failure cases would otherwise
+ * flood the reporter. The flag lives on window (not module state) so it
+ * spans separately bundled test files.
+ *
+ * Security-posture warnings (e.g. config.disableSanitize) do NOT route
+ * through here and are always printed.
+ */
+const spyneWarn = (...args) => {
+  const suppressed = typeof window !== 'undefined' && window.SPYNE_SUPPRESS_WARNINGS === true
+  if (suppressed !== true) {
+    console.warn(...args)
+  }
+}
+
+const setSpyneWarningsDisabled = (bool = true) => {
+  if (typeof window !== 'undefined') {
+    window.SPYNE_SUPPRESS_WARNINGS = bool === true
+  }
+}
+
+export { spyneWarn, setSpyneWarningsDisabled }

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

@@ -1,4 +1,5 @@
 import { baseCoreMixins } from '../utils/mixins/base-core-mixins.js'
+import { spyneWarn } from '../utils/spyne-warn.js'
 import { DomElementTemplate } from './dom-element-template.js'
 import { deepMerge } from '../utils/deep-merge.js'
 import { sanitizeAttribute, applyIframeHardening } from '../utils/sanitize-data.js'
@@ -67,7 +68,7 @@ class DomElement {
       if (testMode !== true) {
         const { allowed, value } = sanitizeAttribute(key, val, el.tagName)
         if (allowed !== true) {
-          console.warn(`SPYNE WARNING: The attribute "${key}" was removed during sanitization.`, el)
+          spyneWarn(`SPYNE WARNING: The attribute "${key}" was removed during sanitization.`, el)
           return
         }
         val = value

package/src/spyne/views/view-stream-selector.js

@@ -1,4 +1,5 @@
 import { head, compose, reject, split, isEmpty, lte, defaultTo, prop } from 'ramda'
+import { spyneWarn } from '../utils/spyne-warn.js'
 import { SpyneAppProperties } from '../utils/spyne-app-properties.js'
 
 function generateSpyneSelectorId(el) {
@@ -32,7 +33,7 @@ function testSelectors(cxt, sel, verboseBool) {
   const elIsDomElement = compose(lte(0), defaultTo(-1), prop('nodeType'))
 
   if (el !== null && elIsDomElement(el) === false) {
-    console.warn(`Spyne Warning: the el object is not a valid single element, ${el}`)
+    spyneWarn(`Spyne Warning: the el object is not a valid single element, ${el}`)
     return
   }
 
@@ -48,7 +49,7 @@ function testSelectors(cxt, sel, verboseBool) {
 
     const isValidSelectorBool = isValidSelector(sel)
     if (verboseBool === true && isDevMode() === true && isValidSelectorBool === false) {
-      console.warn(`Spyne Warning: the selector, ${sel} does not exist in this el, ${cxt}`)
+      spyneWarn(`Spyne Warning: the selector, ${sel} does not exist in this el, ${cxt}`)
     }
   }
 }
@@ -127,8 +128,6 @@ function ViewStreamSelector(cxt, sel) {
    */
   selector.forEach = (fn) => Array.from(getNodeListArray(cxt, sel)).map(fn)
 
-  selector.getNodeListArray = () => getNodeListArray(cxt, sel)
-
   /**
    *
    * Adds the class to the Element or to the NodeList.
@@ -142,7 +141,7 @@ function ViewStreamSelector(cxt, sel) {
     const arr = getNodeListArray(cxt, sel)
     const addClass = item => item.classList.add(c)
     arr.forEach(addClass)
-    return this
+    return selector
   }
 
   /**
@@ -156,7 +155,7 @@ function ViewStreamSelector(cxt, sel) {
       item.classList.remove(c)
     }
     arr.forEach(removeClass)
-    return this
+    return selector
   }
 
   /**
@@ -181,7 +180,7 @@ function ViewStreamSelector(cxt, sel) {
       classStrArr.forEach(adder)
     }
     arr.forEach(setTheClass)
-    return this
+    return selector
   }
 
   selector.unmount = () => {
@@ -205,23 +204,25 @@ function ViewStreamSelector(cxt, sel) {
       bool ? item.classList.add(c) : item.classList.remove(c)
     }
     arr.forEach(toggleClass)
-    return this
+    return selector
   }
 
   selector.toggle = (c, bool) => {
     selector.toggleClass(c, bool)
-    return this
+    return selector
   }
 
   /**
-   * Attaches html to the Selector's element
+   * Attaches html to the Selector's element (the first match when the
+   * selector matches multiple elements).
    * @param htmlElement
    */
   selector.appendChild = (htmlElement) => {
-    if (selector.el.length !== 0) {
-      selector.el.appendChild(htmlElement)
+    const el = selector.el
+    if (el !== null) {
+      el.appendChild(htmlElement)
     } else {
-      console.warn(`Spyne Warning: The selector, ${sel} does not appear to be valid!`)
+      spyneWarn(`Spyne Warning: The selector, ${sel} does not appear to be valid!`)
     }
 
     return selector.el
@@ -244,7 +245,7 @@ function ViewStreamSelector(cxt, sel) {
       arr.forEach(addClass)
     }
     requestAnimationFrame(delayAddClass)
-    // window.setTimeout(delayAddClass, 1);
+    return selector
   }
 
   /**
@@ -253,19 +254,6 @@ function ViewStreamSelector(cxt, sel) {
    * @param {String|HTMLElement} elSel The selector for the element.
    * @desc Sets the class active HTMLElement from a NodeList.
    */
-  selector.setActiveItem2 = (c, elSel) => {
-    const arr = getNodeListArray(cxt, sel)
-    const currentEl = typeof (elSel) === 'string' ? getElOrList(cxt, elSel) : elSel
-    const toggleBool = item => item.isEqualNode(currentEl) ? item.classList.add(c) : item.classList.remove(c)
-    if (isNodeElement(currentEl) === true) {
-      arr.forEach(toggleBool)
-    } else if (isDevMode() === true) {
-      // console.log("SEL IS ",elSel,c);
-      console.warn(`Spyne Warning: The selector, ${elSel}, does not appear to be a valid item in setActiveItem: ${c}`)
-    }
-    return this
-  }
-
   selector.setActiveItem = (c, elSel) => {
     const arr = getNodeListArray(cxt, sel)
     const currentEl = typeof elSel === 'string'
@@ -280,17 +268,17 @@ function ViewStreamSelector(cxt, sel) {
       if (matchingEl) {
         matchingEl.classList.add(c)
       } else if (isDevMode() === true) {
-        console.warn(
+        spyneWarn(
           `Spyne Warning: The selector, ${elSel}, is valid but does not match any item in setActiveItem: ${c}`
         )
       }
     } else if (isDevMode() === true) {
-      console.warn(
+      spyneWarn(
         `Spyne Warning: The selector, ${elSel}, does not appear to be a valid item in setActiveItem: ${c}`
       )
     }
 
-    return this
+    return selector
   }
 
   /**
@@ -298,10 +286,24 @@ function ViewStreamSelector(cxt, sel) {
    * @function el
    *
    * @desc
-   * getter for the selector
+   * getter that always resolves to a single element: the matched element,
+   * or the first item when the selector matches multiple elements (a
+   * warning is logged in debug mode).
    *
    * @returns
-   * The a single element or a NodeList from the selector
+   * An HTMLElement, or null when the selector matches nothing
+   * (mirroring querySelector)
+   */
+
+  /**
+   *
+   * @function els
+   *
+   * @desc
+   * getter that always resolves to an Array of the matched elements.
+   *
+   * @returns
+   * An Array of HTMLElements; empty when the selector matches nothing
    */
 
   /**
@@ -312,7 +314,7 @@ function ViewStreamSelector(cxt, sel) {
    * Determines the length of the NodeList
    *
    * @returns
-   * The length of the selector as a NodeList
+   * The number of elements matched by the selector
    */
 
   /**
@@ -326,24 +328,27 @@ function ViewStreamSelector(cxt, sel) {
    * Boolean
    */
 
-  Object.defineProperty(selector, 'el', { get: () => getElOrList(cxt, sel, true) })
-  Object.defineProperty(selector, 'els', { get: () => getNodeListArray(cxt, sel) })
-  Object.defineProperty(selector, 'len', { get: () => getNodeListArray(cxt, sel, false).length })
-  Object.defineProperty(selector, 'exists', { get: () => getNodeListArray(cxt, sel, false).length >= 1 })
-  Object.defineProperty(selector, 'exist', { get: () => getNodeListArray(cxt, sel, false).length >= 1 })
-  Object.defineProperty(selector, 'nodeList', { get: () => getNodeListArray(cxt, sel) })
-  Object.defineProperty(selector, 'arr', {
+  const getElsArray = (verboseBool = true) => Array.from(getNodeListArray(cxt, sel, verboseBool))
+
+  Object.defineProperty(selector, 'el', {
     get: () => {
-      const el = getElOrList(cxt, sel, true)
-      if (el === undefined) {
-        return []
-      } else if (el.length === undefined) {
-        return [el]
-      } else {
-        return Array.from(el)
+      const list = getElsArray()
+      if (list.length > 1 && isDevMode() === true) {
+        spyneWarn(`Spyne Warning: el$("${sel !== undefined ? sel : cxt}").el matched ${list.length} elements; returning the first. Use .els for the full list.`)
       }
+      return list.length >= 1 ? list[0] : null
     }
   })
+  Object.defineProperty(selector, 'els', { get: () => getElsArray() })
+  Object.defineProperty(selector, 'arr', { get: () => getElsArray() })
+
+  // Undocumented. Retains the pre-0.24 polymorphic el contract — a single
+  // element, a NodeList, or an empty NodeList depending on match count —
+  // to assist in debugging and migrating older SpyneJS apps.
+  Object.defineProperty(selector, 'elLegacy', { get: () => getElOrList(cxt, sel, true) })
+  Object.defineProperty(selector, 'len', { get: () => getNodeListArray(cxt, sel, false).length })
+  Object.defineProperty(selector, 'length', { get: () => getNodeListArray(cxt, sel, false).length })
+  Object.defineProperty(selector, 'exists', { get: () => getNodeListArray(cxt, sel, false).length >= 1 })
 
   Object.defineProperty(selector, 'inline', { set: (val) => setInlineCss(val, cxt, sel), get: () => selector })
   Object.defineProperty(selector, 'inlineCss', { set: (val) => setInlineCss(val, cxt, sel), get: () => selector })

package/src/tests/index.test.js

@@ -1,3 +1,8 @@
+// Silence SpyneJS developer-hint warnings across all test bundles.
+// Expected-failure cases (invalid selectors, blocked URIs, policy removals)
+// would otherwise flood the karma reporter. Security warnings still print.
+window.SPYNE_SUPPRESS_WARNINGS = true
+
 import { SpyneApp } from '../spyne/spyne'
 
 // import {AppView} from "../app/app-view";

package/src/tests/utils/security.test.js

@@ -1,6 +1,6 @@
 const { expect } = require('chai')
 import { SpyneApp, SpyneAppProperties } from '../../spyne/spyne'
-import sanitizeData, { sanitizeAttribute } from '../../spyne/utils/sanitize-data'
+import sanitizeData, { sanitizeAttribute, allowCustomElements } from '../../spyne/utils/sanitize-data'
 import sanitizeHTML from '../../spyne/utils/sanitize-html'
 import { DomElement } from '../../spyne/views/dom-element'
 import { DomElementTemplate } from '../../spyne/views/dom-element-template'
@@ -268,6 +268,70 @@ describe('sanitization security', () => {
     })
   })
 
+  describe('CMS wrappers and custom elements', () => {
+    const cmsMarkup = '<spyne-cms-item data-cms-id="post.title" data-cms-key="title">' +
+      '<spyne-cms-item-hitbox></spyne-cms-item-hitbox>' +
+      '<spyne-cms-item-text>Hello</spyne-cms-item-text>' +
+      '</spyne-cms-item>'
+
+    it('should keep spyne-* CMS wrappers and data-cms attributes in app mode', () => {
+      const clean = sanitizeData(cmsMarkup, { mode: 'app' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.include('data-cms-key="title"')
+      expect(clean).to.include('<spyne-cms-item-hitbox')
+      expect(clean).to.include('<spyne-cms-item-text>Hello</spyne-cms-item-text>')
+    })
+
+    it('should keep spyne-* CMS wrappers in richtext mode', () => {
+      const clean = sanitizeData(cmsMarkup, { mode: 'richtext' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.include('data-cms-id="post.title"')
+    })
+
+    it('should keep spyne-* CMS wrappers at the template layer', () => {
+      const clean = String(sanitizeHTML(cmsMarkup))
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.include('<spyne-cms-item-text>Hello</spyne-cms-item-text>')
+    })
+
+    it('should still sanitize content inside CMS wrappers', () => {
+      const dirty = '<spyne-cms-item data-cms-key="body">' +
+        '<spyne-cms-item-text><script>bad()</script><b>ok</b></spyne-cms-item-text>' +
+        '</spyne-cms-item>'
+      const clean = sanitizeData(dirty, { mode: 'app' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.not.include('<script')
+      expect(clean).to.include('<b>ok</b>')
+    })
+
+    it('should not allow event-handler attributes on CMS wrappers', () => {
+      const dirty = '<spyne-cms-item onclick="evil()" data-cms-key="x">y</spyne-cms-item>'
+      const clean = sanitizeData(dirty, { mode: 'app' })
+
+      expect(clean).to.include('<spyne-cms-item')
+      expect(clean).to.not.include('onclick')
+    })
+
+    it('should admit elements registered via allowCustomElements', () => {
+      allowCustomElements(['my-widget'])
+      const clean = sanitizeData('<my-widget data-config="a">w</my-widget>', { mode: 'app' })
+
+      expect(clean).to.include('<my-widget')
+      expect(clean).to.include('data-config="a"')
+    })
+
+    it('should reject invalid custom element names', () => {
+      allowCustomElements(['script', 'iframe', 'div'])
+      const clean = sanitizeData('<script>bad()</script>', { mode: 'app' })
+
+      expect(clean).to.not.include('<script')
+    })
+  })
+
   describe('DomElementTemplate output', () => {
     it('should sanitize renderToString output', () => {
       const tmpl = new DomElementTemplate('<b>{{word}}</b><script>bad()</script>', { word: 'hello' })

package/src/tests/views/dom-el-selectors.test.js

@@ -41,14 +41,14 @@ describe('Dom Item Selector', () => {
     const el = document.querySelector('ul#my-list')
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
-    expect(liList.el.length).to.eq(5)
+    expect(liList.els.length).to.eq(5)
   })
   it('should add class to li', () => {
     const el = document.querySelector('ul#my-list')
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.addClass('foo')
-    const hasFooClassBool = liList.el[0].classList.contains('foo')
+    const hasFooClassBool = liList.els[0].classList.contains('foo')
     expect(hasFooClassBool).to.eq(true)
   })
 
@@ -57,7 +57,7 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.removeClass('has-svg')
-    const hasSvgClassBool = liList.el[0].classList.contains('has-svg')
+    const hasSvgClassBool = liList.els[0].classList.contains('has-svg')
     expect(hasSvgClassBool).to.eq(false)
   })
 
@@ -66,8 +66,8 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.setClass('foo bar')
-    // console.log('liList ',liList.el[0].className)
-    const isFooBarClassBool = liList.el[0].className === 'foo bar'
+    // console.log('liList ',liList.els[0].className)
+    const isFooBarClassBool = liList.els[0].className === 'foo bar'
     expect(isFooBarClassBool).to.eq(true)
   })
 
@@ -76,7 +76,7 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.inlineCss = 'background:orange;'
-    const backgroundSetBool = liList.el[0].style.getPropertyValue('background') === 'orange'
+    const backgroundSetBool = liList.els[0].style.getPropertyValue('background') === 'orange'
     expect(backgroundSetBool).to.eq(true)
   })
 
@@ -85,7 +85,7 @@ describe('Dom Item Selector', () => {
     const el$ =   ViewStreamSelector('ul#my-list')
     const liList = el$('li')
     liList.toggleClass('foo', true)
-    const hasFooClassBool = liList.el[0].classList.contains('foo')
+    const hasFooClassBool = liList.els[0].classList.contains('foo')
     expect(hasFooClassBool).to.eq(true)
   })