Fixes for server side usage

.github/workflows/ci-lint.yml

@@ -14,10 +14,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 20.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v1
         with:
-          node-version: 20.x
+          node-version: 22.x
       - name: Get node modules
         run: npm ci
         env:

.github/workflows/ci-test.yml

@@ -24,10 +24,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Use Node.js 20.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
 
       - name: Verify Chrome (Ubuntu)
         if: matrix.os == 'ubuntu-latest' && matrix.browser == 'chrome'

.github/workflows/release-workflow-v2.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 22
       - name: Get semver info
         id: semver
         uses: akshens/semver-tag@v4

.github/workflows/release-workflow.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 22
       - name: Get semver info
         id: semver
         uses: akshens/semver-tag@v4

package.json

@@ -1,6 +1,7 @@
 {
   "name": "p5",
   "repository": "processing/p5.js",
+  "type": "module",
   "scripts": {
     "build": "rollup -c",
     "dev": "vite preview/",
@@ -21,7 +22,7 @@
   },
   "version": "2.2.0-rc.3",
   "dependencies": {
-    "@davepagurek/bezier-path": "^0.0.2",
+    "@davepagurek/bezier-path": "^0.0.7",
     "@japont/unicode-range": "^1.0.0",
     "acorn": "^8.12.1",
     "acorn-walk": "^8.3.4",
@@ -79,6 +80,10 @@
       "types": "./types/global.d.ts",
       "default": "./dist/app.js"
     },
+    "./node": {
+      "types": "./types/p5.d.ts",
+      "default": "./dist/app.node.js"
+    },
     "./core": {
       "default": "./dist/core/main.js"
     },

rollup.config.mjs

@@ -193,7 +193,7 @@ export default [
       format: 'es',
       dir: 'dist'
     },
-    external: /node_modules/,
+    external: /node_modules\/(?!gifenc)/,
     plugins
   },
   ...generateModuleBuild()

src/app.node.js

@@ -0,0 +1,60 @@
+// core
+import p5 from './core/main';
+
+// shape
+import shape from './shape';
+shape(p5);
+
+//accessibility
+import accessibility from './accessibility';
+accessibility(p5);
+
+// color
+import color from './color';
+color(p5);
+
+// core
+// currently, it only contains the test for parameter validation
+// import friendlyErrors from './core/friendly_errors';
+// friendlyErrors(p5);
+
+// data
+import data from './data';
+data(p5);
+
+// DOM
+import dom from './dom';
+dom(p5);
+
+// image
+import image from './image';
+image(p5);
+
+// io
+import io from './io';
+io(p5);
+
+// math
+import math from './math';
+math(p5);
+
+// utilities
+import utilities from './utilities';
+utilities(p5);
+
+// webgl
+import webgl from './webgl';
+webgl(p5);
+
+// typography
+import type from './type';
+type(p5);
+
+// Shaders + filters
+import shader from './webgl/p5.Shader';
+p5.registerAddon(shader);
+import strands from './strands/p5.strands';
+p5.registerAddon(strands);
+
+export default p5;
+

src/core/environment.js

@@ -11,24 +11,27 @@ import * as C from './constants';
 
 function environment(p5, fn, lifecycles){
   const standardCursors = [C.ARROW, C.CROSS, C.HAND, C.MOVE, C.TEXT, C.WAIT];
+  const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
 
   fn._frameRate = 0;
-  fn._lastFrameTime = window.performance.now();
+  fn._lastFrameTime = globalThis.performance.now();
   fn._targetFrameRate = 60;
 
-  const _windowPrint = window.print;
+  const windowPrint = isBrowser ? window.print : null;
   let windowPrintDisabled = false;
 
   lifecycles.presetup = function(){
     const events = [
       'resize'
     ];
 
-    for(const event of events){
-      window.addEventListener(event, this[`_on${event}`].bind(this), {
-        passive: false,
-        signal: this._removeSignal
-      });
+    if(isBrowser){
+      for(const event of events){
+        window.addEventListener(event, this[`_on${event}`].bind(this), {
+          passive: false,
+          signal: this._removeSignal
+        });
+      }
     }
   };
 
@@ -64,9 +67,9 @@ function environment(p5, fn, lifecycles){
    * </div>
    */
   fn.print = function(...args) {
-    if (!args.length) {
+    if (!args.length && windowPrint !== null) {
       if (!windowPrintDisabled) {
-        _windowPrint();
+        windowPrint();
         if (
           window.confirm(
             'You just tried to print the webpage. Do you want to prevent this from running again?'
@@ -218,7 +221,7 @@ function environment(p5, fn, lifecycles){
    * </code>
    * </div>
    */
-  fn.focused = document.hasFocus();
+  fn.focused = isBrowser ? document.hasFocus() : true;
 
   /**
    * Changes the cursor's appearance.
@@ -628,7 +631,7 @@ function environment(p5, fn, lifecycles){
    * @alt
    * This example does not render anything.
    */
-  fn.displayWidth = screen.width;
+  fn.displayWidth = isBrowser ? window.screen.width : 0;
 
   /**
    * A `Number` variable that stores the height of the screen display.
@@ -659,7 +662,7 @@ function environment(p5, fn, lifecycles){
    * @alt
    * This example does not render anything.
    */
-  fn.displayHeight = screen.height;
+  fn.displayHeight = isBrowser ? window.screen.height : 0;
 
   /**
    * A `Number` variable that stores the width of the browser's viewport.
@@ -794,21 +797,11 @@ function environment(p5, fn, lifecycles){
   };
 
   function getWindowWidth() {
-    return (
-      window.innerWidth ||
-      (document.documentElement && document.documentElement.clientWidth) ||
-      (document.body && document.body.clientWidth) ||
-      0
-    );
+    return isBrowser ? document.documentElement.clientWidth : 0;
   }
 
   function getWindowHeight() {
-    return (
-      window.innerHeight ||
-      (document.documentElement && document.documentElement.clientHeight) ||
-      (document.body && document.body.clientHeight) ||
-      0
-    );
+    return isBrowser ? document.documentElement.clientHeight : 0;
   }
 
   /**
@@ -868,7 +861,6 @@ function environment(p5, fn, lifecycles){
    * </div>
    */
   fn.fullscreen = function(val) {
-    // p5._validateParameters('fullscreen', arguments);
     // no arguments, return fullscreen or not
     if (typeof val === 'undefined') {
       return (
@@ -946,7 +938,6 @@ function environment(p5, fn, lifecycles){
    * @returns {Number} current pixel density of the sketch.
    */
   fn.pixelDensity = function(val) {
-    // p5._validateParameters('pixelDensity', arguments);
     let returnValue;
     if (typeof val === 'number') {
       if (val !== this._renderer._pixelDensity) {
@@ -1271,6 +1262,7 @@ function environment(p5, fn, lifecycles){
     const screenPosition = matrix.multiplyAndNormalizePoint(worldPosition);
     return screenPosition;
   };
+
   /**
    * Converts 2D screen coordinates to 3D world coordinates.
    *

src/core/init.js

@@ -13,6 +13,7 @@ import { initialize as initTranslator } from './internationalization';
  * @return {Undefined}
  */
 export const _globalInit = () => {
+  if(typeof window === 'undefined') return;
   // Could have been any property defined within the p5 constructor.
   // If that property is already a part of the global object,
   // this code has already run before, likely due to a duplicate import
@@ -40,17 +41,20 @@ export const _globalInit = () => {
 };
 
 // make a promise that resolves when the document is ready
-export const waitForDocumentReady = () =>
-  new Promise((resolve, reject) => {
-    // if the page is ready, initialize p5 immediately
-    if (document.readyState === 'complete') {
-      resolve();
-      // if the page is still loading, add an event listener
-      // and initialize p5 as soon as it finishes loading
-    } else {
-      window.addEventListener('load', resolve, false);
-    }
-  });
+export const waitForDocumentReady = () =>{
+  if(typeof document !== 'undefined'){
+    return new Promise((resolve, reject) => {
+      // if the page is ready, initialize p5 immediately
+      if (document.readyState === 'complete') {
+        resolve();
+        // if the page is still loading, add an event listener
+        // and initialize p5 as soon as it finishes loading
+      } else {
+        window.addEventListener('load', resolve, false);
+      }
+    });
+  }
+};
 
 // only load translations if we're using the full, un-minified library
 export const waitingForTranslator =