JS EDSL for HTML

Author: ahastudio

20250303/node/.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80

20250304/javascript/.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80

20250304/javascript/.tool-versions

@@ -0,0 +1 @@
+node 22.14.0

20250304/javascript/README.md

@@ -0,0 +1 @@
+# JavaScript EDSL for HTML

20250304/javascript/index.js

@@ -0,0 +1,22 @@
+function generateHTML(tag, props, elements) {
+  const keys = Object.keys(props);
+  const propsString = keys.length
+    ? ' ' + keys.map((key) => `${key}="${props[key]}"`).join(' ')
+    : '';
+  return `<${tag}${propsString}>${elements.join('')}</${tag}>`;
+}
+
+['html', 'body', 'div', 'p', 'a'].forEach((tag) => {
+  globalThis[tag] = (props, elements) => generateHTML(tag, props, elements);
+});
+
+console.log((
+  html({}, [
+    body({}, [
+      div({ id: 'app' }, [
+        p({}, ['Hello, World!']),
+        a({ href: 'https://example.com/' }, ['Click me!']),
+      ]),
+    ]),
+  ])
+));