└── host-basic ├── index.html └── index.js /host-basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | Observable Notebook Basic Host 12 | 13 | 14 | 18 | 19 | 22 | 23 | -------------------------------------------------------------------------------- /host-basic/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | Runtime, 3 | Inspector 4 | } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4.6/dist/runtime.js"; 5 | 6 | const params = new URLSearchParams(window.location.search); 7 | if (params.has("notebook")) { 8 | const notebook = params.get("notebook"); 9 | const targets = params.has("targets") ? params.get("targets").split(",") : []; 10 | let observer; 11 | 12 | if (targets.length > 0) { 13 | const targetSet = new Set(targets); 14 | observer = name => { 15 | if (!targetSet.has(name)) return null; 16 | const node = document.createElement("div"); 17 | node.setAttribute("id", `notebook-${name}`); 18 | const i = new Inspector(document.body.appendChild(node)); 19 | return { 20 | pending() { 21 | targetStatus.set(name, "pending"); 22 | i.pending(); 23 | }, 24 | fulfilled(value) { 25 | targetStatus.set(name, "fulfilled"); 26 | i.fulfilled(value); 27 | }, 28 | rejected(error) { 29 | targetStatus.set(name, "rejected"); 30 | i.rejected(error); 31 | } 32 | }; 33 | }; 34 | } else { 35 | observer = Inspector.into(document.body); 36 | } 37 | 38 | import(`https://api.observablehq.com/${notebook}.js?v=3`).then( 39 | async ({ default: define }) => { 40 | window.rt = new Runtime(); 41 | const o = observer; 42 | const m = window.rt.module(define, o); 43 | window.redefine = redefine => { 44 | for (let cell in redefine) { 45 | m.redefine(cell, redefine[cell]); 46 | } 47 | }; 48 | } 49 | ); 50 | } 51 | --------------------------------------------------------------------------------