+\n Math.random()\n .toString(32)\n .slice(2)\n const script = document.createElement('script')\n const destructor = () =\u003E {\n delete window[vector]\n script.onerror = null\n script.onload = null\n script.remove()\n URL.revokeObjectURL(script.src)\n script.src = ''\n }\n script.defer = true\n script.type = 'module'\n script.onerror = () =\u003E {\n reject(new Error(`Failed to import: ${url}`))\n destructor()\n }\n script.onload = () =\u003E {\n resolve(window[vector])\n destructor()\n }\n const absURL = toAbsoluteURL(url)\n const loader = `import * as m from \"${absURL}\"; window.${vector} = m;` \u002F\u002F export Module\n const blob = new Blob([loader], { type: 'text\u002Fjavascript' })\n script.src = URL.createObjectURL(blob)\n\n document.head.appendChild(script)\n })\n}\n\nexport default importModule\n","directory_shortid":"GXOoy","id":"07e66963-a216-420d-846d-48012cd2b4b1","inserted_at":"2019-05-11T16:39:14","is_binary":false,"sha":null,"shortid":"yPVnz","source_id":"a4595b90-64a1-4195-bc75-47008618b31a","title":"import-module.ts","updated_at":"2019-05-11T16:42:27","upload_id":null},{"code":"declare module '@observablehq\u002Fruntime' {\n export type ObserverFactory = (name: string) =\u003E Observer\n export type Define = (runtime: Runtime, observer: ObserverFactory) =\u003E Module\n\n export class Runtime {\n constructor(builtins?: object, global?: object)\n\n module(): Module\n module(define: Define): Module\n module(define: Define, observer: (name: string) =\u003E ObserverFactory): Module\n\n dispose(): void\n }\n\n export class Module {\n private constructor()\n\n variable\u003CT = any, TError = any\u003E(observer?: Observer\u003CT, TError\u003E): Variable\u003CT\u003E\n\n derive(specifiers: Specifier[]): Module\n\n define\u003CT\u003E(definition: () =\u003E T): Variable\u003CT\u003E\n define\u003CT\u003E(\n inputs: string[],\n definition: (...inputs: any[]) =\u003E T,\n ): Variable\u003CT\u003E\n define\u003CT\u003E(name: string, definition: () =\u003E T): Variable\u003CT\u003E\n define\u003CT\u003E(\n name: string,\n inputs: string[],\n definition: (...inputs: any[]) =\u003E T,\n ): Variable\u003CT\u003E\n\n import\u003CT\u003E(name: string, module: Module): Variable\u003CT\u003E\n import\u003CT\u003E(name: string, alias: string, module: Module): Variable\u003CT\u003E\n\n redefine\u003CT\u003E(name: string, definition: () =\u003E T): Variable\u003CT\u003E\n redefine\u003CT\u003E(\n name: string,\n inputs: string[],\n definition: (...inputs: any[]) =\u003E T,\n ): Variable\u003CT\u003E\n\n value\u003CT\u003E(name: string): Promise\u003CT\u003E\n }\n type Specifier = { name: string; alias?: string } | string\n\n export class Variable\u003CT\u003E {\n private constructor()\n define(definition: () =\u003E T): this\n define(inputs: string[], definition: (...inputs: any[]) =\u003E T): this\n define(name: string, definition: () =\u003E T): this\n define(\n name: string,\n inputs: string[],\n definition: (...inputs: any[]) =\u003E T,\n ): this\n import(name: string, module: Module): this\n import(name: string, alias: string, module: Module): this\n delete(): this\n }\n\n export interface Observer\u003CT = any, TError = any\u003E {\n pending(): void\n fulfilled(value: T): void\n rejected(value: TError): void\n }\n}\n","directory_shortid":"GXOoy","id":"0f749ba2-033c-45cc-b525-c1c02dbe9394","inserted_at":"2019-05-11T11:11:02","is_binary":false,"sha":null,"shortid":"wRmlM","source_id":"a4595b90-64a1-4195-bc75-47008618b31a","title":"types.d.ts","updated_at":"2019-06-02T13:16:05","upload_id":null},{"code":"export type Optional\u003CTValue = unknown, TError = unknown\u003E =\n | Pending\n | Fulfilled\u003CTValue\u003E\n | Rejected\u003CTError\u003E\n\nexport type Pending = { state: 'pending' }\nexport const pending: Pending = { state: 'pending' }\nexport const isPending = (value: Optional): value is Pending =\u003E\n value.state === 'pending'\n\nexport type Fulfilled\u003CT\u003E = { state: 'fulfilled'; value: T }\nexport const fulfilled = \u003CT\u003E(value: T): Fulfilled\u003CT\u003E =\u003E ({\n state: 'fulfilled',\n value,\n})\nexport const isFulfilled = \u003CT\u003E(value: Optional\u003CT\u003E): value is Fulfilled\u003CT\u003E =\u003E\n value.state === 'fulfilled' &&\n Object.prototype.hasOwnProperty.call(value, 'value')\n\nexport type Rejected\u003CT\u003E = { state: 'rejected'; error: T }\nexport const rejected = \u003CT\u003E(error: T): Rejected\u003CT\u003E =\u003E ({\n state: 'rejected',\n error,\n})\nexport const isRejected = \u003CT\u003E(\n value: Optional\u003Cunknown, T\u003E,\n): value is Rejected\u003CT\u003E =\u003E\n value.state === 'rejected' &&\n Object.prototype.hasOwnProperty.call(value, 'error')\n","directory_shortid":"GXOoy","id":"f800c5f5-1bfa-4c34-bede-545692766d2e","inserted_at":"2019-05-11T14:58:33","is_binary":false,"sha":null,"shortid":"p2pZV","source_id":"a4595b90-64a1-4195-bc75-47008618b31a","title":"optional.ts","updated_at":"2019-12-14T21:25:06","upload_id":null},{"code":"\u002F\u002F\u002F\u003Creference path=\".\u002Ftypes.d.ts\" \u002F\u003E\nimport React, { useRef, useContext, useState, useEffect } from 'react'\nimport { Runtime, Module, Define } from '@observablehq\u002Fruntime'\nimport {\n Optional,\n pending,\n isPending,\n fulfilled,\n rejected,\n isRejected,\n} from '.\u002Foptional'\nimport __import__ from '.\u002Fimport-module'\n\nconst RuntimeContext = React.createContext\u003CRuntime | null\u003E(null)\nconst NotebookContext = React.createContext\u003COptional\u003CModule, any\u003E | null\u003E(null)\n\n\u002F**\n * Provides a shared Observable runtime to all of its children\n *\u002F\nexport function RuntimeProvider({ children }: { children?: React.ReactNode }) {\n const runtimeRef = useRef\u003CRuntime\u003E(null)\n if (!runtimeRef.current) runtimeRef.current = new Runtime()\n\n useEffect(() =\u003E {\n return () =\u003E {\n runtimeRef.current && runtimeRef.current.dispose()\n }\n }, [])\n\n return (\n \u003CRuntimeContext.Provider value={runtimeRef.current} children={children} \u002F\u003E\n )\n}\n\u002F**\n * Get an instance of the Observable runtime.\n *\u002F\nexport const useRuntime = () =\u003E\n useAvailableContext(\n RuntimeContext,\n '`useRuntime` must be called within the \u003CRuntimeProvider \u002F\u003E component',\n )\n\n\u002F**\n * Provides an instance of an Observable notebook to all of its children\n *\u002F\nexport function NotebookProvider({\n url,\n children,\n}: {\n \u002F** The URL to the notebook JS file to import. Example: https:\u002F\u002Fapi.observablehq.com\u002F@tmcw\u002Fhello-world.js?v=3 *\u002F\n url: string\n children?: React.ReactNode\n}) {\n const runtime = useRuntime()\n const [state, setState] = useState\u003COptional\u003CModule, any\u003E\u003E(pending)\n\n useEffect(() =\u003E {\n setState(pending)\n let abort = false\n __import__(url)\n .then((exports: { default: Define }) =\u003E {\n if (abort) return\n if (exports.default && typeof exports.default === 'function') {\n setState(fulfilled(runtime.module(exports.default)))\n } else {\n throw new Error(\n `Unexpected module ${url} with exports ${Object.keys(exports).join(\n ', ',\n )}`,\n )\n }\n })\n .catch(error =\u003E setState(rejected(error)))\n return () =\u003E {\n abort = true\n }\n }, [url, runtime])\n\n return \u003CNotebookContext.Provider value={state} children={children} \u002F\u003E\n}\n\nexport function useModule() {\n const context = useAvailableContext(\n NotebookContext,\n '`useVariable` must be called within the \u003CNotebookProvider \u002F\u003E component.',\n )\n\n if (isRejected(context)) throw context.error\n if (isPending(context)) return null\n return context.value\n}\n\nexport function useVariable\u003CT\u003E(name: string): [null, true] | [T, false] {\n const module = useModule()\n const [state, setState] = useState\u003COptional\u003CT, any\u003E\u003E(pending)\n\n useEffect(() =\u003E {\n if (module) {\n let variable = module\n .variable\u003CT\u003E({\n pending: () =\u003E setState(pending),\n fulfilled: value =\u003E setState(fulfilled(value)),\n rejected: error =\u003E setState(rejected(error)),\n })\n .define([name], value =\u003E value)\n return () =\u003E {\n variable.delete()\n }\n } else {\n setState(pending)\n }\n }, [name, module])\n\n if (isRejected(state)) throw state.error\n if (isPending(state)) return [null, true]\n return [state.value, false]\n}\nexport function useValue\u003CT\u003E(name: string): T | null {\n return useVariable\u003CT\u003E(name)[0]\n}\n\nfunction useAvailableContext\u003CT\u003E(\n context: React.Context\u003CT | null\u003E,\n message: string,\n): T {\n const value = useContext(context)\n if (value == null) throw new Error(message)\n return value\n}\n","directory_shortid":"GXOoy","id":"b3236f9b-6525-4f59-994c-9faaaadb0367","inserted_at":"2019-05-11T10:59:21","is_binary":false,"sha":null,"shortid":"7p4A1","source_id":"a4595b90-64a1-4195-bc75-47008618b31a","title":"runtime.tsx","updated_at":"2019-12-14T21:23:01","upload_id":null},{"code":"import React from 'react'\nimport ReactDOM from 'react-dom'\n\nimport { DOMNode } from '.\u002Frender-dom-node'\nimport { RuntimeProvider, NotebookProvider, useValue } from '.\u002Fruntime'\n\nimport '.\u002Fstyles.css'\n\nfunction App() {\n return (\n \u003Cdiv className=\"App\"\u003E\n \u003CNotebookProvider url=\"https:\u002F\u002Fapi.observablehq.com\u002F@tmcw\u002Fhello-world.js?v=3\"\u003E\n \u003CHero \u002F\u003E\n \u003C\u002FNotebookProvider\u003E\n \u003CNotebookProvider url=\"https:\u002F\u002Fapi.observablehq.com\u002F@observablehq\u002Fdownloading-and-embedding-notebooks.js?v=3\"\u003E\n \u003CGraphic \u002F\u003E\n \u003C\u002FNotebookProvider\u003E\n \u003C\u002Fdiv\u003E\n )\n}\n\nfunction Hero() {\n return (\n \u003C\u003E\n \u003CDOMNode\u003E{useValue('hello')}\u003C\u002FDOMNode\u003E\n \u003Ch2\u003EStart editing to see some magic happen!\u003C\u002Fh2\u003E\n \u003C\u002F\u003E\n )\n}\n\nfunction Graphic() {\n return \u003CDOMNode\u003E{useValue('graphic')}\u003C\u002FDOMNode\u003E\n}\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(\n \u003CRuntimeProvider\u003E\n \u003CApp \u002F\u003E\n \u003C\u002FRuntimeProvider\u003E,\n rootElement,\n)\n","directory_shortid":"GXOoy","id":"3230bbab-bf20-428e-b390-b4978aa370e3","inserted_at":"2019-05-11T10:58:42","is_binary":false,"sha":null,"shortid":"wRo98","source_id":"a4595b90-64a1-4195-bc75-47008618b31a","title":"index.tsx","updated_at":"2019-12-14T21:18:48","upload_id":null}]};