const scramjet = new ScramjetController({
files: {
wasm: "/scram/scramjet.wasm.js",
worker: "/scram/scramjet.worker.js",
client: "/scram/scramjet.client.js",
shared: "/scram/scramjet.shared.js",
sync: "/scram/scramjet.sync.js",
},
siteFlags: {
"https://worker-playground.glitch.me/.*": {
serviceworkers: true,
},
},
});
scramjet.init("./sw.js");
const connection = new BareMux.BareMuxConnection("/baremux/worker.js");
const flex = css`
display: flex;
`;
const col = css`
flex-direction: column;
`;
const store = $store(
{
url: "https://google.com",
wispurl:
_CONFIG?.wispurl ||
(location.protocol === "https:" ? "wss" : "ws") +
"://" +
location.host +
"/wisp/",
bareurl:
_CONFIG?.bareurl ||
(location.protocol === "https:" ? "https" : "http") +
"://" +
location.host +
"/bare/",
proxy: "",
},
{ ident: "settings", backing: "localstorage", autosave: "auto" }
);
connection.setTransport("/epoxy/index.mjs", [{ wisp: store.wispurl }]);
function PlaygroundApp() {
this.css = `
width: 100%;
height: 100%;
color: #f0fef4;
display: flex;
padding: 0.5em;
box-sizing: border-box;
gap: 0.5em;
.codesplit {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 0.5em;
}
.mcontainer {
background: #1e1e1e;
h2 {
margin: 0.1em;
}
border: 1px solid #313131;
flex-basis: 100%;
display: flex;
flex-direction: column;
}
.monaco {
flex: 1;
}
.frame {
height: 100%;
display: flex;
flex-direction: column;
gap: 0.5em;
iframe {
width: 100%;
border: 1px solid #313131;
}
}
.config {
border: 1px solid #313131;
background: #1e1e1e;
padding: 0.5em;
}
`;
this.fakeorigin = "https://sandboxedorigin.com";
this.mount = async () => {
const monaco = await import(
"https://cdn.jsdelivr.net/npm/monaco-editor/+esm"
);
monaco.editor.setTheme("vs-dark");
const html = monaco.editor.create(this.htmlbox, {
value: `
Scramjet Sandbox Playground
Scramjet allows any webpage to be run on the same origin in an isolated manner
`,
language: "html",
});
const js = monaco.editor.create(this.jsbox, {
value: `function checkOrigin() {
alert("origin: " + window.origin);
}
// external resources fetched will be re-
// directed to the WISP server
function loadResource(url) {
fetch(url).then(r => {
console.log("loaded", r);
})
}`,
language: "javascript",
});
const css = monaco.editor.create(this.cssbox, {
value: `body, html {
background: #1e1e1e;
color: white;
width: 100%;
height: 100%;
}`,
language: "css",
});
let oldjs;
let oldhtml;
let oldcss;
setInterval(async () => {
if (
oldjs !== js.getValue() ||
oldhtml !== html.getValue() ||
oldcss !== css.getValue()
) {
oldjs = js.getValue();
oldhtml = html.getValue();
oldcss = css.getValue();
(await navigator.serviceWorker.ready).active.postMessage({
type: "playgroundData",
html: html.getValue(),
css: css.getValue(),
js: js.getValue(),
origin: this.fakeorigin,
});
this.frame.src = scramjet.encodeUrl(this.fakeorigin);
}
}, 1000);
};
return html`
`;
}
window.addEventListener("load", async () => {
document.body.appendChild(h(PlaygroundApp));
});