UPDATE: add an example for preact integration

Author: js-programmer

.babelrc

@@ -0,0 +1,22 @@
+{
+    "presets": [
+        "env",
+        "preact"
+    ],
+    "plugins": [
+        "transform-decorators-legacy",
+        "transform-class-properties",
+        [
+            "transform-object-rest-spread",
+            {
+                "useBuiltIns": true
+            }
+        ],
+        [
+            "transform-react-jsx",
+            {
+                "pragma": "h"
+            }
+        ]
+    ]
+}

.gitignore

@@ -5,6 +5,11 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+/dist
+package-lock.json
+*.map
+.npmrc
+
 # Runtime data
 pids
 *.pid

example/preact/.babelrc

@@ -0,0 +1,22 @@
+{
+    "presets": [
+        "env",
+        "preact"
+    ],
+    "plugins": [
+        "transform-decorators-legacy",
+        "transform-class-properties",
+        [
+            "transform-object-rest-spread",
+            {
+                "useBuiltIns": true
+            }
+        ],
+        [
+            "transform-react-jsx",
+            {
+                "pragma": "h"
+            }
+        ]
+    ]
+}

example/preact/.gitignore

@@ -0,0 +1,64 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+dist
+/dist
+package-lock.json
+*.map
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next

example/preact/ExamplePage.js

@@ -0,0 +1,38 @@
+import { h } from 'preact';
+import component from '@js-factory/hoc/preact/component';
+
+@component({
+    beforeRender() {
+        console.log('before render');
+    },
+    afterRender({ sayHello }) {
+        console.log('afterRender');
+    },
+    state: {
+        x: 1,
+    },
+    instanceProps: {
+        y: 1
+    },
+    eventHandlers: {
+        onClickHandler({ x, onClickAction, setState, getInstanceProps, setInstanceProps }) {
+            const { y } = getInstanceProps();
+            setInstanceProps({ y: y + 1 });
+            setState({ x: x + 1 });
+        }
+    },
+    template: (props) => {
+        const { x, onClickHandler, getInstanceProps, state } = props;
+        console.log('state', x);
+        console.log('instance prop', getInstanceProps())
+        return (
+            <div>
+            <h1>Example Page</h1>
+                <button onClick={onClickHandler}>Increment</button>
+                <p>state - {x}</p>
+                <p>ip - {getInstanceProps().y}</p>
+            </div>
+        );
+    }
+})
+export default class ExamplePage { }

example/preact/browser.js

@@ -0,0 +1,10 @@
+import { h, render } from 'preact';
+import ExamplePage from './ExamplePage';
+
+render(
+    <div>
+        <ExamplePage />
+    </div>
+    ,
+    document.body
+);

example/preact/package.json

@@ -0,0 +1,28 @@
+{
+  "main": "webpack.config.js",
+  "scripts": {
+    "ex": "webpack --mode production --watch --progress",
+    "server": "webpack-dev-server --open"
+  },
+  "dependencies": {
+    "preact": "^8.4.2",
+    "webpack": "^4.27.1",
+    "webpack-dev-server": "^3.1.10"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.6",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-es2017": "^6.24.1",
+    "babel-preset-preact": "^1.1.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "webpack-cli": "^3.1.2"
+  }
+}

example/preact/webpack.config.js

@@ -0,0 +1,24 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = [
+    {
+        devtool: 'source-map',
+        entry: './browser.js',
+        module: {
+            rules: [
+                {
+                    test: /\.js$/,
+                    use: "babel-loader"
+                }
+            ]
+        },
+        devServer: {
+            contentBase: path.join(__dirname, 'dist'),
+            compress: true,
+            port: 9000
+        }
+    }
+];
+
+module.exports = config;

integration/preact/component.js

@@ -0,0 +1,144 @@
+/**
+ * It's a higher order component provides a wrapper around given preact component `InnerComponent`
+ */
+
+import { h, Component } from 'preact';
+import getProps from '../util/getProps';
+import bindHandler from '../util/bindHandler';
+
+
+/**
+ * @description
+ * This function creates a new object to handle instance properties
+ * @param {*} instanceProps - Instance Properties to be passed as props
+ */
+function attachInstanceProps(instanceProps) {
+    if (Object.prototype.toString.call(instanceProps) !== '[object Object]') {
+        return {};
+    }
+    let localProps = instanceProps;
+    return {
+        getInstanceProps() {
+            return localProps;
+        },
+        setInstanceProps(newProps) {
+            localProps = {
+                ...localProps,
+                ...newProps
+            };
+        }
+    }
+};
+
+function exec(fn, ...rest) {
+    return fn && fn.apply(this, rest);
+}
+
+function hasWatches(watcher) {
+    return storeActivated && watcher.length;
+}
+
+let store = {};
+let storeActivated = false;
+
+export default function component(options = {}) {
+    const {
+        state,
+        template,
+        templates,
+        afterRender,
+        afterUpdate,
+        beforeRender,
+        beforeUpdate,
+        beforeUnmount,
+        eventHandlers,
+        instanceProps
+    } = options;
+    let { actions, watcher } = options;
+    return function wrapper(InnerComponent) {
+        return class Wrapper extends Component {
+            constructor(props, context = {}) {
+                super(props, context);
+                const { actions: storeActions, watcher: storeWatcher = [] } = props;
+                const setState = (props) => this.setState({ ...props });
+                watcher = storeWatcher || watcher;
+                actions = storeActions || actions;
+                this.state = state || {};
+                this.handlers = { setState };
+                this.storeAttached = hasWatches(watcher);
+
+                // Attach handlers
+                bindHandler.call(this, eventHandlers, this.bindLifecycleHandlers);
+                bindHandler.call(this, actions, store.action);
+
+                // Bind lifecycle methods
+                beforeRender && (this.componentWillMount = this.bindLifecycleHandlers(beforeRender, this));
+                beforeUpdate && (this.componentWillUpdate = this.bindLifecycleHandlers(beforeUpdate, this));
+                afterUpdate && (this.componentDidUpdate = this.bindLifecycleHandlers(afterUpdate, this));
+                instanceProps && (this.instanceProps = attachInstanceProps(instanceProps));
+
+                let globalState = this.storeAttached ? getProps(watcher)(store ? store.getState() : {}, props) : {};
+                const updateStore = () => {
+                    if (!this.storeAttached) {
+                        return;
+                    }
+                    let localState = getProps(watcher)(store ? store.getState() : {}, this.props);
+                    // if store value does change, do not call update
+                    for (let i in localState) if (localState[i] !== globalState[i]) {
+                        globalState = localState;
+                        return this.setState(null);
+                    }
+                    // if above condition fails & store contains additional props
+                    // update & cause re-render
+                    for (let i in globalState) if (!(i in localState)) {
+                        globalState = localState;
+                        return this.setState(null);
+                    }
+                };
+
+                this.mergeProps = () => {
+                    const { state, handlers, instanceProps } = this;
+                    return {
+                        ...state,
+                        ...props,
+                        ...globalState,
+                        ...handlers,
+                        ...instanceProps
+                    };
+                }
+
+                this.componentDidMount = () => {
+                    exec.call(this, afterRender, this.mergeProps());
+                    if (this.storeAttached) {
+                        store.subscribe(updateStore);
+                    }
+                }
+
+                this.componentWillUnmount = () => {
+                    exec.call(this, beforeUnmount, this.mergeProps());
+                    if (this.storeAttached) {
+                        store.unsubscribe(updateStore);
+                    }
+                }
+
+                this.render = (props) => {
+                    const view = template || templates || InnerComponent;
+                    return h(view, this.mergeProps());
+                };
+            }
+            bindLifecycleHandlers(func, context) {
+                return func && function () {
+                    const { state, props, handlers, instanceProps, storeAttached } = this;
+                    let globalState = storeAttached ? getProps(watcher)(store ? store.getState() : {}) : {};
+                    func.apply(null, [{ ...state, ...props, ...instanceProps, ...handlers, ...globalState }, ...arguments]);
+                }.bind(context);
+            }
+        };
+    };
+}
+
+export function injectStore(appStore) {
+    store = appStore;
+    storeActivated = true;
+}
+

integration/util/bindHandler.js

@@ -0,0 +1,15 @@
+
+function hasHandlers(handlers) {
+    return handlers && Object.keys(handlers).length > 0;
+}
+
+function bindHandlers(handlers, modifier) {
+    hasHandlers(handlers) && Object.keys(handlers).map((key) => {
+        const handler = handlers[key];
+        if (typeof handler === 'function') {
+            this.handlers[key] = modifier(handler, this);
+        }
+    });
+}
+
+export default bindHandlers;

integration/util/getProps.js

@@ -0,0 +1,9 @@
+const noop = () => ({});
+export default function getProps(properties = []) {
+    if (properties.length === 0) return noop;
+    return state =>
+        properties.reduce((selected, key) => {
+            selected[key] = state[key];
+            return selected;
+        }, {});
+};