spyne 0.19.1 → 0.20.0

package/package.json

@@ -1,35 +1,53 @@
 {
   "name": "spyne",
-  "sideEffects": false,
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "Reactive Real-DOM Framework for Advanced Javascript applications",
-  "main": "lib/spyne.min.js",
-  "module": "src/spyne/spyne.js",
+  "sideEffects": true,
+  "main": "./lib/spyne.umd.js",
+  "module": "./lib/spyne.esm.js",
+  "exports": {
+    ".": {
+      "import": "./lib/spyne.esm.js",
+      "require": "./lib/spyne.umd.js"
+    },
+    "./lib/*": "./lib/*.js"
+  },
   "scripts": {
     "eslint-fix-dry": "eslint 'src/spyne/**' --fix-dry-run",
-    "eslint-fix": "eslint --fix  'src/spyne/**'",
-    "eslint-fix-tests": "eslint --fix  'src/tests/**'",
+    "eslint-fix": "eslint --fix 'src/spyne/**'",
+    "eslint-fix-tests": "eslint --fix 'src/tests/**'",
     "report-coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov",
     "commit": "git-cz",
-    "build": "webpack --mode production   --env build ",
-    "start": "webpack-dev-server --hot ",
-    "dev": "webpack --mode development --progress  --watch --env dev ",
-    "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",
+    "start": "webpack-dev-server --hot",
+    "build": "webpack --config webpack.config.js --mode production",
+    "build:esm": "rollup --config rollup.config.js",
+    "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",
     "test": "karma start --browsers Chrome",
-    "test:single": "npm test -- --single-run",
     "watch:test": "npm test -- --auto-watch --no-single-run",
-    "test:mocha": "mocha tests"
+    "test:mocha": "mocha tests",
+    "lint": "eslint 'src/spyne/**' --fix"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/spynejs/spyne.git"
+    "url": "git+https://github.com/spynejs/spyne.git"
   },
-  "keywords": [],
+  "keywords": [
+    "reactive",
+    "real-dom",
+    "framework",
+    "javascript",
+    "JavaScript Framework",
+    "Single-Page-Application Framework"
+  ],
   "author": "Frank Batista",
-  "license": "LGPL",
+  "license": "UNLICENSED",
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "chai": "^4.3.9",
     "chai-dom": "^1.11.0",
     "clean-webpack-plugin": "^4.0.0",
@@ -39,29 +57,31 @@
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-standard": "^5.0.0",
+    "eslint-webpack-plugin": "^4.2.0",
     "file-loader": "^6.2.0",
-    "karma": "^6.4.2",
+    "karma": "^6.4.4",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-mocha": "^2.0.1",
-    "karma-webpack": "^5.0.0",
-    "mocha": "^10.2.0",
-    "webpack": "^5.88.2",
+    "karma-webpack": "^5.0.1",
+    "mocha": "^10.7.3",
+    "rollup": "^2.79.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-middleware": "^6.1.1",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-middleware": "^7.4.2",
+    "webpack-dev-server": "^5.1.0",
     "webpack-rxjs-externals": "^2.0.0"
   },
   "config": {
     "ghooks": {
-      "pre-commit": "npm run test:single"
+      "pre-commit": "npm run test"
     }
   },
   "dependencies": {
-    "ramda": "^0.29.0",
+    "dompurify": "^3.1.6",
+    "ramda": "^0.30.1",
     "rxjs": "^7.8.1"
   }
 }

package/rollup.config.js

@@ -0,0 +1,26 @@
+// rollup.config.js
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+  input: 'src/spyne/spyne.js',   // Your main entry (the "barrel")
+  output: {
+    file: 'lib/spyne.esm.js',
+    format: 'es',               // "es" = pure ESM
+    sourcemap: true
+  },
+  // If you want to keep certain libraries external, define them here:
+  external: ['ramda', 'rxjs'],
+  plugins: [
+    // Allows Rollup to resolve packages from node_modules
+    resolve(),
+    // Converts CommonJS modules to ES modules
+    commonjs(),
+    // Allows importing JSON files
+    json(),
+    // Minify the output (optional)
+    terser()
+  ]
+};

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

@@ -1,6 +1,6 @@
-import { Channel } from './channel';
-import { ChannelFetchUtil } from '../utils/channel-fetch-util';
-import {path, pick, mergeDeepRight, all, allPass, either, values, defaultTo, reject, compose, isNil} from 'ramda';
+import { Channel } from './channel'
+import { ChannelFetchUtil } from '../utils/channel-fetch-util'
+import { path, pick, mergeDeepRight, all, allPass, either, values, defaultTo, reject, compose, isNil } from 'ramda'
 
 export class ChannelFetch extends Channel {
   /**
@@ -46,91 +46,87 @@ export class ChannelFetch extends Channel {
    *
    */
 
-
   constructor(name, props = {}) {
-
     // ALLOW FOR GENERIC MAP PROPERTY
 
-    ChannelFetch.validateMapMethod(props, name);
+    ChannelFetch.validateMapMethod(props, name)
 
-    if (props.map!==undefined){
-
-      props.mapFn = props.map;
+    if (props.map !== undefined) {
+      props.mapFn = props.map
     }
     props.extendedActionsArr = [
       `${name}_DATA_EVENT`,
       [`${name}_UPDATE_DATA_EVENT`, 'onFetchUpdate']
-    ];
-    props.sendCachedPayload = true;
-    super(name, props);
+    ]
+    props.sendCachedPayload = true
+    super(name, props)
   }
 
-  static validateMapMethod(props, name, testMode=false){
-    const isNotEmpty = arr=>arr.length>=1
-    const isNotFunction = val => typeof(val)!=='function';
+  static validateMapMethod(props, name, testMode = false) {
+    const isNotEmpty = arr => arr.length >= 1
+    const isNotFunction = val => typeof (val) !== 'function'
     const isUndefinedOrWrongType = either(isNil, isNotFunction)
-    const isUndefined = all(isUndefinedOrWrongType);
+    const isUndefined = all(isUndefinedOrWrongType)
     const isNotUndefinedAndIsNotEmpty = allPass([isUndefined, isNotEmpty])
-    const mapMethodIsInvalid = compose(isNotUndefinedAndIsNotEmpty,values, pick(['map', 'mapFn']))(props)
+    const mapMethodIsInvalid = compose(isNotUndefinedAndIsNotEmpty, values, pick(['map', 'mapFn']))(props)
 
-    if (mapMethodIsInvalid){
-      if(testMode===false) {
-        console.warn(`Spyne Warning: The map method for ChannelFetch, ${name}, appears to be invalid`);
+    if (mapMethodIsInvalid) {
+      if (testMode === false) {
+        console.warn(`Spyne Warning: The map method for ChannelFetch, ${name}, appears to be invalid`)
       }
-      return false;
+      return false
     }
 
-    return true;
-
+    return true
   }
 
   onRegistered() {
-    this.startFetch();
+    this.startFetch()
   }
 
   addRegisteredActions(name) {
-    let arr = [
+    const arr = [
       'CHANNEL_DATA_EVENT',
       ['CHANNEL_UPDATE_DATA_EVENT', 'onFetchUpdate']
-    ];
+    ]
 
-    let extendedArr = compose(defaultTo([]), path(['props', 'extendedActionsArr']));
-    return arr.concat(extendedArr(this));
+    const extendedArr = compose(defaultTo([]), path(['props', 'extendedActionsArr']))
+    return arr.concat(extendedArr(this))
   }
 
   startFetch(options = {}, subscriber = this.onFetchReturned.bind(this)) {
-    let fetchProps = this.consolidateAllFetchProps(options);
-    return new ChannelFetchUtil(fetchProps, subscriber, false, this.props.name);
+    const fetchProps = this.consolidateAllFetchProps(options)
+    return new ChannelFetchUtil(fetchProps, subscriber, false, this.props.name)
   }
 
   onFetchUpdate(evt) {
-    let propsOptions = this.getPropsForFetch(evt);
-    this.startFetch(propsOptions);
+    const propsOptions = this.getPropsForFetch(evt)
+    this.startFetch(propsOptions)
   }
 
   onFetchReturned(streamItem) {
-    return this.createChannelPayloadItem(streamItem);
+    return this.createChannelPayloadItem(streamItem)
   }
 
   createChannelPayloadItem(payload, action = `${this.props.name}_DATA_EVENT`) {
-    const {name, sendCachedPayload, url} = this.props;
-    const srcElement = {name, sendCachedPayload, url};
-    this.sendChannelPayload(action, payload, srcElement);
+    const { name, sendCachedPayload, url } = this.props
+    const srcElement = { name, sendCachedPayload, url }
+    this.sendChannelPayload(action, payload, srcElement)
   }
 
   getPropsForFetch(evt) {
-    let dataObj = path(['viewStreamInfo', 'payload'], evt);
-    return pick(['mapFn', 'url', 'header', 'body', 'mode', 'method', 'responseType', 'debug'], dataObj);
+    const dataObj = path(['viewStreamInfo', 'payload'], evt)
+    return pick(['mapFn', 'url', 'header', 'body', 'mode', 'method', 'responseType', 'debug'], dataObj)
   }
 
   consolidateAllFetchProps(options, props = this.props) {
-    let propsOptions = pick(['mapFn', 'url', 'header', 'body', 'mode', 'method', 'responseType', 'debug'], props);
-    const mergeOptions = (o1, o2) => mergeDeepRight(o1, o2);
-    const filterOutUndefined = reject(isNil);
-    return compose(filterOutUndefined, mergeOptions)(propsOptions, options);
+    const propsOptions = pick(['mapFn', 'url', 'header', 'body', 'mode', 'method', 'responseType', 'debug'], props)
+    const mergeOptions = (o1, o2) => mergeDeepRight(o1, o2)
+    const filterOutUndefined = reject(isNil)
+    return compose(filterOutUndefined, mergeOptions)(propsOptions, options)
   }
 
   get observer() {
-    return this.observer$;
+    return this.observer$
   }
 }

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

@@ -10,9 +10,9 @@ import {
   defaultTo,
   prop,
   is
-} from 'ramda';
-import {SpyneAppProperties} from '../utils/spyne-app-properties';
-import {safeClone} from '../utils/safe-clone';
+} from 'ramda'
+import { SpyneAppProperties } from '../utils/spyne-app-properties'
+import { safeClone } from '../utils/safe-clone'
 
 export class ChannelPayload {
   /**
@@ -36,17 +36,17 @@ export class ChannelPayload {
    * @returns Validated ChannelPayload json object
    */
   constructor(channelName, action, payload, srcElement, event, timeLabel) {
-    let channel = channelName;
-    //payload = ChannelPayload.deepFreeze(payload);
+    const channel = channelName
+    // payload = ChannelPayload.deepFreeze(payload);
 
-    if(timeLabel){
-      console.time(timeLabel);
+    if (timeLabel) {
+      console.time(timeLabel)
     }
 
-    let channelPayloadItemObj = { channelName, action, srcElement, event };
-   // Object.defineProperty(channelPayloadItemObj, 'payload', {get: () => clone(payload)});
-    const frozenPayload = ChannelPayload.deepFreeze(payload);
-    channelPayloadItemObj['payload'] = frozenPayload;
+    const channelPayloadItemObj = { channelName, action, srcElement, event }
+    // Object.defineProperty(channelPayloadItemObj, 'payload', {get: () => clone(payload)});
+    const frozenPayload = ChannelPayload.deepFreeze(payload)
+    channelPayloadItemObj.payload = frozenPayload
     /**
      * This is a convenience method that helps with destructuring by merging all properties.
      *
@@ -60,71 +60,63 @@ export class ChannelPayload {
      *
      */
 
-
-
-    if (SpyneAppProperties.debug === true){
-      if (Object.prototype.hasOwnProperty.call(payload, 'payload')){
-        let payloadStr = JSON.stringify(payload);
-        console.warn(`Spyne Warning: the following payload contains a nested payload property which may create conflicts: Action: ${action}, ${payloadStr}`);
+    if (SpyneAppProperties.debug === true) {
+      if (Object.prototype.hasOwnProperty.call(payload, 'payload')) {
+        const payloadStr = JSON.stringify(payload)
+        console.warn(`Spyne Warning: the following payload contains a nested payload property which may create conflicts: Action: ${action}, ${payloadStr}`)
       }
 
-      const channelActionsArr = SpyneAppProperties.getChannelActions(channel);
-
-      ChannelPayload.validateAction(action, channel, channelActionsArr);
-
+      const channelActionsArr = SpyneAppProperties.getChannelActions(channel)
 
+      ChannelPayload.validateAction(action, channel, channelActionsArr)
     }
 
-
-
     channelPayloadItemObj.clone = () => mergeAll([
-        {payload:safeClone(channelPayloadItemObj.payload)},
+      { payload:safeClone(channelPayloadItemObj.payload) },
       channelPayloadItemObj.payload,
-        { channel: clone(channel) },
-        { event: clone(event) },
-        {srcElement: srcElement},
-                clone(channelPayloadItemObj.srcElement), {
-        action: clone(channelPayloadItemObj.action) }
-         ]);
-
-
+      { channel: clone(channel) },
+      { event: clone(event) },
+      { srcElement },
+      clone(channelPayloadItemObj.srcElement), { action: clone(channelPayloadItemObj.action) }
+    ])
 
     const channelPayloadItemObjProps = {
       $dir: {
         get: () => channelPayloadItemObj._dir,
-        set: (val) => channelPayloadItemObj._dir=val
+        set: (val) => {
+          channelPayloadItemObj._dir = val
+          return val
+        }
       }
     }
 
-
-
     if (channel === 'CHANNEL_ROUTE') {
-      //channelPayloadItemObj['location'] = ChannelPayload.getLocationData();
-      channelPayloadItemObjProps['location'] = {
-        get: ()=>ChannelPayload.getLocationData()
+      // channelPayloadItemObj['location'] = ChannelPayload.getLocationData();
+      channelPayloadItemObjProps.location = {
+        get: () => ChannelPayload.getLocationData()
       }
-     /* channelPayloadItemObjProps['routeData'] = {
+      /* channelPayloadItemObjProps['routeData'] = {
         get: ()=>prop('routeData', frozenPayload)
       }
 */
     }
 
-    channelPayloadItemObj._dir = undefined;
+    channelPayloadItemObj._dir = undefined
 
     Object.defineProperties(channelPayloadItemObj, channelPayloadItemObjProps)
 
-    if(timeLabel){
-      console.timeEnd(timeLabel);
+    if (timeLabel) {
+      console.timeEnd(timeLabel)
     }
-    return channelPayloadItemObj;
+    return channelPayloadItemObj
   }
 
   static validateAction(action, channel, arr) {
-    let isInArr = includes(action, arr);
+    const isInArr = includes(action, arr)
     if (isInArr === false && SpyneAppProperties.initialized === true) {
-      console.warn(`warning: Action: '${action}' is not registered within the ${channel} channel!`);
+      console.warn(`warning: Action: '${action}' is not registered within the ${channel} channel!`)
     }
-    return isInArr;
+    return isInArr
   }
 
   static getLocationData() {
@@ -137,8 +129,8 @@ export class ChannelPayload {
       'port',
       'pathname',
       'search',
-      'hash'];
-    return pickAll(locationParamsArr, window.location);
+      'hash']
+    return pickAll(locationParamsArr, window.location)
   }
 
   static getStreamItem() {
@@ -146,43 +138,38 @@ export class ChannelPayload {
   }
 
   static deepClone(o) {
-    const isArr = is(Array);
-    const isObj = is(Object);
-    const isIter = ob => isArr(ob)===false && isObj(ob)===true;
-    const isIterable = isIter(o);
-    return isIterable ? compose(fromPairs, toPairs, clone)(o) : clone(o);
-
+    const isArr = is(Array)
+    const isObj = is(Object)
+    const isIter = ob => isArr(ob) === false && isObj(ob) === true
+    const isIterable = isIter(o)
+    return isIterable ? compose(fromPairs, toPairs, clone)(o) : clone(o)
   }
 
-
-
   static deepFreeze(o) {
-    //return o;
-    //return Object.freeze(o);
-    const elIsDomElement = compose(lte(0), defaultTo(-1), prop('nodeType'));
+    // return o;
+    // return Object.freeze(o);
+    const elIsDomElement = compose(lte(0), defaultTo(-1), prop('nodeType'))
 
     try {
-      Object.freeze(o);
+      Object.freeze(o)
       Object.getOwnPropertyNames(o).forEach(function(prop) {
-        if (Object.prototype.hasOwnProperty.call(o,prop)
-            && elIsDomElement(o[prop]) === false
-            && o[prop] !== null
-            && (typeof o[prop] === "object" || typeof o[prop] === "function")
-            && !Object.isFrozen(o[prop])) {
-          ChannelPayload.deepFreeze(o[prop]);
+        if (Object.prototype.hasOwnProperty.call(o, prop) &&
+            elIsDomElement(o[prop]) === false &&
+            o[prop] !== null &&
+            (typeof o[prop] === 'object' || typeof o[prop] === 'function') &&
+            !Object.isFrozen(o[prop])) {
+          ChannelPayload.deepFreeze(o[prop])
         }
-      });
-
-    } catch(e){
-       //console.log("FREEZE ERR ",{o,e});
-      return o;
-
+      })
+    } catch (e) {
+      // console.log("FREEZE ERR ",{o,e});
+      return o
     }
 
-    return o;
+    return o
   }
 
   static getMouseEventKeys() {
-    return ['altKey', 'bubbles', 'cancelBubble', 'cancelable', 'clientX', 'clientY', 'composed', 'ctrlKey', 'currentTarget', 'defaultPrevented', 'detail', 'eventPhase', 'fromElement', 'isTrusted', 'layerX', 'layerY', 'metaKey', 'movementX', 'movementY', 'offsetX', 'offsetY', 'pageX', 'pageY', 'path', 'relatedTarget', 'returnValue', 'screenX', 'screenY', 'shiftKey', 'sourceCapabilities', 'srcElement', 'target', 'timeStamp', 'toElement', 'type', 'view', 'which', 'x', 'y'];
+    return ['altKey', 'bubbles', 'cancelBubble', 'cancelable', 'clientX', 'clientY', 'composed', 'ctrlKey', 'currentTarget', 'defaultPrevented', 'detail', 'eventPhase', 'fromElement', 'isTrusted', 'layerX', 'layerY', 'metaKey', 'movementX', 'movementY', 'offsetX', 'offsetY', 'pageX', 'pageY', 'path', 'relatedTarget', 'returnValue', 'screenX', 'screenY', 'shiftKey', 'sourceCapabilities', 'srcElement', 'target', 'timeStamp', 'toElement', 'type', 'view', 'which', 'x', 'y']
   }
 }

package/src/spyne/channels/channel-proxy.js

@@ -1,8 +1,8 @@
-import { Channel } from './channel';
-import {SpyneAppProperties} from '../utils/spyne-app-properties';
-import { Subject, ReplaySubject, merge } from 'rxjs';
-import {includes} from 'ramda';
-import {delayCall} from '../utils/frp-tools';
+import { Channel } from './channel'
+import { SpyneAppProperties } from '../utils/spyne-app-properties'
+import { Subject, ReplaySubject, merge } from 'rxjs'
+import { includes } from 'ramda'
+import { delayCall } from '../utils/frp-tools'
 
 export class ChannelProxy extends Channel {
   /**
@@ -18,41 +18,40 @@ export class ChannelProxy extends Channel {
    *
    */
   constructor(name, props = {}) {
-    props.isProxy = true;
-    super(name, props);
-    this.props = props;
-    this.subject$ = new Subject();
-    this.replaySub$ = new ReplaySubject(1);
-    this.observer$ = merge(this.subject$, this.replaySub$);
-	const isDevMode = SpyneAppProperties.debug;
-    if (isDevMode === true){
-      this.checkIfChannelIsStillProxy(name);
+    props.isProxy = true
+    super(name, props)
+    this.props = props
+    this.subject$ = new Subject()
+    this.replaySub$ = new ReplaySubject(1)
+    this.observer$ = merge(this.subject$, this.replaySub$)
+    const isDevMode = SpyneAppProperties.debug
+    if (isDevMode === true) {
+      this.checkIfChannelIsStillProxy(name)
     }
   }
 
   getMergedSubject(peristData = false) {
-    return peristData === true ? this.replaySub$ : this.subject$;
+    return peristData === true ? this.replaySub$ : this.subject$
   }
 
-  checkIfChannelIsStillProxy(channelName){
-    let name = channelName;
+  checkIfChannelIsStillProxy(channelName) {
+    const name = channelName
 
-    const checkIfProxy=()=>{
-      let bool = includes(name, SpyneAppProperties.listRegisteredChannels());
-      if (bool!==true){
-        console.warn(`Spyne Warning: The channel, ${name} does not appear to be registered!`);
+    const checkIfProxy = () => {
+      const bool = includes(name, SpyneAppProperties.listRegisteredChannels())
+      if (bool !== true) {
+        console.warn(`Spyne Warning: The channel, ${name} does not appear to be registered!`)
       }
-    };
-
-    delayCall(checkIfProxy, 1000);
+    }
 
+    delayCall(checkIfProxy, 1000)
   }
 
   get replaySubject() {
-    return this.replaySub$;
+    return this.replaySub$
   }
 
   get subject() {
-    return this.subject$;
+    return this.subject$
   }
 }