feat(examples): add hydrate-basics example

thi-ng · Aug 31, 2018 · 0d34bb7 · 0d34bb7
1 parent 26bc7e7
commit 0d34bb7
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 0 deletions.
diff --git a/examples/hydrate-basics/.gitignore b/examples/hydrate-basics/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+yarn.lock
+*.js
diff --git a/examples/hydrate-basics/README.md b/examples/hydrate-basics/README.md
@@ -0,0 +1,18 @@
+# hydrate-basics
+
+[Live demo](http://demo.thi.ng/umbrella/hydrate-basics/)
+
+```bash
+git clone https://github.com/thi-ng/umbrella.git
+cd umbrella/examples/hydrate-basics
+yarn install
+yarn start
+```
+
+## Authors
+
+- Karsten Schmidt
+
+## License
+
+&copy; 2018 Karsten Schmidt // Apache Software License 2.0
diff --git a/examples/hydrate-basics/index.html b/examples/hydrate-basics/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>hydrate-basics</title>
+    <link href="https://unpkg.com/tachyons@4.9.1/css/tachyons.min.css" rel="stylesheet">
+    <style>
+    </style>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="text/javascript" src="bundle.js"></script>
+</body>
+
+</html>
diff --git a/examples/hydrate-basics/package.json b/examples/hydrate-basics/package.json
@@ -0,0 +1,24 @@
+{
+    "name": "hydrate-basics",
+    "version": "0.0.1",
+    "repository": "https://github.com/thi-ng/umbrella",
+    "author": "Karsten Schmidt <k+npm@thi.ng>",
+    "license": "Apache-2.0",
+    "scripts": {
+        "build": "webpack --mode production --display-reasons --display-modules",
+        "start": "webpack-dev-server --open --mode development --devtool inline-source-map"
+    },
+    "devDependencies": {
+        "ts-loader": "^4.4.2",
+        "typescript": "^3.0.1",
+        "webpack": "^4.16.3",
+        "webpack-cli": "^3.1.0",
+        "webpack-dev-server": "^3.1.5"
+    },
+    "dependencies": {
+        "@thi.ng/api": "latest",
+        "@thi.ng/hdom": "latest",
+        "@thi.ng/rstream": "latest",
+        "@thi.ng/transducers": "latest"
+    }
+}
diff --git a/examples/hydrate-basics/src/index.ts b/examples/hydrate-basics/src/index.ts
@@ -0,0 +1,84 @@
+import { Atom } from "@thi.ng/atom";
+import { serialize } from "@thi.ng/hiccup";
+import { start } from "@thi.ng/hdom";
+import { canvas2D } from "@thi.ng/hdom-components/canvas";
+import { dropdown } from "@thi.ng/hdom-components/dropdown";
+
+// basic state container
+const state = new Atom<any>({
+    bg: "red",
+    freq: 0.01
+});
+
+// state updates
+const setBg = (x: string) => state.resetIn("bg", x);
+const setFreq = (x: number) => state.resetIn("freq", x);
+
+// root component with different types of child components
+const app = () => {
+    // HOF canvas component w/ life cycle methods see for further
+    // reference:
+    // https://github.com/thi-ng/umbrella/blob/master/packages/hdom-components/src/canvas.ts
+    //
+    // when serializing to html only the component's `render` method
+    // will be invoked. the component's `init` is invoked later when
+    // hydrating the DOM the `update` fn given here is canvas specific
+    const canvas = canvas2D({
+        update: (el, ctx, _, time, __, ___, bg, freq) => {
+            const y = el.height / 2;
+            ctx.fillStyle = bg;
+            ctx.fillRect(0, 0, el.width, el.height);
+            ctx.strokeStyle = "white";
+            ctx.lineWidth = 3;
+            ctx.beginPath();
+            ctx.moveTo(0, y + y * Math.sin(time * freq));
+            for (let x = 5; x < el.width; x += 5) {
+                ctx.lineTo(x, y + y * Math.sin((time + x) * freq));
+            }
+            ctx.stroke();
+        }
+    });
+    // when serializing to HTML all event attributes w/ function values
+    // will be excluded, however the event listeners will be attached
+    // during hydration (1st frame of hdom update loop)
+
+    // btw. the class names are for tachyons css
+    return (state) => {
+        state = state.deref();
+        return ["div#root.w-50-ns.flex.ma2.sans-serif",
+            ["div.w-50-ns",
+                [canvas, { width: 200, height: 200 }, state.bg, state.freq]],
+            ["div.w-50-ns",
+                ["label.db.mb3", { for: "#bg" }, "Background color",
+                    [dropdown,
+                        {
+                            id: "bg",
+                            class: "w-100",
+                            onchange: (e) => setBg(e.target.value)
+                        },
+                        [["", "Choose..."], ["red", "Red"], ["green", "Green"], ["blue", "Blue"]],
+                        state.bg
+                    ]],
+                ["label.db.mb3", { for: "#freq" }, "Frequency",
+                    ["input", {
+                        id: "freq",
+                        class: "w-100",
+                        type: "range",
+                        min: 0.001,
+                        max: 0.02,
+                        step: 0.001,
+                        value: state.freq,
+                        oninput: (e) => setFreq(parseFloat(e.target.value))
+                    }]]
+            ],
+        ];
+    };
+};
+
+// emulate SSR by serializing to HTML
+const html = serialize(app()(state), null, false, true);
+document.getElementById("app").innerHTML = html;
+console.log(html);
+
+// ..then start hdom update loop w/ hydrate enabled
+start(app(), { parent: "app", hydrate: true, ctx: state });
diff --git a/examples/hydrate-basics/tsconfig.json b/examples/hydrate-basics/tsconfig.json
@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "."
+    },
+    "include": [
+        "./src/**/*.ts"
+    ]
+}
diff --git a/examples/hydrate-basics/webpack.config.js b/examples/hydrate-basics/webpack.config.js
@@ -0,0 +1,18 @@
+module.exports = {
+    entry: "./src/index.ts",
+    output: {
+        path: __dirname,
+        filename: "bundle.js"
+    },
+    resolve: {
+        extensions: [".ts", ".js"]
+    },
+    module: {
+        rules: [
+            { test: /\.ts$/, use: "ts-loader" }
+        ]
+    },
+    devServer: {
+        contentBase: "."
+    }
+};