spyne 0.23.0 → 0.25.0

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

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

package/package.json

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

package/src/spyne/channels/channel-fetch-class.js

@@ -17,11 +17,13 @@ export class ChannelFetch extends Channel {
    * <li>Requires a url property at instantiation.</li>
    * <li>The response data is published as a ChannelPayload.</li>
    * <li>The action for the returned ChannelFetch data is always in the following format, "CHANNEL_NAME_RESPONSE_EVENT"</li>
+   * <li>Fetch failures (network errors, non-OK HTTP statuses, unparseable responses) are published as a conformed error ChannelPayload with the action format, "CHANNEL_NAME_ERROR_EVENT"</li>
+   * <li>The error payload contains filterable properties such as errorType, status, statusText, url and message.</li>
    * <li>The default request type is a GET request that returns a JSON object.</li>
    * <li>However, any type of request and return type can be configured by using the body property when creating the instance.</li>
-   * <li>The mapFn gives access to the returned response and can be use to parse the data before it is published to other Channels and ViewStream instances.</li>
+   * <li>The mapFn gives access to the returned response and can be use to parse the data before it is published to other Channels and ViewStream instances. The mapFn is not called for error payloads.</li>
    * <li>Channel Fetch will send the last response to future subscribers, and will not make further http(s) requests unless directed to do  so.</li>
-   * <li>Data can be Fetched again, by sending a "CHANNEL_NAME_UPDATE_RESPONSE_EVENT" action from a ViewStream's sendInfoToChannel method.</li>
+   * <li>Data can be Fetched again, by sending a "CHANNEL_NAME_REQUEST_EVENT" action from a ViewStream's sendInfoToChannel method.</li>
    * </ul>
    *
    * @constructor
@@ -35,7 +37,7 @@ export class ChannelFetch extends Channel {
    *
    * @example
    * TITLE["<h4>A ViewStream Instance Sending A Fetch Update Request</h4>"]
-   * const action = "CHANNEL_FETCHCHANNEL_NAME_UPDATE_RESPONSE_EVENT";
+   * const action = "CHANNEL_FETCHCHANNEL_NAME_REQUEST_EVENT";
    * const url = "//site.com/json/";
    * const body = {
    *     method: "POST"
@@ -56,6 +58,7 @@ export class ChannelFetch extends Channel {
     }
     props.extendedActionsArr = [
       `${name}_RESPONSE_EVENT`,
+      `${name}_ERROR_EVENT`,
       [`${name}_REQUEST_EVENT`, 'onFetchUpdate']
     ]
     props.sendCachedPayload = true
@@ -89,6 +92,7 @@ export class ChannelFetch extends Channel {
   addRegisteredActions(name) {
     const arr = [
       'CHANNEL_RESPONSE_EVENT',
+      'CHANNEL_ERROR_EVENT',
       ['CHANNEL_UPDATE_RESPONSE_EVENT', 'onFetchUpdate'],
       ['CHANNEL_FETCH_REQUEST_EVENT', 'onFetchUpdate']
     ]
@@ -108,7 +112,12 @@ export class ChannelFetch extends Channel {
   }
 
   onFetchReturned(streamItem) {
-    return this.createChannelPayloadItem(streamItem)
+    const isFetchError = streamItem?.isChannelFetchError === true
+    const action = isFetchError
+      ? `${this.props.name}_ERROR_EVENT`
+      : `${this.props.name}_RESPONSE_EVENT`
+
+    return this.createChannelPayloadItem(streamItem, action)
   }
 
   createChannelPayloadItem(payload, action = `${this.props.name}_RESPONSE_EVENT`) {
@@ -118,7 +127,7 @@ export class ChannelFetch extends Channel {
   }
 
   getPropsForFetch(evt) {
-    const dataObj = path(['viewStreamInfo', 'payload'], evt)
+    const dataObj = evt?.payload ?? evt?.viewStreamInfo?.payload ?? {}
     return pick(['mapFn', 'url', 'header', 'body', 'mode', 'method', 'responseType', 'debug'], dataObj)
   }
 

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.23.0'
+const version = '0.25.0'
 
 class SpyneApplication {
   /**
@@ -41,7 +41,7 @@ class SpyneApplication {
   init(config = {}, testMode = false) {
     // this.channels = new ChannelsMap();
     /*!
-     * Spyne 0.23.0
+     * Spyne 0.25.0
      * https://spynejs.org
      *
      * @license
@@ -74,6 +74,10 @@ class SpyneApplication {
       scrollLockY: 0,
       debug: false,
       strict: false,
+      mode: 'app',
+      disableSanitize: false,
+      iframes: {},
+      customElements: [],
       baseHref: undefined,
       IMG_PATH: imgPath,
       pluginMethods:{
@@ -137,7 +141,7 @@ class SpyneApplication {
     }
 
     sanitizeHTMLConfigure(SpyneAppProperties.config);
-    sanitizeDataConfigure(SpyneAppProperties.config)
+    sanitizeDataConfigure(SpyneAppProperties.config);
 
   }
 

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

@@ -1,65 +1,44 @@
-import { from } from 'rxjs'
-import { flatMap, map, publish, tap } from 'rxjs/operators'
-import { compose, prop, defaultTo, over, lensProp, has, propEq, when, propIs, allPass, assoc, pick, mergeDeepRight } from 'ramda'
-import sanitizeData, { setSanitizeDataForceStrict } from './sanitize-data.js'
+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 {
   /**
    * @module ChannelFetchUtil
    * @type util
    *
-   *
    * @desc
-   * This is the core object used for ChannelFetch. This utility wraps the javascript fetch api into an observable.
+   * This is the core object used for ChannelFetch. This utility wraps the JavaScript
+   * fetch API into an observable.
    *
    * @constructor
    * @param {Object} options Properties used to create the fetch request
-   * @param {function} subscriber A method assigned to listen to the result
-   * @param {Boolean} testMode Controls the initializtion for unit tests
-   *
-   * @property {Object} options.url - = undefined; The url used for the request
-   * @property {Object} options.serverOptions - = undefined; The properties, header, body, mode, method, for the request
-   * @property {Object} options.mapFn - = undefined; A method that can be used to parse the data before it's returned
-   * @property {Object} options.responseType - = 'json'; Default is json
-   * @property {Object} options.debug - = false; will trace the fetch response to the console befor the observable completes
-   * @property {Function} Subscriber - = undefined; the method that will be called when the fetch is complete.
-   * @property {Boolean} testMode - = false; Used for unit testing.
-   *
-   * @returns The fetched response parsed by the set parameters.
-   *
-   *
-   * @example
-   * TITLE['<h4>Using ChannelFetchUtil to Retrieve an Image</h4>']
-   *
-   *   const url = "/static/images/myimage.jpg";
-   *   const responseType = "blob";
-   *   const onImgBlobReturned = (blob)=>{
-   *        let blobUrl = URL.createObjectURL(blob);
-   *        this.appendView(
-   *            new ViewStream({
-   *              tagName: 'img',
-   *              src: blobUrl,
-   *              width:300
-   *            })
-   *           )}
-   *
-   *   new ChannelFetchUtil({url, responseType}, onImgBlobReturned);
+   * @param {Function} subscriber A method assigned to listen to the result
+   * @param {Boolean} testMode Controls initialization for unit tests
+   * @param {String} CHANNEL_NAME The name of the channel using this fetch util
    *
+   * @property {String} options.url - The URL used for the request
+   * @property {Object} options.serverOptions - The properties for the request
+   * @property {Function} options.mapFn - A method that can parse the data before it is returned
+   * @property {String} options.responseType - Default is json
+   * @property {Boolean} options.debug - Logs fetch response details before observable completes
+   * @property {Boolean} options.disableSanitize - Allows trusted fetch data to skip sanitization
    *
+   * @returns The fetched response parsed by the configured parameters.
    */
 
-  constructor(options, subscriber, testMode, CHANNEL_NAME) {
-    setSanitizeDataForceStrict(true)
-
-    const testSubscriber = (p) => console.log('FETCH RETURNED ', p)
+  constructor(options = {}, subscriber, testMode, CHANNEL_NAME) {
+    const testSubscriber = p => console.log('FETCH RETURNED ', p)
 
     this._mapFn = ChannelFetchUtil.setMapFn(options)
     this._url = ChannelFetchUtil.setUrl(options)
     this._responseType = ChannelFetchUtil.setResponseType(options)
     this._serverOptions = ChannelFetchUtil.setServerOptions(options)
     this._subscriber = subscriber !== undefined ? subscriber : testSubscriber
-    this.debug = options.debug !== undefined ? options.debug : false
-    this.disableSanitize = options?.disableSanitize
+    this.debug = options?.debug === true
+    this.disableSanitize = options?.disableSanitize === true
     this.channelName = CHANNEL_NAME
 
     const fetchProps = {
@@ -70,6 +49,7 @@ export class ChannelFetchUtil {
       disableSanitize: this.disableSanitize,
       debug: this.debug
     }
+
     if (testMode !== true) {
       ChannelFetchUtil.startWindowFetch(fetchProps, this._subscriber, this.channelName)
     }
@@ -77,60 +57,189 @@ export class ChannelFetchUtil {
 
   static startWindowFetch(props, subscriber, channelName) {
     const { mapFn, url, serverOptions, responseType, debug } = props
-    const tapLogDebug = p => console.log('DEBUG FETCH :', p, { url, serverOptions, responseType, channelName })
-    const tapLog = debug === true ? tapLogDebug : () => {}
-
-    const mapWrapper = (mapMethod) => {
-      const metadata = { channelName, url, responseType, serverOptions }
-
-      return (data) => {
-        const disableSanitize =  props?.disableSanitize === true
-        /*
-        if (disableSanitize) {
-          const env = (typeof process !== 'undefined' && process.env && process.env.NODE_ENV)
-            ? process.env.NODE_ENV
-            : 'development'
-
-          const msg = `SPYNE SECURITY WARNING — Sanitization disabled for fetch from ${url}. Data will enter the reactive stream unsanitized. Only use disableSanitize=true for trusted or controlled sources.`
-
-          if (env === 'production') {
-            throw new Error(`SpyneJS security policy violation: disableSanitize=true is not allowed in production (${url}).`)
-          } else {
-            console.warn(
-              `%c${msg}`,
-              'color:#f33;font-weight:bold;'
-            )
-          }
-        }
-*/
-
-        const sanitizedData = disableSanitize ? data : sanitizeData(data)
-        return mapMethod(sanitizedData, metadata)
-      }
+
+    const metadata = {
+      channelName,
+      url,
+      responseType,
+      serverOptions
     }
 
-    // console.log('SERVER OPTIONS ', { props, serverOptions })
+    const tapLogDebug = p => {
+      console.log('DEBUG FETCH :', p, metadata)
+    }
+
+    const tapLog = debug === true ? tap(tapLogDebug) : tap(() => {})
+
+    const mapWrapper = mapMethod => data => {
+      const disableSanitize = props?.disableSanitize === true
+
+      // Fetched data is remote and untrusted: always sanitize in 'app' mode,
+      // regardless of the application's authoring/richtext posture.
+      const sanitizedData = disableSanitize ? data : sanitizeData(data, { mode: 'app' })
+
+      return mapMethod(sanitizedData, metadata)
+    }
+
+    const response$ = from(window.fetch(url, serverOptions)).pipe(
+      mergeMap(response =>
+        from(ChannelFetchUtil.parseResponse(response, metadata))
+      ),
+
+      tapLog,
 
-    const response$ = from(window.fetch(url, serverOptions))
-      .pipe(tap(tapLog), flatMap(r => from(r[responseType]())),
-        map(mapWrapper(mapFn)),
-        publish())
+      map(mapWrapper(mapFn)),
 
-    response$.connect()
+      catchError(error =>
+        of(ChannelFetchUtil.createFetchErrorPayload(error, metadata))
+      ),
+
+      share()
+    )
 
     response$.subscribe(subscriber)
   }
 
+  static async parseResponse(response, metadata) {
+    const { responseType } = metadata
+
+    const status = response.status
+    const statusText = response.statusText
+    const contentType = response.headers?.get?.('content-type') || ''
+
+    const responseMetadata = {
+      ...metadata,
+      status,
+      statusText,
+      contentType,
+      ok: response.ok
+    }
+
+    if (response.ok !== true) {
+      const rawBody = await ChannelFetchUtil.safeReadText(response)
+
+      throw ChannelFetchUtil.createFetchError({
+        errorType: 'FETCH_HTTP_ERROR',
+        message: `Fetch request failed with status ${status} ${statusText}`,
+        metadata: responseMetadata,
+        rawBody
+      })
+    }
+
+    if (responseType === 'json') {
+      return ChannelFetchUtil.parseJsonResponse(response, responseMetadata)
+    }
+
+    if (responseType === 'text') {
+      return response.text()
+    }
+
+    if (responseType === 'blob') {
+      return response.blob()
+    }
+
+    if (responseType === 'arrayBuffer') {
+      return response.arrayBuffer()
+    }
+
+    if (responseType === 'formData') {
+      return response.formData()
+    }
+
+    throw ChannelFetchUtil.createFetchError({
+      errorType: 'FETCH_UNSUPPORTED_RESPONSE_TYPE',
+      message: `Unsupported fetch responseType "${responseType}"`,
+      metadata: responseMetadata
+    })
+  }
+
+  static async parseJsonResponse(response, metadata) {
+    const rawBody = await response.text()
+    const trimmedBody = rawBody.trim()
+
+    if (trimmedBody === '') {
+      return null
+    }
+
+    try {
+      return JSON.parse(trimmedBody)
+    } catch (error) {
+      throw ChannelFetchUtil.createFetchError({
+        errorType: 'FETCH_RESPONSE_PARSE_ERROR',
+        message: 'Expected JSON but could not parse response body.',
+        metadata,
+        rawBody,
+        originalError: error
+      })
+    }
+  }
+
+  static createFetchError({ errorType, message, metadata, rawBody = '', originalError }) {
+    const error = new Error(message)
+
+    error.isChannelFetchError = true
+    error.errorType = errorType
+    error.metadata = metadata
+    error.rawBody = rawBody
+    error.originalError = originalError
+
+    return error
+  }
+
+  static createFetchErrorPayload(error, metadata) {
+    const fetchMetadata = error?.metadata || metadata || {}
+
+    return {
+      isChannelFetchError: true,
+      isError: true,
+      error: true,
+      errorType: error?.errorType || 'FETCH_UNKNOWN_ERROR',
+      message: error?.message || 'Unknown ChannelFetchUtil error',
+
+      channelName: fetchMetadata.channelName,
+      url: fetchMetadata.url,
+      responseType: fetchMetadata.responseType,
+      status: fetchMetadata.status,
+      statusText: fetchMetadata.statusText,
+      contentType: fetchMetadata.contentType,
+      ok: fetchMetadata.ok,
+
+      rawBodyPreview: ChannelFetchUtil.truncateBody(error?.rawBody),
+
+      originalErrorMessage: error?.originalError?.message
+    }
+  }
+
+  static truncateBody(body = '', maxLength = 500) {
+    if (typeof body !== 'string') {
+      return ''
+    }
+
+    return body.length > maxLength
+      ? `${body.slice(0, maxLength)}...`
+      : body
+  }
+
+  static async safeReadText(response) {
+    try {
+      return await response.text()
+    } catch (error) {
+      return ''
+    }
+  }
+
   static setMapFn(opts) {
-    const getFn = compose(defaultTo((p) => p), prop('mapFn'))
+    const getFn = compose(defaultTo(p => p), prop('mapFn'))
     return getFn(opts)
   }
 
   static setUrl(opts) {
     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
   }
 
@@ -155,16 +264,47 @@ export class ChannelFetchUtil {
   }
 
   static stringifyBodyIfItExists(obj) {
-    const convertToJSON = when(propIs(Object, 'body'), compose(over(lensProp('body'), JSON.stringify)))
+    const body = obj?.body
+
+    const shouldStringifyBody =
+      body !== null &&
+      typeof body === 'object' &&
+      body.constructor === Object
+
+    if (shouldStringifyBody !== true) {
+      return obj
+    }
 
-    return convertToJSON(obj)
+    const headers = new Headers(obj.headers || {})
+
+    if (headers.has('Content-Type') !== true) {
+      headers.set('Content-Type', 'application/json')
+    }
+
+    return {
+      ...obj,
+      headers,
+      body: JSON.stringify(body)
+    }
   }
 
   static updateMethodWhenBodyExists(opts) {
-    const hasBody = has('body')
-    const methodIsGet = propEq('GET', 'method')
-    const pred = allPass([hasBody, methodIsGet])
-    return when(pred, assoc('method', 'POST'))(opts)
+    const hasBody = opts?.body !== undefined
+    const method = opts?.method || 'GET'
+
+    if (hasBody && method.toUpperCase() === 'GET') {
+      spyneWarn(
+        'SPYNE WARNING: Fetch body was provided with method GET. Changing method to POST.',
+        opts
+      )
+
+      return {
+        ...opts,
+        method: 'POST'
+      }
+    }
+
+    return opts
   }
 
   static setServerOptions(opts) {
@@ -181,26 +321,30 @@ export class ChannelFetchUtil {
       'integrity',
       'keepalive'
     ], opts)
+
     let mergedOptions = mergeDeepRight(ChannelFetchUtil.baseOptions(), options)
+
     mergedOptions = ChannelFetchUtil.updateMethodWhenBodyExists(mergedOptions)
     mergedOptions = ChannelFetchUtil.stringifyBodyIfItExists(mergedOptions)
+
     return mergedOptions
   }
 
   static baseOptions() {
     return {
-      method: 'GET', // Default method
+      method: 'GET',
+
       headers: new Headers({
         Accept: 'application/json, text/plain, */*'
       }),
-      mode: 'cors', // Default mode
-      credentials: 'same-origin', // Default credentials policy
-      cache: 'default', // Default cache policy
-      redirect: 'follow', // Default redirect policy
-      referrer: 'client', // Default referrer policy
-      referrerPolicy: 'no-referrer-when-downgrade', // Default referrer policy
-      integrity: '', // Default integrity
-      keepalive: false // Default keepalive
+
+      mode: 'cors',
+      credentials: 'same-origin',
+      cache: 'default',
+      redirect: 'follow',
+      referrerPolicy: 'no-referrer-when-downgrade',
+      integrity: '',
+      keepalive: false
     }
   }
 }