React Hooks Support (#7)

* add eslint + prettier

* del yarn.lock - clashes with package-lock

* WIP

* add peer dependencies

* useSiftView: hypothetically complete

* useSiftController: WIP

* update import use

* return render

* 1.0.0-beta.0

* lint config

* different importing

* fix imports

* debug build

* change rendering implementation

* cleanup

* rem useSiftController

* beta.6

* rem cache

* rebuild

* cleanup unrequired files

* separate react bundle. Update rollup to latest. Remove unrequired

* eslint config

* new build process

* importing fix

* simplify

* 1.0.0-beta.11

* optional props

* babel config

* add supported engines for build

* Update package.json

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "commonjs": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {}
+}

package.json

@@ -1,14 +1,16 @@
 {
   "name": "@redsift/sift-sdk-web",
-  "version": "0.16.8",
+  "version": "1.0.0-beta.13",
   "description": "SDK for developing web-based Sifts.",
-  "jsnext:main": "dist/sift-sdk-web.esm.js",
   "module": "dist/sift-sdk-web.esm.js",
   "main": "dist/sift-sdk-web.umd.js",
   "browser": "dist/sift-sdk-web.umd.js",
-  "esnext": "src/index.js",
+  "files": [
+    "dist",
+    "react.js"
+  ],
   "scripts": {
-    "build": "npm run clean && rollup-bundler",
+    "build": "npm run clean && rollup --config",
     "clean": "rm -rf ./dist",
     "prepare": "npm run build",
     "pretest": "npm outdated || true",
@@ -21,13 +23,42 @@
   ],
   "author": "Martin Hecher <[email protected]>",
   "license": "MIT",
+  "engines": {
+    "node": ">=12.16.3",
+    "npm": ">=6.13.4"
+  },
   "dependencies": {
     "@redsift/observable": "^1.2.0",
     "@redsift/rs-storage": "^1.3.1",
     "js-sha256": "^0.9.0"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.4.5",
-    "@redsift/rollup-bundler": "^0.7.1"
+    "@babel/core": "^7.9.6",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@rollup/plugin-babel": "^5.0.2",
+    "@rollup/plugin-commonjs": "^12.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.0.0",
+    "eslint-plugin-react": "^7.20.0",
+    "husky": ">=4",
+    "lint-staged": ">=10",
+    "prettier": "^2.0.5",
+    "rollup": "^2.10.9"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": "eslint --cache --fix",
+    "*.{js,jsx,css,md}": "prettier --write"
   }
 }

react.js

@@ -0,0 +1 @@
+module.exports = require('./dist/react.umd');

rollup.config.js

@@ -0,0 +1,56 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { getBabelOutputPlugin } from '@rollup/plugin-babel';
+import pkg from './package.json';
+
+const babelConfig = {
+  presets: [['@babel/preset-env']],
+  plugins: [
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-proposal-class-properties',
+  ],
+};
+
+const babelConfigUmd = {
+  presets: [['@babel/preset-env', { modules: 'umd' }]],
+  plugins: babelConfig.plugins,
+};
+
+export default [
+  {
+    input: './src/index.js',
+    plugins: [resolve(), commonjs()],
+    output: [
+      {
+        file: pkg.module,
+        format: 'es',
+        name: 'sift-sdk-web',
+        plugins: [getBabelOutputPlugin(babelConfig)],
+      },
+      {
+        file: pkg.browser,
+        format: 'esm',
+        name: 'sift-sdk-web',
+        plugins: [getBabelOutputPlugin(babelConfigUmd)],
+      },
+    ],
+  },
+  {
+    input: './src/react.js',
+    plugins: [resolve(), commonjs()],
+    output: [
+      {
+        file: 'dist/react.esm.js',
+        format: 'es',
+        name: 'sift-sdk-web/react',
+        plugins: [getBabelOutputPlugin(babelConfig)],
+      },
+      {
+        file: 'dist/react.umd.js',
+        format: 'esm',
+        name: 'sift-sdk-web/react',
+        plugins: [getBabelOutputPlugin(babelConfigUmd)],
+      },
+    ],
+  },
+];

src/core/useSiftView.js

@@ -0,0 +1,159 @@
+import { useState, useEffect } from 'react';
+import PluginManager from '../lib/plugin-manager';
+import Observable from '@redsift/observable';
+import sha256 from 'js-sha256';
+
+const useSiftView = (props = {}) => {
+  const { willPresentView } = props;
+  const [resizeHandler] = useState(null);
+  const [proxy] = useState(parent);
+  const [controller] = useState(new Observable());
+  const [pluginManager] = useState(new PluginManager());
+  const [params, setParams] = useState(null);
+
+  const notifyClient = (topic, value = {}) => {
+    proxy.postMessage(
+      { method: 'notifyClient', params: { topic, value } },
+      '*'
+    );
+  };
+
+  const _initPlugins = ({ pluginConfigs }) => {
+    pluginManager.init({
+      pluginConfigs,
+      contextType: 'view',
+      context: { notifyClient },
+      global: window,
+    });
+  };
+
+  const _startPlugins = ({ pluginConfigs }) => {
+    pluginManager.start({
+      pluginConfigs,
+      contextType: 'view',
+      context: { notifyClient },
+      global: window,
+    });
+  };
+
+  const _stopPlugins = ({ pluginConfigs }) => {
+    pluginManager.stop({
+      pluginConfigs,
+      contextType: 'view',
+      context: { notifyClient },
+      global: window,
+    });
+  };
+
+  const _receivePluginMessages = ({ messages }) => {
+    pluginManager.onMessages({ messages });
+  };
+
+  const getPlugin = ({ id }) => {
+    return (
+      pluginManager
+        .getActivePlugins()
+        // NOTE: see https://stackoverflow.com/questions/28627908/call-static-methods-from-regular-es6-class-methods
+        .find((plugin) => plugin.constructor.id() === id)
+    );
+  };
+
+  const publish = (topic, value) => {
+    proxy.postMessage(
+      { method: 'notifyController', params: { topic, value } },
+      '*'
+    );
+  };
+
+  const showOAuthPopup = ({ provider, options = null }) => {
+    let opt = options;
+    // If an email is passed, hash it into a subject
+    if (options && typeof options === 'object' && options.email) {
+      const { email, ...others } = options;
+      const subject = sha256(email).substr(0, 16);
+      opt = { subject, ...others };
+    }
+    notifyClient('showOAuthPopup', { provider, options: opt });
+  };
+
+  const removeOAuthIdentity = ({ provider, options = null }) => {
+    notifyClient('showOAuthRemovePopup', { provider, options });
+  };
+
+  const signup = () => {
+    notifyClient('signup');
+  };
+
+  const login = ({ redirectUri }) => {
+    notifyClient('login', { redirectUri });
+  };
+
+  const logout = () => {
+    notifyClient('logout');
+  };
+
+  const navigate = ({ href, openInNewTab = false }) => {
+    notifyClient('navigate', { href, openInNewTab });
+  };
+
+  const setupSyncHistory = ({ history, initialPath }) => {
+    const syncHistoryPlugin = getPlugin({ id: 'sync-history' });
+    if (syncHistoryPlugin) {
+      syncHistoryPlugin.setup({ history, initialPath });
+    } else {
+      console.log(
+        '[SiftSdkWeb] ERROR: To use `syncHistory` please enable the plugin first!'
+      );
+    }
+  };
+
+  const presentView = (props) => {
+    setParams(props);
+  };
+
+  const siftView = {
+    resizeHandler,
+    proxy,
+    controller,
+    pluginManager,
+    _initPlugins,
+    _startPlugins,
+    _stopPlugins,
+    _receivePluginMessages,
+    getPlugin,
+    publish,
+    notifyClient,
+    showOAuthPopup,
+    removeOAuthIdentity,
+    signup,
+    login,
+    logout,
+    navigate,
+    setupSyncHistory,
+    presentView,
+    willPresentView,
+  };
+
+  useEffect(() => {
+    const _registerMessageListeners = () => {
+      window.addEventListener(
+        'message',
+        ({ data: { method, params } }) => {
+          if (method === 'notifyView') {
+            controller.publish(params.topic, params.value);
+          } else if (siftView[method]) {
+            siftView[method](params);
+          } else {
+            console.warn(`[SiftView]: method not implemented: ${method}`);
+          }
+        },
+        false
+      );
+    };
+    _registerMessageListeners();
+  }, []);
+
+  return [params, siftView];
+};
+
+export default useSiftView;

src/index.js

@@ -1,7 +1,8 @@
+/* eslint-disable no-unused-vars */
 import EmailClientController from './core/email-client-controller';
-import SiftView from './core/sift-view.js';
-import SiftController from './core/sift-controller.js';
-import SiftStorage from './core/sift-storage.js';
+import SiftView from './core/sift-view';
+import SiftController from './core/sift-controller';
+import SiftStorage from './core/sift-storage';
 
 export { EmailClientController };
 export { SiftController };
@@ -45,9 +46,9 @@ export function registerEmailClientController(emailClientController) {
  * Local functions
  */
 function _create(Base, methods) {
-  let Creature = function() {
+  let Creature = function () {
     Base.call(this);
-    if(this.init && typeof this.init === 'function') {
+    if (this.init && typeof this.init === 'function') {
       this.init();
     }
   };

src/react.js

@@ -0,0 +1,3 @@
+import useSiftView from './core/useSiftView';
+
+export { useSiftView };

stats.html

@@ -124,7 +124,7 @@ <h1>RollUp Visualizer</h1>
           </div>
       </div>
       </div>
-      <script>window.nodesData = [{"id":"sift-sdk-web.esm.js","root":{"name":"root","children":[{"name":"node_modules","children":[{"name":"@babel","children":[{"name":"runtime","children":[{"name":"helpers","children":[{"name":"classCallCheck.js","children":[],"size":199,"originalSize":196},{"name":"createClass.js","children":[],"size":595,"originalSize":596},{"name":"defineProperty.js","children":[],"size":291,"originalSize":289},{"name":"objectSpread.js","children":[],"size":570,"originalSize":623},{"name":"objectWithoutPropertiesLoose.js","children":[],"size":399,"originalSize":384},{"name":"objectWithoutProperties.js","children":[],"size":595,"originalSize":665},{"name":"typeof.js","children":[],"size":875,"originalSize":817},{"name":"assertThisInitialized.js","children":[],"size":228,"originalSize":219},{"name":"possibleConstructorReturn.js","children":[],"size":248,"originalSize":343},{"name":"getPrototypeOf.js","children":[],"size":332,"originalSize":267},{"name":"setPrototypeOf.js","children":[],"size":301,"originalSize":237},{"name":"inherits.js","children":[],"size":450,"originalSize":505}]}]}]},{"name":"@redsift","children":[{"name":"observable","children":[{"name":"dist","children":[{"name":"observable.esm.js","children":[],"size":2597,"originalSize":2621}]}]},{"name":"rs-storage","children":[{"name":"dist","children":[{"name":"rs-storage.esm.js","children":[],"size":42326,"originalSize":42477}]}]}]},{"name":"js-sha256","children":[{"name":"src","children":[{"name":"sha256.js","children":[],"size":18200,"originalSize":18387}]}]}]},{"name":"src","children":[{"name":"core","children":[{"name":"email-client-controller.js","children":[],"size":1309,"originalSize":1172},{"name":"sift-view.js","children":[],"size":5199,"originalSize":4162},{"name":"email-client.js","children":[],"size":803,"originalSize":450},{"name":"sift-storage.js","children":[],"size":1431,"originalSize":676},{"name":"sift-controller.js","children":[],"size":4387,"originalSize":4235}]},{"name":"plugins","children":[{"name":"track-ui-activity.js","children":[],"size":2675,"originalSize":1909},{"name":"sync-history.js","children":[],"size":2753,"originalSize":2312},{"name":"index.js","children":[],"size":49,"originalSize":171}]},{"name":"lib","children":[{"name":"plugin-manager.js","children":[],"size":2734,"originalSize":1826}]},{"name":"index.js","children":[],"size":1061,"originalSize":1526}]}]}}];</script>
+      <script>window.nodesData = [{"id":"sift-sdk-web.esm.js","root":{"name":"root","children":[{"name":"node_modules","children":[{"name":"@babel","children":[{"name":"runtime","children":[{"name":"helpers","children":[{"name":"classCallCheck.js","children":[],"size":199,"originalSize":196},{"name":"createClass.js","children":[],"size":595,"originalSize":596},{"name":"objectWithoutPropertiesLoose.js","children":[],"size":399,"originalSize":384},{"name":"objectWithoutProperties.js","children":[],"size":595,"originalSize":665},{"name":"typeof.js","children":[],"size":537,"originalSize":479},{"name":"defineProperty.js","children":[],"size":291,"originalSize":289},{"name":"setPrototypeOf.js","children":[],"size":301,"originalSize":237},{"name":"inherits.js","children":[],"size":450,"originalSize":505},{"name":"assertThisInitialized.js","children":[],"size":228,"originalSize":219},{"name":"possibleConstructorReturn.js","children":[],"size":248,"originalSize":343},{"name":"getPrototypeOf.js","children":[],"size":332,"originalSize":267},{"name":"arrayWithHoles.js","children":[],"size":109,"originalSize":106},{"name":"iterableToArrayLimit.js","children":[],"size":611,"originalSize":605},{"name":"arrayLikeToArray.js","children":[],"size":237,"originalSize":234},{"name":"unsupportedIterableToArray.js","children":[],"size":488,"originalSize":528},{"name":"nonIterableRest.js","children":[],"size":235,"originalSize":231},{"name":"slicedToArray.js","children":[],"size":192,"originalSize":432}]}]}]},{"name":"@redsift","children":[{"name":"observable","children":[{"name":"dist","children":[{"name":"observable.esm.js","children":[],"size":2597,"originalSize":2621}]}]},{"name":"rs-storage","children":[{"name":"dist","children":[{"name":"rs-storage.esm.js","children":[],"size":42326,"originalSize":42477}]}]}]},{"name":"js-sha256","children":[{"name":"src","children":[{"name":"sha256.js","children":[],"size":18200,"originalSize":18387}]}]}]},{"name":"src","children":[{"name":"core","children":[{"name":"email-client-controller.js","children":[],"size":1309,"originalSize":1172},{"name":"sift-view.js","children":[],"size":6076,"originalSize":4162},{"name":"email-client.js","children":[],"size":1519,"originalSize":450},{"name":"sift-storage.js","children":[],"size":2155,"originalSize":676},{"name":"sift-controller.js","children":[],"size":4387,"originalSize":4235},{"name":"useSiftView.js","children":[],"size":6779,"originalSize":4067}]},{"name":"plugins","children":[{"name":"track-ui-activity.js","children":[],"size":2675,"originalSize":1909},{"name":"sync-history.js","children":[],"size":2753,"originalSize":2312},{"name":"index.js","children":[],"size":49,"originalSize":171}]},{"name":"lib","children":[{"name":"plugin-manager.js","children":[],"size":2734,"originalSize":1826}]},{"name":"react.js","children":[],"size":0,"originalSize":71},{"name":"index.js","children":[],"size":1061,"originalSize":1618}]}]}}];</script>
       <script charset="UTF-8">
         (function () {
   'use strict';