feat: render function

mohaalak · Jul 23, 2019 · 5cfd5ed · 5cfd5ed
1 parent b6895da
commit 5cfd5ed
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -19,6 +19,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="./index.js"></script>
+    <script src="./test.ts"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -19,7 +19,7 @@ class TodoApplication {
   setState(state) {
     this.state = { ...this.state, ...state };
     console.log(this.state);
-    render();
+    renderApp();
   }
 
   setStatus(status) {
@@ -138,10 +138,10 @@ class TodoApplication {
 
 const todoApp = new TodoApplication();
 
-function render() {
+function renderApp() {
   const dom = todoApp.render();
   removeChildren();
   root.appendChild(dom);
 }
 
-render();
+renderApp();
diff --git a/package.json b/package.json
@@ -7,5 +7,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^3.5.3"
+  }
 }
diff --git a/rahnemaak.ts b/rahnemaak.ts
@@ -0,0 +1,30 @@
+export interface Element {
+  type: string;
+  props: { [key: string]: any };
+  children: Element[];
+}
+
+function render(parentDom: HTMLElement, element: Element) {
+  const dom = document.createElement(element.type);
+
+  const isEventListener = (x: string) => x.substr(0, 2) === 'on';
+  Object.keys(element.props)
+    .filter(x => isEventListener(x))
+    .forEach((key: string) =>
+      dom.addEventListener(key.substr(2).toLowerCase(), element.props[key])
+    );
+
+  Object.keys(element.props)
+    .filter(x => !isEventListener(x))
+    .forEach((key: string) => {
+      dom[key] = element.props[key];
+    });
+
+  element.children.filter(x => x !== null).forEach(x => render(dom, x));
+
+  parentDom.appendChild(dom);
+}
+
+export default {
+  render
+};
diff --git a/test.ts b/test.ts
@@ -0,0 +1,15 @@
+import Rahnemaak, { Element } from './rahnemaak';
+
+const kooft: Element = {
+  type: 'div',
+  props: {
+    className: 'container'
+  },
+  children: [
+    { type: 'h1', props: { textContent: 'Hello world' }, children: [] },
+    { type: 'button', props: { onClick: e => alert('salam') }, children: [] }
+  ]
+};
+
+const root = document.getElementById('root');
+Rahnemaak.render(root, kooft);
diff --git a/yarn.lock b/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.3.tgz#c830f657f93f1ea846819e929092f5fe5983e977"
+  integrity sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==