🎁 Built-in Pkg management

.github/workflows/Test.yml

@@ -24,18 +24,18 @@ jobs:
         strategy:
             matrix:
                 # We test quite a lot of versions because we do some OS and version specific things unfortunately
-                julia-version: ["1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "^1.6.0-0"]
-                os: [ubuntu-latest]
-                include:
-                    # macOS and windows - only the extremes, linux covers pretty much everything already i think
-                    - julia-version: "1.0"
-                      os: macOS-latest
-                    - julia-version: "^1.6.0-0"
-                      os: macOS-latest
-                    - julia-version: "1.0"
-                      os: windows-latest
-                    - julia-version: "^1.6.0-0"
-                      os: windows-latest
+                julia-version: ["1.5", "^1.6.0-0"]
+                os: [ubuntu-latest, macOS-latest, windows-latest]
+                # include:
+                # macOS and windows - only the extremes, linux covers pretty much everything already i think
+                # - julia-version: "1.0"
+                # os: macOS-latest
+                # - julia-version: "^1.6.0-0"
+                # os: macOS-latest
+                # - julia-version: "1.0"
+                # os: windows-latest
+                # - julia-version: "^1.6.0-0"
+                # os: windows-latest
 
         steps:
             # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it

Project.toml

@@ -2,7 +2,7 @@ name = "Pluto"
 uuid = "c3e4b0f8-55cb-11ea-2926-15256bba5781"
 license = "MIT"
 authors = ["Fons van der Plas <[email protected]>"]
-version = "0.14.0"
+version = "0.15.0"
 
 [deps]
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
@@ -27,7 +27,7 @@ HTTP = "0.8.18,0.9"
 MsgPack = "1.1"
 TableIOInterface = "0.1"
 Tables = "1"
-julia = "^1.0.4"
+julia = "^1.5"
 
 [extras]
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"

frontend/components/Cell.js

@@ -33,6 +33,8 @@ export const Cell = ({
     focus_after_creation,
     is_process_ready,
     disable_input,
+    nbpkg_local,
+    nbpkg,
 }) => {
     let pluto_actions = useContext(PlutoContext)
     // cm_forced_focus is null, except when a line needs to be highlighted because it is part of a stack trace
@@ -149,6 +151,8 @@ export const Cell = ({
                 }}
                 on_update_doc_query=${on_update_doc_query}
                 on_focus_neighbor=${on_focus_neighbor}
+                nbpkg_local=${nbpkg_local}
+                nbpkg=${nbpkg}
                 cell_id=${cell_id}
                 notebook_id=${notebook_id}
             />

frontend/components/CellInput.js

@@ -4,6 +4,7 @@ import observablehq_for_myself from "../common/SetupCellEnvironment.js"
 import { utf8index_to_ut16index } from "../common/UnicodeTools.js"
 import { map_cmd_to_ctrl_on_mac } from "../common/KeyboardShortcuts.js"
 import { PlutoContext } from "../common/PlutoContext.js"
+import { PkgStatusMark } from "./PkgStatusMark.js"
 
 // @ts-ignore
 const CodeMirror = window.CodeMirror
@@ -15,6 +16,24 @@ const clear_selection = (cm) => {
 
 const last = (x) => x[x.length - 1]
 const all_equal = (x) => x.every((y) => y === x[0])
+const swap = (a, i, j) => {
+    ;[a[i], a[j]] = [a[j], a[i]]
+}
+const range = (a, b) => {
+    const x = Math.min(a, b)
+    const y = Math.max(a, b)
+    return [...Array(y + 1 - x).keys()].map((i) => i + x)
+}
+
+const get = (map, key, creator) => {
+    if (map.has(key)) {
+        return map.get(key)
+    } else {
+        const val = creator()
+        map.set(key, val)
+        return val
+    }
+}
 
 // Adapted from https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/
 var offsetFromViewport = function (elem) {
@@ -52,6 +71,8 @@ export const CellInput = ({
     on_update_doc_query,
     on_focus_neighbor,
     on_drag_drop_events,
+    nbpkg_local,
+    nbpkg,
     cell_id,
     notebook_id,
 }) => {
@@ -67,6 +88,24 @@ export const CellInput = ({
     const time_last_being_force_focussed_ref = useRef(0)
     const time_last_genuine_backspace = useRef(0)
 
+    const pkg_bubbles = useRef(new Map())
+
+    useEffect(() => {
+        pkg_bubbles.current.forEach((b) => {
+            b.on_nbpkg_local(nbpkg_local)
+        })
+    }, [nbpkg_local.packages, nbpkg_local.is_pluto_managed])
+
+    useEffect(
+        () => {
+            pkg_bubbles.current.forEach((b) => {
+                b.on_nbpkg(nbpkg)
+            })
+            console.log("effect!")
+        },
+        nbpkg == null ? [null] : [...Object.values(nbpkg), ...Object.keys(nbpkg.installed_versions), ...Object.values(nbpkg.installed_versions)]
+    )
+
     useEffect(() => {
         const current_value = cm_ref.current?.getValue() ?? ""
         if (remote_code_ref.current == null && remote_code === "" && current_value !== "") {
@@ -196,14 +235,7 @@ export const CellInput = ({
                 cm.setSelections(new_selections)
             }
         }
-        const swap = (a, i, j) => {
-            ;[a[i], a[j]] = [a[j], a[i]]
-        }
-        const range = (a, b) => {
-            const x = Math.min(a, b)
-            const y = Math.max(a, b)
-            return [...Array(y + 1 - x).keys()].map((i) => i + x)
-        }
+
         const alt_move = (delta) => {
             const selections = cm.listSelections()
             const selected_lines = new Set([].concat(...selections.map((sel) => range(sel.anchor.line, sel.head.line))))
@@ -425,12 +457,81 @@ export const CellInput = ({
             }, 0)
         })
 
-        cm.on("change", (_, e) => {
+        cm.on("change", (cm, e) => {
+            // console.log(e)
             const new_value = cm.getValue()
             if (new_value.length > 1 && new_value[0] === "?") {
                 window.dispatchEvent(new CustomEvent("open_live_docs"))
             }
             on_change_ref.current(new_value)
+
+            // cm.replaceRange()
+            cm.getAllMarks().forEach((m) => {
+                const m_position = m.find()
+                if (e.from.line <= m_position.line && m_position.line <= e.to.line) {
+                    m.clear()
+                }
+            })
+
+            // TODO: put this search in a function that returns the list of mathces
+            // we can use that when you submit the cell to definitively find the list of import
+            // and then purge the map?
+
+            // TODO: debounce _any_ edit to update all imports for this cell
+            // because adding #= to the start of a cell will remove imports later
+
+            range(e.from.line, e.to.line).map((line_i) => {
+                /** @type {string} */
+                const line = cm.getLine(line_i)
+                if (line != undefined) {
+                    // dunno
+                    // const re = /(using|import)\s*(\w+(?:\,\s*\w+)*)/g
+
+                    // import A: b. c
+                    // const re = /(using|import)(\s*\w+(\.\w+)*(\s*\:(\s*\w+\,)*(\s*\w+)?))/g
+
+                    // import A, B, C
+                    const re = /(using|import)(\s*\w+(\.\w+)*)(\s*\,\s*\w+(\.\w+)*)*/g
+                    // const re = /(using|import)\s*(\w+)/g
+                    for (const import_match of line.matchAll(re)) {
+                        // console.log(import_match)
+
+                        const start = import_match.index + import_match[1].length
+
+                        const import_token = cm.getTokenAt({ line: line_i, ch: start }, true)
+
+                        if (import_token.type === "keyword") {
+                            const inner = import_match[0].substr(import_match[1].length)
+
+                            const inner_re = /(\w+)(\.\w+)*/g
+                            for (const package_match of inner.matchAll(inner_re)) {
+                                const package_name = package_match[1]
+
+                                if (package_name !== "Base" && package_name !== "Core") {
+                                    const widget = get(pkg_bubbles.current, package_name, () => {
+                                        const b = PkgStatusMark({
+                                            pluto_actions: pluto_actions,
+                                            package_name: package_name,
+                                            refresh_cm: () => cm.refresh(),
+                                            notebook_id: notebook_id,
+                                        })
+                                        b.on_nbpkg_local(nbpkg_local)
+                                        b.on_nbpkg(nbpkg)
+                                        return b
+                                    })
+
+                                    cm.setBookmark(
+                                        { line: line_i, ch: start + package_match.index + package_match[0].length },
+                                        {
+                                            widget: widget,
+                                        }
+                                    )
+                                }
+                            }
+                        }
+                    }
+                }
+            })
         })
 
         cm.on("blur", () => {
@@ -463,6 +564,9 @@ export const CellInput = ({
         document.fonts.ready.then(() => {
             cm.refresh()
         })
+
+        // we initialize with "" and then call setValue to trigger the "change" event
+        cm.setValue(local_code)
     }, [])
 
     // useEffect(() => {