Add Hyperapp

benchmarks.js

@@ -13,6 +13,7 @@ var enabledBenchmarks = null;
 enabledLibs = {
     marko: true,
     preact: true,
+    hyperapp: true,
     react: true,
     vue: true,
     inferno: true
@@ -75,4 +76,4 @@ Object.keys(enabledBenchmarks).forEach((benchmarkName) => {
     });
 });
 
-module.exports = benchmarks;
+module.exports = benchmarks;

benchmarks/color-picker/hyperapp/.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        ["es2015", { "loose": true, "modules": false }]
+    ],
+    "plugins": [
+        ["transform-react-jsx", { "pragma": "h" }]
+    ]
+}

benchmarks/color-picker/hyperapp/client.jsx

@@ -0,0 +1,29 @@
+const { app } = require('hyperapp');
+const { state, actions, view } = require('./components/App');
+
+const mountNode = document.getElementById('mount');
+
+if (mountNode) {
+    const initialState = Object.assign({}, state, { colors: window.colors });
+    app(initialState, actions, view, mountNode);
+    console.log('Re-rendering on client completed');
+}
+
+window.addBench('hyperapp', (el, colors) => {
+    const initialState = Object.assign({}, state, { colors });
+
+    let currentDone;
+    const appActions = Object.assign({}, actions, {
+        onUpdate() {
+            currentDone();
+        }
+    });
+
+    const widget = app(initialState, appActions, view, el);
+
+    let selectedColorIndex = 0;
+    return (done) => {
+        widget.setColorIndex((++selectedColorIndex) % colors.length);
+        currentDone = done;
+    };
+});

benchmarks/color-picker/hyperapp/components/App.jsx

@@ -0,0 +1,54 @@
+const { h } = require('hyperapp');
+
+const state = {
+    selectedColorIndex: 0,
+    colors: [],
+};
+
+const actions = {
+    setColorIndex(selectedColorIndex) {
+        return { selectedColorIndex };
+    },
+    onUpdate() {
+        // for benchmark
+    },
+};
+
+function renderColors(state, actions) {
+    if (state.colors.length) {
+        return (
+            <ul>
+                {state.colors.map((color, index) => (
+                    <li
+                        className={`color${state.selectedColorIndex === index ? ' selected' : ''}`}
+                        style={{ backgroundColor: color.hex }}
+                        onclick={() => actions.setColorIndex(index)
+                    }>
+                        {color.name}
+                    </li>
+                ))}
+            </ul>
+        );
+    } else {
+        return <div>No colors!</div>
+    }
+}
+
+function view(state, actions) {
+    const currentColor = state.colors[state.selectedColorIndex];
+    return (
+        <div class="colors" onupdate={actions.onUpdate}>
+            <h1>Choose your favorite color:</h1>
+            <div class="colors">
+                {renderColors(state, actions)}
+            </div>
+            <div>You chose: <div class="chosen-color">{currentColor.name}</div></div>
+        </div>
+    );
+}
+
+module.exports = {
+    state,
+    actions,
+    view,
+};

benchmarks/color-picker/hyperapp/page.marko

@@ -0,0 +1,23 @@
+import serverRender from './util/serverRender';
+import App from './components/App';
+
+<include(input.pageLayout)>
+    <@body>
+        $ var renderedHTML = serverRender(App, input.colors);
+        <div id="mount">$!{renderedHTML}</div>
+        <!--
+        In order for behavior to be attached to the
+        React UI components rendered on the server, we must re-render the
+        SearchResults UI component _again_ on the client using the exact same
+        data that we used to render it on the server.
+        This means that we have to go through the expensive step of
+        serializing the data to JSON and add the data to the page (increases
+        the page weight). The re-rendering on the client happens in "./client.js"
+        and it uses the data assigned to the global variable produced
+        by the following inline script:
+        -->
+        <script>
+            window.colors=${JSON.stringify(input.colors)};
+        </script>
+    </@body>
+</include>

benchmarks/color-picker/hyperapp/rollup.config.js

@@ -0,0 +1,25 @@
+import commonjsPlugin from 'rollup-plugin-commonjs';
+import browserifyPlugin from 'rollup-plugin-browserify-transform';
+import nodeResolvePlugin from 'rollup-plugin-node-resolve';
+import babelPlugin from 'rollup-plugin-babel';
+import envify from 'envify';
+import path from 'path';
+
+process.env.NODE_ENV = 'production';
+
+export default {
+    input: path.resolve(__dirname, 'client.jsx'),
+    output: {
+        format: 'iife',
+        file: path.join(process.env.BUNDLES_DIR, 'hyperapp.js')
+    },
+    mame: 'app',
+    plugins: [
+        babelPlugin({
+            exclude: 'node_modules/**'
+        }),
+        browserifyPlugin(envify),
+        nodeResolvePlugin(),
+        commonjsPlugin()
+    ],
+};

benchmarks/color-picker/hyperapp/server.jsx

@@ -0,0 +1,10 @@
+const { app } = require('hyperapp');
+const { renderToString } = require('hyperapp-render');
+const { state, actions, view } = require('./components/App');
+
+module.exports = function(colors) {
+    return function benchFn() {
+        const initialState = Object.assign({}, state, { colors });
+        return renderToString(view(initialState, actions));
+    };
+};

benchmarks/color-picker/hyperapp/util/serverRender.jsx

@@ -0,0 +1,6 @@
+const { renderToString } = require('hyperapp-render');
+
+module.exports = function infernoRender(App, colors) {
+    const state = Object.assign({}, App.state, { colors });
+    return renderToString(App.view(state, App.actions));
+};

benchmarks/search-results/hyperapp/.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        ["es2015", { "loose": true, "modules": false }]
+    ],
+    "plugins": [
+        ["transform-react-jsx", { "pragma": "h" }]
+    ]
+}

benchmarks/search-results/hyperapp/client.jsx

@@ -0,0 +1,30 @@
+const { app } = require('hyperapp');
+const { state, actions, view } = require('./components/App');
+
+const mountNode = document.getElementById('searchResultsMount');
+
+if (mountNode) {
+    const initialState = Object.assign({}, state, { colors: window.searchResultsData });
+    app(initialState, actions, view, mountNode);
+    console.log('Re-rendering on client completed');
+}
+
+window.addBench('hyperapp', (el, getNextSearchResults) => {
+    const initialState = Object.assign({}, state, {
+        getNextSearchResults: getNextSearchResults(),
+    });
+
+    let currentDone;
+    const appActions = Object.assign({}, actions, {
+        onUpdate() {
+            currentDone();
+        }
+    });
+
+    const widget = app(initialState, appActions, view, el);
+
+    return (done) => {
+        widget.setSearchResults(getNextSearchResults());
+        currentDone = done;
+    };
+});

benchmarks/search-results/hyperapp/components/App.jsx

@@ -0,0 +1,50 @@
+const { h } = require('hyperapp');
+const Footer = require('./Footer');
+const SearchResultsItem = require('./SearchResultsItem');
+
+const state = {
+    searchResultsData: {
+        items: [],
+    },
+    purchased: {
+        // id-1: true,
+        // id-2: false
+    },
+};
+
+const actions = {
+    setSearchResults(searchResultsData) {
+        return { searchResultsData };
+    },
+    onUpdate() {
+        // for benchmark
+    },
+    purchased: {
+        buy(id) {
+            return { [id]: true };
+        }
+    }
+};
+
+function view(state, actions) {
+    return (
+        <div class="search-results">
+            <div>
+                {state.searchResultsData.items.map((item) => (
+                    <SearchResultsItem
+                        item={item}
+                        purchased={state.purchased[item.id]}
+                        buy={actions.purchased.buy}
+                    />
+                ))}
+            </div>
+            <Footer/>
+        </div>
+    );
+}
+
+module.exports = {
+    state,
+    actions,
+    view,
+};