init commit: finished basic implementation to demo the concept

beenotung · Mar 5, 2023 · c671f0a · c671f0a
commit c671f0a
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+pnpm-lock.yaml
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# live-dom
+
+Develop declarative UI without VDOM nor compiler.
+
+(WIP)
diff --git a/core.ts b/core.ts
@@ -0,0 +1,64 @@
+export function text(value: string) {
+  let node = document.createTextNode(value)
+  node.addEventListener('change', e => {
+    console.log(node)
+  })
+  function f(value: string | number): void
+  function f(): string
+  function f(value?: string | number) {
+    if (arguments.length === 0) {
+      return node.nodeValue
+    }
+    node.nodeValue = value as string
+  }
+  return Object.assign(f, { node })
+}
+
+export function input(options?: { type?: string; value?: string }) {
+  let node = document.createElement('input')
+  if (options?.type) node.type = options.type
+  if (options?.value) node.value = options.value
+
+  function value(value: string | number): void
+  function value(): string
+  function value(value?: string | number): string | void {
+    if (arguments.length == 0) {
+      return node.value
+    }
+    node.value = value as string
+  }
+  return Object.assign(value, {
+    node,
+    oninput: (cb: (value: string) => void) => {
+      node.addEventListener('input', () => cb(node.value))
+    },
+    onchange: (cb: (value: string) => void) => {
+      node.addEventListener('change', () => cb(node.value))
+    },
+  })
+}
+
+export function fragment(nodes: Array<Node | { node: Node } | string>) {
+  let fragment = document.createDocumentFragment()
+  nodes.forEach(node => {
+    if (typeof node == 'string') {
+      fragment.appendChild(document.createTextNode(node))
+    } else if (node instanceof Node) {
+      fragment.appendChild(node)
+    } else {
+      fragment.appendChild(node.node)
+    }
+  })
+  return fragment
+}
+
+export function br() {
+  return document.createElement('br')
+}
+
+export function p(options?: { text?: string }) {
+  let node = document.createElement('p')
+  if (options?.text) node.textContent = options.text
+  function value() {}
+  return Object.assign(value, { node })
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,12 @@
+<!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>Document</title>
+  </head>
+  <body>
+    <script src="http://127.0.0.1:8000/index.js"></script>
+  </body>
+</html>
diff --git a/demo/index.ts b/demo/index.ts
@@ -0,0 +1,35 @@
+import { text, br, input, fragment, p } from '../core'
+
+console.log('ts')
+
+let msg = text('alice')
+document.body.append(msg.node)
+
+document.body.append(br())
+
+let name = input({ type: 'text' })
+document.body.append(name.node)
+
+name.oninput(value => msg(value))
+
+let a = input()
+let b = input()
+let c = text('0')
+
+a.oninput(updateC)
+b.oninput(updateC)
+
+function updateC() {
+  c((+a() || 0) + (+b() || 0))
+}
+
+document.body.appendChild(
+  fragment([p({ text: 'a + b = c' }), a, ' + ', b, ' = ', c]),
+)
+
+document.body.appendChild(p({ text: 'powered by live-dom' }).node)
+
+setInterval(() => {
+  msg(msg() + '.')
+  // name(msg()?.length?.toString())
+}, 1000)
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "live-dom",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "esbuild --bundle --serve demo/index.ts --outfile=demo/index.js",
+    "test": "tsc --noEmit",
+    "build": "tsc -p ."
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "^18.14.5",
+    "esbuild": "^0.17.10",
+    "ts-node": "^10.9.1",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^4.9.5"
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "incremental": true
+  }
+}