Add a way to install modules in notebooks

Because we are parsing Python content to deliver rich color previews,
we can't simply use micropip and await. When the code is processed,
we are already in a loop and we have to run, at least when parsing
Markdown, in synchronous functions.

So, if processing code in a live code block, process
`# micropip-require: module1 module2` as the first line.

If processing a live notebook, use `<!-- micropip-require: module -->`,
but at the top of the Markdown page and all code blocks will see it.
You can also include it in the code blocks individually as it should be
cached, that way if you want to share a block, it would have everything
needed.

Author: facelessuser

docs/src/js/extra-notebook.js

@@ -19,6 +19,11 @@
   let editTemp = {}
   const editorMgr = {}
   let notebookEditor = null
+  const installMatch = /^#[ \t]*micropip-require:[ \t]*((?:[-a-z0-1_]+[ \t]*)+)(?=\n|$)/
+  const installMdMatch = /^<!--[ \t]+micropip-require:[ \t]*((?:[-a-z0-1_]+[ \t]*)+)[ \t]+-->(?=\n|$)/
+  const installPrefix = /^#[ \t]*micropip-require:[ \t]*/
+  const installMdPrefix = /^<!--[ \t]+micropip-require:[ \t]*/
+  const installMdPost = /[ \t]+-->(?=\n|$)/
   const reIdNum = /.*?_(\d+)$/
   let initialized = false
   let lastSearch = ""
@@ -92,7 +97,23 @@ ${content}
     const session = currentInputs.getAttribute("session")
     const editor = editorMgr[currentID]
     currentInputs.setAttribute("readonly", "")
-    pyodide.globals.set('__pyodide_input__', editor.getValue())
+    const value = editor.getValue()
+    const match = installMatch.exec(value)
+    if (match) {
+      const installs = value.slice(match.index, match.index + match[0].length)
+        .replace(installPrefix, '')
+        .trim()
+        .split(' ')
+      try {
+        const micropip = pyodide.pyimport('micropip.install')
+        await micropip(installs)
+        pyodide.globals.set("content", value.slice(match.index + match[0].length))
+      } catch (err) {
+        pyodide.globals.set("content", value)
+      } // eslint-disable-line no-empty
+    } else {
+      pyodide.globals.set('content', value)
+    }
     pyodide.globals.set("id_num", currentID)
     pyodide.globals.set("action", "playground")
     pyodide.globals.set("session_id", session)
@@ -122,7 +143,23 @@ ${content}
     if (main.getAttribute('livecode')) {
       main.removeAttribute('livecode')
     }
-    pyodide.globals.set("content", text)
+    const match = installMdMatch.exec(text)
+    if (match) {
+      const installs = text.slice(match.index, match.index + match[0].length)
+        .replace(installMdPrefix, '')
+        .replace(installMdPost, '')
+        .trim()
+        .split(' ')
+      try {
+        const micropip = pyodide.pyimport('micropip.install')
+        await micropip(installs)
+        pyodide.globals.set("content", text.slice(match.index + match[0].length))
+      } catch (err) {
+        pyodide.globals.set("content", text)
+      } // eslint-disable-line no-empty
+    } else {
+      pyodide.globals.set("content", text)
+    }
     pyodide.globals.set("action", "notebook")
     pyodide.globals.set('SESSIONS', null)
     await pyodide.runPythonAsync(pycode)

docs/src/mkdocs.yml

@@ -314,7 +314,7 @@ extra_css:
 extra_javascript:
   - https://cdn.jsdelivr.net/npm/ace-builds@1.39.0/src-min-noconflict/ace.js
   - https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.min.js
-  - playground-config-e202a72e.js
+  - playground-config-848efbd0.js
   - https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js
   - assets/coloraide-extras/extra-notebook.js
 

docs/src/py/notebook.py

@@ -933,7 +933,7 @@ def render_console(*args, **kwargs):
         results = document.getElementById("__playground-results_{}".format(globals()['id_num']))
         footer = document.querySelector("#__playground_{} .gamut".format(globals()['id_num']))
         session = globals()['session_id']
-        result = live_color_command_formatter(LIVE_INIT, gamut)(globals()['__pyodide_input__'], session=session)
+        result = live_color_command_formatter(LIVE_INIT, gamut)(globals()['content'], session=session)
         temp = document.createElement('div')
         temp.innerHTML = result
 

docs/theme/assets/coloraide-extras/extra-notebook-B6JHkVzQ.js

@@ -0,0 +1,5 @@
+var colorNotebook = {
+    "playgroundWheels": ['micropip', 'pygments-2.19.1-py3-none-any.whl', 'coloraide-4.2.1-py3-none-any.whl'],
+    "notebookWheels": ['pyyaml', 'Markdown-3.7-py3-none-any.whl', 'pymdown_extensions-10.14.1-py3-none-any.whl', 'micropip', 'pygments-2.19.1-py3-none-any.whl', 'coloraide-4.2.1-py3-none-any.whl'],
+    "defaultPlayground": "import coloraide\ncoloraide.__version__\nColor('red')"
+}

docs/theme/assets/coloraide-extras/extra-notebook-B6JHkVzQ.js.map

@@ -314,9 +314,9 @@ extra_css:
 extra_javascript:
   - https://cdn.jsdelivr.net/npm/ace-builds@1.39.0/src-min-noconflict/ace.js
   - https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.min.js
-  - playground-config-e202a72e.js
+  - playground-config-848efbd0.js
   - https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js
-  - assets/coloraide-extras/extra-notebook-B6JHkVzQ.js
+  - assets/coloraide-extras/extra-notebook-BuQ8qEc0.js
 
 extra:
   social: