fabric 5.3.0-browser → 6.0.0-beta1

package/package.json

@@ -1,89 +1,143 @@
 {
-	"name": "fabric",
-	"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
-	"homepage": "http://fabricjs.com/",
-	"version": "5.3.0-browser",
-	"author": "Juriy Zaytsev <kangax@gmail.com>",
-	"contributors": [
-		{
-			"name": "Andrea Bogazzi",
-			"email": "andreabogazzi79@gmail.com"
-		},
-		{
-			"name": "Steve Eberhardt",
-			"email": "melchiar2@gmail.com"
-		}
-	],
-	"keywords": [
-		"canvas",
-		"graphic",
-		"graphics",
-		"SVG",
-		"node-canvas",
-		"parser",
-		"HTML5",
-		"object model"
-	],
-	"browser": {
-		"canvas": false,
-		"fs": false,
-		"jsdom": false,
-		"jsdom/lib/jsdom/living/generated/utils": false,
-		"jsdom/lib/jsdom/utils": false,
-		"http": false,
-		"https": false,
-		"xmldom": false,
-		"url": false
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/fabricjs/fabric.js"
-	},
-	"bugs": {
-		"url": "https://github.com/fabricjs/fabric.js/issues"
-	},
-	"license": "MIT",
-	"scripts": {
-		"changelog": "auto-changelog -o change-output.md --unreleased-only",
-		"build": "node build.js modules=ALL requirejs exclude=gestures,accessors,erasing",
-		"build:fast": "node build.js modules=ALL requirejs fast exclude=gestures,accessors,erasing",
-		"build:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm run build_export",
-		"link:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm link",
-		"build_with_gestures": "node build.js modules=ALL exclude=accessors",
-		"build_export": "npm run build:fast && npm run export_dist_to_site",
-		"test:single": "qunit test/node_test_setup.js test/lib",
-		"test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit",
-		"test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
-		"coverage:report": "nyc report --reporter=lcov --reporter=text",
-		"test": "qunit --require ./test/node_test_setup.js test/lib test/unit",
-		"test:visual": "qunit test/node_test_setup.js test/lib test/visual",
-		"test:visual:single": "qunit test/node_test_setup.js test/lib",
-		"test:all": "npm run test && npm run test:visual",
-		"lint": "eslint --config .eslintrc.json src",
-		"lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
-		"export_gesture_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric_with_gestures.js",
-		"export_dist_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric.js && cp package.json ../fabricjs.com/lib/package.json && cp -r src HEADER.js lib ../fabricjs.com/build/files/",
-		"export_tests_to_site": "cp test/unit/*.js ../fabricjs.com/test/unit && cp -r test/visual/* ../fabricjs.com/test/visual && cp -r test/fixtures/* ../fabricjs.com/test/fixtures && cp -r test/lib/* ../fabricjs.com/test/lib",
-		"all": "npm run build && npm run test && npm run test:visual && npm run lint && npm run lint_tests && npm run export_dist_to_site && npm run export_tests_to_site",
-		"testem": "testem .",
-		"testem:ci": "testem ci"
-	},
-	"optionalDependencies": {},
-	"devDependencies": {
-		"auto-changelog": "^2.3.0",
-		"chalk": "^2.4.1",
-		"deep-object-diff": "^1.1.7",
-		"eslint": "4.18.x",
-		"nyc": "^15.1.0",
-		"onchange": "^7.1.0",
-		"pixelmatch": "^4.0.2",
-		"qunit": "^2.17.2",
-		"testem": "^3.2.0",
-		"uglify-js": "3.3.x"
-	},
-	"engines": {
-		"node": ">=14.0.0"
-	},
-	"main": "./dist/fabric.js",
-	"dependencies": {}
-}
+  "name": "fabric",
+  "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
+  "homepage": "http://fabricjs.com/",
+  "version": "6.0.0-beta1",
+  "author": "Juriy Zaytsev <kangax@gmail.com>",
+  "contributors": [
+    {
+      "name": "Andrea Bogazzi",
+      "email": "andreabogazzi79@gmail.com",
+      "url": "https://github.com/asturur"
+    },
+    {
+      "name": "Steve Eberhardt",
+      "email": "melchiar2@gmail.com",
+      "url": "https://github.com/melchiar"
+    },
+    {
+      "name": "Shachar Nencel",
+      "email": "shacharnen@gmail.com",
+      "url": "https://github.com/ShaMan123"
+    }
+  ],
+  "keywords": [
+    "canvas",
+    "graphic",
+    "graphics",
+    "SVG",
+    "node-canvas",
+    "parser",
+    "HTML5",
+    "object model"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fabricjs/fabric.js"
+  },
+  "bugs": {
+    "url": "https://github.com/fabricjs/fabric.js/issues"
+  },
+  "license": "MIT",
+  "scripts": {
+    "cli": "node ./scripts/index.mjs",
+    "changelog": "auto-changelog -o change-output.md --unreleased-only",
+    "build": "npm run cli -- build",
+    "build:fast": "npm run build -- -f",
+    "dev": "npm run cli -- dev",
+    "start": "npm run cli -- start",
+    "export": "npm run cli -- website export",
+    "build-tests": "rollup -c ./rollup.test.config.js",
+    "test:unit-browser": "npm run test -- -s unit -p 8080 -l -c ",
+    "test:visual-browser": "npm run test -- -s visual -p 8080 -l -c ",
+    "test": "npm run cli -- test",
+    "test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit",
+    "test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
+    "coverage:report": "nyc report --reporter=lcov --reporter=text",
+    "lint": "eslint --config .eslintrc.js src/**/*.ts",
+    "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
+    "all": "npm run build && npm run test -- --all && npm run lint && npm run lint_tests && npm run export",
+    "prettier:check": "prettier --check .",
+    "prettier:write": "prettier --write .",
+    "babel-constants": "babel --no-babelrc src/constants.ts --extensions '.ts' --out-dir dist/src/ --config-file ./.babelrcAlt --plugins=babel-plugin-import-json-value",
+    "babel-src": "babel --no-babelrc src --extensions '.ts' --ignore 'src/constants.ts' --out-dir dist/src --config-file ./.babelrcAlt"
+  },
+  "optionalDependencies": {
+    "canvas": "^2.8.0",
+    "jsdom": "^20.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-json": "^6.0.0",
+    "@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",
+    "@typescript-eslint/parser": "^5.29.0",
+    "abort-controller": "^3.0.0",
+    "auto-changelog": "^2.3.0",
+    "babel-plugin-import-json-value": "^0.1.2",
+    "busboy": "^1.6.0",
+    "chalk": "^2.4.1",
+    "commander": "^9.1.0",
+    "deep-object-diff": "^1.1.7",
+    "eslint": "^8.23.1",
+    "eslint-config-prettier": "^8.5.0",
+    "fireworm": "^0.7.2",
+    "fs-extra": "^10.0.1",
+    "fuzzy": "^0.1.3",
+    "inquirer": "^8.2.1",
+    "inquirer-checkbox-plus-prompt": "^1.0.1",
+    "kill-port": "^2.0.1",
+    "moment": "^2.29.1",
+    "nyc": "^15.1.0",
+    "pixelmatch": "^4.0.2",
+    "prettier": "2.7.1",
+    "ps-list": "^8.1.0",
+    "qunit": "^2.17.2",
+    "rollup": "^3.9.1",
+    "source-map-support": "^0.5.21",
+    "testem": "^3.8.0",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "module": "./dist/index.mjs",
+  "main": "./dist/index.node.cjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    ">=4.2": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "node": [
+        "dist/index.node.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.cjs",
+      "node": null,
+      "types": "./dist/index.d.ts"
+    },
+    "./node": {
+      "import": "./dist/index.node.mjs",
+      "require": "./dist/index.node.cjs",
+      "default": "./dist/index.node.cjs",
+      "node": "./dist/index.node.cjs",
+      "types": "./dist/index.node.d.ts"
+    }
+  }
+}

package/publish.js

@@ -1,14 +1,5 @@
 var cp = require('child_process');
-var path = require('path');
-var fs = require('fs');
 
-// useful changelog regexp for atom
-// \(#([0-9]+)\) [#$1](https://github.com/fabricjs/fabric.js/pull/$1)
-
-// eslint-disable-next-line no-undef
-var pkgPath = path.resolve(__dirname, './package.json');
-var pkgText = fs.readFileSync(pkgPath); // get original pkg text to restore it later
-var pkgObject = JSON.parse(pkgText); // parsed pkg to override its fields
 var args = process.argv.slice(2).join(' '); // args will be passed to npm publish (like --dry-run)
 var preRelease = process.env.PRE_RELEASE;
 
@@ -18,25 +9,8 @@ if (preRelease === 'true') {
   args = '--tag beta ' + args;
 }
 
-// override package.json with updated fields
-fs.writeFileSync(
-  pkgPath,
-  JSON.stringify(Object.assign(pkgObject, {
-    optionalDependencies: {},
-    version: pkgObject.version + '-browser',
-  }), null, '\t')
-);
-
 console.log('npm publish ' + args);
 
-// publish -browser version
-cp.execSync('npm publish ' + args);
-
-console.log('Browser package is published');
-
-// restore the original package.json contents
-fs.writeFileSync(pkgPath, pkgText);
-
 // publish the main version (the package is published "above" the -browser version)
 cp.execSync('npm publish ' + args);
 

package/rollup.config.mjs

@@ -0,0 +1,79 @@
+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/index.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: 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: path.resolve(dirname, `${basename}.min.js`),
+            name: 'fabric',
+            format: 'umd',
+            plugins: [terser()],
+          }
+        : null,
+    ],
+    plugins,
+  },
+  {
+    input: ['./index.node.ts'],
+    output: [
+      {
+        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,
+      },
+    ],
+    plugins,
+    external: [
+      'jsdom',
+      'jsdom/lib/jsdom/living/generated/utils.js',
+      'jsdom/lib/jsdom/utils.js',
+      'canvas',
+    ],
+  },
+];

package/rollup.test.config.js

@@ -0,0 +1,24 @@
+import commonjs from '@rollup/plugin-commonjs';
+import ts from 'rollup-plugin-ts';
+
+// https://github.com/artberri/rollup-plugin-istanbul
+
+// https://rollupjs.org/guide/en/#configuration-files
+export default {
+  external: ['qunit', 'fabric'],
+  input: ['test/unit/index.ts', 'test/visual/index.ts'],
+  output: [
+    {
+      dir: 'cli_output/test',
+      format: 'cjs',
+      exports: 'named',
+      preserveModules: true, // Keep directory structure and files
+    },
+  ],
+  plugins: [
+    ts({
+      /* Plugin options */
+    }),
+    commonjs(),
+  ],
+};

package/scripts/build.mjs

@@ -0,0 +1,50 @@
+import cp from 'child_process';
+import path from 'node:path';
+import process from 'node:process';
+import { wd } from './dirname.mjs';
+
+/**
+ * Handles rollup build
+ *
+ * Hooks to build events to create `cli_output/build-lock.json`
+ * @see https://rollupjs.org/guide/en/#--watchonstart-cmd---watchonbundlestart-cmd---watchonbundleend-cmd---watchonend-cmd---watchonerror-cmd
+ * @param {*} options
+ */
+export function build({ watch, fast, input, output, stats = false } = {}) {
+  const cmd = [
+    'rollup',
+    '-c',
+    watch ? '--watch' : '',
+    '--no-watch.clearScreen',
+    ...['onStart', 'onError', 'onEnd'].map(
+      (type) =>
+        `--watch.${type} "node ./scripts/buildReporter.mjs ${type
+          .toLowerCase()
+          .slice(2)}"`
+    ),
+  ].join(' ');
+  const processOptions = {
+    stdio: 'inherit',
+    shell: true,
+    cwd: wd,
+    env: {
+      ...process.env,
+      MINIFY: Number(!fast),
+      BUILD_INPUT: Array.isArray(input) ? input.join(' ') : input,
+      BUILD_OUTPUT: output,
+      BUILD_STATS: Number(stats),
+    },
+  };
+  if (watch) {
+    cp.spawn(cmd, processOptions);
+  } else {
+    try {
+      cp.execSync(cmd, processOptions);
+    } catch (error) {
+      // minimal logging, no need for stack trace
+      console.error(error.message);
+      // inform ci
+      process.exit(1);
+    }
+  }
+}

package/scripts/buildLock.mjs

@@ -0,0 +1,115 @@
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import _ from 'lodash';
+import moment from 'moment';
+import path from 'node:path';
+import process from 'node:process';
+import psList from 'ps-list';
+import { dumpsPath } from './dirname.mjs';
+
+export const lockFile = path.resolve(dumpsPath, 'build-lock.json');
+
+/**
+ *
+ * @returns {{start:{pid:number,timestamp:string},error?:{pid:number,timestamp:string}} | null}
+ */
+function readLockFile() {
+  return fs.existsSync(lockFile) ? JSON.parse(fs.readFileSync(lockFile)) : null;
+}
+
+/**
+ * For concurrency reasons, the last process to lock is granted permission to unlock.
+ * If the process died the next process to try to unlock will be granted permission.
+ */
+export async function unlock() {
+  const lock = readLockFile();
+  if (!lock) return;
+  const lockPID = lock.start.pid;
+  const hasPermissionToUnlock =
+    process.pid === lockPID ||
+    !(await psList()).find(({ pid }) => pid === lockPID);
+  try {
+    hasPermissionToUnlock && fs.unlinkSync(lockFile);
+  } catch (error) {}
+}
+
+export function isLocked() {
+  return fs.existsSync(lockFile);
+}
+
+export function awaitBuild() {
+  return new Promise((resolve) => {
+    if (isLocked()) {
+      console.log(chalk.cyanBright('> waiting for build to finish...'));
+      const watcher = subscribe((locked) => {
+        if (!locked) {
+          watcher.close();
+          resolve();
+        }
+      }, 500);
+    } else {
+      resolve();
+    }
+  });
+}
+
+/**
+ * Subscribe to build start/error/completion.
+ *
+ * @param {(locked: boolean, error: boolean) => any} cb
+ * @param {number} [debounce]
+ * @returns
+ */
+export function subscribe(cb, debounce) {
+  return fs.watch(
+    path.dirname(lockFile),
+    _.debounce((type, file) => {
+      if (file !== path.basename(lockFile)) return;
+      cb(isLocked(), !!(readLockFile() ?? {}).error);
+    }, debounce)
+  );
+}
+
+/**
+ *
+ * @param {'start'|'error'|'end'} type
+ * @param {*} [data]
+ */
+export function report(type, data) {
+  switch (type) {
+    case 'start':
+      fs.writeFileSync(
+        lockFile,
+        JSON.stringify(
+          {
+            start: {
+              timestamp: moment().format('YYYY-MM-DD HH:mm:ss'),
+              pid: process.pid,
+            },
+          },
+          null,
+          '\t'
+        )
+      );
+      break;
+    case 'error':
+      fs.writeFileSync(
+        lockFile,
+        JSON.stringify(
+          {
+            ...readLockFile(),
+            error: {
+              timestamp: moment().format('YYYY-MM-DD HH:mm:ss'),
+              pid: process.pid,
+              data,
+            },
+          },
+          null,
+          '\t'
+        )
+      );
+      break;
+    case 'end':
+      isLocked() && !readLockFile().error && unlock();
+  }
+}

package/scripts/buildReporter.mjs

@@ -0,0 +1,15 @@
+/**
+ * This file is used by `./build` to create `cli_output/build-lock.json`
+ */
+
+import { Command } from 'commander';
+import { report } from './buildLock.mjs';
+
+const program = new Command();
+
+program
+  .command('report <type>', { isDefault: true })
+  .action((type) => {
+    report(type);
+  })
+  .parse(process.argv);