bikeshaving · brainkim · Jul 21, 2020 · Jul 21, 2020 · Jul 22, 2020 · Jul 22, 2020
diff --git a/examples/playground/.babelrc b/examples/playground/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-react",
+  ]
+}
diff --git a/examples/simple/index.html → examples/playground/index.html b/examples/simple/index.html → examples/playground/index.html
@@ -7,6 +7,6 @@
 
   <body>
     <div id="app"></div>
-    <script src="index.js"></script>
+    <script src="src/index.jsx"></script>
   </body>
 </html>
diff --git a/examples/playground/package.json b/examples/playground/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "crank-playground",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "eslint": {
+    "settings": {
+      "react": {
+        "pragma": "createElement"
+      }
+    }
+  },
+  "dependencies": {
+    "@bikeshaving/crank": "0.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "@babel/preset-react": "^7.10.4",
+    "parcel-bundler": "^1.6.1"
+  },
+  "keywords": [],
+  "browserslist": ["last 1 Chrome versions"]
+}
diff --git a/examples/simple/src/index.jsx → examples/playground/src/index.jsx b/examples/simple/src/index.jsx → examples/playground/src/index.jsx
diff --git a/examples/playground/yarn.lock b/examples/playground/yarn.lock
diff --git a/examples/simple/.babelrc b/examples/simple/.babelrc
diff --git a/examples/simple/index.js b/examples/simple/index.js
diff --git a/examples/transitions/.babelrc b/examples/transitions/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-react",
+  ]
+}
diff --git a/examples/transitions/index.html b/examples/transitions/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Crank.js Sandbox</title>
+    <meta charset="UTF-8" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="src/index.jsx"></script>
+  </body>
+</html>
diff --git a/examples/simple/package.json → examples/transitions/package.json b/examples/simple/package.json → examples/transitions/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "a-simple-crank-component",
+  "name": "transitions",
   "private": true,
   "version": "1.0.0",
   "main": "index.html",
@@ -15,12 +15,13 @@
     }
   },
   "dependencies": {
-    "@bikeshaving/crank": "*"
+    "@bikeshaving/crank": "0.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-react": "^7.10.4",
     "parcel-bundler": "^1.6.1"
   },
-  "keywords": []
+  "keywords": [],
+  "browserslist": ["last 1 Chrome versions"]
 }
diff --git a/examples/transitions/src/index.jsx b/examples/transitions/src/index.jsx
@@ -0,0 +1,69 @@
+/** @jsx createElement */
+import {createElement} from "@bikeshaving/crank";
+import {renderer} from "@bikeshaving/crank/dom";
+
+const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+function shuffle(arr) {
+	for (let i = arr.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[arr[i], arr[j]] = [arr[j], arr[i]];
+	}
+
+	return arr;
+}
+
+function randomLetters() {
+	return shuffle(Array.from(alphabet))
+		.slice(0, Math.floor(Math.random() * 26))
+		.sort();
+}
+
+async function* Letter({letter, index}) {
+	let node;
+	try {
+		const style = {
+			position: "absolute",
+			top: "20px",
+			transition: "transform 750ms, opacity 750ms",
+		};
+
+		node = yield <span style={{...style, color: "green"}}>{letter}</span>;
+		node.style.transform = `translate(${index * 1.2}em, -20px)`;
+		node.style.opacity = 0;
+		requestAnimationFrame(() => {
+			node.style.transform = `translate(${index * 1.2}em, 0)`;
+			node.style.opacity = 1;
+		});
+
+		for await ({letter, index} of this) {
+			node = yield <span style={{...style, color: "black"}}>{letter}</span>;
+			requestAnimationFrame(() => {
+				node.style.transform = `translate(${index * 1.2}em, 0)`;
+			});
+		}
+	} finally {
+		requestAnimationFrame(() => {
+			node.style.color = "red";
+			node.style.transform = `translate(${index * 1.2}em, 20px)`;
+			node.style.opacity = 0;
+		});
+		await new Promise((resolve) => setTimeout(resolve, 750));
+	}
+}
+
+function* Letters() {
+	const interval = setInterval(() => this.refresh(), 1500);
+	try {
+		while (true) {
+			const letters = randomLetters().map((l, i) => (
+				<Letter crank-key={l} letter={l} index={i} />
+			));
+
+			yield <div style="height: 40px">{letters}</div>;
+		}
+	} finally {
+		clearInterval(interval);
+	}
+}
+
+renderer.render(<Letters />, document.body);
diff --git a/examples/simple/yarn.lock → examples/transitions/yarn.lock b/examples/simple/yarn.lock → examples/transitions/yarn.lock
@@ -836,7 +836,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.9.4":
+"@babel/preset-react@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.4.tgz#92e8a66d816f9911d11d4cc935be67adfc82dbcf"
   integrity sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==
@@ -889,7 +889,7 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@bikeshaving/crank@*":
+"@bikeshaving/crank@0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@bikeshaving/crank/-/crank-0.2.1.tgz#b7de2eede6f295208f941c371f118dfc801360ec"
   integrity sha512-yvlrHku3oN189Wd2a8Wmau8306ENlJ9QdOcHbvXo0vkUBI/g8Q8G8OT0QgaeSLvpDeKErgdrYU9+KSUpqWsBOw==

diff --git a/src/dom.ts b/src/dom.ts
@@ -211,6 +211,13 @@ export class DOMRenderer extends Renderer<Node, string | undefined> {
 			}
 		}
 	}
+
+	remove(el: CrankElement<string | symbol>, parent: Node, child: Node): void {
+		// Attempting to remove a node which isn’t a direct child of the parent will throw an error, so we add this guard here.
+		if (child.parentNode === parent) {
+			parent.removeChild(child);
+		}
+	}
 }
 
 export const renderer = new DOMRenderer();