Merge pull request #196 from cferdinandi/ianroberts-domparser-template

Ianroberts domparser template
cferdinandi · Nov 2, 2023 · ca459f0 · ca459f0
2 parents 302130e + 3c1854c
commit ca459f0
Show file tree

Hide file tree

Showing 15 changed files with 127 additions and 58 deletions.
diff --git a/demos/fragments.html b/demos/fragments.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Fragments</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<style type="text/css">
+		body {
+			margin: 0 auto;
+			max-width: 40em;
+			width: 88%;
+		}
+
+		table {
+			border-collapse: collapse;
+			border-spacing: 0;
+			margin-bottom: 1.5em;
+			max-width: 100%;
+			width: 100%;
+		}
+
+		th,
+		td {
+			text-align: left;
+			padding: 0.5em;
+		}
+
+		th {
+			border-bottom: 0.125em solid #e5e5e5;
+			font-weight: bold;
+			vertical-align: bottom;
+		}
+
+		td {
+			border-top: 1px solid #e5e5e5;
+			vertical-align: top;
+		}
+	</style>
+</head>
+<body>
+
+	<table>
+		<thead>
+			<tr>
+				<th>Number</th>
+				<th>Wizard</th>
+			</tr>
+		</thead>
+		<tbody id="app"></tbody>
+	</table>
+
+	<script src="../dist/reef.js"></script>
+	<script>
+		let {render} = reef;
+
+		let wizards = ['Gandalf', 'Ursula', 'Merlin'];
+
+		function template () {
+			return wizards.map(function (wizard, index) {
+				return `
+					<tr>
+						<td>${index + 1}</td>
+						<td>${wizard}</td>
+					</tr>`;
+			}).join('');
+		}
+
+		reef.component('#app', template);
+	</script>
+
+</body>
+</html>
diff --git a/dist/reef.cjs.js b/dist/reef.cjs.js
diff --git a/dist/reef.cjs.js.map b/dist/reef.cjs.js.map
diff --git a/dist/reef.cjs.min.js b/dist/reef.cjs.min.js
diff --git a/dist/reef.cjs.min.js.map b/dist/reef.cjs.min.js.map
diff --git a/dist/reef.es.js b/dist/reef.es.js
diff --git a/dist/reef.es.js.map b/dist/reef.es.js.map