nattoppet 2.1.1 → 4.0.1

package/common.ymd

@@ -1,17 +1,40 @@
 [require]=
-const {args: [file]} = std_call()
+const {opts: [id], args: [file]} = std_call()
 const content = read(file)
 switch (extname(file)) {
     case 'less':
-        `<style>${render_less(content)}</style>`; break
+        `<style ${id ? `id="${id}"` : ''}>${render_less(content)}</style>`; break
     case 'css':
-        `<style>${content}</style>`; break
+        `<style ${id ? `id="${id}"` : ''}>${content}</style>`; break
     case 'coffee':
-        `<script>${render_coffee(content, { bare: true })}</script>`; break
+        `<script ${id ? `id="${id}"` : ''}>${render_coffee(content, { bare: true })}</script>`; break
     case 'js':
-        `<script>${content}</script>`; break
+        `<script ${id ? `id="${id}"` : ''}>${content}</script>`; break
     case 'md':
         render_markdown(content); break
+    case 'wasm':
+        `<script ${id ? `id="${id}"` : ''}>
+            const ready = (async () => {
+                const raw = await fetch("data:application/octet-stream;base64,${read(file, 'compressed-base64')}")
+                const blob = await raw.blob()
+                const decompressed = await blob.stream().pipeThrough(new DecompressionStream("deflate-raw"))
+                const response = new Response(decompressed, { headers: { 'Content-Type': 'application/wasm' } })
+                const x = await WebAssembly.instantiateStreaming(response, {})
+                window.${file.match(/([^\/]+).wasm$/)[1]} = x.instance.exports
+            })()
+            window.wasm_ready = window.wasm_ready ? Promise.all([window.wasm_ready, ready]) : ready
+        </script>`; break
+    case 'json':
+        `<script ${id ? `id="${id}"` : ''}>
+            const ready = (async () => {
+                const raw = await fetch("data:application/octet-stream;base64,${read(file, 'compressed-base64')}")
+                const blob = await raw.blob()
+                const decompressed = await blob.stream().pipeThrough(new DecompressionStream("deflate-raw"))
+                const response = new Response(decompressed, { headers: { 'Content-Type': 'application/json' } })
+                window.${file.match(/([^\/]+).json$/)[1]} = await response.json()
+            })()
+            window.json_ready = window.json_ready ? Promise.all([window.json_ready, ready]) : ready
+        </script>`; break
     default:
         content; break
 }
@@ -57,14 +80,6 @@ const content = text || capture_until('\n').trim() || href
 const {args: [text]} = std_call()
 ;`<sup>${interpret(text)}</sup>`
 
-[$]=
-const tex = capture_until('$')
-render_katex(tex, false)
-
-[$$]=
-const {block} = std_call(true)
-render_katex(block, true)
-
 [eval]=
 const {block} = std_call(true)
 eval(block)
@@ -72,3 +87,8 @@ eval(block)
 [eval*]=
 const {block} = std_call(true)
 eval(block); ''
+
+[cn]=
+interpret(std_call().block)
+    .replace(/([\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\ud840-\ud868][\udc00-\udfff]|\ud869[\udc00-\uded6\udf00-\udfff]|[\ud86a-\ud86c][\udc00-\udfff]|\ud86d[\udc00-\udf34\udf40-\udfff]|\ud86e[\udc00-\udc1d])\r?\n(?=\S)/g, '$1')
+    .replace(/(?<=\S)\r?\n([\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\ud840-\ud868][\udc00-\udfff]|\ud869[\udc00-\uded6\udf00-\udfff]|[\ud86a-\ud86c][\udc00-\udfff]|\ud86d[\udc00-\udf34\udf40-\udfff]|\ud86e[\udc00-\udc1d])/g, '$1')

package/compiler.ts

@@ -0,0 +1,169 @@
+import vm from "node:vm"
+import { extname } from "node:path"
+import { fileURLToPath } from "node:url"
+import * as fs from "node:fs"
+
+const pattern = /^(?:\[(.+?)\]([:=])|\[(mixin|#slot)\] ?(.*?)\n)/m
+
+const fetch_text_file = async (path: string) => {
+    const filePath = new URL(path, import.meta.url)
+    return fs.readFileSync(fileURLToPath(filePath), 'utf-8')
+}
+
+const file_exists = (path: string) => {
+    try {
+        const filePath = new URL(path, import.meta.url)
+        fs.accessSync(fileURLToPath(filePath))
+        return true
+    } catch {
+        return false
+    }
+}
+
+const resolve_mixin_path = (path: string): string => {
+    if (extname(path)) return path
+    // Compatibility hack: bare name only resolves to .ymd if exact file doesn't exist
+    if (file_exists(path)) return path
+    const ymdPath = path + ".ymd"
+    if (file_exists(ymdPath)) return ymdPath
+    throw `mixin not found: ${path}`
+}
+
+// tokenize also process mixins
+// mixins are special direvatives
+// by default, they are relative to the root directory of nattoppet, unless they are prefixed with "./"
+export const tokenize = async (str: string) => {
+    const tokens: any[] = []
+
+    while (true) {
+        const m = str.match(pattern)
+        if (!m || m.index == null) {
+            if (str) tokens.push({ type: "code", content: str })
+            break
+        }
+
+        if (m.index && m.index > 0) {
+            tokens.push({ type: "code", content: str.substring(0, m.index) })
+        }
+
+        if (m[3]) {
+            if (m[3] === 'mixin') {
+                tokens.push({ type: 'mixin', path: m[4] })
+            } else if (m[3] === '#slot') {
+                tokens.push({ type: 'slot' })
+            }
+            str = str.substring(m.index + m[0].length)
+            continue
+        }
+
+        const name = m[1]
+        const type = m[2] == ':' ? 'ref' : 'fn'
+        str = str.substring(m.index + m[0].length)
+
+        const p1 = str.indexOf('\n\n')
+        const p2 = str.search(pattern)
+        const p = p1 >= 0 && p2 >= 0 ? Math.min(p1+2, p2) :
+                  p1 < 0 && p2 < 0 ? str.length : Math.max(p1+2, p2)
+
+        const content = str.substring(0, p).trim()
+        str = str.substring(p)
+
+        tokens.push({ type, name, content })
+    }
+
+    for (let i = 0; i < tokens.length; i++) if (tokens[i].type == 'mixin') {
+        const resolvedPath = resolve_mixin_path(tokens[i].path)
+        const ext = extname(resolvedPath)
+
+        if (ext === ".ymd") {
+            const text = await fetch_text_file(resolvedPath)
+            const inlineTokens = await tokenize(text)
+            const slotIndices = inlineTokens
+                .map((t: any, idx: number) => t.type === 'slot' ? idx : -1)
+                .filter((idx: number) => idx >= 0)
+
+            if (slotIndices.length > 1) {
+                throw `multiple [#slot] in mixin ${resolvedPath}`
+            } else if (slotIndices.length === 1) {
+                const slotIdx = slotIndices[0]
+                const head = inlineTokens.slice(0, slotIdx)
+                const tail = inlineTokens.slice(slotIdx + 1)
+                tokens.splice(i, 1, ...head)
+                tokens.push(...tail)
+            } else {
+                tokens.splice(i, 1, ...inlineTokens)
+            }
+        } else {
+            tokens[i] = { type: "raw", content: await fetch_text_file(resolvedPath) }
+        }
+
+        i -= 1 // revisit i since we replaced it
+    }
+
+    return tokens
+}
+
+const _interpret = (str: string, env: any, defs: any[]): any => {
+    const p1 = str.search(/^  /m)
+    const p2 = str.search(/\[(.+?)\]/)
+    if (p1 < 0 && p2 < 0) return str
+
+    if (p2 < 0 || (p1 >= 0 && p1 < p2)) {
+        const head = str.substring(0, p1)
+        str = str.substring(p1+2)
+        let p = str.indexOf('\n\n')
+        if (p < 0) p = str.length
+        return head + '<p>' + _interpret(str.substring(0, p), env, defs) + '</p>' + _interpret(str.substring(p+2), env, defs)
+    }
+
+    const name = str.match(/\[(.+?)\]/)![1]
+    const i = defs.findIndex(x => x.name == name)
+    if (i < 0) throw `definition ${name} not found`
+
+    const def = defs[i]
+    switch (def.type) {
+        case 'fn':
+            env.remaining = str.substring(p2 + name.length + 2)
+            env.interpret = (str: string) => { // a "scoped" interpret function capable for interpreting substrings. We preserve the "remaining" property outside.
+                const remaining = env.remaining
+                const result = _interpret(str, env, defs) // We gaved full defs available on the call site (dynamic scoping) as the text to be interpreted is part of the call site text.
+                env.remaining = remaining
+                return result
+            }
+            const result = vm.runInContext('{' + def.content + '}', env)
+            return str.substring(0, p2) + result + _interpret(env.remaining, env, defs)
+        case 'ref':
+            return str.substring(0, p2) +
+                _interpret(def.content, env, defs.slice(i+1)) + // Exclude self from scope to prevent infinite recursion, but allow forward references
+                _interpret(str.substring(p2 + name.length + 2), env, defs)
+        default: throw 'unknown defs type'
+    }
+}
+
+export const compile = async (str: string, locals: any = {}) => {
+    const env = vm.createContext(locals)
+    for (const k in env) if (typeof(env[k]) == 'function')
+        env[k] = env[k].bind(env)
+
+    let tokens = await tokenize(str)
+    let output = ''
+    while (true) {
+        const token = tokens.shift()
+        if (!token) return output
+        switch (token.type) {
+            case "code":
+                output += _interpret(token.content, env, tokens)
+                break
+            case "raw":
+                output += token.content
+                break
+        }
+    }
+}
+
+/*
+TODO:
+1. support first-class markdown-like nestable lists
+2. cleanup the spaces, carefully define when to trim
+3. require a newline before indent to open paragraph?
+*/

package/form.css

@@ -0,0 +1,87 @@
+html {
+  font-family: sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  text-align: justify;
+  hyphens: auto;
+  color: #33333d;
+}
+@media (max-width: 425px) {
+  html {
+    font-size: 15px;
+  }
+}
+body {
+  max-width: 625px;
+  margin: 0 auto;
+  padding: 1rem 1rem;
+}
+@media (max-width: 425px) {
+  body {
+    padding: 0 0.8rem;
+  }
+}
+h3 {
+  margin: 2rem 0 1rem;
+  position: relative;
+  border-bottom: #bbb 1px solid;
+}
+label {
+  display: block;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+label input:not([type]),
+label input[type="text"],
+label input[type="number"] {
+  display: block;
+  width: 100%;
+  margin: 0.1rem 0 1rem;
+  padding: 0.4rem;
+  border: 1px solid #bbb;
+  border-radius: 3px;
+  font-size: 0.9rem;
+  box-sizing: border-box;
+}
+label input[type="checkbox"] {
+  margin: 0.1rem 0.5rem 1rem 0;
+  transform: translateY(0.1rem);
+}
+button {
+  display: inline-block;
+  appearance: none;
+  background-color: transparent;
+  border: 1px solid #bbb;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  line-height: 100%;
+  padding: 0.6rem 0.8rem;
+}
+button:active {
+  border-color: #4a4a4a;
+  outline: 0;
+}
+button:focus {
+  border-color: #485fc7;
+  outline: 0;
+}
+button:hover {
+  border-color: #b5b5b5;
+}
+button:focus:not(:active) {
+  box-shadow: rgba(72, 95, 199, 0.25) 0 0 0 0.125rem;
+}
+pre {
+  clear: both;
+  margin-top: 1rem;
+  font-family: monospace;
+  color: #222;
+  border: 1px solid #bcd;
+  background-color: #ebf1f5;
+  padding: 0.8rem;
+  overflow-x: auto;
+  font-size: 0.8rem;
+}
+.hidden {
+  opacity: 0;
+}

package/form.js

@@ -0,0 +1,64 @@
+function gather_inputs() {
+    const args = Object.create(null)
+
+    for (const e of document.querySelectorAll('input')) {
+        switch (e.type) {
+            case 'text':
+                args[e.name] = e.value
+                break;
+            case 'number':
+                args[e.name] = parseFloat(e.value)
+                break;
+            case 'checkbox':
+                args[e.name] = e.checked
+                break;
+        }
+    }
+
+    return args
+}
+
+window.addEventListener('load', async () => {
+    document.querySelector('button').addEventListener('click', async () => {
+        document.querySelector('pre').classList.remove('hidden')
+        document.querySelector('button').disabled = true
+        await new Promise(res => setTimeout(res, 0))
+
+        const args = gather_inputs()
+
+        try {
+            const result = await run(args)
+            if (result)
+                document.querySelector('pre').textContent = result
+        } catch (e) {
+            document.querySelector('pre').textContent = "Error: " + (e.message ?? e)
+            throw e
+        } finally {
+            document.querySelector('button').disabled = false
+            await new Promise(res => setTimeout(res, 0))
+        }
+    })
+
+    document.body.addEventListener('input', () => {
+        const url_params = new URLSearchParams(gather_inputs())
+        history.replaceState(null, '', '#' + url_params.toString())
+    })
+
+    if (location.hash.length > 1) {
+        const url_params = new URLSearchParams(location.hash.slice(1))
+        for (const [name, value] of url_params.entries()) {
+            const e = document.querySelector(`input[name="${name}"]`)
+            if (!e) continue
+
+            switch (e.type) {
+                case 'text':
+                case 'number':
+                    e.value = value
+                    break;
+                case 'checkbox':
+                    e.checked = value == 'true'
+                    break;
+            }
+        }
+    }
+})

package/form.ymd

@@ -0,0 +1,36 @@
+<!doctype html>
+<meta name=viewport content="width=device-width, initial-scale=1.0">
+<meta name=author content="ylxdzsw@gmail.com">
+<meta charset="utf-8">
+<title>[title] | ylxdzsw's blog</title>
+
+<style>
+[mixin] form.css
+</style>
+
+<script>
+[mixin] form.js
+</script>
+
+[#slot]
+
+<button>Run</button>
+<pre class="hidden"></pre>
+
+[h3]=
+const {block: content} = std_call(true)
+;`<h3>${content}</h3>`
+
+[text]=
+const {opts: [name], args: [attr=""], block: desc} = std_call(true)
+;`<label>${interpret(desc).trim()}<input name="${name}" ${attr}></input></label>`
+
+[number]=
+const {opts: [name], args: [attr=""], block: desc} = std_call(true)
+;`<label>${interpret(desc).trim()}<input type="number" name="${name}" ${attr}></input></label>`
+
+[checkbox]=
+const {opts: [name], args: [attr=""], block: desc} = std_call(true)
+;`<label><input type="checkbox" name="${name}" ${attr}></input>${interpret(desc).trim()}</label>`
+
+[mixin] common.ymd