Add the render event dispatched on roots

stasm · Sep 11, 2017 · 46f395e · 46f395e
1 parent dc1521c
commit 46f395e
Show file tree

Hide file tree

Showing 11 changed files with 1,490 additions and 0 deletions.
diff --git a/example03/App.js b/example03/App.js
@@ -0,0 +1,12 @@
+import html from "../index";
+import { connect } from "./store";
+
+import TextInput from "./TextInput";
+import CharCounter from "./CharCounter";
+
+export default function App(tasks) {
+    return html`
+        ${TextInput()}
+        ${CharCounter()}
+    `;
+}
diff --git a/example03/CharCounter.js b/example03/CharCounter.js
@@ -0,0 +1,10 @@
+import html from "../index";
+import { connect } from "./store";
+
+function CharCounter({value}) {
+    return html`
+        <div>Characters typed: ${value.length}</div>
+    `;
+}
+
+export default connect(CharCounter);
diff --git a/example03/README.md b/example03/README.md
@@ -0,0 +1,11 @@
+# innerself example 03
+
+An example illustrating how much hand-holding innerself needs to handle
+form-based elements.  Because the assignment to innerHTML completely re-creates
+the entire DOM tree under the root, all local state of the descendant elements
+is lost upop re-render.  Focus and selection need to be restored manually.
+
+To install the dependencies and serve the example locally run:
+
+    $ npm install
+    $ npm start
diff --git a/example03/TextInput.js b/example03/TextInput.js
@@ -0,0 +1,12 @@
+import html from "../index";
+import { connect } from "./store";
+
+function TextInput({value}) {
+    return html`
+        <textarea id="text-input"
+            placeholder="Type here…"
+            onkeyup="dispatch('CHANGE_VALUE', this)">${value}</textarea>
+    `;
+}
+
+export default connect(TextInput);
diff --git a/example03/index.html b/example03/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<meta charset="utf8">
+<title>innerself example 03</title>
+<script defer src="dist.js"></script>
+
+<h1>innerself example 03</h1>
+<div id="root">
+
+
diff --git a/example03/index.js b/example03/index.js
@@ -0,0 +1,17 @@
+import { attach } from "./store";
+import App from "./App";
+
+const root = document.querySelector("#root");
+root.addEventListener("render", function(event) {
+    // event.detail is the state that was rendered.
+    const { id, selectionStart, selectionEnd } = event.detail;
+    if (id) {
+        const textarea = root.querySelector("#" + id);
+        textarea.focus();
+        textarea.setSelectionRange(selectionStart, selectionEnd);
+    }
+});
+
+attach(App, root);
+
+