mirror of
https://github.com/MercuryWorkshop/scramjet.git
synced 2025-05-13 14:30:02 -04:00
scramjet playground
This commit is contained in:
velzie
parent
883d8fb4a9
commit
544b18643c
4 changed files with 313 additions and 3 deletions
217
static/playground.js
Normal file
217
static/playground.js
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
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: `<html>
|
||||
<head>
|
||||
<!-- all resources are intercepted by the service worker -->
|
||||
<link rel="stylesheet" href="/style.css"></link>
|
||||
<script src="/script.js"></script>
|
||||
|
||||
<!-- external resources go through WISP -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Scramjet Sandbox Playground</h1>
|
||||
<p>
|
||||
Scramjet allows any webpage to be run on the same origin in an isolated manner
|
||||
</p>
|
||||
|
||||
|
||||
<button onclick="checkOrigin()">Test emulated origin</button>
|
||||
<button onclick="loadResource('https://example.com/')">Load assets through sandbox</button>
|
||||
</body>
|
||||
</html>`,
|
||||
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`
|
||||
<div>
|
||||
<div class="codesplit">
|
||||
<div class="mcontainer">
|
||||
<h2>HTML</h2>
|
||||
<div class="monaco" bind:this=${use(this.htmlbox)}></div>
|
||||
</div>
|
||||
|
||||
<div class="mcontainer">
|
||||
<h2>JS</h2>
|
||||
<div class="monaco" bind:this=${use(this.jsbox)}></div>
|
||||
</div>
|
||||
|
||||
<div class="mcontainer">
|
||||
<h2>CSS</h2>
|
||||
<div class="monaco" bind:this=${use(this.cssbox)}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frame" style="flex: 1">
|
||||
<iframe style="flex: 1" bind:this=${use(this.frame)}></iframe>
|
||||
<div class="config">
|
||||
<h1>Config</h1>
|
||||
<div>
|
||||
<label>fake origin:</label>
|
||||
<input bind:value=${use(this.fakeorigin)} />
|
||||
|
||||
<label>wisp server:</label>
|
||||
<input bind:value=${use(store.wispurl)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
window.addEventListener("load", async () => {
|
||||
document.body.appendChild(h(PlaygroundApp));
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue