Load observablehq stdlib using jsdelivr ESM (#3237)

Author: fonsp

frontend/common/SetupCellEnvironment.js

@@ -1,8 +1,9 @@
-// import Library from "https://unpkg.com/@observablehq/[email protected]/src/library.js?module"
+// @ts-ignore
+import { Library } from "https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/+esm"
 
-export let make_library = () => {
+export const make_library = () => {
     // @ts-ignore
-    let library = new window.observablehq.Library()
+    const library = new Library()
     return {
         DOM: library.DOM,
         Files: library.Files,
@@ -27,11 +28,11 @@ const observablehq_for_myself = make_library()
 export const observablehq_for_cells = make_library()
 export { observablehq_for_myself as default }
 
-export let DOM = observablehq_for_myself.DOM
-export let Files = observablehq_for_myself.Files
-export let Generators = observablehq_for_myself.Generators
-export let Promises = observablehq_for_myself.Promises
-export let now = observablehq_for_myself.now
-export let svg = observablehq_for_myself.svg
-export let html = observablehq_for_myself.html
-export let require = observablehq_for_myself.require
+export const DOM = observablehq_for_myself.DOM
+export const Files = observablehq_for_myself.Files
+export const Generators = observablehq_for_myself.Generators
+export const Promises = observablehq_for_myself.Promises
+export const now = observablehq_for_myself.now
+export const svg = observablehq_for_myself.svg
+export const html = observablehq_for_myself.html
+export const require = observablehq_for_myself.require

frontend/editor.html

@@ -23,10 +23,7 @@
         )
     </script>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/dist/stdlib.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/ansi_up.min.js" defer></script>
 
     <link rel="pluto-external-source" id="vmsg-wasm" href="https://unpkg.com/[email protected]/vmsg.wasm">
     <link rel="pluto-external-source" id="arrow_up_circle_icon" href="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/arrow-up-circle-outline.svg">

frontend/imports/AnsiUp.js

@@ -1,2 +1,5 @@
 // @ts-ignore
-export default AnsiUp = window.AnsiUp
+import AnsiUpPackage from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
+// needs .default a second time, weird
+const AnsiUp = AnsiUpPackage.default
+export default AnsiUp

frontend/imports/lodash.d.ts

@@ -1,2 +1,4 @@
-import _ from "lodash-es"
+import * as _ from "lodash-es"
 export default _
+
+// Note: run `npm install` if you want to get types in your editor

frontend/imports/lodash.js

@@ -1,2 +1,5 @@
 // @ts-ignore
-export default window._
+import _ from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
+export default _
+
+// Note: run `npm install` if you want to get types in your editor

frontend/index.html

@@ -21,10 +21,6 @@
     <link rel="pluto-logo-big" href="./img/logo.svg" />
     <link rel="pluto-logo-small" href="./img/favicon_unsaturated.svg" />
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/dist/stdlib.js" defer></script>
-
-
     <link rel="stylesheet" href="welcome.css">
     <link rel="stylesheet" href="index.css">
 

frontend/package.json

@@ -1,6 +1,5 @@
 {
   "devDependencies": {
-    "@types/lodash": "^4.14.182",
     "@types/lodash-es": "^4.17.6"
   }
 }