fabric 5.3.0 → 6.0.0-beta10

package/package.json

@@ -2,16 +2,23 @@
   "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",
+  "version": "6.0.0-beta10",
   "author": "Juriy Zaytsev <kangax@gmail.com>",
   "contributors": [
     {
       "name": "Andrea Bogazzi",
-      "email": "andreabogazzi79@gmail.com"
+      "email": "andreabogazzi79@gmail.com",
+      "url": "https://github.com/asturur"
     },
     {
       "name": "Steve Eberhardt",
-      "email": "melchiar2@gmail.com"
+      "email": "melchiar2@gmail.com",
+      "url": "https://github.com/melchiar"
+    },
+    {
+      "name": "Shachar Nencel",
+      "email": "shacharnen@gmail.com",
+      "url": "https://github.com/ShaMan123"
     }
   ],
   "keywords": [
@@ -24,17 +31,6 @@
     "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"
@@ -44,49 +40,123 @@
   },
   "license": "MIT",
   "scripts": {
+    "docs": "typedoc --out docs fabric.ts",
+    "cli": "node ./scripts/index.mjs",
+    "sandboxscript": "node ./scripts/sandbox.mjs",
     "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",
+    "build": "npm run cli -- build",
+    "build:fast": "npm run build -- -f",
+    "dev": "npm run cli -- dev",
+    "start": "npm run sandboxscript -- start",
+    "export": "npm run cli -- website export",
+    "build-tests": "rollup -c ./rollup.test.config.js",
+    "test:jest": "jest",
+    "test": "npm run cli -- test",
+    "sandbox": "npm run sandboxscript -- sandbox",
+    "test:unit-browser": "npm run test -- -s unit -p 8080 -l -c chrome firefox",
+    "test:visual-browser": "npm run test -- -s visual -p 8081 -l -c chrome firefox",
     "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",
+    "test:jest:coverage": "jest --coverage=true --coverageDirectory=./.temp_coverage",
+    "coverage:merge": "nyc merge .temp_coverage .nyc_output/merged-coverage.json",
+    "local-server": "http-server ./ -d=false",
+    "test:e2e": "npx playwright test --headed",
     "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": "eslint --config .eslintrc.js 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"
+    "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": "^19.0.0"
+    "jsdom": "^20.0.1"
   },
   "devDependencies": {
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-typescript": "^7.21.5",
+    "@playwright/test": "^1.31.2",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-terser": "^0.4.1",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@types/fs-extra": "^9.0.13",
+    "@types/jest": "^29.5.2",
+    "@types/jsdom": "^20.0.1",
+    "@types/lodash": "^4.14.180",
+    "@types/node": "^17.0.21",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
+    "abort-controller": "^3.0.0",
     "auto-changelog": "^2.3.0",
+    "axios": "^0.27.2",
+    "babel-plugin-import-json-value": "^0.1.2",
+    "busboy": "^1.6.0",
     "chalk": "^2.4.1",
-    "deep-object-diff": "^1.1.7",
-    "eslint": "4.18.x",
+    "commander": "^9.1.0",
+    "eslint": "8.40",
+    "eslint-config-prettier": "^8.6.0",
+    "fireworm": "^0.7.2",
+    "fs-extra": "^10.0.1",
+    "fuzzy": "^0.1.3",
+    "http-server": "^14.1.1",
+    "inquirer": "^8.2.1",
+    "inquirer-checkbox-plus-prompt": "^1.0.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "kill-port": "^2.0.1",
+    "micromatch": "^4.0.5",
+    "moment": "^2.29.1",
     "nyc": "^15.1.0",
-    "onchange": "^7.1.0",
     "pixelmatch": "^4.0.2",
+    "prettier": "2.7.1",
+    "ps-list": "^8.1.0",
     "qunit": "^2.17.2",
-    "testem": "^3.2.0",
-    "uglify-js": "3.3.x"
+    "rollup": "^3.21.7",
+    "semver": "^7.3.8",
+    "source-map-support": "^0.5.21",
+    "testem": "^3.8.0",
+    "tslib": "^2.4.1",
+    "typedoc": "^0.23.24",
+    "typescript": "^4.9.4"
   },
   "engines": {
     "node": ">=14.0.0"
   },
-  "main": "./dist/fabric.js",
-  "dependencies": {}
+  "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"
+      ],
+      "src/*": [
+        "src/*"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js",
+      "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/playwright.config.ts

@@ -0,0 +1,64 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './e2e/tests',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5 * 1000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 1 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: './e2e/test-report', open: 'on-failure' }],
+    ['json', './e2e/test-results/test-results.json'],
+  ],
+  outputDir: './e2e/test-results',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'retain-on-failure',
+    video: process.env.CI ? 'retain-on-failure' : 'on',
+    screenshot: process.env.CI ? 'only-on-failure' : 'on',
+    viewport: { width: 900, height: 700 },
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run local-server',
+    port: 8080,
+  },
+};
+
+export default config;

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,99 @@
+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 chalk from 'chalk';
+// 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',
+  }),
+];
+
+/**
+ * disallow circular deps
+ * @see https://rollupjs.org/configuration-options/#onwarn
+ * @param {*} warning
+ * @param {*} warn
+ */
+function onwarn(warning, warn) {
+  // we error at any warning.
+  // we allow-list the errors we understand are not harmful
+  if (
+    (warning.code === 'PLUGIN_WARNING' &&
+      !warning.message.includes('sourcemap')) ||
+    warning.code === 'CIRCULAR_DEPENDENCY'
+  ) {
+    console.error(chalk.redBright(warning.message));
+    if (process.env.CI) {
+      throw Object.assign(new Error(), warning);
+    }
+  }
+  warn(warning);
+}
+
+// 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}.js`),
+        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,
+    onwarn,
+  },
+  {
+    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,
+    onwarn,
+    external: ['jsdom', 'jsdom/lib/jsdom/living/generated/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);