HTML command bridge
This app proves that a sandboxed HTML frontend can run a public backend command from the same Wimble app directory. The same source also works when the complete directory is mounted on another profile.
This app proves that a sandboxed HTML frontend can run a public backend command from the same Wimble app directory. The same source also works when the complete directory is mounted on another profile.
123456789101112131415161718192021222324252627282930// @ts-check
/** @param {{ args: string[], accept: string[] }} context */export default function bridgeDemo({ args, accept }) { if (args.includes("--help")) return "Run a sibling command from sandboxed HTML.\n\nUsage: run.js\n"; for (const type of accept) { if (type === "text/html") return new Response(html(), { headers: { "content-type": "text/html; charset=utf-8" } }); if (type === "application/json") return { message: "Use the HTML representation to try the bridge." }; }}
function html() { return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style> :root{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#191919;background:transparent}*{box-sizing:border-box}body{margin:0;padding:20px;display:grid;gap:16px;justify-items:start}button{border:0;border-radius:4px;background:#191919;color:white;padding:11px 16px;font:inherit;cursor:pointer}button:disabled{opacity:.6}output{white-space:pre-wrap;min-height:1.4em}</style></head><body><button type="button" id="run">Run sibling command</button><output id="result">Ready.</output><script> const button=document.getElementById("run"); const output=document.getElementById("result"); button.addEventListener("click",async()=>{ button.disabled=true;output.textContent="Running…"; try{const result=await window.wimble.run({path:"./message.run.js",args:["Hello from message.run.js."]});output.textContent=result.stdout||result.stderr||"No output.";} catch(error){output.textContent=error instanceof Error?error.message:String(error);} finally{button.disabled=false;} });</script></body></html>`;}