P5js mode

.github/workflows/release-p5-mode.yml

@@ -0,0 +1,55 @@
+name: Release p5.js Mode
+on:
+  workflow_dispatch:
+    inputs:
+      version_number:
+        description: "What is the revision number?"
+        required: true
+      version_pretty:
+        description: "What is the pretty version name?"
+        required: true
+
+jobs:
+  release:
+    name: Release p5.js Mode
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      - name: Install Java
+        uses: actions/setup-java@v4
+        with:
+          distribution: 'temurin'
+          java-version: '17.0.8'
+      - name: Setup Gradle
+        uses: gradle/actions/setup-gradle@v4
+      - name: Build with Gradle
+        run: ./gradlew createPdex createZip
+
+      - name: Set Version Number
+        run: |
+          VERSION_NUMBER=${{ github.event.inputs.version_number }}
+          VERSION_PRETTY=${{ github.event.inputs.version_pretty }}
+          sed -i "s/^version=.*$/version=$VERSION_NUMBER/" p5js/mode/mode.properties
+          sed -i "s/^prettyVersion=.*$/prettyVersion=$VERSION_PRETTY/" p5js/mode/mode.properties
+
+      - name: Upload to Release
+        uses: svenstaro/upload-release-action@v2
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: p5js/build/p5js.*
+          tag: p5js-v${{ github.event.inputs.version_number }}
+          file_glob: true
+          overwrite: true
+
+      - name: Upload Properties to Release
+        uses: svenstaro/upload-release-action@v2
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: p5js/build/mode/mode.properties
+          asset_name: p5js.txt
+          tag: p5js-v${{ github.event.inputs.version_number }}
+          overwrite: true
+

app/build.gradle.kts

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

app/src/processing/app/Base.java

@@ -110,6 +110,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;
@@ -729,6 +730,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());
@@ -739,19 +741,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/README.md

@@ -0,0 +1,40 @@
+# p5.js Mode
+
+## Installation
+
+(Tested with Processing 4.4.7 on MacOS Monterey 12.7.6)
+
+Install the mode by double-clicking the released `.pdex` file. After Processing has started up, hit "Yes" on the opening dialog, and let the mode get installed into your Processing sketchbook folder. Currently, you need to restart Processing to have the new p5.js mode show up in the mode dropdown. (This will be looked into for the September release candiate that will be published until September 30 end of day.)
+
+After restarting Processing, choose “p5.js” from the mode dropdown. If `pnpm` is not found on your system, Processing will automatically install it and the LTS Node version. The status bar in the PDE will tell you once it is ready for you to code on your sketch.
+
+## Demo
+
+https://github.com/user-attachments/assets/f934430d-a71c-4995-8e20-92471e400013
+
+## Features
+
+- Auto-install of `pnpm`, Node, and all dependencies for running p5.js code inside the PDE
+- Error reporting
+- [Syntax highlighting](https://github.com/stephanmax/processing4/wiki/Syntax-Highlighting)
+- Installing `npm` dependencies
+
+## Known Issues/ToDos
+
+- Installation
+  - Prepare and test `.pdex` for Windows
+- Editor UI/UX
+  - Better information in the status bar (`pnpm` version, remove status messages in due time)
+  - More stability around processes/coroutines (repeatedly pressing Run button should simplu restart the sketch)
+  - Better/responsive npm (de-)install UI
+  - Mode options
+  - Start sketch in correct dimensions
+  - Update `index.html` if sketch files are changed
+  - Button to open dev tools in Electron
+  - Hiding non-sketch files from tabs
+  - Ignore `node_modules` when saving/exporting
+- Error handling
+  - Run linter for error messaging without having to run the sketch
+  - Remove error messaging when error is fixed
+- Features
+  - Stand-alone app export