Automatically install Node via pnpm self-install

Processes via ProcessBuilder need to run inside an interactive shell to
access necessary env variables; how to make that OS agnostic?

Author: stephanmax

p5js/js/package.json

@@ -6,7 +6,7 @@
     "electron": "^37.4.0"
   },
   "dependencies": {
-    "p5": "^2.0.5",
+    "p5": "^1.11.10",
     "p5.sound": "^0.2.0"
   }
 }

p5js/js/renderer.js

@@ -21,6 +21,7 @@ const sendToMainHandler = {
 console = new Proxy(console, sendToMainHandler);
 
 // TODO: move error handling logic to Kotlin
+// TODO: Let p5.js FES do the error parsing?
 addEventListener("error", ({ message, filename, lineno, colno}) => {
     pde.sendMessage(
         ["error", message, path.basename(filename), lineno, colno].join("|")

p5js/library/install.sh

@@ -0,0 +1,110 @@
+#!/bin/sh
+
+# From https://github.com/Homebrew/install/blob/master/install.sh
+abort() {
+  printf "%s\n" "$@"
+  exit 1
+}
+
+# string formatters
+if [ -t 1 ]; then
+  tty_escape() { printf "\033[%sm" "$1"; }
+else
+  tty_escape() { :; }
+fi
+tty_mkbold() { tty_escape "1;$1"; }
+tty_blue="$(tty_mkbold 34)"
+tty_bold="$(tty_mkbold 39)"
+tty_reset="$(tty_escape 0)"
+
+ohai() {
+  printf "${tty_blue}==>${tty_bold} %s${tty_reset}\n" "$1"
+}
+
+# End from https://github.com/Homebrew/install/blob/master/install.sh
+
+download() {
+  if command -v curl > /dev/null 2>&1; then
+    curl -fsSL "$1"
+  else
+    wget -qO- "$1"
+  fi
+}
+
+is_glibc_compatible() {
+  getconf GNU_LIBC_VERSION >/dev/null 2>&1 || ldd --version >/dev/null 2>&1 || return 1
+}
+
+detect_platform() {
+  local platform
+  platform="$(uname -s | tr '[:upper:]' '[:lower:]')"
+
+  case "${platform}" in
+    linux)
+      if is_glibc_compatible; then
+        platform="linux"
+      else
+        platform="linuxstatic"
+      fi
+      ;;
+    darwin) platform="macos" ;;
+    windows) platform="win" ;;
+    mingw*) platform="win" ;;
+  esac
+
+  printf '%s' "${platform}"
+}
+
+detect_arch() {
+  local arch
+  arch="$(uname -m | tr '[:upper:]' '[:lower:]')"
+
+  case "${arch}" in
+    x86_64 | amd64) arch="x64" ;;
+    armv*) arch="arm" ;;
+    arm64 | aarch64) arch="arm64" ;;
+  esac
+
+  # `uname -m` in some cases mis-reports 32-bit OS as 64-bit, so double check
+  if [ "${arch}" = "x64" ] && [ "$(getconf LONG_BIT)" -eq 32 ]; then
+    arch=i686
+  elif [ "${arch}" = "arm64" ] && [ "$(getconf LONG_BIT)" -eq 32 ]; then
+    arch=arm
+  fi
+
+  case "$arch" in
+    x64*) ;;
+    arm64*) ;;
+    *) return 1
+  esac
+  printf '%s' "${arch}"
+}
+
+download_and_install() {
+  local platform arch version_json version archive_url tmp_dir
+  platform="$(detect_platform)"
+  arch="$(detect_arch)" || abort "Sorry! pnpm currently only provides pre-built binaries for x86_64/arm64 architectures."
+  if [ -z "${PNPM_VERSION}" ]; then
+    version_json="$(download "https://registry.npmjs.org/@pnpm/exe")" || abort "Download Error!"
+    version="$(echo "$version_json" | grep -o '"latest":[[:space:]]*"[0-9.]*"' | grep -o '[0-9.]*')"
+  else
+    version="${PNPM_VERSION}"
+  fi
+
+  archive_url="https://github.com/pnpm/pnpm/releases/download/v${version}/pnpm-${platform}-${arch}"
+  if [ "${platform}" = "win" ]; then
+    archive_url="${archive_url}.exe"
+  fi
+
+  # install to PNPM_HOME, defaulting to ~/.pnpm
+  tmp_dir="$(mktemp -d)" || abort "Tmpdir Error!"
+  trap 'rm -rf "$tmp_dir"' EXIT INT TERM HUP
+
+  ohai "Downloading pnpm binaries ${version}"
+  # download the binary to the specified directory
+  download "$archive_url" > "$tmp_dir/pnpm"  || return 1
+  chmod +x "$tmp_dir/pnpm"
+  SHELL="$SHELL" "$tmp_dir/pnpm" setup --force || return 1
+}
+
+download_and_install || abort "Install Error!"

p5js/src/main/kotlin/p5jsEditor.kt

@@ -34,6 +34,7 @@ import processing.app.ui.EditorToolbar
 import processing.app.ui.theme.ProcessingTheme
 import java.io.BufferedReader
 import java.io.File
+import java.io.IOException
 import java.io.InputStreamReader
 import java.net.URL
 import javax.swing.JMenu
@@ -42,6 +43,7 @@ import javax.swing.JMenu
 class p5jsEditor(base: Base, path: String?, state: EditorState?, mode: Mode?): Editor(base, path, state, mode) {
 
     val scope = CoroutineScope(Dispatchers.Default)
+
     init {
         scope.launch {
             val folder = sketch.folder
@@ -71,18 +73,33 @@ class p5jsEditor(base: Base, path: String?, state: EditorState?, mode: Mode?): E
 
                   <body>
                     <script src="renderer.js"></script>
-                    <script src="./node_modules/p5/lib/p5.min.js"></script>
-                    <script src="./node_modules/p5.sound/dist/p5.sound.min.js"></script>
+                    <script src="./node_modules/p5/lib/p5.js"></script>
+                    <script src="./node_modules/p5.sound/dist/p5.sound.js"></script>
                     <script src="$name.js"></script>
                   </body>
                 </html>
             """.trimIndent()
             File("$folder/index.html").writeText(indexHtml)
 
-            // TODO: Install `pnpm` automatically, stand-alone, and use as Node manager
-            runNpmActions(folder, TYPE.npm, listOf("install", "-g", "pnpm"))
+            // TODO: refactor into functions
+            // Check whether `pnpm` is already installed; horrible code—my apologies!
+            // TODO: Make more robust, cross-platform, etc. Only job for now is to get a PDEX file out that works on MacOS
+            statusNotice("Looking for pnpm…")
+            try {
+                // TODO: Only an interactive shell allows me access to pnpm
+                runCommand("/bin/bash", listOf("-ci", "pnpm -v"))
+            }
+            catch (e: Exception) {
+                statusNotice("pnpm not found. Installing pnpm…")
+                runCommand("/bin/bash", listOf("-ci", "${mode?.folder}/install.sh"))
+
+                statusNotice("Installing Node via pnpm…")
+                runCommand("/bin/bash", listOf("-ci", "pnpm env use --global lts"))
+            }
+
+            statusNotice("")
             // --dangerously-allow-all-builds allows electron in particular to install properly
-            runNpmActions(folder, TYPE.pnpm, listOf("install", "--dangerously-allow-all-builds"))
+            runCommand("/bin/bash", listOf("-ci", "pnpm install --dangerously-allow-all-builds"))
         }
     }
 
@@ -126,9 +143,9 @@ class p5jsEditor(base: Base, path: String?, state: EditorState?, mode: Mode?): E
         processes.forEach { it.destroy() }
     }
 
-
     override fun deactivateRun() {
         processes.forEach { it.destroy() }
+        toolbar.deactivateRun()
     }
 
     override fun createFooter(): EditorFooter {
@@ -170,7 +187,7 @@ class p5jsEditor(base: Base, path: String?, state: EditorState?, mode: Mode?): E
                             Button(onClick = {
                                 if (packageToInstall.isNotBlank()) {
                                     // TODO Better error handling
-                                    runNpmActions(sketch.folder, TYPE.pnpm, listOf("add", packageToInstall, "--dangerously-allow-all-builds"))
+                                    runCommand("pnpm", listOf("add", packageToInstall, "--dangerously-allow-all-builds"))
                                     packageToInstall = ""
                                 }
                             }) {
@@ -192,25 +209,22 @@ class p5jsEditor(base: Base, path: String?, state: EditorState?, mode: Mode?): E
         return footer
     }
 
-    enum class TYPE{
-        npm, pnpm, npx
-    }
-
     private fun filenameToCodeIndex(filename: String) {
 
     }
 
+    // TODO: state is maintained => turn into class
     val processes = mutableListOf<Process>()
-    fun runNpmActions(directory: File, type: TYPE, actions: List<String>, onFinished: () -> Unit = {}) {
+    fun runCommand(type: String, actions: List<String>, directory: File = sketch.folder, onFinished: () -> Unit = {}) {
         // Wait for previous processes to finish
         processes.forEach { it.waitFor() }
 
         val processBuilder = ProcessBuilder()
         // Set the command based on the operating system
         val command = if (System.getProperty("os.name").lowercase().contains("windows")) {
-            listOf("cmd", "/c", type.name , *actions.toTypedArray())
+            listOf("cmd", "/c", type, *actions.toTypedArray())
         } else {
-            listOf(type.name, *actions.toTypedArray())
+            listOf(type, *actions.toTypedArray())
         }
 
         processBuilder.command(command)
@@ -227,7 +241,7 @@ class p5jsEditor(base: Base, path: String?, state: EditorState?, mode: Mode?): E
             while (reader.readLine().also { line = it } != null) {
                 // TODO: so much refactoring!
                 // Only check for errors when running the sketch
-                if (type == TYPE.npx && line.startsWith("error")) {
+                if (actions[1].startsWith("npx") && line.startsWith("error")) {
                     // TODO: more robust data exchange, double-check with @Stef
                     // TODO: `statusError` does not do anything with column of a SketchException
                     val ( msgType, msgText, msgFile, msgLine, msgCol ) = line.split("|")

p5js/src/main/kotlin/p5jsEditorToolbar.kt

@@ -1,6 +1,7 @@
 package processing.p5js
 
 import kotlinx.coroutines.launch
+import processing.app.Messages
 import processing.app.ui.Editor
 import processing.app.ui.EditorToolbar
 
@@ -12,15 +13,15 @@ class p5jsEditorToolbar(editor: p5jsEditor?) : EditorToolbar(editor) {
             editor.sketch.save()
 
             runButton.setSelected(true)
-            editor.runNpmActions(editor.sketch.folder, p5jsEditor.TYPE.npx, listOf("electron", ".")){
+            editor.runCommand("/bin/bash", listOf("-ci", "npx electron .")) {
                 runButton.setSelected(false)
             }
-
         }
     }
 
     override fun handleStop() {
         val editor = editor as p5jsEditor
         editor.processes.forEach { it.destroy() }
+        deactivateRun()
     }
 }