implemented TSX demo

mutableJS · Apr 30, 2022 · c1c54c3 · c1c54c3
1 parent c1c47b0
commit c1c54c3
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -4,12 +4,10 @@
 		<meta charset="UTF-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>mutableJS - DOM</title>
+		<title>mutableJS - ToDo Demo</title>
 	</head>
 	<body>
-		<div id="root">
-			<div id="display"></div>
-		</div>
-		<script src="./src/index.ts" type="module"></script>
+		<div id="root" />
+		<script src="./src/index.tsx" type="module"></script>
 	</body>
 </html>
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,83 @@
+import mutable, { mutableFn } from '@mutablejs/core';
+
+// Constants
+const maxTodos = 50;
+
+// Store
+const input = mutable<string>('mutable string');
+const todos = mutable<string[]>([]);
+
+// Computed Values
+const isDisabled = mutableFn(
+	({ input }: { input: unknown[] }) => input.length >= maxTodos,
+)({ input: todos });
+
+// Renderer
+const renderList = mutableFn(({ todos: items }: { todos: string[] }) => {
+	return items.map((item, i) => (
+		<li
+			onclick={() => {
+				todos.value.splice(i, 1);
+			}}
+		>
+			{item}
+		</li>
+	));
+});
+
+//	App root
+const root = document.getElementById('root');
+
+root.replaceChildren(
+	<form
+		style={{ display: 'flex', gap: '10px', flexDirection: 'column' }}
+		onsubmit={(event) => {
+			event.preventDefault();
+
+			todos.value.push(input.value);
+			input.value = '';
+		}}
+	>
+		<div
+			style={{
+				maxWidth: '500px',
+				height: '10px',
+				padding: '1px',
+				border: '1px solid #ccc',
+			}}
+		>
+			<div
+				style={{
+					width: mutableFn(
+						({ input }: { input: unknown[] }) =>
+							`${(input.length * 100) / maxTodos}%`,
+					)({ input: todos }),
+					height: '100%',
+					backgroundColor: '#ccc',
+				}}
+			/>
+		</div>
+		<fieldset
+			style={{
+				display: 'flex',
+				gap: '10px',
+				width: '175px',
+				border: 'none',
+			}}
+			disabled={isDisabled}
+		>
+			<legend>Add To-Do</legend>
+			<input
+				type="text"
+				value={input}
+				onkeyup={(event) => {
+					if (event.target instanceof HTMLInputElement) {
+						input.value = event.target.value;
+					}
+				}}
+			/>
+			<button>Add</button>
+		</fieldset>
+		<ul>{renderList({ todos })}</ul>
+	</form>,
+);