Organize JS scaffolding, add packages via UI

- Put JavaScript into dedicated project folder and use Gradle to copy it
  into resources to use for new p5.js sketches
- First iteration of Compose UI to add packages from npm registry via
  pnpm

Author: stephanmax

app/build.gradle.kts

@@ -429,7 +429,7 @@ tasks.register("includeProcessingResources"){
         "includeJavaMode",
         "includeSharedAssets",
         "includeProcessingExamples",
-        "includeProcessingWebsiteExamples",
+//        "includeProcessingWebsiteExamples",
         "includeJavaModeResources",
         "renameWindres"
     )

app/src/processing/app/Base.java

@@ -100,6 +100,7 @@ public class Base {
 
   /** Only one built-in Mode these days, removing the extra fluff. */
   private Mode coreMode;
+  private Mode p5jsMode;
 
   // TODO can these be Set objects, or are they expected to be in order?
   private List<ModeContribution> contribModes;
@@ -755,6 +756,7 @@ public void tallyUpdatesAvailable() {
   public List<Mode> getModeList() {
     List<Mode> outgoing = new ArrayList<>();
     outgoing.add(coreMode);
+    outgoing.add(p5jsMode);
     if (contribModes != null) {
       for (ModeContribution contrib : contribModes) {
         outgoing.add(contrib.getMode());
@@ -765,19 +767,25 @@ public List<Mode> getModeList() {
 
 
   void buildCoreModes() {
-    ModeContribution javaModeContrib =
-      ModeContribution.load(this, Platform.getContentFile("modes/java"),
-                            getDefaultModeIdentifier());
+    ModeContribution javaModeContrib = ModeContribution.load(this, Platform.getContentFile("modes/java"), getDefaultModeIdentifier());
+    ModeContribution p5jsModeContrib = ModeContribution.load(this, Platform.getContentFile("modes/p5js"), "processing.p5js.p5js");
     if (javaModeContrib == null) {
       Messages.showError("Startup Error",
-                "Could not load Java Mode, please reinstall Processing.",
-                         new Exception("ModeContribution.load() was null"));
+              "Could not load Java Mode, please reinstall Processing.",
+              new Exception("ModeContribution.load() was null"));
 
     } else {
       // PDE X calls getModeList() while it's loading, so coreModes must be set
       //coreModes = new Mode[] { javaModeContrib.getMode() };
       coreMode = javaModeContrib.getMode();
     }
+    if (p5jsModeContrib == null) {
+      Messages.showError("Startup Error",
+              "Could not load p5.js Mode, please reinstall Processing.",
+              new Exception("ModeContribution.load() was null"));
+    } else {
+      p5jsMode = p5jsModeContrib.getMode();
+    }
   }
 
 

p5js/build.gradle.kts

@@ -1,10 +1,11 @@
 plugins {
-    kotlin("jvm") version "2.0.20"
+    kotlin("jvm") version libs.versions.kotlin
     kotlin("plugin.serialization") version "1.9.0"
-}
 
-group = "org.processing"
-version = "1.0-SNAPSHOT"
+    // TODO Unclear whether the whole Compose dependency is necessary
+    alias(libs.plugins.compose.compiler)
+    alias(libs.plugins.jetbrainsCompose)
+}
 
 repositories {
     mavenCentral()
@@ -13,62 +14,49 @@ repositories {
 }
 
 dependencies {
-//    compileOnly(files("/Applications/Processing.app/Contents/Java/pde.jar/**/"))
+    compileOnly(project(":app"))
     implementation(project(":core"))
-    implementation(project(":app"))
 
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
     implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1")
 
-    testImplementation(kotlin("test"))
+    implementation(compose.runtime)
+    implementation(compose.foundation)
+    implementation(compose.material)
+    implementation(compose.ui)
+    implementation(compose.components.resources)
+    implementation(compose.components.uiToolingPreview)
 }
 
-project(":app").tasks.named("run").configure {
-    dependsOn(tasks.named("installLibrary"))
-}
-tasks.create<Copy>("copyJars") {
-    group = "processing"
-    dependsOn(tasks.jar)
-    from(layout.buildDirectory.dir("libs")){
-        include("**/*.jar")
+tasks.register<Copy>("createMode") {
+    dependsOn("jar")
+    into(layout.buildDirectory.dir("mode"))
+    // TODO Why is there a duplicate in the first place?
+    duplicatesStrategy = DuplicatesStrategy.WARN
+
+    from(layout.projectDirectory.dir("library")) {
+        include ("**")
+    }
+
+    from(layout.projectDirectory) {
+        include("js/**")
+    }
+
+    from(configurations.runtimeClasspath) {
+        into("mode")
+    }
+
+    from(tasks.jar) {
+        into("mode")
     }
-    from(configurations.compileClasspath)
-    into(layout.buildDirectory.dir("library/mode"))
-    duplicatesStrategy = DuplicatesStrategy.INCLUDE
-}
-tasks.create<Copy>("createLibrary") {
-    group = "processing"
-    from("library")
-    into(layout.buildDirectory.dir("library"))
-}
-tasks.create<Copy>("installLibrary") {
-    group = "processing"
-    dependsOn(tasks.named("createLibrary"))
-    dependsOn(tasks.named("copyJars"))
-    from(layout.buildDirectory.dir("library"))
-    into("${System.getProperty("user.home")}/sketchbook/modes/p5js")
-}
-//tasks.register<JavaExec>("runProcessing") {
-//    dependsOn(tasks.named("installLibrary"))
-//    group = "processing"
-//    classpath = files(fileTree("/Applications/Processing.app/Contents/Java/"){
-//        include("*.jar")
-//    })
-//    mainClass.set("processing.app.Base")  // Your main class
-//
-//    // Optional: Add arguments if needed
-//    args = listOf("")
-//
-//    // Optional: Add JVM arguments if needed
-//    jvmArgs = listOf("-Xmx2g")
-//}
-tasks.jar {
-    archiveVersion.set("")
-    archiveBaseName.set("p5js")
 }
-tasks.test {
-    useJUnitPlatform()
+
+tasks.register<Copy>("includeMode") {
+    dependsOn("createMode")
+    from(tasks.named("createMode"))
+    into(project(":app").layout.buildDirectory.dir("resources-bundled/common/modes/p5js"))
 }
-kotlin {
-    jvmToolchain(17)
+
+project(":app").tasks.named("includeProcessingResources").configure {
+    dependsOn(tasks.named("includeMode"))
 }

p5js/js/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>
+    <meta charset="utf-8" />
+    <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+    }
+    canvas {
+      display: block;
+    }
+    </style>
+  </head>
+
+  <body>
+    <script src="./renderer.js"></script>
+    <script src="${packageJson.sketch}"></script>
+  </body>
+</html>

p5js/js/main.js

@@ -0,0 +1,41 @@
+const path = require('node:path');
+const { app, BrowserWindow, globalShortcut, ipcMain } = require('electron');
+
+const createWindow = () => {
+  const win = new BrowserWindow({
+    width: 400,
+    height: 400,
+    useContentSize: true,
+    autoHideMenuBar: true,
+    alwaysOnTop: true,
+    webPreferences: {
+      nodeIntegration: true,
+      preload: path.join(__dirname, "preload.js")
+    }
+  });
+
+  win.loadFile('index.html');
+
+  // Register the 'Escape' key shortcut
+  globalShortcut.register('Escape', () => {
+    win.close();
+  });
+
+  // Unregister the shortcut when window is closed
+  win.on('closed', () => {
+    globalShortcut.unregister('Escape');
+  });
+}
+
+app.on('window-all-closed', () => {
+  // Unregister all shortcuts when app is closing
+  globalShortcut.unregisterAll();
+  app.quit();
+});
+
+app.whenReady().then(() => {
+  ipcMain.on("send-message", (event, message) => {
+    console.log(message);
+  });
+  createWindow();
+});

p5js/js/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "p5js-mode-scaffold",
+  "version": "0.1.0",
+  "main": "main.js",
+  "devDependencies": {
+    "electron": "^37.4.0"
+  }
+}