diff --git a/.gitignore b/.gitignore
index b512c09..76add87 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-node_modules
\ No newline at end of file
+node_modules
+dist
\ No newline at end of file
diff --git a/README.md b/README.md
index e69de29..16e2c71 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,25 @@
+# `tiny-vdom`
+
+Smallest possible virtual DOM implementation.
+
+## Installation
+
+```sh
+npm install tiny-vdom
+```
+
+## Usage
+
+`index.js`
+
+```js
+import { h, createElement, patch } from 'tiny-vdom';
+
+const el = createElement(h('div'));
+
+patch(el, h('div', null, 'Hello World!'), h('div'));
+```
+
+## License
+
+`tiny-vdom` is [MIT-licensed](LICENSE) open-source software by [Aiden Bai](https://github.com/aidenybai).
diff --git a/index.html b/index.html
deleted file mode 100644
index f8b2fa1..0000000
--- a/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
-
-
-
-
-
-
diff --git a/package.json b/package.json
index 9daf3c0..b6a241c 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,10 @@
{
"name": "mini-vdom",
- "version": "1.0.0",
+ "version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
- "dev": "vite",
- "build": "vite build"
+ "build": "esbuild src/vdom.ts --minify --outfile=dist/vdom.js"
},
"repository": {
"type": "git",
@@ -18,6 +17,7 @@
},
"homepage": "https://github.com/aidenybai/mini-vdom#readme",
"devDependencies": {
+ "esbuild": "^0.12.28",
"vite": "^2.5.7"
}
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f83a38..8142618 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,11 @@
lockfileVersion: 5.3
specifiers:
+ esbuild: ^0.12.28
vite: ^2.5.7
devDependencies:
+ esbuild: 0.12.28
vite: 2.5.7
packages:
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 53ebf0f..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createElement, m, patch } from './vdom';
-
-const el = createElement(m('div'));
-
-document.body.appendChild(el);
-
-setTimeout(() => {
- patch(el, m('div', null, ['Hello']), m('div'));
-}, 1000);
diff --git a/src/vdom.js b/src/vdom.ts
similarity index 81%
rename from src/vdom.js
rename to src/vdom.ts
index 6a9a4f2..ff10eea 100644
--- a/src/vdom.js
+++ b/src/vdom.ts
@@ -1,4 +1,4 @@
-export const m = (tag, props = {}, children = []) => ({ tag, props, children });
+export const h = (tag, props = {}, ...children) => ({ tag, props, children });
export const createElement = (vnode) => {
if (typeof vnode === 'string') return document.createTextNode(vnode);
@@ -17,12 +17,13 @@ export const createElement = (vnode) => {
};
export const patch = (el, newVNode, oldVNode) => {
- const replace = () => el.replaceWith(createElement(newVNode));
if (!newVNode) el.remove();
if (typeof oldVNode === 'string' || typeof newVNode === 'string') {
- if (oldVNode !== newVNode) return replace();
+ if (oldVNode !== newVNode) return el.replaceWith(createElement(newVNode));
} else {
- if (oldVNode.tag !== newVNode.tag) return replace();
+ if (oldVNode.tag !== newVNode.tag) {
+ return el.replaceWith(createElement(newVNode));
+ }
for (const prop in { ...oldVNode.props, ...newVNode.props }) {
if (newVNode.props[prop] === undefined) {