wip

README.md

@@ -15,6 +15,12 @@
 
 ---
 
+<div align="center">
+  <img src=".github/assets/preview.png" width="80%"/>
+</div>
+
+---
+
 Library Usage
 -------------
 
@@ -32,18 +38,22 @@ pnpm add mini-json2html
   "content": [
     [
       "div",
-      {"align": "center", "class": "wrapper"},
+      { "align": "center", "class": "wrapper" },
       [
-        ["img", {"src": "example.com"}],
-        ["img", {"src": "google.com"}]
+        ["img", { "src": "example.com" }],
+        ["img", { "src": "google.com" }]
       ]
     ],
     [
       "footer",
-      {"class": "foot"},
+      { "class": "foot" },
       [
-        ["a", {"href": "foobar.com"}, ["p", {"class": "hoge"}, "some text"]],
-        ["i", {"class":"icon"}, "xorg"]
+        [
+          "a",
+          { "href": "foobar.com" },
+          ["p", { "class": "hoge" }, "some text"]
+        ],
+        ["i", { "class": "ico", "x11": "xorg" }]
       ]
     ]
   ]
@@ -52,7 +62,7 @@ pnpm add mini-json2html
 
 ```javascript
 import { readFile } from 'node:fs/promises'
-import { json2html } from 'mini-json2html'
+import json2html from 'mini-json2html'
 
 const { content } = JSON.parse(await readFile('./sample.json', { encoding: 'utf8' }))
 const html = json2html(content)

package.json

@@ -6,19 +6,34 @@
   "types": "./dist/index.d.ts",
   "module": "./dist/index.mjs",
   "type": "module",
+  "sideEffects": false,
   "scripts": {
-    "build": "npx unbuild",
+    "build": "npx unbuild@rc",
     "dev": "node --watch src/index.js",
     "start": "node src/index.js",
     "test": "node --test --test-concurrency 1"
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
-    "./*": "./*"
+    "./cli": {
+      "import": {
+        "types": "./dist/cli.d.mts",
+        "default": "./dist/cli.mjs"
+      },
+      "require": {
+        "types": "./dist/cli.d.cts",
+        "default": "./dist/cli.cjs"
+      }
+    }
   },
   "bin": {
     "mini-json2html": "./dist/cli.mjs",

src/cli.js

@@ -1,3 +1,30 @@
 #!/usr/bin/env node
 
-console.log("J2h CLI")
+import transpile from './transpile.js'
+import validate from './validate.js'
+import { Readable } from 'node:stream'
+
+import { argv, stdin, stdout } from 'node:process'
+
+const [, , file] = argv
+
+if (file) {
+  console.log('TODO HANDLE FILE ARG', `<${file}>`)
+  process.exit(1)
+}
+
+const stream = stdin.resume()
+
+if (stream.readable === false) process.exit()
+
+Readable.from(stream)
+  .reduce(async (acc, cur) => (acc += cur), '')
+  .then(validate)
+  .then(transpile)
+  .then(console.log)
+
+
+process.on('SIGINT', process.exit)
+
+// readStream.isTTY
+// const raw = await Readable.from(stream).reduce(async (acc, cur) => (acc += cur), '')

src/index.js

@@ -1,6 +1,4 @@
-const { log: l } = console
+import transpile from './transpile.js'
+import validate from './validate.js'
 
-l("J2H INIT")
-
-
-export const
+export default data => validate(data).then(transpile)

src/transpile.js

@@ -0,0 +1,32 @@
+export default function (json) {
+  let inner = ''
+  let indent = ''
+  function walk(nodes) {
+    for (const node of nodes) {
+      const [tag, attributes, content] = node || []
+      inner += `${indent}<${tag}`
+      for (const attr in attributes) {
+        inner += ` ${attr}="${attributes[attr]}"`
+      }
+      if (content) {
+        inner += '>'
+        if (Array.isArray(content)) {
+          const hasChildren = Array.isArray(content.at(0))
+          indent += '\t'
+          inner += '\n'
+          walk((hasChildren && content) || [content])
+          indent = indent.replace(/\t$/, '')
+          inner += `${indent}</${tag}>\n`
+        } else {
+          inner += `${content}</${tag}>\n`
+        }
+      } else {
+        inner += ' />\n'
+      }
+    }
+  }
+
+  walk(json)
+
+  return inner
+}

src/validate.js

@@ -0,0 +1,14 @@
+import assert from 'node:assert/strict'
+import transpile from './transpile.js'
+
+export default function (raw) {
+  try {
+    // TODO VALIDATE SCHEMA
+    // console.log('VAL', raw, '<<<')
+    // return Promise.resolve(transpile(JSON.parse(raw)))
+    return Promise.resolve(JSON.parse(raw))
+  } catch (err) {
+    console.error('ERR', err.message)
+    process.exit(1)
+  }
+}

tests/basic.js

@@ -2,47 +2,12 @@ import { readFile, writeFile, appendFile } from 'node:fs/promises'
 
 const { log } = console
 
-const { content } = JSON.parse(await readFile('./tests/basic.jsonc', { encoding: 'utf8' }))
+// const { content } = JSON.parse(await readFile('./tests/basic.jsonc', { encoding: 'utf8' }))
+// const write = data => writeFile('./tests/basic.html', data)
+// const append = data => appendFile('./tests/basic.html', data)
+// await write('<!doctype html>\n\n')
 
-const write = data => writeFile('./tests/basic.html', data)
-const append = data => appendFile('./tests/basic.html', data)
 
-await write('<!doctype html>\n\n')
+// log(transpile([['div', { zzz: 9898 }, 'foo']]))
 
-let inner = ''
-let indent = ''
-
-async function walk(nodes) {
-  log('\n -- WALK --\n', nodes, '\n -- ==== --\n')
-  for (const node of nodes) {
-    log('\t -- NODE --\n', node, '\n\t -- ==== --\n')
-    const [tag, attributes, content] = node || []
-    inner += `${indent}<${tag}`
-    for (const attr in attributes) {
-      log({ attr })
-      inner += ` ${attr}="${attributes[attr]}"`
-    }
-    if (content) {
-      inner += '>'
-      if (Array.isArray(content)) {
-        log(' ++ STEP IN', { content })
-        const hasChildren = Array.isArray(content.at(0))
-        indent += '\t'
-        inner += '\n'
-        walk((hasChildren && content) || [content])
-        indent = indent.replace(/\t$/, '')
-        inner += `${indent}</${tag}>\n`
-      } else {
-        log(' == STRING CONTENT')
-        inner += `${content}</${tag}>\n`
-      }
-    } else {
-      inner += ' />\n'
-    }
-  }
-}
-
-walk(content)
-
-await append(inner)
 

tests/basic.jsonc

@@ -3,18 +3,22 @@
   "content": [
     [
       "div",
-      {"align": "center", "class": "wrapper"},
+      { "align": "center", "class": "wrapper" },
       [
-        ["img", {"src": "example.com"}],
-        ["img", {"src": "google.com"}]
+        ["img", { "src": "example.com" }],
+        ["img", { "src": "google.com" }]
       ]
     ],
     [
       "footer",
-      {"class": "foot"},
+      { "class": "foot" },
       [
-        ["a", {"href": "foobar.com"}, ["p", {"class": "hoge"}, "some text"]],
-        ["i", {"class":"icon"}, "xorg"]
+        [
+          "a",
+          { "href": "foobar.com" },
+          ["p", { "class": "hoge" }, "some text"]
+        ],
+        ["i", { "class": "icon" }, "xorg"]
       ]
     ]
   ]

tests/old.js

@@ -0,0 +1,48 @@
+import { readFile, writeFile, appendFile } from 'node:fs/promises'
+
+const { log } = console
+
+const { content } = JSON.parse(await readFile('./tests/basic.jsonc', { encoding: 'utf8' }))
+
+const write = data => writeFile('./tests/basic.html', data)
+const append = data => appendFile('./tests/basic.html', data)
+
+await write('<!doctype html>\n\n')
+
+let inner = ''
+let indent = ''
+
+async function walk(nodes) {
+  log('\n -- WALK --\n', nodes, '\n -- ==== --\n')
+  for (const node of nodes) {
+    log('\t -- NODE --\n', node, '\n\t -- ==== --\n')
+    const [tag, attributes, content] = node || []
+    inner += `${indent}<${tag}`
+    for (const attr in attributes) {
+      log({ attr })
+      inner += ` ${attr}="${attributes[attr]}"`
+    }
+    if (content) {
+      inner += '>'
+      if (Array.isArray(content)) {
+        log(' ++ STEP IN', { content })
+        const hasChildren = Array.isArray(content.at(0))
+        indent += '\t'
+        inner += '\n'
+        walk((hasChildren && content) || [content])
+        indent = indent.replace(/\t$/, '')
+        inner += `${indent}</${tag}>\n`
+      } else {
+        log(' == STRING CONTENT')
+        inner += `${content}</${tag}>\n`
+      }
+    } else {
+      inner += ' />\n'
+    }
+  }
+}
+
+walk(content)
+
+await append(inner)
+

tests/sample.json

@@ -0,0 +1,25 @@
+{
+  "version": "0.1",
+  "content": [
+    [
+      "div",
+      { "align": "center", "class": "wrapper" },
+      [
+        ["img", { "src": "example.com" }],
+        ["img", { "src": "google.com" }]
+      ]
+    ],
+    [
+      "footer",
+      { "class": "foot" },
+      [
+        [
+          "a",
+          { "href": "foobar.com" },
+          ["p", { "class": "hoge" }, "some text"]
+        ],
+        ["i", { "class": "ico", "x11": "xorg" }]
+      ]
+    ]
+  ]
+}

tests/tiny.json

@@ -0,0 +1,7 @@
+[
+  [
+    "div",
+    { "class": "wrapper" },
+    "foo"
+  ]
+]