created todo demo

mutableJS · Apr 3, 2022 · f56900d · f56900d
commit f56900d
Show file tree

Hide file tree

Showing 10 changed files with 429 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+17.1.0
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Nikita 'donnikitos' Nitichevski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,38 @@
+# mutableJS / Demo
+
+Demo repo
+
+[![GitHub](https://img.shields.io/github/license/mutablejs/demo?color=blue&style=for-the-badge)](https://github.com/mutableJS/demo/blob/master/LICENSE)
+![GitHub last commit](https://img.shields.io/github/last-commit/mutablejs/demo?style=for-the-badge) [![Issues](https://img.shields.io/github/issues/mutableJS/demo?style=for-the-badge)](https://github.com/mutableJS/demo/issues)
+
+## FAQ
+
+#### What is this for?
+
+This is a proof of concept of the reactive mutability of DOM elements accomplished with the use of `@mutablejs/core` and `@mutablejs/dom`
+
+## Installation and Startup
+
+With **npm**:
+
+```bash
+    npm install
+
+	npm run start
+```
+
+With **yarn**:
+
+```bash
+    yarn
+
+	yarn start
+```
+
+## Authors
+
+-   [@donnikitos](https://www.github.com/donnikitos)
+
+## Feedback
+
+If you have any feedback, please reach out to us. We are open to suggestions, ideas and collaboration.
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<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>
+	</head>
+	<body>
+		<div id="root">
+			<div id="display"></div>
+		</div>
+		<script src="./src/index.ts" type="module"></script>
+	</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+	"name": "@mutablejs/demo",
+	"version": "0.0.1",
+	"description": "mutableJS demo package - Todo app",
+	"keywords": [
+		"mutable DOM",
+		"reactive DOM",
+		"DOM mutability demo",
+		"DOM reactivity demo",
+		"Todo demo app"
+	],
+	"main": "index.html",
+	"scripts": {
+		"start": "npx vite"
+	},
+	"author": "Nikita 'donnikitos' Nitichevski <me@donnikitos.com> (https://donnikitos.com/)",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/mutableJS/demo"
+	},
+	"license": "MIT",
+	"devDependencies": {
+		"@types/node": "^17.0.23",
+		"typescript": "^4.5.5",
+		"vite": "^2.8.4"
+	},
+	"dependencies": {
+		"@mutablejs/core": "^0.1.1",
+		"@mutablejs/dom": "^0.0.1"
+	}
+}
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,51 @@
+import mutable, { mutableFn } from '@mutablejs/core';
+import { mutableElement } from '@mutablejs/dom';
+
+//	App root
+const root = document.getElementById('root');
+
+//	Mutable variables
+const todos = mutable<string[]>([]);
+const input = mutable<string>('');
+
+//	Render function
+const todoCount = mutableFn(({ todos }: { todos: string[] }) => [
+	`Todos: ${todos.length}`,
+]);
+const children = mutableFn(({ todos: items }: { todos: string[] }) =>
+	items.map((item, i) =>
+		mutableElement('li', {
+			innerText: item,
+			style: 'cursor: no-drop; user-select: none;',
+			onclick: () => {
+				todos.value.splice(i, 1);
+			},
+		}),
+	),
+);
+
+//	Add elements to app
+root?.append(
+	mutableElement('div', {
+		children: todoCount({ todos }),
+	}),
+	mutableElement('input', {
+		children: input,
+		onchange: (event) => {
+			if (event.target instanceof HTMLInputElement) {
+				input.value = event.target.value;
+			}
+		},
+	}),
+	mutableElement('button', {
+		innerText: 'Add todo',
+		onclick() {
+			todos.value.push(input.value);
+
+			input.value = '';
+		},
+	}),
+	mutableElement('ul', {
+		children: children({ todos }),
+	}),
+);
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"baseUrl": "./src",
+		"strict": true,
+		"isolatedModules": true,
+		"allowSyntheticDefaultImports": true,
+		"module": "ESNext",
+		"moduleResolution": "Node",
+		"noImplicitThis": true,
+		"declaration": true,
+		"lib": ["ESNext", "DOM"],
+		"outDir": "dist",
+		"target": "ESNext",
+		"types": ["node"]
+	},
+	"include": ["src/lib/index.ts"],
+	"exclude": ["dist", "node_modules"]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+	build: {
+		lib: {
+			entry: path.resolve(__dirname, 'src/lib/index.ts'),
+			fileName: 'index',
+			formats: ['umd', 'es'],
+			name: '@mutablejs/dom',
+		},
+		minify: false,
+	},
+});