|
|
|
@ -1,11 +1,11 @@
|
|
|
|
|
|
|
|
|
|
(function() {
|
|
|
|
|
const importCache = {};
|
|
|
|
|
const import_cache = {};
|
|
|
|
|
|
|
|
|
|
function fetchImport(id) {
|
|
|
|
|
function fetch_import(id) {
|
|
|
|
|
return new Promise((fulfil, reject) => {
|
|
|
|
|
curl([`https://bundle.run/${id}`]).then(module => {
|
|
|
|
|
importCache[id] = module;
|
|
|
|
|
import_cache[id] = module;
|
|
|
|
|
fulfil(module);
|
|
|
|
|
}, err => {
|
|
|
|
|
console.error(err.stack);
|
|
|
|
@ -14,84 +14,44 @@ function fetchImport(id) {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fetchImports(imports, progressFunc) {
|
|
|
|
|
const missingImports = imports.filter(x => !importCache[x]);
|
|
|
|
|
let pendingImports = missingImports.length;
|
|
|
|
|
function fetch_imports(imports, progress_func) {
|
|
|
|
|
const missing_imports = imports.filter(x => !import_cache[x]);
|
|
|
|
|
let pending_imports = missing_imports.length;
|
|
|
|
|
|
|
|
|
|
if (missingImports.length) {
|
|
|
|
|
if (missing_imports.length) {
|
|
|
|
|
let promise = Promise.all(
|
|
|
|
|
missingImports.map(id => fetchImport(id).then(() => {
|
|
|
|
|
pendingImports -= 1;
|
|
|
|
|
if (progressFunc) progressFunc(pendingImports);
|
|
|
|
|
missing_imports.map(id => fetch_import(id).then(() => {
|
|
|
|
|
pending_imports -= 1;
|
|
|
|
|
if (progress_func) progress_func(pending_imports);
|
|
|
|
|
}))
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return promise
|
|
|
|
|
return promise;
|
|
|
|
|
} else {
|
|
|
|
|
return Promise.resolve();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleMessage(ev) {
|
|
|
|
|
let { action, cmdId } = ev.data;
|
|
|
|
|
const sendMessage = (payload) => parent.postMessage( { ...payload }, ev.origin);
|
|
|
|
|
const sendReply = (payload) => sendMessage({ ...payload, cmdId })
|
|
|
|
|
const sendOk = () => sendReply({ action: "cmdOk" });
|
|
|
|
|
const sendError = (message, stack) => sendReply({ action: "cmdError", message, stack })
|
|
|
|
|
function handle_message(ev) {
|
|
|
|
|
let { action, cmd_id } = ev.data;
|
|
|
|
|
const send_message = (payload) => parent.postMessage( { ...payload }, ev.origin);
|
|
|
|
|
const send_reply = (payload) => send_message({ ...payload, cmd_id });
|
|
|
|
|
const send_ok = () => send_reply({ action: 'cmd_ok' });
|
|
|
|
|
const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (action == "eval") {
|
|
|
|
|
let { script } = ev.data.args;
|
|
|
|
|
if (action === 'eval') {
|
|
|
|
|
try {
|
|
|
|
|
const { script } = ev.data.args;
|
|
|
|
|
eval(script);
|
|
|
|
|
sendOk();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
sendError(e.message, e.stack);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (action == "bind_props") {
|
|
|
|
|
let { props } = ev.data.args
|
|
|
|
|
|
|
|
|
|
if (!window.component) {
|
|
|
|
|
// TODO can this happen?
|
|
|
|
|
console.warn('no component to bind to');
|
|
|
|
|
sendOk();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
props.forEach(prop => {
|
|
|
|
|
// TODO should there be a public API for binding?
|
|
|
|
|
// e.g. `component.$watch(prop, handler)`?
|
|
|
|
|
// (answer: probably)
|
|
|
|
|
window.component.$$.bound[prop] = value => {
|
|
|
|
|
sendMessage({ action:"prop_update", args: { prop, value } })
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
sendOk();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
|
|
|
|
sendError(e.message, e.stack);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (action == "set_prop") {
|
|
|
|
|
try {
|
|
|
|
|
if (!window.component) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let { prop, value } = ev.data.args;
|
|
|
|
|
component[prop] = value;
|
|
|
|
|
sendOk();
|
|
|
|
|
send_ok();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
sendError(e.message, e.stack);
|
|
|
|
|
send_error(e.message, e.stack);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (action == "catch_clicks") {
|
|
|
|
|
if (action === 'catch_clicks') {
|
|
|
|
|
try {
|
|
|
|
|
let topOrigin = ev.origin;
|
|
|
|
|
const top_origin = ev.origin;
|
|
|
|
|
document.body.addEventListener('click', event => {
|
|
|
|
|
if (event.which !== 1) return;
|
|
|
|
|
if (event.metaKey || event.ctrlKey || event.shiftKey) return;
|
|
|
|
@ -106,7 +66,7 @@ function handleMessage(ev) {
|
|
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
if (el.href.startsWith(topOrigin)) {
|
|
|
|
|
if (el.href.startsWith(top_origin)) {
|
|
|
|
|
const url = new URL(el.href);
|
|
|
|
|
if (url.hash[0] === '#') {
|
|
|
|
|
window.location.hash = url.hash;
|
|
|
|
@ -116,34 +76,30 @@ function handleMessage(ev) {
|
|
|
|
|
|
|
|
|
|
window.open(el.href, '_blank');
|
|
|
|
|
});
|
|
|
|
|
sendOk();
|
|
|
|
|
send_ok();
|
|
|
|
|
} catch(e) {
|
|
|
|
|
sendError(e.message, e.stack);
|
|
|
|
|
send_error(e.message, e.stack);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (action == "fetch_imports") {
|
|
|
|
|
let { imports, import_map } = ev.data.args;
|
|
|
|
|
fetchImports(imports, (remaining) => {
|
|
|
|
|
sendMessage({action: "fetch_progress", args: { remaining }});
|
|
|
|
|
if (action === 'fetch_imports') {
|
|
|
|
|
const { imports, import_map } = ev.data.args;
|
|
|
|
|
fetch_imports(imports, (remaining) => {
|
|
|
|
|
send_message({action: 'fetch_progress', args: { remaining }});
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
imports.forEach(x=> {
|
|
|
|
|
const module = importCache[x];
|
|
|
|
|
const module = import_cache[x];
|
|
|
|
|
const name = import_map.get(x);
|
|
|
|
|
window[name] = module;
|
|
|
|
|
});
|
|
|
|
|
sendOk();
|
|
|
|
|
send_ok();
|
|
|
|
|
})
|
|
|
|
|
.catch(e => {
|
|
|
|
|
sendError(e.message, e.stack);
|
|
|
|
|
})
|
|
|
|
|
send_error(e.message, e.stack);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener("message", handleMessage, false)
|
|
|
|
|
|
|
|
|
|
console.log("repl-runner initialized");
|
|
|
|
|
|
|
|
|
|
window.addEventListener('message', handle_message, false);
|
|
|
|
|
})();
|
|
|
|
|