goblin-laboratory 4.11.2 → 4.12.0

package/lib/index.js

@@ -34,6 +34,11 @@ class Channel {
     this._send('DISPATCH_IN_APP', {action, _data: action});
   }
 
+  sendEvent(topic, data) {
+    data = {topic, data};
+    this._send('NEW_EVENT', {data, _data: data});
+  }
+
   beginRender(labId, tokens) {
     this._send('BEGIN_RENDER', {labId, tokens, _data: labId});
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goblin-laboratory",
-  "version": "4.11.2",
+  "version": "4.12.0",
   "description": "Laboratory",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -43,12 +43,12 @@
     "immutable": "4.0.0-rc.14",
     "linked-list": "^1.0.4",
     "obj-to-css": "^1.0.1",
+    "path-to-regexp": "^1.9.0",
     "prettier": "2.0.4",
     "prop-types": "^15.5.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^8.1.3",
-    "react-router": "^5.0.0",
     "redux-thunk": "^2.3.0",
     "safe-stable-stringify": "^2.5.0",
     "xcraft-core-shredder": "^5.3.0",

package/widgets/connect-helpers/map-c.js

@@ -1,16 +1,51 @@
 import C, {ConnectedProp} from './c.js';
 
+function mergeInFuncs(inFunc1, inFunc2) {
+  if (inFunc1) {
+    if (inFunc2) {
+      return (...args) => inFunc2(inFunc1(...args));
+    }
+    return inFunc1;
+  }
+  return inFunc2;
+}
+
+function mergeOutFuncs(outFunc1, outFunc2, inFunc1) {
+  if (outFunc1) {
+    if (outFunc2) {
+      if (outFunc1.length > 1 || outFunc2.length > 1) {
+        if (inFunc1) {
+          return (newValue, oldValue, ...oldValues) =>
+            outFunc1(
+              outFunc2(newValue, inFunc1(oldValue, ...oldValues)),
+              oldValue,
+              ...oldValues
+            );
+        }
+        return (newValue, oldValue, ...oldValues) =>
+          outFunc1(
+            outFunc2(newValue, oldValue, ...oldValues),
+            oldValue,
+            ...oldValues
+          );
+      }
+      return (newValue) => outFunc1(outFunc2(newValue));
+    }
+    return outFunc1;
+  }
+  if (outFunc2 && outFunc2.length > 1 && inFunc1) {
+    return (newValue, oldValue, ...oldValues) =>
+      outFunc2(newValue, inFunc1(oldValue, ...oldValues));
+  }
+  return outFunc2;
+}
+
 export default function mapC(value, inFunc, outFunc) {
   if (value instanceof ConnectedProp) {
     return C(
       value.path,
-      value.inFunc ? (...args) => inFunc(value.inFunc(...args)) : inFunc,
-      value.outFunc
-        ? value.outFunc.length > 1 || outFunc.length > 1
-          ? (newValue, ...oldValues) =>
-              value.outFunc(outFunc(newValue, ...oldValues), ...oldValues)
-          : (newValue) => value.outFunc(outFunc(newValue))
-        : outFunc
+      mergeInFuncs(value.inFunc, inFunc),
+      mergeOutFuncs(value.outFunc, outFunc, value.inFunc)
     );
   }
   return inFunc(value);

package/widgets/connect-helpers/pick-c.js

@@ -0,0 +1,13 @@
+import C from './c.js';
+
+export default function pickC(...fields) {
+  for (const field of fields) {
+    if (field.lastIndexOf('.') !== 0) {
+      throw new Error(`Unsupported field ${field}`);
+    }
+  }
+  const fieldNames = fields.map((field) => field.slice(1));
+  return C(fields, (...values) =>
+    Object.fromEntries(fieldNames.map((name, i) => [name, values[i]]))
+  );
+}

package/widgets/connect-helpers/with-c.js

@@ -27,13 +27,13 @@ function isShredderOrImmutable(obj) {
  * ```
  * And then the prop "value" can be connected to the state using:
  * ```javascript
- * <TextFieldNC
+ * <TextField
  *   value={C('.age')}
  * />
  * ```
  * Two functions can be applied, when reading and writing to the state:
  * ```javascript
- * <TextFieldNC
+ * <TextField
  *   value={C('.age', age => age + '', age => Number(age))}
  * />
  * ```
@@ -53,8 +53,24 @@ function isShredderOrImmutable(obj) {
  *
  * It is possible to connect a prop to multiple values in the state:
  * ```javascript
- * <TextFieldNC
- *   value={C(['.age', '.limit'], (age, limit) => age > limit ? age : limit)}
+ * <Label
+ *   text={C(['.firstname', '.lastname'], (firstname, lastname) => `${firstname} ${lastname}`)}
+ * />
+ * ```
+ *
+ * When multiple values are connected, the write action is "patch"
+ * and the output function must return a patch object:
+ * ```javascript
+ * <TextFieldTyped
+ *   type="date"
+ *   value={C(
+ *     ['.year', '.month', '.day'],
+ *     (year, month, day) => `${year}-${month}-${day}`,
+ *     (value) => {
+ *       const [year, month, day] = value.split('-');
+ *       return {year, month, day};
+ *     }
+ *   )}
  * />
  * ```
  *
@@ -79,18 +95,17 @@ export default function withC(Component, dispatchProps = {}, {modelProp} = {}) {
   const ConnectedPropsMapper = (props) => {
     let {_connectedProps, _connectedProp, _model, ...otherProps} = props;
     const newProps = {};
-    for (const prop of _connectedProps) {
+    for (const {name, prop, fullPath} of _connectedProps) {
       const inFunc = prop.inFunc;
       if (inFunc) {
-        const name = prop.name;
         if (name === '_connectedProp') {
-          if (Array.isArray(prop.fullPath)) {
+          if (Array.isArray(fullPath)) {
             _connectedProp = inFunc(..._connectedProp);
           } else {
             _connectedProp = inFunc(_connectedProp);
           }
         } else {
-          if (Array.isArray(prop.fullPath)) {
+          if (Array.isArray(fullPath)) {
             newProps[name] = inFunc(...props[name]);
           } else {
             newProps[name] = inFunc(props[name]);
@@ -104,10 +119,10 @@ export default function withC(Component, dispatchProps = {}, {modelProp} = {}) {
     }
     if (modelProp) {
       const connectedModelProp = _connectedProps.find(
-        (prop) => prop.name === modelProp
+        ({name}) => name === modelProp
       );
       if (connectedModelProp) {
-        const path = connectedModelProp.path;
+        const path = connectedModelProp.prop.path;
         const model = Array.isArray(path) ? path[0] : path;
         return (
           <WithModel model={model}>
@@ -124,8 +139,7 @@ export default function withC(Component, dispatchProps = {}, {modelProp} = {}) {
   const ConnectedComponent = Widget.connect(
     (state, props) => {
       const newProps = {};
-      for (const prop of props._connectedProps) {
-        const fullPath = prop.fullPath;
+      for (const {name, fullPath} of props._connectedProps) {
         let value;
         if (Array.isArray(fullPath)) {
           value = fullPath.map((p) => state.get(p));
@@ -134,7 +148,7 @@ export default function withC(Component, dispatchProps = {}, {modelProp} = {}) {
         } else {
           value = state.get(fullPath);
         }
-        newProps[prop.name] = value;
+        newProps[name] = value;
       }
       return newProps;
     },
@@ -163,7 +177,32 @@ export default function withC(Component, dispatchProps = {}, {modelProp} = {}) {
     }
 
     handlePropChange(propName, value) {
-      const path = this.addContextToPath(this.props[propName].path);
+      const propPath = this.props[propName].path;
+
+      if (Array.isArray(propPath)) {
+        const [root, id, ...pathArray] = (
+          this.props._model || this.context.model
+        ).split('.');
+        if (pathArray.length > 0) {
+          throw new Error(`Patch with a path is not supported`);
+        }
+        if (root === 'backend') {
+          this.doFor(id, 'patch', {patch: value});
+          return;
+        } else if (root === 'widgets') {
+          this.dispatchTo(id, {
+            type: 'PATCH',
+            patch: value,
+          });
+          return;
+        } else {
+          throw new Error(
+            `Model path starting with '${root}' is not supported.`
+          );
+        }
+      }
+
+      const path = this.addContextToPath(propPath);
       if (!path) {
         throw new Error(`Path is not defined`);
       }
@@ -203,22 +242,22 @@ export default function withC(Component, dispatchProps = {}, {modelProp} = {}) {
 
       for (const name of this.connectedPropNames) {
         const prop = this.props[name];
-        prop.name = name;
 
         // Add context to path
+        let fullPath;
         if (Array.isArray(prop.path)) {
           // Handle array of paths (for extra arguments to inFunc)
-          prop.fullPath = prop.path.map(this.addContextToPath);
+          fullPath = prop.path.map(this.addContextToPath);
         } else {
-          prop.fullPath = this.addContextToPath(prop.path);
+          fullPath = this.addContextToPath(prop.path);
         }
 
-        if (prop.fullPath === null || prop.fullPath === undefined) {
+        if (fullPath === null || fullPath === undefined) {
           // No path, the prop will receive 'undefined'
           undefinedProps[name] = undefined;
         } else {
           // There is a path, add the prop to the list of connected props
-          connectedProps.push(prop);
+          connectedProps.push({name, prop, fullPath});
 
           // Setup a dispatch prop to change the prop value
           if (name in dispatchProps) {
@@ -226,16 +265,22 @@ export default function withC(Component, dispatchProps = {}, {modelProp} = {}) {
             const outFunc = prop.outFunc;
             if (outFunc) {
               if (outFunc.length > 1) {
-                let currentValues;
-                if (Array.isArray(prop.fullPath)) {
-                  currentValues = prop.fullPath.map((path) =>
-                    this.getState(path)
-                  );
+                if (Array.isArray(fullPath)) {
+                  onChangeProps[dispatchPropName] = (value) => {
+                    const currentValues = fullPath.map((path) =>
+                      this.getState(path)
+                    );
+                    this.handlePropChange(
+                      name,
+                      outFunc(value, ...currentValues)
+                    );
+                  };
                 } else {
-                  currentValues = [this.getState(prop.fullPath)];
+                  onChangeProps[dispatchPropName] = (value) => {
+                    const currentValue = this.getState(fullPath);
+                    this.handlePropChange(name, outFunc(value, currentValue));
+                  };
                 }
-                onChangeProps[dispatchPropName] = (value) =>
-                  this.handlePropChange(name, outFunc(value, ...currentValues));
               } else {
                 onChangeProps[dispatchPropName] = (value) =>
                   this.handlePropChange(name, outFunc(value));

package/widgets/desktop-events.js

@@ -0,0 +1,39 @@
+class DesktopEvents {
+  #events = new Map();
+
+  /**
+   * Subscribe to a topic.
+   * @param {string} topic
+   * @param {Function} callback
+   * @returns {Function} unsub
+   */
+  sub(topic, callback) {
+    /** @type {Set} */
+    let callbacks = this.#events.get(topic);
+    if (!callbacks) {
+      callbacks = new Set();
+      this.#events.set(topic, callbacks);
+    }
+    callbacks.add(callback);
+    /* unsub */
+    return () => {
+      callbacks.delete(callback);
+    };
+  }
+
+  emit(topic, data) {
+    const callbacks = this.#events.get(topic);
+    if (!callbacks) {
+      return; /* discard event */
+    }
+    for (const callback of callbacks) {
+      try {
+        callback(data);
+      } catch (ex) {
+        console.error(ex.stack || ex.message || ex);
+      }
+    }
+  }
+}
+
+export default new DesktopEvents();

package/widgets/index-browsers.js

@@ -52,6 +52,9 @@ class BrowsersRenderer extends Renderer {
         case 'NEW_BACKEND_STATE':
           this.newBackendState(data.transitState);
           break;
+        case 'NEW_EVENT':
+          this.emitEvent(data.topic, data.data);
+          break;
         case 'BEGIN_RENDER':
           super.main(data.labId);
           //persist for future handshaking

package/widgets/index-electron-ws.js

@@ -84,6 +84,9 @@ class ElectronRendererWS extends Renderer {
         case 'NEW_BACKEND_STATE':
           this.newBackendState(data.transitState);
           break;
+        case 'NEW_EVENT':
+          this.emitEvent(data.topic, data.data);
+          break;
         case 'BEGIN_RENDER':
           super.main(labId);
           break;

package/widgets/index-electron.js

@@ -56,6 +56,10 @@ class ElectronRenderer extends Renderer {
       this.newBackendState(transitState)
     );
 
+    ipcRenderer.on('NEW_EVENT', (event, data) =>
+      this.emitEvent(data.topic, data.data)
+    );
+
     ipcRenderer.on('BEGIN_RENDER', () => {
       return super.main(labId);
     });

package/widgets/renderer.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Root from 'goblin-laboratory/widgets/root';
 import configureStore from 'goblin-laboratory/widgets/store/store';
+import desktopEvents from './desktop-events.js';
 
 class Renderer {
   constructor(send, options = {}) {
@@ -51,6 +52,10 @@ class Renderer {
     );
   }
 
+  emitEvent(topic, data) {
+    desktopEvents.emit(topic, data);
+  }
+
   main(labId) {
     //PUT LABID IN WINDOW STATE
     //USEFULL IN SOME CONNECT()

package/widgets/widget/index.js

@@ -2,16 +2,17 @@ import React from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import Shredder from 'xcraft-core-shredder';
-import {flushToStyleTag} from 'aphrodite/no-important';
+import {flushToStyleTag} from 'aphrodite/no-important.js';
 import importer from 'goblin_importer';
-import shallowEqualShredder from './utils/shallowEqualShredder';
-import _connect from './utils/connect';
-import connectWidget from './utils/connectWidget';
-import connectBackend from './utils/connectBackend';
-import * as widgetsActions from './utils/widgets-actions';
+import shallowEqualShredder from './utils/shallowEqualShredder.js';
+import _connect from './utils/connect.js';
+import connectWidget from './utils/connectWidget.js';
+import connectBackend from './utils/connectBackend.js';
+import * as widgetsActions from './utils/widgets-actions.js';
 import mergeStyleDefinitions from './style/merge-style-definitions.js';
 import buildStyle from './style/build-style.js';
 import joinModels from '../connect-helpers/join-models.js';
+import desktopEvents from '../desktop-events.js';
 
 const stylesImporter = importer('styles');
 const reducerImporter = importer('reducer');
@@ -143,6 +144,10 @@ class Widget extends React.Component {
     return this.props.id || this.context.nearestParentId;
   }
 
+  get events() {
+    return desktopEvents;
+  }
+
   // Styles
 
   get styles() {
@@ -311,7 +316,8 @@ class Widget extends React.Component {
   do(action, args) {
     return this.doAs(this.name, action, args);
   }
-  /** @deprecated Replace by doFor.
+  /**
+   * @deprecated Replace by doFor.
    * It's possible to have a mismatch between service name and serviceId.
    * Prefer to use doFor with the service id.
    */

package/widgets/with-route/matchPath.js

@@ -0,0 +1,67 @@
+import pathToRegexp from 'path-to-regexp';
+
+const cache = {};
+const cacheLimit = 10000;
+let cacheCount = 0;
+
+function compilePath(path, options) {
+  const cacheKey = `${options.end}${options.strict}${options.sensitive}`;
+  const pathCache = cache[cacheKey] || (cache[cacheKey] = {});
+
+  if (pathCache[path]) return pathCache[path];
+
+  const keys = [];
+  const regexp = pathToRegexp(path, keys, options);
+  const result = {regexp, keys};
+
+  if (cacheCount < cacheLimit) {
+    pathCache[path] = result;
+    cacheCount++;
+  }
+
+  return result;
+}
+
+/**
+ * Public API for matching a URL pathname to a path.
+ */
+function matchPath(pathname, options = {}) {
+  if (typeof options === 'string' || Array.isArray(options)) {
+    options = {path: options};
+  }
+
+  const {path, exact = false, strict = false, sensitive = false} = options;
+
+  const paths = [].concat(path);
+
+  return paths.reduce((matched, path) => {
+    if (!path && path !== '') return null;
+    if (matched) return matched;
+
+    const {regexp, keys} = compilePath(path, {
+      end: exact,
+      strict,
+      sensitive,
+    });
+    const match = regexp.exec(pathname);
+
+    if (!match) return null;
+
+    const [url, ...values] = match;
+    const isExact = pathname === url;
+
+    if (exact && !isExact) return null;
+
+    return {
+      path, // the path used to match
+      url: path === '/' && url === '' ? '/' : url, // the matched portion of the URL
+      isExact, // whether or not we matched exactly
+      params: keys.reduce((memo, key, index) => {
+        memo[key.name] = values[index];
+        return memo;
+      }, {}),
+    };
+  }, null);
+}
+
+export default matchPath;

package/widgets/with-route/with-route.js

@@ -1,8 +1,8 @@
 import {connect} from 'react-redux';
 import Shredder from 'xcraft-core-shredder';
-import {matchPath} from 'react-router';
 import {getParameter} from '../../lib/helpers.js';
 import shallowEqualShredder from '../widget/utils/shallowEqualShredder.js';
+import matchPath from './matchPath.js';
 
 export function withRoute(path, watchedParams, watchedSearchs, watchHash) {
   return connect(