feat: add render function

README.md

@@ -48,7 +48,7 @@ View the [live example here](https://codepen.io/aidenybai/pen/jOrXdKj)
 
 It should be noted that Lucia should not be implemented in all use cases. Lucia aims to tackle projects that need to be quickly implemented. This means if you're looking for something production-ready and has a API similar to Lucia, check these projects out!
 
-- [Vue](https://github.com/vuejs/vue) - Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+- [Vue](https://github.com/vuejs/vue) - A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
 - [Alpine](https://github.com/alpinejs/alpine) - A rugged, minimal framework for composing JavaScript behavior in your markup.
 - [Remake](https://github.com/remake/remake-cli) - Create interactive web apps with just HTML.
 - [Stimulus](https://github.com/stimulusjs/stimulus) - A modest JavaScript framework for the HTML you already have.

src/index.ts

@@ -2,15 +2,15 @@
 
 import { App, createApp } from './App';
 
-import h from './vdom/h';
+import { h, render } from './vdom/h';
 import compile from './vdom/compile';
 import patch from './vdom/patch';
 import observer from './vdom/observer';
 
 import { props, DIRECTIVE_PREFIX } from './utils/props';
-import { computeProperties, safeEval } from './utils/compute';
+import { computeProperties as compute, safeEval } from './utils/compute';
 
-export { App, createApp, h, compile, patch, observer, props, computeProperties };
+export { App, createApp, h, render, compile, patch, observer, props, compute };
 
 export const component = (name: string, template: string) => {
   return { name, template };

src/vdom/__test__/h.spec.ts

@@ -1,4 +1,4 @@
-import h from '../h';
+import { h, render } from '../h';
 
 describe('.h', () => {
   it('should render VNodes', () => {
@@ -92,4 +92,11 @@ describe('.h', () => {
       },
     });
   });
+  it('should render the virtual nodes', () => {
+    const vdom = h('div.class1.class2.class3#id[foo=bar]');
+
+    expect(render(vdom).outerHTML).toEqual(
+      '<div classname="class1 class2 class3" id="id" foo="bar"></div>'
+    );
+  });
 });

src/vdom/h.ts

@@ -69,4 +69,27 @@ export const h = (
   };
 };
 
+export const render = (node: VNode): Element => {
+  const { tag, children, props }: VNode = node;
+  const anchor = document.createElement(tag);
+
+  for (const [name, value] of Object.entries(props.attributes)) {
+    anchor.setAttribute(name, value);
+  }
+
+  for (const [name, value] of Object.entries(props.directives)) {
+    anchor.setAttribute(`l-${name}`, value);
+  }
+
+  for (const child of children) {
+    if (typeof child === 'string') {
+      anchor.appendChild(document.createTextNode(child));
+    } else {
+      anchor.appendChild(render(child));
+    }
+  }
+
+  return anchor;
+};
+
 export default h;