8e7a1ff · htmlang · git.iko.soy

git.iko.soy/htmlang

Replace approximate playground compiler with real Rust WASM implementation

commit8e7a1ff0aa1a0cd8918aac81a2de99bb093e6841 authoriko <mail@iko.soy> dateThu 16 Apr 2026, 02:14 (6 months ago) parentdd95bf6

11 files changed+234−188

compare with master

unifiedsplit

Cargo.lock+70 Cargo.toml+9 crates/htmlang-core/Cargo.toml+4 src/ast.rs → crates/htmlang-core/src/ast.rs src/codegen.rs → crates/htmlang-core/src/codegen.rs crates/htmlang-core/src/lib.rs+3 src/parser.rs → crates/htmlang-core/src/parser.rs crates/htmlang-wasm/Cargo.toml+11 crates/htmlang-wasm/src/lib.rs+30 src/lib.rs+3−3 src/main.rs+104−185

Cargo.lock+70

@@ -36,6 +36,12 @@ version = "2.11.1"

3636source = "registry+https://github.com/rust-lang/crates.io-index"

3737checksum = "c4512299f36f043ab09a583e57bceb5a5aab7a73db1805848e8fef3c9e8c78b3"

3838

39+[[package]]

40+name = "bumpalo"

41+version = "3.20.2"

42+source = "registry+https://github.com/rust-lang/crates.io-index"

43+checksum = "5d20789868f4b01b2f2caec9f5c4e0213b41e3e5702a50157d699ae31ced2fcb"

44+

3945[[package]]

4046name = "bytes"

4147version = "1.11.1"

@@ -187,11 +193,24 @@ checksum = "e5274423e17b7c9fc20b6e7e208532f9b19825d82dfd615708b70edd83df41f1"

187193name = "htmlang"

188194version = "0.1.0"

189195dependencies = [

196+ "htmlang-core",

190197 "notify",

191198 "tokio",

192199 "tower-lsp",

193200]

194201

202+[[package]]

203+name = "htmlang-core"

204+version = "0.1.0"

205+

206+[[package]]

207+name = "htmlang-wasm"

208+version = "0.1.0"

209+dependencies = [

210+ "htmlang-core",

211+ "wasm-bindgen",

212+]

213+

195214[[package]]

196215name = "httparse"

197216version = "1.10.1"

@@ -556,6 +575,12 @@ dependencies = [

556575 "bitflags 2.11.1",

557576]

558577

578+[[package]]

579+name = "rustversion"

580+version = "1.0.22"

581+source = "registry+https://github.com/rust-lang/crates.io-index"

582+checksum = "b39cdef0fa800fc44525c84ccb54a029961a8215f9619753635a9c0d2538d46d"

583+

559584[[package]]

560585name = "same-file"

561586version = "1.0.6"

@@ -856,6 +881,51 @@ version = "0.11.1+wasi-snapshot-preview1"

856881source = "registry+https://github.com/rust-lang/crates.io-index"

857882checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"

858883

884+[[package]]

885+name = "wasm-bindgen"

886+version = "0.2.114"

887+source = "registry+https://github.com/rust-lang/crates.io-index"

888+checksum = "6532f9a5c1ece3798cb1c2cfdba640b9b3ba884f5db45973a6f442510a87d38e"

889+dependencies = [

890+ "cfg-if",

891+ "once_cell",

892+ "rustversion",

893+ "wasm-bindgen-macro",

894+ "wasm-bindgen-shared",

895+]

896+

897+[[package]]

898+name = "wasm-bindgen-macro"

899+version = "0.2.114"

900+source = "registry+https://github.com/rust-lang/crates.io-index"

901+checksum = "18a2d50fcf105fb33bb15f00e7a77b772945a2ee45dcf454961fd843e74c18e6"

902+dependencies = [

903+ "quote",

904+ "wasm-bindgen-macro-support",

905+]

906+

907+[[package]]

908+name = "wasm-bindgen-macro-support"

909+version = "0.2.114"

910+source = "registry+https://github.com/rust-lang/crates.io-index"

911+checksum = "03ce4caeaac547cdf713d280eda22a730824dd11e6b8c3ca9e42247b25c631e3"

912+dependencies = [

913+ "bumpalo",

914+ "proc-macro2",

915+ "quote",

916+ "syn",

917+ "wasm-bindgen-shared",

918+]

919+

920+[[package]]

921+name = "wasm-bindgen-shared"

922+version = "0.2.114"

923+source = "registry+https://github.com/rust-lang/crates.io-index"

924+checksum = "75a326b8c223ee17883a4251907455a2431acc2791c98c26279376490c378c16"

925+dependencies = [

926+ "unicode-ident",

927+]

928+

859929[[package]]

860930name = "winapi-util"

861931version = "0.1.11"

Cargo.toml+9

@@ -1,3 +1,6 @@

1+[workspace]

2+members = [".", "crates/htmlang-core", "crates/htmlang-wasm"]

14[package]

25name = "htmlang"

36version = "0.1.0"

@@ -8,6 +11,12 @@ name = "htmlang-lsp"

811path = "src/bin/htmlang_lsp/main.rs"

912

1013[dependencies]

14+htmlang-core = { path = "crates/htmlang-core" }

1115notify = "7"

1216tokio = { version = "1", features = ["io-std", "io-util", "macros", "net", "rt-multi-thread", "sync"] }

1317tower-lsp = "0.20"

18+

19+[profile.release]

20+opt-level = "s"

21+lto = true

22+strip = true

crates/htmlang-core/Cargo.tomlnew file+4

@@ -0,0 +1,4 @@

1+[package]

2+name = "htmlang-core"

3+version = "0.1.0"

4+edition = "2024"

src/ast.rs → crates/htmlang-core/src/ast.rsrenamed

The content is the same.

src/codegen.rs → crates/htmlang-core/src/codegen.rsrenamed

The content is the same.

crates/htmlang-core/src/lib.rsnew file+3

@@ -0,0 +1,3 @@

1+pub mod ast;

2+pub mod codegen;

3+pub mod parser;

src/parser.rs → crates/htmlang-core/src/parser.rsrenamed

The content is the same.

crates/htmlang-wasm/Cargo.tomlnew file+11

@@ -0,0 +1,11 @@

1+[package]

2+name = "htmlang-wasm"

3+version = "0.1.0"

4+edition = "2024"

6+[lib]

7+crate-type = ["cdylib"]

9+[dependencies]

10+htmlang-core = { path = "../htmlang-core" }

11+wasm-bindgen = "=0.2.114"

crates/htmlang-wasm/src/lib.rsnew file+30

@@ -0,0 +1,30 @@

1+use wasm_bindgen::prelude::*;

3+#[wasm_bindgen]

4+pub fn compile(source: &str) -> String {

5+ let result = htmlang_core::parser::parse(source);

7+ let errors: Vec<String> = result

8+ .diagnostics

9+ .iter()

10+ .filter(|d| d.severity == htmlang_core::parser::Severity::Error)

11+ .map(|d| {

12+ let loc = if let Some(col) = d.column {

13+ format!("{}:{}", d.line, col)

14+ } else {

15+ d.line.to_string()

16+ };

17+ format!("Line {}: {}", loc, d.message)

18+ })

19+ .collect();

20+

21+ if !errors.is_empty() {

22+ return format!(

23+ "<!DOCTYPE html><html><body style=\"font-family:ui-monospace,monospace;color:#e94560;padding:20px;background:#1a1a2e\">\

24+ <h3 style=\"margin:0 0 12px\">Compilation Errors</h3><pre style=\"white-space:pre-wrap\">{}</pre></body></html>",

25+ errors.join("\n")

26+ );

27+ }

28+

29+ htmlang_core::codegen::generate(&result.document)

30+}

src/lib.rs+3−3

@@ -1,6 +1,6 @@

1−pub mod ast;

2−pub mod codegen;

1+pub use htmlang_core::ast;

2+pub use htmlang_core::codegen;

3+pub use htmlang_core::parser;

34pub mod convert;

45pub mod fmt;

5−pub mod parser;

66pub mod serve;

src/main.rs+104−185

@@ -927,6 +927,26 @@ fn load_config(target: &Path) -> ProjectConfig {

927927 config

928928}

929929

930+fn find_wasm_pkg() -> Option<(Vec<u8>, String)> {

931+ // Look for pre-built WASM binary and JS glue in known locations

932+ let candidates = [

933+ // Relative to current executable

934+ std::env::current_exe()

935+ .ok()

936+ .and_then(|p| p.parent().map(|d| d.join("..").join("wasm-pkg"))),

937+ // In the project build directory (development)

938+ Some(PathBuf::from("target/wasm-pkg")),

939+ ];

940+ for dir in candidates.iter().flatten() {

941+ let wasm = dir.join("htmlang_wasm_bg.wasm");

942+ let js = dir.join("htmlang_wasm.js");

943+ if let (Ok(wasm_bytes), Ok(js_str)) = (fs::read(&wasm), fs::read_to_string(&js)) {

944+ return Some((wasm_bytes, js_str));

945+ }

946+ }

947+ None

948+}

949+

930950fn main() {

931951 let args: Vec<String> = env::args().collect();

932952 let mut watch = false;

@@ -2149,34 +2169,59 @@ fn main() {

21492169 // Handle "playground" subcommand — generate self-contained HTML playground

21502170 if args.len() >= 2 && args[1] == "playground" {

21512171 let out = if args.len() >= 3 { &args[2] } else { "playground.html" };

2152− let playground_html = r##"<!DOCTYPE html>

2172+

2173+ // Load pre-built WASM binary and JS glue

2174+ let (wasm_bytes, js_glue) = match find_wasm_pkg() {

2175+ Some(pkg) => pkg,

2176+ None => {

2177+ eprintln!("error: WASM module not found. Build it first:");

2178+ eprintln!(" cargo build --release --target wasm32-unknown-unknown -p htmlang-wasm");

2179+ eprintln!(" wasm-bindgen --target no-modules --no-typescript --out-dir target/wasm-pkg \\");

2180+ eprintln!(" target/wasm32-unknown-unknown/release/htmlang_wasm.wasm");

2181+ process::exit(1);

2182+ }

2183+ };

2184+ let b64 = base64_encode(&wasm_bytes);

2185+ let wasm_section = format!(

2186+ "<script>\n{}\n</script>\n<script>\n\

2187+ (function(){{\n\

2188+ var b64=\"{}\";\n\

2189+ var raw=atob(b64);\n\

2190+ var bytes=new Uint8Array(raw.length);\n\

2191+ for(var i=0;i<raw.length;i++)bytes[i]=raw.charCodeAt(i);\n\

2192+ wasm_bindgen.initSync(bytes);\n\

2193+ window._wasmCompile=wasm_bindgen.compile;\n\

2194+ }})();\n\

2195+ </script>",

2196+ js_glue, b64,

2197+ );

2198+ let compile_fn = "function compileSource(src){return window._wasmCompile(src);}";

2199+

2200+ let playground_html = format!(r##"<!DOCTYPE html>

21532201<html lang="en">

21542202<head>

21552203<meta charset="utf-8">

21562204<meta name="viewport" content="width=device-width, initial-scale=1">

21572205<title>htmlang Playground</title>

21582206<style>

2159−*{box-sizing:border-box;margin:0}

2160−body{font-family:system-ui,-apple-system,sans-serif;display:flex;height:100vh;background:#1a1a2e;color:#eee}

2161−.panel{flex:1;display:flex;flex-direction:column;min-width:0}

2162−.header{padding:12px 16px;background:#16213e;border-bottom:1px solid #0f3460;display:flex;align-items:center;gap:12px}

2163−.header h1{font-size:14px;font-weight:600;color:#e94560}

2164−.header .tag{font-size:11px;padding:2px 8px;background:#0f3460;border-radius:4px;color:#a8b2d1}

2165−.editor-wrap{flex:1;position:relative;overflow:hidden}

2166−textarea{width:100%;height:100%;resize:none;border:none;outline:none;padding:16px;font-family:ui-monospace,monospace;font-size:14px;line-height:1.6;background:#1a1a2e;color:#e6e6e6;tab-size:2;position:absolute;top:0;left:0}

2167−.highlight-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;padding:16px;font-family:ui-monospace,monospace;font-size:14px;line-height:1.6;tab-size:2;white-space:pre-wrap;overflow:hidden;color:transparent}

2168−.highlight-overlay .kw{color:#c792ea}.highlight-overlay .dir{color:#82aaff}.highlight-overlay .str{color:#c3e88d}

2169−.highlight-overlay .cm{color:#546e7a}.highlight-overlay .var{color:#f78c6c}.highlight-overlay .attr{color:#ffcb6b}

2170−iframe{flex:1;border:none;background:white}

2171−.divider{width:1px;background:#0f3460;cursor:col-resize}

2172−.divider:hover{background:#e94560}

2173−.toolbar{padding:8px 16px;background:#16213e;border-top:1px solid #0f3460;display:flex;gap:8px;align-items:center}

2174−button{padding:6px 16px;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500}

2175−.btn-run{background:#e94560;color:white}

2176−.btn-run:hover{background:#c81e45}

2177−.btn-copy{background:#0f3460;color:#a8b2d1}

2178−.btn-share{background:#0f3460;color:#a8b2d1}

2179−.status{margin-left:auto;font-size:12px;color:#666}

2207+*{{box-sizing:border-box;margin:0}}

2208+body{{font-family:system-ui,-apple-system,sans-serif;display:flex;height:100vh;background:#1a1a2e;color:#eee}}

2209+.panel{{flex:1;display:flex;flex-direction:column;min-width:0}}

2210+.header{{padding:12px 16px;background:#16213e;border-bottom:1px solid #0f3460;display:flex;align-items:center;gap:12px}}

2211+.header h1{{font-size:14px;font-weight:600;color:#e94560}}

2212+.header .tag{{font-size:11px;padding:2px 8px;background:#0f3460;border-radius:4px;color:#a8b2d1}}

2213+.editor-wrap{{flex:1;position:relative;overflow:hidden}}

2214+textarea{{width:100%;height:100%;resize:none;border:none;outline:none;padding:16px;font-family:ui-monospace,monospace;font-size:14px;line-height:1.6;background:#1a1a2e;color:#e6e6e6;tab-size:2;position:absolute;top:0;left:0}}

2215+iframe{{flex:1;border:none;background:white}}

2216+.divider{{width:1px;background:#0f3460;cursor:col-resize}}

2217+.divider:hover{{background:#e94560}}

2218+.toolbar{{padding:8px 16px;background:#16213e;border-top:1px solid #0f3460;display:flex;gap:8px;align-items:center}}

2219+button{{padding:6px 16px;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500}}

2220+.btn-run{{background:#e94560;color:white}}

2221+.btn-run:hover{{background:#c81e45}}

2222+.btn-copy{{background:#0f3460;color:#a8b2d1}}

2223+.btn-share{{background:#0f3460;color:#a8b2d1}}

2224+.status{{margin-left:auto;font-size:12px;color:#666}}

21802225</style>

21812226</head>

21822227<body>

@@ -2217,184 +2262,58 @@ button{padding:6px 16px;border:none;border-radius:4px;cursor:pointer;font-size:1

22172262<div class="header"><span class="tag">preview</span></div>

22182263<iframe id="preview"></iframe>

22192264</div>

2265+{wasm_section}

22202266<script>

2221−let lastOutput='';

2222−function compile(){

2223− const src=document.getElementById('editor').value;

2224− const status=document.getElementById('status');

2225− const start=performance.now();

2226− let html=approxCompile(src);

2227− const ms=(performance.now()-start).toFixed(1);

2267+{compile_fn}

2268+var lastOutput='';

2269+function compile(){{

2270+ var src=document.getElementById('editor').value;

2271+ var status=document.getElementById('status');

2272+ var start=performance.now();

2273+ var html=compileSource(src);

2274+ var ms=(performance.now()-start).toFixed(1);

22282275 lastOutput=html;

22292276 document.getElementById('preview').srcdoc=html;

2230− status.textContent='Compiled in '+ms+'ms (approximate preview)';

2231−}

2232−function copyOutput(){if(lastOutput)navigator.clipboard.writeText(lastOutput).then(()=>{document.getElementById('status').textContent='Copied to clipboard!'});}

2233−function share(){

2234− const src=document.getElementById('editor').value;

2235− const encoded=btoa(unescape(encodeURIComponent(src)));

2236− const url=location.origin+location.pathname+'#'+encoded;

2237− navigator.clipboard.writeText(url).then(()=>{document.getElementById('status').textContent='Share URL copied to clipboard!'});

2277+ status.textContent='Compiled in '+ms+'ms';

2278+}}

2279+function copyOutput(){{if(lastOutput)navigator.clipboard.writeText(lastOutput).then(function(){{document.getElementById('status').textContent='Copied to clipboard!'}});}}

2280+function share(){{

2281+ var src=document.getElementById('editor').value;

2282+ var encoded=btoa(unescape(encodeURIComponent(src)));

2283+ var url=location.origin+location.pathname+'#'+encoded;

2284+ navigator.clipboard.writeText(url).then(function(){{document.getElementById('status').textContent='Share URL copied to clipboard!'}});

22382285 history.replaceState(null,'','#'+encoded);

2239−}

2240−function loadFromHash(){

2241− if(location.hash.length>1){

2242− try{

2243− const decoded=decodeURIComponent(escape(atob(location.hash.slice(1))));

2286+}}

2287+function loadFromHash(){{

2288+ if(location.hash.length>1){{

2289+ try{{

2290+ var decoded=decodeURIComponent(escape(atob(location.hash.slice(1))));

22442291 document.getElementById('editor').value=decoded;

2245− }catch(e){}

2246− }

2247−}

2248−function approxCompile(src){

2249− const lines=src.split('\n');

2250− let title='',vars={},fns={},css='',body='',clsIdx=0;

2251− // Pass 1: collect definitions

2252− let i=0;

2253− while(i<lines.length){

2254− const t=lines[i].trim();

2255− const indent=lines[i].length-lines[i].trimStart().length;

2256− if(t.startsWith('@page '))title=subVars(t.slice(6),vars);

2257− else if(t.startsWith('@let ')){const p=t.slice(5).split(' ');if(p.length>=2)vars[p[0]]=subVars(p.slice(1).join(' '),vars);}

2258− else if(t.startsWith('@fn ')){

2259− const parts=t.slice(4).split(/\s+/);const name=parts[0];const params=parts.slice(1).map(p=>p.replace(/^\$/,''));

2260− const bodyLines=[];i++;

2261− while(i<lines.length&&(lines[i].trim()===''||(lines[i].length-lines[i].trimStart().length)>indent)){bodyLines.push(lines[i]);i++;}

2262− fns[name]={params,body:bodyLines};continue;

2263− }

2264− i++;

2265− }

2266− // Pass 2: render

2267− function renderNodes(lines,depth,localVars){

2268− let html='';const allVars={...vars,...localVars};let i=0;

2269− while(i<lines.length){

2270− const raw=lines[i];const indent=raw.length-raw.trimStart().length;

2271− if(indent<depth&&depth>0)break;

2272− const t=raw.trim();i++;

2273− if(!t||t.startsWith('--')||t.startsWith('@let ')||t.startsWith('@fn ')||t.startsWith('@page '))continue;

2274− if(t.startsWith('@')){

2275− const name=t.slice(1).split(/[\s\[]/)[0];

2276− // Parse attributes

2277− let attrsStr='';const bStart=t.indexOf('[');const bEnd=t.lastIndexOf(']');

2278− if(bStart!==-1&&bEnd>bStart)attrsStr=t.slice(bStart+1,bEnd);

2279− const attrs={};if(attrsStr){attrsStr.split(',').forEach(a=>{a=a.trim();if(!a)return;const sp=a.indexOf(' ');if(sp>0){attrs[a.slice(0,sp)]=subVars(a.slice(sp+1),allVars);}else attrs[a]=true;});}

2280− // Compute CSS

2281− let style='';

2282− function addCSS(k,v){style+=k+':'+v+';'}

2283− for(const[k,v]of Object.entries(attrs)){

2284− if(typeof v!=='string')continue;

2285− const px=s=>(/^\d+$/.test(s)?s+'px':s);

2286− if(k==='padding')addCSS('padding',v.split(' ').map(px).join(' '));

2287− else if(k==='spacing'||k==='gap')addCSS('gap',px(v));

2288− else if(k==='background')addCSS('background',v);

2289− else if(k==='color')addCSS('color',v);

2290− else if(k==='rounded')addCSS('border-radius',px(v));

2291− else if(k==='size')addCSS('font-size',px(v));

2292− else if(k==='width')addCSS(v==='fill'?'flex':'width',v==='fill'?'1':px(v));

2293− else if(k==='height')addCSS('height',v==='fill'?'100%':px(v));

2294− else if(k==='max-width')addCSS('max-width',px(v));

2295− else if(k==='center-x'){addCSS('margin-left','auto');addCSS('margin-right','auto');}

2296− else if(k==='border'){const p=v.split(' ');addCSS('border',px(p[0])+' solid '+(p[1]||'currentColor'));}

2297− else if(k==='shadow')addCSS('box-shadow',v);

2298− else if(k==='font')addCSS('font-family',v);

2299− else if(k==='text-align')addCSS('text-align',v);

2300− else if(k==='line-height')addCSS('line-height',v);

2301− else if(k==='transition')addCSS('transition',v);

2302− else if(k==='cursor')addCSS('cursor',v);

2303− else if(k==='opacity')addCSS('opacity',v);

2304− else if(k==='position')addCSS('position',v);

2305− else if(k==='overflow')addCSS('overflow',v);

2306− }

2307− if(attrs.bold)addCSS('font-weight','bold');

2308− if(attrs.italic)addCSS('font-style','italic');

2309− if(attrs.underline)addCSS('text-decoration','underline');

2310− if(attrs.wrap)addCSS('flex-wrap','wrap');

2311− // Base styles

2312− let baseStyle='';

2313− if(name==='row')baseStyle='display:flex;flex-direction:row;';

2314− else if(name==='column'||name==='col')baseStyle='display:flex;flex-direction:column;';

2315− else if(name==='el')baseStyle='display:flex;flex-direction:column;';

2316− else if(name==='grid')baseStyle='display:grid;';

2317− // Get inline text

2318− let textAfterBracket='';

2319− if(bEnd>0&&bEnd<t.length-1)textAfterBracket=subVars(t.slice(bEnd+1).trim(),allVars);

2320− else if(bStart===-1&&t.indexOf(' ',t.indexOf(name)+name.length)>0){

2321− const afterName=t.slice(t.indexOf(name)+name.length).trim();

2322− if(!afterName.startsWith('['))textAfterBracket=subVars(afterName,allVars);

2323− }

2324− // Collect children

2325− const childLines=[];const childIndent=i<lines.length?(lines[i].length-lines[i].trimStart().length):indent+2;

2326− while(i<lines.length){const ci=lines[i].length-lines[i].trimStart().length;if(ci<=indent&&lines[i].trim()!=='')break;childLines.push(lines[i]);i++;}

2327− // Function call?

2328− if(fns[name]){

2329− const fn=fns[name];const fnVars={...allVars};

2330− fn.params.forEach((p,idx)=>{if(attrs[p])fnVars[p]=attrs[p];});

2331− const fnBody=fn.body.map(l=>{let s=l;for(const[k,v]of Object.entries(fnVars))s=s.replaceAll('$'+k,v);return s;});

2332− const minI=Math.min(...fnBody.filter(l=>l.trim()).map(l=>l.length-l.trimStart().length));

2333− // Replace @children with caller's children

2334− const childHtml=renderNodes(childLines,childIndent,fnVars);

2335− let fnHtml=renderNodes(fnBody,minI,fnVars);

2336− fnHtml=fnHtml.replace('',childHtml);

2337− html+=fnHtml;continue;

2338− }

2339− // Element tags

2340− let tag='div';

2341− if(name==='text')tag='span';

2342− else if(name==='paragraph'||name==='p')tag='p';

2343− else if(name==='link')tag='a';

2344− else if(name==='button'||name==='btn')tag='button';

2345− else if(name==='image'||name==='img')tag='img';

2346− else if(name==='header')tag='header';

2347− else if(name==='footer')tag='footer';

2348− else if(name==='nav')tag='nav';

2349− else if(name==='main')tag='main';

2350− else if(name==='section')tag='section';

2351− else if(name==='article')tag='article';

2352− else if(name==='aside')tag='aside';

2353− else if(name==='list')tag='ul';

2354− else if(name==='item'||name==='li')tag='li';

2355− else if(name==='children'){html+='';continue;}

2356− const cls='_'+(clsIdx++);css+='.'+cls+'{'+baseStyle+style+'}\n';

2357− let extra='';

2358− if(tag==='a'&&textAfterBracket){const sp=textAfterBracket.indexOf(' ');if(sp>0){extra=' href="'+textAfterBracket.slice(0,sp)+'"';textAfterBracket=textAfterBracket.slice(sp+1);}else{extra=' href="'+textAfterBracket+'"';textAfterBracket='';}}

2359− if(tag==='img'){extra=' src="'+(textAfterBracket||'')+'"';if(attrs.alt)extra+=' alt="'+attrs.alt+'"';html+='<img class="'+cls+'"'+extra+'>';continue;}

2360− html+='<'+tag+' class="'+cls+'"'+extra+'>';

2361− if(textAfterBracket)html+=esc(textAfterBracket);

2362− html+=renderNodes(childLines,childIndent,allVars);

2363− html+='</'+tag+'>';

2364− } else {

2365− html+='<span>'+esc(subVars(t,allVars))+'</span>';

2366− }

2367− }

2368− return html;

2369− }

2370− function subVars(s,v){if(!s.includes('$'))return s;for(const[k,val]of Object.entries(v))s=s.replaceAll('$'+k,val);return s;}

2371− function esc(s){return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');}

2372− body=renderNodes(lines,0,vars);

2373− return '<!DOCTYPE html><html><head><meta charset="utf-8"><title>'+esc(title)+'</title><style>*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}'+css+'</style></head><body>'+body+'</body></html>';

2374−}

2292+ }}catch(e){{}}

2293+ }}

2294+}}

23752295// Resizable divider

2376−const divider=document.getElementById('divider');

2377−const editorPanel=document.getElementById('editor-panel');

2378−let dragging=false;

2379−divider.addEventListener('mousedown',()=>{dragging=true;document.body.style.cursor='col-resize';document.body.style.userSelect='none';});

2380−document.addEventListener('mousemove',e=>{if(!dragging)return;const pct=(e.clientX/window.innerWidth)*100;editorPanel.style.flex='none';editorPanel.style.width=pct+'%';});

2381−document.addEventListener('mouseup',()=>{if(dragging){dragging=false;document.body.style.cursor='';document.body.style.userSelect='';}});

2296+var divider=document.getElementById('divider');

2297+var editorPanel=document.getElementById('editor-panel');

2298+var dragging=false;

2299+divider.addEventListener('mousedown',function(){{dragging=true;document.body.style.cursor='col-resize';document.body.style.userSelect='none';}});

2300+document.addEventListener('mousemove',function(e){{if(!dragging)return;var pct=(e.clientX/window.innerWidth)*100;editorPanel.style.flex='none';editorPanel.style.width=pct+'%';}});

2301+document.addEventListener('mouseup',function(){{if(dragging){{dragging=false;document.body.style.cursor='';document.body.style.userSelect='';}}}});

23822302// Keyboard shortcuts and auto-compile

2383−const editor=document.getElementById('editor');

2384−editor.addEventListener('keydown',e=>{

2385− if(e.key==='Enter'&&(e.ctrlKey||e.metaKey)){e.preventDefault();compile();}

2386− if(e.key==='Tab'){e.preventDefault();const s=e.target;const start=s.selectionStart;s.value=s.value.substring(0,start)+' '+s.value.substring(s.selectionEnd);s.selectionStart=s.selectionEnd=start+2;}

2387−});

2303+var editor=document.getElementById('editor');

2304+editor.addEventListener('keydown',function(e){{

2305+ if(e.key==='Enter'&&(e.ctrlKey||e.metaKey)){{e.preventDefault();compile();}}

2306+ if(e.key==='Tab'){{e.preventDefault();var s=e.target;var start=s.selectionStart;s.value=s.value.substring(0,start)+' '+s.value.substring(s.selectionEnd);s.selectionStart=s.selectionEnd=start+2;}}

2307+}});

23882308loadFromHash();

23892309compile();

23902310</script>

23912311</body>

2392−</html>"##;

2312+</html>"##, wasm_section = wasm_section, compile_fn = compile_fn);

23932313 if let Err(e) = fs::write(out, playground_html) {

23942314 eprintln!("error writing {}: {}", out, e);

23952315 process::exit(1);

23962316 }

2397− eprintln!("playground written to {}", out);

23982317 eprintln!("open in browser: open {}", out);

23992318 return;

24002319 }