Squashed commit of the following:

commit 90e42df
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 13:59:19 2023 +0200

    fix(): object caching value workaround for SSR

commit 1278696
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 13:58:54 2023 +0200

    ssr test

commit 6761606
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 13:57:38 2023 +0200

    restore jsdom cleanup in static canvas

    due to FabricObject to canvas method

commit 8ad5647
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 13:56:41 2023 +0200

    Update object.js

commit d29352e
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 13:47:36 2023 +0200

    SSR changes

commit c98d6e0
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 13:19:49 2023 +0200

    prepare for SSR

commit bb66394
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 13:05:27 2023 +0200

    Update package.json

commit 4a3d4aa
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 12:04:21 2023 +0200

    Update rollup.config.mjs

commit 74299c3
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 12:01:03 2023 +0200

    cleanup

commit 78bf675
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 11:52:34 2023 +0200

    cleanup

commit c18651c
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 11:47:43 2023 +0200

    node stream methods

commit b7e03ca
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 11:27:39 2023 +0200

    Update rollup.config.mjs

commit 46eb9fd
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 11:26:05 2023 +0200

    working!

commit a1534c4
Author: ShaMan123 <shacharnen@gmail.com>
Date:   Tue Jan 31 10:26:49 2023 +0200

    node build

fabric.ts

@@ -143,7 +143,6 @@ import { isTouchEvent, getPointer } from './src/util/dom_event';
 import {
   // getScrollLeftTop,
   getElementOffset,
-  getNodeCanvas,
   cleanUpJsdomNode,
   makeElementUnselectable,
   makeElementSelectable,
@@ -237,7 +236,6 @@ const util = {
   isTouchEvent,
   getPointer,
   // getScrollLeftTop,
-  getNodeCanvas,
   cleanUpJsdomNode,
   makeElementUnselectable,
   makeElementSelectable,

index.ts

@@ -1 +1 @@
-export * as default from './fabric';
+export * from './fabric';

node.ts

@@ -0,0 +1,23 @@
+import './src/env/node';
+
+import type { Canvas as NodeCanvas, JpegConfig, PngConfig } from 'canvas';
+import { getEnv, StaticCanvas as Canvas } from './fabric';
+import { FabricObject } from './src/shapes/Object/Object';
+
+// TODO: move back to default values when refactoring to method
+FabricObject.prototype.objectCaching = false;
+
+export * from './fabric';
+
+export class StaticCanvas extends Canvas {
+  getNodeCanvas() {
+    const impl = getEnv().jsdomImplForWrapper(this.lowerCanvasEl);
+    return (impl._canvas || impl._image) as NodeCanvas;
+  }
+  createPNGStream(opts?: PngConfig) {
+    return this.getNodeCanvas().createPNGStream(opts);
+  }
+  createJPEGStream(opts?: JpegConfig) {
+    return this.getNodeCanvas().createJPEGStream(opts);
+  }
+}

package.json

@@ -76,6 +76,7 @@
     "@rollup/plugin-terser": "^0.3.0",
     "@rollup/plugin-typescript": "^11.0.0",
     "@types/fs-extra": "^9.0.13",
+    "@types/jsdom": "^20.0.1",
     "@types/lodash": "^4.14.180",
     "@types/node": "^17.0.21",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
@@ -110,7 +111,17 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "module": "./dist/fabric.js",
-  "main": "./dist/fabric.umd.js",
-  "types": "./dist/fabric.d.ts"
+  "module": "./dist/fabric.mjs",
+  "main": "./dist/fabric.cjs",
+  "types": "./dist/fabric.d.ts",
+  "exports": {
+    ".": "./dist/fabric.mjs",
+    "node": "./dist/fabric.node.mjs",
+    "node.mjs": "./dist/fabric.node.mjs",
+    "node.cjs": "./dist/fabric.node.cjs",
+    "default": "./dist/fabric.mjs",
+    "import": "./dist/fabric.mjs",
+    "require": "./dist/fabric.cjs",
+    "types": "./dist/fabric.d.ts"
+  }
 }

rollup.config.mjs

@@ -2,64 +2,78 @@ import json from '@rollup/plugin-json';
 import terser from '@rollup/plugin-terser';
 import ts from '@rollup/plugin-typescript';
 import { babel } from '@rollup/plugin-babel';
+import path from 'path';
 // import dts from "rollup-plugin-dts";
 
 const splitter = /\n|\s|,/g;
 
+const buildOutput = process.env.BUILD_OUTPUT || './dist/fabric.js';
+
+const dirname = path.dirname(buildOutput);
+const basename = path.basename(buildOutput, '.js');
+
+const plugins = [
+  json(),
+  ts({
+    noForceEmit: true,
+    tsconfig: './tsconfig.json',
+  }),
+  babel({
+    extensions: ['.ts', '.js'],
+    babelHelpers: 'bundled',
+  }),
+];
+
 // https://rollupjs.org/guide/en/#configuration-files
 export default [
   {
     input: process.env.BUILD_INPUT?.split(splitter) || ['./index.ts'],
     output: [
       {
-        file: process.env.BUILD_OUTPUT || './dist/fabric.umd.js',
+        file: path.resolve(dirname, `${basename}.mjs`),
+        name: 'fabric',
+        format: 'es',
+        sourcemap: true,
+      },
+      {
+        file: path.resolve(dirname, `${basename}.cjs`),
         name: 'fabric',
         format: 'umd',
         sourcemap: true,
       },
       Number(process.env.MINIFY)
         ? {
-            file: process.env.BUILD_MIN_OUTPUT || './dist/fabric.umd.min.js',
+            file: path.resolve(dirname, `${basename}.min.js`),
             name: 'fabric',
             format: 'umd',
             plugins: [terser()],
           }
         : null,
     ],
-    // see list of plugins (not comprehensive): https://github.com/rollup/awesome
-    plugins: [
-      json(),
-      ts({
-        noForceEmit: true,
-        tsconfig: './tsconfig.json',
-      }),
-      babel({
-        extensions: ['.ts', '.js'],
-        babelHelpers: 'bundled',
-      }),
-    ],
+    plugins,
   },
   {
-    input: process.env.BUILD_INPUT?.split(splitter) || ['./fabric.ts'],
+    input: ['./node.ts'],
     output: [
       {
-        file: process.env.BUILD_OUTPUT || './dist/fabric.js',
+        file: path.resolve(dirname, `${basename}.node.mjs`),
         name: 'fabric',
         format: 'es',
         sourcemap: true,
       },
+      {
+        file: path.resolve(dirname, `${basename}.node.cjs`),
+        name: 'fabric',
+        format: 'cjs',
+        sourcemap: true,
+      },
     ],
-    // see list of plugins (not comprehensive): https://github.com/rollup/awesome
-    plugins: [
-      json(),
-      ts({
-        noForceEmit: true,
-        tsconfig: './tsconfig.json',
-      }),
-      babel({
-        extensions: ['.ts', '.js'],
-        babelHelpers: 'bundled',
-      }),
+    plugins,
+    external: [
+      'jsdom',
+      'jsdom/lib/jsdom/living/generated/utils',
+      'jsdom/lib/jsdom/utils',
+      'canvas',
     ],
   },
 ];

scripts/build.mjs

@@ -32,13 +32,6 @@ export function build({ watch, fast, input, output, stats = false } = {}) {
       MINIFY: Number(!fast),
       BUILD_INPUT: Array.isArray(input) ? input.join(' ') : input,
       BUILD_OUTPUT: output,
-      BUILD_MIN_OUTPUT:
-        output && !fast
-          ? path.resolve(
-              path.dirname(output),
-              `${path.basename(output, '.js')}.min.js`
-            )
-          : undefined,
       BUILD_STATS: Number(stats),
     },
   };

src/canvas/Canvas.ts

@@ -1669,17 +1669,4 @@ export class Canvas extends SelectableCanvas {
     super.destroy();
     this.textEditingManager.dispose();
   }
-
-  /**
-   * Clones canvas instance without cloning existing data.
-   * This essentially copies canvas dimensions since loadFromJSON does not affect canvas size.
-   * @returns {StaticCanvas}
-   */
-  cloneWithoutData(): Canvas {
-    const el = createCanvasElement();
-    el.width = this.width;
-    el.height = this.height;
-    // this seems wrong. either Canvas or StaticCanvas
-    return new Canvas(el);
-  }
 }

src/canvas/SelectableCanvas.ts

@@ -1503,6 +1503,7 @@ export class SelectableCanvas<
     wrapperEl.removeChild(lowerCanvasEl);
     this.contextCache = null;
     this.contextTop = null;
+    // TODO: interactive canvas should NOT be used in node, therefore there is no reason to cleanup node canvas
     cleanUpJsdomNode(upperCanvasEl);
     this.upperCanvasEl = undefined;
     cleanUpJsdomNode(cacheCanvasEl);

src/canvas/StaticCanvas.ts

@@ -25,11 +25,7 @@ import {
   cancelAnimFrame,
   requestAnimFrame,
 } from '../util/animation/AnimationFrameProvider';
-import {
-  cleanUpJsdomNode,
-  getElementOffset,
-  getNodeCanvas,
-} from '../util/dom_misc';
+import { cleanUpJsdomNode, getElementOffset } from '../util/dom_misc';
 import { uid } from '../util/internals/uid';
 import { createCanvasElement, isHTMLCanvas, toDataURL } from '../util/misc/dom';
 import { invertTransform, transformPoint } from '../util/misc/matrix';
@@ -1504,12 +1500,12 @@ export class StaticCanvas<
    * This essentially copies canvas dimensions since loadFromJSON does not affect canvas size.
    * @returns {StaticCanvas}
    */
-  cloneWithoutData(): StaticCanvas {
+  cloneWithoutData(): this {
     const el = createCanvasElement();
     el.width = this.width;
     el.height = this.height;
-    // this seems wrong. either Canvas or StaticCanvas
-    return new StaticCanvas(el);
+    // @ts-expect-error TS doesn't recognize this.constructor
+    return new this.constructor(el);
   }
 
   /**
@@ -1713,20 +1709,3 @@ Object.assign(StaticCanvas.prototype, {
   skipOffscreen: true,
   clipPath: undefined,
 });
-
-if (getEnv().isLikelyNode) {
-  Object.assign(StaticCanvas.prototype, {
-    createPNGStream() {
-      const impl = getNodeCanvas(
-        (this as unknown as StaticCanvas).lowerCanvasEl
-      );
-      return impl && impl.createPNGStream();
-    },
-    createJPEGStream(opts: any) {
-      const impl = getNodeCanvas(
-        (this as unknown as StaticCanvas).lowerCanvasEl
-      );
-      return impl && impl.createJPEGStream(opts);
-    },
-  });
-}