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) {