Merge pull request #8 from developit/trying-fragments

Trying fragments
preactjs · Aug 21, 2018 · 1491826 · 1491826
2 parents 42702d1 + d614c1c
commit 1491826
Show file tree

Hide file tree

Showing 12 changed files with 5,389 additions and 2,678 deletions.
diff --git a/demo/fragments.js b/demo/fragments.js
@@ -0,0 +1,27 @@
+import { createElement, Component, Fragment } from 'ceviche';
+
+export default class extends Component {
+
+  state = { number: 0 }
+
+  componentDidMount() {
+    setInterval(_ => this.updateChildren(), 1000);
+  }
+
+  updateChildren() {
+    this.setState(state => ({ number: state.number + 1 }))
+  }
+
+  render(props, state) {
+    return (
+      <div>
+        <div>{state.number}</div>
+        <>
+          <div>one</div>
+          <div>{state.number}</div>
+          <div>three</div>
+        </>
+      </div>
+    )
+  }
+}
diff --git a/demo/index.js b/demo/index.js
@@ -6,6 +6,7 @@ import Pythagoras from './pythagoras';
 import Spiral from './spiral';
 import Reorder from './reorder';
 import Todo from './todo';
+import Fragments from './fragments';
 import installLogger from './logger';
 
 window.ceviche = { createElement, render, hydrate, Component };
@@ -32,6 +33,7 @@ class App extends Component {
 						<Link href="/spiral" activeClassName="active">Spiral</Link>
 						<Link href="/pythagoras" activeClassName="active">Pythagoras</Link>
 						<Link href="/todo" activeClassName="active">ToDo</Link>
+						<Link href="/fragments" activeClassName="active">Fragments</Link>
 					</nav>
 				</header>
 				<main>
@@ -41,32 +43,34 @@ class App extends Component {
 						<Spiral path="/spiral" />
 						<Pythagoras path="/pythagoras" />
 						<Todo path="/todo" />
+						<Fragments path="/fragments" />
 					</Router>
 				</main>
 			</div>
 		);
 	}
 }
 
+document.body._previousVTree = (
+	<div class="app">
+		<header>
+			<nav>
+				<a href="/">Home SSR</a>
+				<a href="/reorder">Reorder</a>
+				<a href="/spiral">Spiral SSR</a>
+				<a href="/pythagoras">Pythagoras SSR</a>
+				<a href="/todo">ToDo</a>
+				<a href="/fragments">Fragments</a>
+			</nav>
+		</header>
+		<main>
+			<h1>SSR Content</h1>
+		</main>
+	</div>
+)
 
-document.body.innerHTML = `
-<div class="app">
-	<header>
-		<nav>
-			<a href="/">Home SSR</a>
-			<a href="/reorder">Reorder</a>
-			<a href="/spiral">Spiral SSR</a>
-			<a href="/pythagoras">Pythagoras SSR</a>
-			<a href="/todo">ToDo</a>
-		</nav>
-	</header>
-	<main>
-		<h1>SSR Content</h1>
-	</main>
-</div>
-`;
-
-hydrate(<App />, document.body);
+// skip hydrate
+render(<App />, document.body);
 
 if (String(localStorage.LOG)==='true' || location.href.match(/logger/)) {
 	installLogger();