node build

index.ts

@@ -1 +1,3 @@
+import './src/env/browser';
+
 export * as default from './fabric';

node.ts

@@ -0,0 +1,3 @@
+import './src/env/node';
+
+export * as default from './fabric';

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",

rollup.config.mjs

@@ -26,7 +26,6 @@ export default [
           }
         : null,
     ],
-    // see list of plugins (not comprehensive): https://github.com/rollup/awesome
     plugins: [
       json(),
       ts({
@@ -49,7 +48,36 @@ export default [
         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',
+      }),
+    ],
+  },
+  {
+    input: ['./node.ts'],
+    output: [
+      {
+        file: './dist/fabric.node.js',
+        name: 'fabric',
+        format: 'umd',
+        sourcemap: true,
+      },
+      Number(process.env.MINIFY)
+        ? {
+            file: './dist/fabric.node.min.js',
+            name: 'fabric',
+            format: 'umd',
+            plugins: [terser()],
+          }
+        : null,
+    ],
     plugins: [
       json(),
       ts({

src/env/browser.ts

@@ -0,0 +1,31 @@
+/* eslint-disable no-restricted-globals */
+import { setEnv } from '.';
+import { config } from '../config';
+import { TCopyPasteData, TFabricEnv } from './types';
+
+const copyPasteData: TCopyPasteData = {};
+
+const fabricDocument =
+  document instanceof
+  (typeof HTMLDocument !== 'undefined' ? HTMLDocument : Document)
+    ? document
+    : document.implementation.createHTMLDocument('');
+
+config.configure({
+  devicePixelRatio: window.devicePixelRatio || 1,
+});
+
+export const getEnv = (): TFabricEnv => {
+  return {
+    document: fabricDocument,
+    window,
+    isTouchSupported:
+      'ontouchstart' in window ||
+      'ontouchstart' in fabricDocument ||
+      (window && window.navigator && window.navigator.maxTouchPoints > 0),
+    isLikelyNode: false,
+    copyPasteData,
+  };
+};
+
+setEnv(getEnv());

src/env/index.ts

@@ -0,0 +1,18 @@
+import { TFabricEnv } from './types';
+
+let env: TFabricEnv;
+
+export const setEnv = (value: TFabricEnv) => {
+  env = value;
+};
+
+export const getEnv = () => env;
+
+export const getDocument = (): Document => env.document;
+
+export const getWindow = (): Window => env.window;
+
+export const setEnvForTests = (window: Window) => {
+  env.document = window.document;
+  env.window = window;
+};

src/env/node.ts

@@ -0,0 +1,49 @@
+/* eslint-disable no-restricted-globals */
+import { JSDOM } from 'jsdom';
+import { implForWrapper as jsdomImplForWrapper } from 'jsdom/lib/jsdom/living/generated/utils';
+import { Canvas as nodeCanvas } from 'jsdom/lib/jsdom/utils';
+import { config } from '../config';
+import { setEnv } from './index';
+import { TCopyPasteData, TFabricEnv } from './types';
+
+const copyPasteData: TCopyPasteData = {};
+
+const virtualWindow = new JSDOM(
+  decodeURIComponent(
+    '%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'
+  ),
+  {
+    features: {
+      FetchExternalResources: ['img'],
+    },
+    resources: 'usable',
+  }
+).window;
+
+const fabricDocument = virtualWindow.document;
+const fabricWindow = virtualWindow;
+
+const isTouchSupported =
+  'ontouchstart' in fabricWindow ||
+  'ontouchstart' in fabricDocument ||
+  (fabricWindow &&
+    fabricWindow.navigator &&
+    fabricWindow.navigator.maxTouchPoints > 0);
+
+config.configure({
+  devicePixelRatio: fabricWindow.devicePixelRatio || 1,
+});
+
+export const getEnv = (): TFabricEnv => {
+  return {
+    document: fabricDocument,
+    window: fabricWindow,
+    isTouchSupported,
+    isLikelyNode: true,
+    nodeCanvas,
+    jsdomImplForWrapper,
+    copyPasteData,
+  };
+};
+
+setEnv(getEnv());

src/env/types.ts

@@ -0,0 +1,15 @@
+import { Canvas } from 'canvas';
+
+export type TCopyPasteData = {
+  copiedText?: string;
+  copiedStyle?: Record<string, string>;
+};
+export type TFabricEnv = {
+  document: Document;
+  window: Window;
+  isTouchSupported: boolean;
+  isLikelyNode: boolean;
+  nodeCanvas?: Canvas;
+  jsdomImplForWrapper?: any;
+  copyPasteData: TCopyPasteData;
+};