mirror of https://github.com/sveltejs/svelte
Richard Harris
7 years ago
parent
9f0630c3fb
commit
795ca0c291
@ -0,0 +1,44 @@
|
|||||||
|
const workers = new Map();
|
||||||
|
|
||||||
|
let uid = 1;
|
||||||
|
|
||||||
|
export default class Bundler {
|
||||||
|
constructor(version) {
|
||||||
|
if (!workers.has(version)) {
|
||||||
|
const worker = new Worker('/workers/bundler.js');
|
||||||
|
worker.postMessage({ type: 'init', version });
|
||||||
|
workers.set(version, worker);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.worker = workers.get(version);
|
||||||
|
|
||||||
|
this.handlers = new Map();
|
||||||
|
|
||||||
|
this.worker.addEventListener('message', event => {
|
||||||
|
const handler = this.handlers.get(event.data.id);
|
||||||
|
|
||||||
|
if (handler) { // if no handler, was meant for a different REPL
|
||||||
|
handler(event.data);
|
||||||
|
this.handlers.delete(event.data.id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
bundle(components) {
|
||||||
|
return new Promise(fulfil => {
|
||||||
|
const id = uid++;
|
||||||
|
|
||||||
|
this.handlers.set(id, fulfil);
|
||||||
|
|
||||||
|
this.worker.postMessage({
|
||||||
|
id,
|
||||||
|
type: 'bundle',
|
||||||
|
components
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
this.worker.terminate();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,149 +1,105 @@
|
|||||||
|
|
||||||
(function (){
|
(function() {
|
||||||
const importCache = {};
|
const import_cache = {};
|
||||||
|
|
||||||
function fetchImport(id) {
|
function fetch_import(id) {
|
||||||
return new Promise((fulfil, reject) => {
|
return new Promise((fulfil, reject) => {
|
||||||
curl([`https://bundle.run/${id}`]).then(module => {
|
curl([`https://bundle.run/${id}`]).then(module => {
|
||||||
importCache[id] = module;
|
import_cache[id] = module;
|
||||||
fulfil(module);
|
fulfil(module);
|
||||||
}, err => {
|
}, err => {
|
||||||
console.error(err.stack);
|
console.error(err.stack);
|
||||||
reject(new Error(`Error loading ${id} from bundle.run`));
|
reject(new Error(`Error loading ${id} from bundle.run`));
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function fetchImports(imports, progressFunc) {
|
|
||||||
const missingImports = imports.filter(x => !importCache[x]);
|
|
||||||
let pendingImports = missingImports.length;
|
|
||||||
|
|
||||||
if (missingImports.length) {
|
|
||||||
let promise = Promise.all(
|
|
||||||
missingImports.map(id => fetchImport(id).then(() => {
|
|
||||||
pendingImports -= 1;
|
|
||||||
if (progressFunc) progressFunc(pendingImports);
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
|
|
||||||
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 })
|
|
||||||
|
|
||||||
|
|
||||||
if (action == "eval") {
|
function fetch_imports(imports, progress_func) {
|
||||||
let { script } = ev.data.args;
|
const missing_imports = imports.filter(x => !import_cache[x]);
|
||||||
try {
|
let pending_imports = missing_imports.length;
|
||||||
eval(script);
|
|
||||||
sendOk();
|
if (missing_imports.length) {
|
||||||
} catch (e) {
|
let promise = Promise.all(
|
||||||
sendError(e.message, e.stack);
|
missing_imports.map(id => fetch_import(id).then(() => {
|
||||||
|
pending_imports -= 1;
|
||||||
|
if (progress_func) progress_func(pending_imports);
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
return promise;
|
||||||
|
} else {
|
||||||
|
return Promise.resolve();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (action == "bind_props") {
|
function handle_message(ev) {
|
||||||
let { props } = ev.data.args
|
let { action, cmd_id } = ev.data;
|
||||||
|
const send_message = (payload) => parent.postMessage( { ...payload }, ev.origin);
|
||||||
if (!window.component) {
|
const send_reply = (payload) => send_message({ ...payload, cmd_id });
|
||||||
// TODO can this happen?
|
const send_ok = () => send_reply({ action: 'cmd_ok' });
|
||||||
console.warn('no component to bind to');
|
const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });
|
||||||
sendOk();
|
|
||||||
return;
|
if (action === 'eval') {
|
||||||
}
|
try {
|
||||||
|
const { script } = ev.data.args;
|
||||||
try {
|
eval(script);
|
||||||
props.forEach(prop => {
|
send_ok();
|
||||||
// TODO should there be a public API for binding?
|
} catch (e) {
|
||||||
// e.g. `component.$watch(prop, handler)`?
|
send_error(e.message, e.stack);
|
||||||
// (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();
|
|
||||||
} catch (e) {
|
|
||||||
sendError(e.message, e.stack);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if (action == "catch_clicks") {
|
|
||||||
try {
|
|
||||||
let topOrigin = ev.origin;
|
|
||||||
document.body.addEventListener('click', event => {
|
|
||||||
if (event.which !== 1) return;
|
|
||||||
if (event.metaKey || event.ctrlKey || event.shiftKey) return;
|
|
||||||
if (event.defaultPrevented) return;
|
|
||||||
|
|
||||||
// ensure target is a link
|
|
||||||
let el = event.target;
|
|
||||||
while (el && el.nodeName !== 'A') el = el.parentNode;
|
|
||||||
if (!el || el.nodeName !== 'A') return;
|
|
||||||
|
|
||||||
if (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;
|
if (action === 'catch_clicks') {
|
||||||
|
try {
|
||||||
event.preventDefault();
|
const top_origin = ev.origin;
|
||||||
|
document.body.addEventListener('click', event => {
|
||||||
if (el.href.startsWith(topOrigin)) {
|
if (event.which !== 1) return;
|
||||||
const url = new URL(el.href);
|
if (event.metaKey || event.ctrlKey || event.shiftKey) return;
|
||||||
if (url.hash[0] === '#') {
|
if (event.defaultPrevented) return;
|
||||||
window.location.hash = url.hash;
|
|
||||||
return;
|
// ensure target is a link
|
||||||
|
let el = event.target;
|
||||||
|
while (el && el.nodeName !== 'A') el = el.parentNode;
|
||||||
|
if (!el || el.nodeName !== 'A') return;
|
||||||
|
|
||||||
|
if (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (el.href.startsWith(top_origin)) {
|
||||||
|
const url = new URL(el.href);
|
||||||
|
if (url.hash[0] === '#') {
|
||||||
|
window.location.hash = url.hash;
|
||||||
|
return;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
window.open(el.href, '_blank');
|
window.open(el.href, '_blank');
|
||||||
});
|
});
|
||||||
sendOk();
|
send_ok();
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
sendError(e.message, e.stack);
|
send_error(e.message, e.stack);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if (action == "fetch_imports") {
|
if (action === 'fetch_imports') {
|
||||||
let { imports, import_map } = ev.data.args;
|
const { imports, import_map } = ev.data.args;
|
||||||
fetchImports(imports, (remaining) => {
|
fetch_imports(imports, (remaining) => {
|
||||||
sendMessage({action: "fetch_progress", args: { remaining }});
|
send_message({action: 'fetch_progress', args: { remaining }});
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
imports.forEach(x=> {
|
imports.forEach(x=> {
|
||||||
const module = importCache[x];
|
const module = import_cache[x];
|
||||||
const name = import_map.get(x);
|
const name = import_map.get(x);
|
||||||
window[name] = module;
|
window[name] = module;
|
||||||
|
});
|
||||||
|
send_ok();
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
send_error(e.message, e.stack);
|
||||||
});
|
});
|
||||||
sendOk();
|
}
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
sendError(e.message, e.stack);
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("message", handleMessage, false)
|
|
||||||
|
|
||||||
console.log("repl-runner initialized");
|
|
||||||
|
|
||||||
|
window.addEventListener('message', handle_message, false);
|
||||||
})();
|
})();
|
||||||
|
|||||||
Loading…
Reference in new issue