spyne 0.23.0 → 0.25.0

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

@@ -1,6 +1,8 @@
 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'
 import { is, defaultTo, pick, mapObjIndexed, forEachObjIndexed, pipe } from 'ramda'
 
 class DomElement {
@@ -53,15 +55,33 @@ class DomElement {
   }
 
   setElAttrs(el, params) {
+    const testMode = this.testMode === true
     const addAttributes = (val, key) => {
       const addToDataset = (val, key) => { el.dataset[key] = val }
       if (key === 'dataset') {
+        // Dataset values are inert text and are the framework's payload
+        // surface; they are applied as-is.
         forEachObjIndexed(addToDataset, val)
-      } else {
-        el.setAttribute(key, val)
+        return
       }
+
+      if (testMode !== true) {
+        const { allowed, value } = sanitizeAttribute(key, val, el.tagName)
+        if (allowed !== true) {
+          spyneWarn(`SPYNE WARNING: The attribute "${key}" was removed during sanitization.`, el)
+          return
+        }
+        val = value
+      }
+
+      el.setAttribute(key, val)
     }
     this.getProp('attrs').forEach(addAttributes)
+
+    if (testMode !== true) {
+      applyIframeHardening(el)
+    }
+
     return el
   }
 

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/channels/channel-fetch.test.js

@@ -1,7 +1,7 @@
 //const { expect, assert } = require('chai')
 //const { ChannelFetch } = require('../../spyne/channels/channel-fetch-class')
 const { expect, assert } = require('chai')
-import { ChannelFetch } from '../../spyne/spyne';
+import { ChannelFetch, SpyneApp } from '../../spyne/spyne';
 
 describe('should test ChannelFetch', () => {
   const mapFn = (p) => {
@@ -95,4 +95,91 @@ describe('should test ChannelFetch', () => {
     const mapTypeUndefined = ChannelFetch.validateMapMethod(props, 'MY_TEST_NAME_2', true)
     // console.log('map methods is not of correct type added and is valid4 ',{mapTypeUndefined}) ;     expect(mapTypeUndefined).to.be.false;
   })
+
+  describe('conformed error action', () => {
+    const createPayloadContext = () => {
+      const context = {
+        props: { name: channelName },
+        sentActions: [],
+        createChannelPayloadItem(payload, action) {
+          this.sentActions.push({ payload, action })
+        }
+      }
+      return context
+    }
+
+    it('should register the generic error action', () => {
+      const context = { props: {} }
+      const actionsArr = ChannelFetch.prototype.addRegisteredActions.call(context)
+
+      expect(actionsArr).to.include('CHANNEL_ERROR_EVENT')
+      expect(actionsArr).to.include('CHANNEL_RESPONSE_EVENT')
+    })
+
+    it('should register the instance-derived error action alongside the response action', () => {
+      const context = {
+        props: {
+          extendedActionsArr: [
+            `${channelName}_RESPONSE_EVENT`,
+            `${channelName}_ERROR_EVENT`,
+            [`${channelName}_REQUEST_EVENT`, 'onFetchUpdate']
+          ]
+        }
+      }
+      const actionsArr = ChannelFetch.prototype.addRegisteredActions.call(context)
+
+      expect(actionsArr).to.include(`${channelName}_ERROR_EVENT`)
+      expect(actionsArr).to.include(`${channelName}_RESPONSE_EVENT`)
+    })
+
+    it('should emit the response action for a successful fetch payload', () => {
+      const context = createPayloadContext()
+      const streamItem = { id: 1, title: 'foo' }
+
+      ChannelFetch.prototype.onFetchReturned.call(context, streamItem)
+
+      expect(context.sentActions[0].action).to.equal(`${channelName}_RESPONSE_EVENT`)
+      expect(context.sentActions[0].payload).to.deep.equal(streamItem)
+    })
+
+    it('should emit the error action for a conformed fetch error payload', () => {
+      const context = createPayloadContext()
+      const streamItem = {
+        isChannelFetchError: true,
+        isError: true,
+        error: true,
+        errorType: 'FETCH_HTTP_ERROR',
+        message: 'Fetch request failed with status 404 Not Found',
+        status: 404,
+        statusText: 'Not Found',
+        url: 'https://jsonplaceholder.typicode.com/posts/does-not-exist'
+      }
+
+      ChannelFetch.prototype.onFetchReturned.call(context, streamItem)
+
+      expect(context.sentActions[0].action).to.equal(`${channelName}_ERROR_EVENT`)
+      expect(context.sentActions[0].payload).to.deep.equal(streamItem)
+    })
+
+    it('should not route a payload to the error action without the discriminator flag', () => {
+      const context = createPayloadContext()
+      const streamItem = { isError: true, message: 'data that merely resembles an error' }
+
+      ChannelFetch.prototype.onFetchReturned.call(context, streamItem)
+
+      expect(context.sentActions[0].action).to.equal(`${channelName}_RESPONSE_EVENT`)
+    })
+
+    it('should add the derived error action to channelActions on a constructed instance', () => {
+      SpyneApp.init({})
+
+      const instanceChannelName = 'CHANNEL_FETCH_ERROR_ACTION_TEST'
+      const fetchChannel = new ChannelFetch(instanceChannelName, { url, pause: true })
+
+      expect(fetchChannel.channelActions).to.have.property(`${instanceChannelName}_ERROR_EVENT`)
+      expect(fetchChannel.channelActions).to.have.property(`${instanceChannelName}_RESPONSE_EVENT`)
+      expect(fetchChannel.channelActions).to.have.property(`${instanceChannelName}_REQUEST_EVENT`)
+      expect(fetchChannel.channelActions).to.have.property('CHANNEL_ERROR_EVENT')
+    })
+  })
 })

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/channel-fetch-util.test.js

@@ -49,9 +49,11 @@ describe('ChannelFetchUtil Tests', () => {
 
   describe('stringify body method', () => {
     it('should convert body object to string', () => {
-      let bodyStr = ChannelFetchUtil.stringifyBodyIfItExists(propsPost)
-      bodyStr = R.omit(['mapFn'], bodyStr)
+      const result = ChannelFetchUtil.stringifyBodyIfItExists(propsPost)
+      const bodyStr = R.omit(['mapFn', 'headers'], result)
+
       expect(bodyStr).to.deep.equal(propsStringified)
+      expect(result.headers.get('Content-Type')).to.equal('application/json')
     })
 
     it('should not parse body when its a string', () => {
@@ -127,4 +129,44 @@ describe('ChannelFetchUtil Tests', () => {
       expect(channelFetchUtil.mapFn).to.be.a('function')
     })
   })
+
+  describe('conformed fetch error payload', () => {
+    const metadata = {
+      channelName: 'CHANNEL_MY_FETCHED_DATA',
+      url,
+      responseType: 'json'
+    }
+
+    it('should conform an http error into a flat payload with the discriminator flag', () => {
+      const httpError = ChannelFetchUtil.createFetchError({
+        errorType: 'FETCH_HTTP_ERROR',
+        message: 'Fetch request failed with status 404 Not Found',
+        metadata: { ...metadata, status: 404, statusText: 'Not Found', ok: false },
+        rawBody: '{"error":"not found"}'
+      })
+
+      const errorPayload = ChannelFetchUtil.createFetchErrorPayload(httpError, metadata)
+
+      expect(errorPayload.isChannelFetchError).to.be.true
+      expect(errorPayload.isError).to.be.true
+      expect(errorPayload.errorType).to.equal('FETCH_HTTP_ERROR')
+      expect(errorPayload.status).to.equal(404)
+      expect(errorPayload.statusText).to.equal('Not Found')
+      expect(errorPayload.url).to.equal(url)
+      expect(errorPayload.channelName).to.equal('CHANNEL_MY_FETCHED_DATA')
+      expect(errorPayload.rawBodyPreview).to.equal('{"error":"not found"}')
+    })
+
+    it('should conform a network error using fallback metadata and error type', () => {
+      const networkError = new TypeError('Failed to fetch')
+
+      const errorPayload = ChannelFetchUtil.createFetchErrorPayload(networkError, metadata)
+
+      expect(errorPayload.isChannelFetchError).to.be.true
+      expect(errorPayload.errorType).to.equal('FETCH_UNKNOWN_ERROR')
+      expect(errorPayload.message).to.equal('Failed to fetch')
+      expect(errorPayload.url).to.equal(url)
+      expect(errorPayload.status).to.be.undefined
+    })
+  })
 })