krausest · avkonst · Feb 12, 2020 · Feb 12, 2020 · Feb 13, 2020
diff --git a/frameworks/keyed/preact-hookstate/.babelrc b/frameworks/keyed/preact-hookstate/.babelrc
@@ -0,0 +1,11 @@
+{
+    "presets": [
+        ["@babel/preset-env", {
+          "targets": {
+            "browsers": ["last 1 chrome versions"]
+          }
+        }],
+        "@babel/preset-react"
+    ],
+    "plugins": []
+}
diff --git a/frameworks/keyed/preact-hookstate/index.html b/frameworks/keyed/preact-hookstate/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Preact Hookstate</title>
+  <link href="/css/currentStyle.css" rel="stylesheet"/>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='dist/main.js'></script>
+</body>
+</html>
diff --git a/frameworks/keyed/preact-hookstate/package.json b/frameworks/keyed/preact-hookstate/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "js-framework-benchmark-react-lite",
+  "version": "1.0.0",
+  "description": "Benchmark for Preact+Hookstate framework",
+  "js-framework-benchmark": {
+    "frameworkVersionFromPackage": "preact:@hookstate/core"
+  },
+  "scripts": {
+    "build-dev": "webpack -w -d",
+    "build-prod": "webpack"
+  },
+  "keywords": [
+    "ractive"
+  ],
+  "author": "Stefan Krause",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/krausest/js-framework-benchmark",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/krausest/js-framework-benchmark.git"
+  },
+  "devDependencies": {
+    "babel-minify-webpack-plugin": "^0.3.1",
+    "@babel/core": "7.6.4",
+    "@babel/preset-env": "7.6.3",
+    "@babel/preset-react": "7.6.3",
+    "@babel/plugin-proposal-class-properties": "7.5.5",
+    "babel-loader": "8.0.6",
+    "webpack": "4.41.2",
+    "webpack-cli": "3.3.9"
+  },
+  "dependencies": {
+    "@babel/plugin-transform-react-jsx": "7.3.0",
+    "@hookstate/core": "1.5.2",
+    "preact": "10.0.1"
+  }
+}
diff --git a/frameworks/keyed/preact-hookstate/src/Main.jsx b/frameworks/keyed/preact-hookstate/src/Main.jsx
@@ -0,0 +1,136 @@
+'use strict';
+/** @jsx preact.h */
+
+var preact = require('preact');
+var React = require('react');
+var hookstate = require('@hookstate/core');
+
+var { render } = preact;
+var { useStateLink, createStateLink, None, Downgraded } = hookstate;
+
+
+function random(max) { return Math.round(Math.random() * 1000) % max; }
+
+const A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean",
+    "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
+    "cheap", "expensive", "fancy"];
+const C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
+const N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse",
+    "keyboard"];
+
+let nextId = 1;
+
+function buildData(count) {
+    const data = {};
+    for (let i = 0; i < count; i++) {
+        data[nextId] = {
+            id: nextId,
+            label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`,
+        };
+        nextId += 1;
+    }
+    return data;
+}
+
+const globalState = createStateLink({});
+let selectedState = undefined;
+
+const GlyphIcon = <span className="glyphicon glyphicon-remove" aria-hidden="true"></span>;
+
+const Row = ({ itemState }) => {
+    const state = useStateLink(itemState).with(Downgraded);
+    const item = state.value;
+    const select = () => {
+        if (selectedState && selectedState.nested) {
+            selectedState.nested.selected.set(false)
+        }
+        selectedState = state
+        selectedState.nested.selected.set(true)
+    };
+    const remove = () => state.set(None);
+
+    return (<tr key={item.id} className={item.selected ? "danger" : ""}>
+        <td className="col-md-1">{item.id}</td>
+        <td className="col-md-4"><a onClick={select}>{item.label}</a></td>
+        <td className="col-md-1"><a onClick={remove}>{GlyphIcon}</a></td>
+        <td className="col-md-6"></td>
+    </tr>);
+}
+
+const Button = ({ id, cb, title }) => (
+    <div className="col-sm-6 smallpad">
+        <button type="button" className="btn btn-primary btn-block" id={id} onClick={cb}>{title}</button>
+    </div>
+);
+
+const Jumbotron = () => {
+    const dataState = globalState
+
+    return (<div className="jumbotron">
+        <div className="row">
+            <div className="col-md-6">
+                <h1>Preact Hookstate keyed</h1>
+            </div>
+            <div className="col-md-6">
+                <div className="row">
+                    <Button id="run" title="Create 1,000 rows" cb={() => {
+                        dataState.set(buildData(1000))
+                    }} />
+                    <Button id="runlots" title="Create 10,000 rows" cb={() => {
+                        dataState.set(buildData(10000))
+                    }} />
+                    <Button id="add" title="Append 1,000 rows" cb={() => {
+                        dataState.merge(buildData(1000))
+                    }} />
+                    <Button id="update" title="Update every 10th row" cb={() => {
+                        dataState.merge(p => {
+                            const mergee = {}
+                            const keys = Object.keys(p);
+                            for (let i = 0; i < keys.length; i += 10) {
+                                const itemId = keys[i];
+                                const itemState = p[itemId];
+                                itemState.label = itemState.label + " !!!";
+                                mergee[itemId] = itemState
+                            }
+                            return mergee;
+                        })
+                    }} />
+                    <Button id="clear" title="Clear" cb={() => {
+                        dataState.set({})
+                    }} />
+                    <Button id="swaprows" title="Swap Rows" cb={() => {
+                        dataState.merge(p => {
+                            const mergee = {}
+                            const keys = Object.keys(p);
+                            if (keys.length > 2) {
+                                mergee[keys[1]] = p[keys[keys.length - 2]]
+                                mergee[keys[keys.length - 2]] = p[keys[1]]
+                            }
+                            return mergee;
+                        })
+                    }} />
+                </div>
+            </div>
+        </div>
+    </div>)
+}
+
+const Rows = () => {
+    const dataState = useStateLink(globalState);
+
+    return (<table className="table table-hover table-striped test-data"><tbody>
+        {dataState.keys.map(itemKey =>
+            <Row key={itemKey} itemState={dataState.nested[itemKey]} />
+        )}
+    </tbody></table>)
+}
+
+const Main = () => {
+    return (<div className="container">
+        <Jumbotron />
+        <Rows />
+        <span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+    </div>);
+}
+
+render(<Main />, document.getElementById('main'));
diff --git a/frameworks/keyed/preact-hookstate/webpack.config.js b/frameworks/keyed/preact-hookstate/webpack.config.js
@@ -0,0 +1,58 @@
+'use strict';
+var path = require('path')
+const MinifyPlugin = require("babel-minify-webpack-plugin");
+var webpack = require('webpack')
+
+var cache = {};
+var loaders = [
+    {
+        test: /\.jsx$/,
+        loader: 'babel-loader'
+    },
+    {
+        test: /\.es6\.js$/,
+        loader: 'babel-loader'
+    },
+    {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader'
+    }
+];
+var extensions = [
+    '.js', '.jsx', '.es6.js', '.msx'
+];
+
+module.exports = [{
+    cache: cache,
+    module: {
+        rules: loaders
+    },
+    entry: {
+        main: './src/Main.jsx',
+    },
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        filename: '[name].js',
+        sourceMapFilename: "[file].map",
+    },
+    resolve: {
+        extensions: extensions,
+        modules: [
+            __dirname,
+            path.resolve(__dirname, "src"),
+            "node_modules"
+        ],
+        alias: {
+            "react": "node_modules/preact/compat/dist/compat.js",
+            "react-dom": "node_modules/preact/compat/dist/compat.js",
+        }
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                'NODE_ENV': JSON.stringify('production')
+            }
+        }),
+        new MinifyPlugin()
+    ]
+}];
diff --git a/frameworks/keyed/react-hookstate/index.html b/frameworks/keyed/react-hookstate/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>React Hookstate</title>
+  <link href="/css/currentStyle.css" rel="stylesheet"/>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='dist/main.js'></script>
+</body>
+</html>
diff --git a/frameworks/keyed/react-hookstate/package.json b/frameworks/keyed/react-hookstate/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "js-framework-benchmark-react-hooks",
+  "version": "1.1.1",
+  "description": "React Hooks demo",
+  "main": "index.js",
+  "js-framework-benchmark": {
+    "frameworkVersionFromPackage": "react:@hookstate/core"
+  },
+  "scripts": {
+    "build-dev": "webpack --watch",
+    "build-prod": "webpack"
+  },
+  "keywords": [
+    "react",
+    "webpack"
+  ],
+  "author": "Stefan Krause",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/krausest/js-framework-benchmark",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/krausest/js-framework-benchmark.git"
+  },
+  "devDependencies": {
+    "@babel/core": "7.4.5",
+    "@babel/preset-env": "7.4.5",
+    "@babel/preset-react": "7.0.0",
+    "@babel/plugin-proposal-class-properties": "7.4.4",
+    "babel-loader": "8.0.6",
+    "terser-webpack-plugin": "1.3.0",
+    "webpack": "4.34.0",
+    "webpack-cli": "3.3.4"
+  },
+  "dependencies": {
+    "@hookstate/core": "^1.5.2",
+    "react": "16.8.6",
+    "react-dom": "16.8.6"
+  }
+}