CompatHelper: bump compat for RelocatableFolders to 1, (keep existing compat)

Project.toml

@@ -36,18 +36,19 @@ HypertextLiteral = "0.7, 0.8, 0.9"
 MIMEs = "0.1"
 MsgPack = "1.1"
 PrecompileSignatures = "3"
-RelocatableFolders = "0.1, 0.2, 0.3"
+RelocatableFolders = "0.1, 0.2, 0.3, 1"
 Tables = "1"
 URIs = "1.3"
 julia = "^1.6"
 
 [extras]
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
+Memoize = "c03570c3-d221-55d1-a50c-7939bbd78826"
 OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
 Random = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"
 Sockets = "6462fe0b-24de-5631-8697-dd941f90decc"
 Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
 TimerOutputs = "a759f4b9-e2f1-59dc-863e-4aeb61b1ea8f"
 
 [targets]
-test = ["DataFrames", "OffsetArrays", "Random", "Sockets", "Test", "TimerOutputs"]
+test = ["DataFrames", "OffsetArrays", "Random", "Sockets", "Test", "TimerOutputs", "Memoize"]

frontend/components/Editor.js

@@ -3,6 +3,8 @@ import * as preact from "../imports/Preact.js"
 import immer, { applyPatches, produceWithPatches } from "../imports/immer.js"
 import _ from "../imports/lodash.js"
 
+import hljs from "../imports/highlightjs.js"
+
 import { empty_notebook_state, set_disable_ui_css } from "../editor.js"
 import { create_pluto_connection } from "../common/PlutoConnection.js"
 import { init_feedback } from "../common/Feedback.js"
@@ -169,13 +171,21 @@ const first_true_key = (obj) => {
  * @property {number} precedence_heuristic
  */
 
+/**
+ * @typedef PkgData
+ * @property {string} installed_version
+ * @property {string} pkg_str The equivalent PkgREPL string to be used to install the package
+ * @property {boolean} has_custom_pkg_str True if the package in question has a non-standard pkg_str, where standard is `add $(package_name)`
+ * @property {boolean} is_dev True if the package has en added with Pkg.develop rather than Pkg.add
+ */
+
 /**
  * @typedef NotebookPkgData
  * @type {{
  *  enabled: boolean,
  *  restart_recommended_msg: string?,
  *  restart_required_msg: string?,
- *  installed_versions: { [pkg_name: string]: string },
+ *  installed_packages: { [pkg_name: string]: PkgData },
  *  terminal_outputs: { [pkg_name: string]: string },
  *  busy_packages: string[],
  *  instantiated: boolean,
@@ -617,7 +627,7 @@ export class Editor extends Component {
             /** This actions avoids pushing selected cells all the way down, which is too heavy to handle! */
             get_selected_cells: (cell_id, /** @type {boolean} */ allow_other_selected_cells) =>
                 allow_other_selected_cells ? this.state.selected_cells : [cell_id],
-            get_avaible_versions: async ({ package_name, notebook_id }) => {
+            get_available_versions: async ({ package_name, notebook_id }) => {
                 const { message } = await this.client.send("nbpkg_available_versions", { package_name: package_name }, { notebook_id: notebook_id })
                 return message.versions
             },
@@ -1211,6 +1221,10 @@ patch: ${JSON.stringify(
                 // and don't prevent the unload
             }
         })
+
+        // Attach the highlighter object to the window to allow custom highlighting from the frontend. See https://github.com/fonsp/Pluto.jl/pull/2244
+        //@ts-ignore
+        window.hljs = hljs
     }
 
     componentDidMount() {

frontend/components/ErrorMessage.js

@@ -4,7 +4,7 @@ import { html, useContext, useState } from "../imports/Preact.js"
 const StackFrameFilename = ({ frame, cell_id }) => {
     const sep_index = frame.file.indexOf("#==#")
     if (sep_index != -1) {
-        const frame_cell_id = frame.file.substr(sep_index + 4)
+        const frame_cell_id = frame.file.substr(sep_index + 4, 36)
         const a = html`<a
             href="#"
             onclick=${(e) => {

frontend/components/PkgStatusMark.js

@@ -25,6 +25,8 @@ const can_update = (installed, available) => {
  * @property {string?} chosen_version
  * @property {boolean} busy
  * @property {boolean} offer_update
+ * @property {boolean} custom_pkg_str
+ * @property {boolean} dev_pkg
  */
 
 /**
@@ -41,8 +43,11 @@ export const package_status = ({ nbpkg, package_name, available_versions, is_dis
     let hint_raw = "error"
     let hint = html`error`
     let offer_update = false
-    const chosen_version = nbpkg?.installed_versions[package_name] ?? null
+    const pkg_data = nbpkg?.installed_packages[package_name]
+    const chosen_version = pkg_data?.installed_version ?? null
     const busy = (nbpkg?.busy_packages ?? []).includes(package_name) || !(nbpkg?.instantiated ?? true)
+    const custom_pkg_str = pkg_data?.has_custom_pkg_str ?? false
+    const dev_pkg = pkg_data?.is_dev ?? false
 
     if (is_disable_pkg) {
         const f_name = package_name
@@ -62,19 +67,25 @@ export const package_status = ({ nbpkg, package_name, available_versions, is_dis
                     is installing...`
             } else {
                 status = "installed"
-                hint_raw = `${package_name} (v${chosen_version}) is installed in the notebook.`
+                let custom_str = dev_pkg
+                    ? "\nThis package has been installed with a custom command and is tracking a path for development."
+                    : custom_pkg_str
+                    ? "\nThis package has been installed using a custom command."
+                    : ""
+                hint_raw = `${package_name} (v${chosen_version}) is installed in the notebook.${custom_str}`
                 hint = html`<header><b>${package_name}</b> <pkg-version>v${chosen_version}</pkg-version></header>
-                    is installed in the notebook.`
+                    is installed in the notebook.${custom_str ? html`<i>${custom_str}</i>` : ""}`
                 offer_update = can_update(chosen_version, available_versions)
             }
         }
     } else {
         if (available_versions != null && _.isArray(available_versions)) {
             if (available_versions.length === 0) {
                 status = "not_found"
-                hint_raw = `The package "${package_name}" could not be found in the registry. Did you make a typo?`
+                hint_raw = `The package "${package_name}" could not be found in the registry. Did you make a typo?\nIf you want to install an un-registered package, use the specific button in the PkgPopup`
                 hint = html`The package <em>"${package_name}"</em> could not be found in the registry.
-                    <section><em>Did you make a typo?</em></section>`
+                    <section><em>Did you make a typo?</em></section>
+                    <em>If you want to install an un-registered package, use the button with the console icon.</em>`
             } else {
                 status = "will_be_installed"
                 hint_raw = `${package_name} (v${_.last(available_versions)}) will be installed in the notebook when you run this cell.`
@@ -84,7 +95,7 @@ export const package_status = ({ nbpkg, package_name, available_versions, is_dis
         }
     }
 
-    return { status, hint, hint_raw, available_versions, chosen_version, busy, offer_update }
+    return { status, hint, hint_raw, available_versions, chosen_version, busy, offer_update, custom_pkg_str, dev_pkg }
 }
 
 /**
@@ -99,32 +110,33 @@ export const PkgStatusMark = ({ package_name, pluto_actions, notebook_id, nbpkg
     const [available_versions, set_available_versions] = useState(/** @type {string[]?} */ (null))
 
     useEffect(() => {
-        let available_version_promise = pluto_actions.get_avaible_versions({ package_name, notebook_id }) ?? Promise.resolve([])
+        let available_version_promise = pluto_actions.get_available_versions({ package_name, notebook_id }) ?? Promise.resolve([])
         available_version_promise.then((available_versions) => {
             set_available_versions(available_versions)
         })
     }, [package_name])
 
-    const { status, hint_raw } = package_status({
+    const { status, hint_raw, custom_pkg_str, dev_pkg } = package_status({
         nbpkg: nbpkg,
         package_name: package_name,
         is_disable_pkg: false,
         available_versions,
     })
+    let class_str =
+        status === "busy"
+            ? "busy"
+            : status === "installed"
+            ? "installed"
+            : status === "not_found"
+            ? "not_found"
+            : status === "will_be_installed"
+            ? "will_be_installed"
+            : ""
+    custom_pkg_str && (class_str += " custom_pkg_str")
+    dev_pkg && (class_str += " dev_pkg")
 
     return html`
-        <pkg-status-mark
-            title=${hint_raw}
-            className=${status === "busy"
-                ? "busy"
-                : status === "installed"
-                ? "installed"
-                : status === "not_found"
-                ? "not_found"
-                : status === "will_be_installed"
-                ? "will_be_installed"
-                : ""}
-        >
+        <pkg-status-mark title=${hint_raw} className=${class_str}>
             <button
                 onClick=${(event) => {
                     open_pluto_popup({

frontend/components/Popup.js

@@ -12,6 +12,7 @@ import { useDebouncedTruth } from "./RunArea.js"
 // This funny thing is a way to tell parcel to bundle these files..
 // Eventually I'll write a plugin that is able to parse html`...`, but this is it for now.
 // https://parceljs.org/languages/javascript/#url-dependencies
+export const terminal_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/terminal-outline.svg", import.meta.url)
 export const arrow_up_circle_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/arrow-up-circle-outline.svg", import.meta.url)
 export const document_text_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/document-text-outline.svg", import.meta.url)
 export const help_circle_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/help-circle-outline.svg", import.meta.url)
@@ -117,7 +118,7 @@ const PkgPopup = ({ notebook, recent_event, clear_recent_event }) => {
         if (recent_event == null) {
             set_pkg_status(null)
         } else if (recent_event?.type === "nbpkg") {
-            ;(pluto_actions.get_avaible_versions({ package_name: recent_event.package_name, notebook_id: notebook.notebook_id }) ?? Promise.resolve([])).then(
+            ;(pluto_actions.get_available_versions({ package_name: recent_event.package_name, notebook_id: notebook.notebook_id }) ?? Promise.resolve([])).then(
                 (versions) => {
                     if (still_valid) {
                         set_pkg_status(
@@ -146,17 +147,29 @@ const PkgPopup = ({ notebook, recent_event, clear_recent_event }) => {
 
     const [showterminal, set_showterminal] = useState(false)
 
-    const busy = recent_event != null && ((notebook.nbpkg?.busy_packages ?? []).includes(recent_event.package_name) || !(notebook.nbpkg?.instantiated ?? true))
+    const package_name = recent_event?.package_name
+    const default_pkg_str = `add ${recent_event.package_name}`
+    const pkg_str = notebook.metadata?.custom_pkgstrs?.[package_name] ?? default_pkg_str
+
+    const busy = recent_event != null && ((notebook.nbpkg?.busy_packages ?? []).includes(package_name) || !(notebook.nbpkg?.instantiated ?? true))
 
     const debounced_busy = useDebouncedTruth(busy, 2)
     useEffect(() => {
         set_showterminal(debounced_busy)
     }, [debounced_busy])
 
-    const terminal_value = notebook.nbpkg?.terminal_outputs == null ? "Loading..." : notebook.nbpkg?.terminal_outputs[recent_event?.package_name] ?? ""
+    const terminal_value = notebook.nbpkg?.terminal_outputs == null ? "Loading..." : notebook.nbpkg?.terminal_outputs[package_name] ?? ""
 
     const showupdate = pkg_status?.offer_update ?? false
 
+    async function try_update_pkgstr(message, _default) {
+        const new_pkg_str = prompt(message, _default) ?? pkg_str
+        const result = await pluto_actions.send("pkg_str", { package_name: package_name, pkg_str: new_pkg_str }, { notebook_id: notebook.notebook_id })
+        if (result.message.errored) {
+            try_update_pkgstr(result.message.message, new_pkg_str)
+        }
+    }
+
     // <header>${recent_event?.package_name}</header>
     return html`<pkg-popup
         class=${cl({
@@ -167,6 +180,17 @@ const PkgPopup = ({ notebook, recent_event, clear_recent_event }) => {
     >
         ${pkg_status?.hint ?? "Loading..."}
         <div class="pkg-buttons">
+            <a
+                class="pkg-str"
+                target="_blank"
+                title="Use custom PkgREPL string"
+                href="#"
+                onClick=${(e) => {
+                    e.preventDefault()
+                    try_update_pkgstr("Write the custom string to install the package", pkg_str)
+                }}
+                ><img alt="💻" src=${terminal_icon} width="17"
+            /></a>
             <a
                 class="pkg-update"
                 target="_blank"

frontend/editor.css

@@ -1748,6 +1748,18 @@ pkg-status-mark.disable_pkg > button > span::after {
     filter: var(--image-filters);
 }
 
+pkg-status-mark.custom_pkg_str > button > span::after {
+    opacity: 0.6;
+    /* The filter comes from using https://codepen.io/sosuke/pen/Pjoqqp with a target color of #f5980c*/
+    filter: invert(68%) sepia(24%) saturate(3205%) hue-rotate(353deg) brightness(97%) contrast(99%);
+}
+
+pkg-status-mark.custom_pkg_str.dev_pkg > button > span::after {
+    opacity: 0.6;
+    /* The filter comes from using https://codepen.io/sosuke/pen/Pjoqqp with a target color of #d428eb*/
+    filter: invert(31%) sepia(61%) saturate(4615%) hue-rotate(278deg) brightness(95%) contrast(108%);
+}
+
 pluto-popup {
     display: block;
     position: absolute;

src/notebook/Notebook.jl

@@ -1,7 +1,7 @@
 import UUIDs: UUID, uuid1
 import .ExpressionExplorer: SymbolsState, FunctionNameSignaturePair, FunctionName
 import .Configuration
-import .PkgCompat: PkgCompat, PkgContext
+import .PkgCompat: PkgCompat, PkgContext, PkgData
 import Pkg
 import TOML
 
@@ -51,7 +51,7 @@ Base.@kwdef mutable struct Notebook
     nbpkg_restart_required_msg::Union{Nothing,String}=nothing
     nbpkg_terminal_outputs::Dict{String,String}=Dict{String,String}()
     nbpkg_busy_packages::Vector{String}=String[]
-    nbpkg_installed_versions_cache::Dict{String,String}=Dict{String,String}()
+    nbpkg_installed_pkgdata_cache::Dict{String,PkgData}=Dict{String,PkgData}()
 
     process_status::String=ProcessStatus.starting
     wants_to_interrupt::Bool=false
@@ -111,4 +111,4 @@ create_notebook_metadata(metadata::Dict{String,<:Any}) = merge(DEFAULT_NOTEBOOK_
 get_metadata(cell::Cell)::Dict{String,Any} = cell.metadata
 get_metadata(notebook::Notebook)::Dict{String,Any} = notebook.metadata
 get_metadata_no_default(cell::Cell)::Dict{String,Any} = Dict{String,Any}(setdiff(pairs(cell.metadata), pairs(DEFAULT_CELL_METADATA)))
-get_metadata_no_default(notebook::Notebook)::Dict{String,Any} = Dict{String,Any}(setdiff(pairs(notebook.metadata), pairs(DEFAULT_NOTEBOOK_METADATA)))
+get_metadata_no_default(notebook::Notebook)::Dict{String,Any} = Dict{String,Any}(setdiff(pairs(notebook.metadata), pairs(DEFAULT_NOTEBOOK_METADATA)))

src/notebook/saving and loading.jl

@@ -301,13 +301,14 @@ function load_notebook_nobackup(@nospecialize(io::IO), @nospecialize(path::Abstr
         k ∈ appeared_order
     end
 
+    custom_pkgstrs = get(notebook_metadata, "custom_pkgstrs", Dict{String, Any}())
     Notebook(;
         cells_dict=appeared_cells_dict,
         cell_order=appeared_order,
         topology=_initial_topology(appeared_cells_dict, appeared_order),
         path=path,
         nbpkg_ctx=nbpkg_ctx,
-        nbpkg_installed_versions_cache=nbpkg_cache(nbpkg_ctx),
+        nbpkg_installed_pkgdata_cache=nbpkg_cache(nbpkg_ctx, custom_pkgstrs),
         metadata=notebook_metadata,
     )
 end