fabric 6.0.0-beta1 → 6.0.0-beta10

package/.eslintignore

@@ -0,0 +1,3 @@
+src/mixins/eraser_brush.mixin.ts
+src/util/lang_class.ts
+src/parkinglot

package/.eslintrc.js

@@ -1,10 +1,16 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+    tsconfigRootDir: './',
+  },
   plugins: ['@typescript-eslint'],
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
+    // this is too noisy for now
+    // 'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'prettier',
   ],
   overrides: [
@@ -13,6 +19,8 @@ module.exports = {
     },
   ],
   rules: {
+    '@typescript-eslint/consistent-type-exports': 'error',
+    '@typescript-eslint/consistent-type-imports': 'error',
     '@typescript-eslint/ban-types': 1,
     '@typescript-eslint/ban-ts-comment': 1,
     'no-restricted-globals': [

package/.gitpod.yml

@@ -1,2 +1,18 @@
+# https://www.gitpod.io/docs/config-gitpod-file
+
 tasks:
-  - init: npm install
+  - name: Build & Watch
+    init: npm install
+    command: npm run build -- -w -f
+
+  - name: Node
+    init: npm install
+    command: npm start node -- --no-watch
+
+  - name: Next.js
+    init: npm install
+    command: npm start next -- --no-watch
+
+  - name: Vanilla
+    init: npm install
+    command: npm start vanilla -- --no-watch

package/.prettierignore

@@ -14,3 +14,6 @@ before_commit
 /dist/
 /lib/
 /test/
+.next/
+.parcel-cache/
+/docs/

package/CHANGELOG.md

@@ -2,6 +2,130 @@
 
 ## [next]
 
+## [6.0.0-beta10]
+
+- chore(TS): Remove @ts-nocheck from Text class. [#9018](https://github.com/fabricjs/fabric.js/pull/9018)
+- Fix(Textbox) minimum word width calculation across all lines [#9004](https://github.com/fabricjs/fabric.js/pull/9004)
+- ci(): add Jest for the unit tests [#8919](https://github.com/fabricjs/fabric.js/pull/8919)
+- ci(): Revert "invoke tests after changelog action (#8974)" [#9013](https://github.com/fabricjs/fabric.js/pull/9013)
+- fix(IText): empty line selection [#9019](https://github.com/fabricjs/fabric.js/pull/9019)
+- ci(): Added playwright testing [#8616](https://github.com/fabricjs/fabric.js/pull/8616)
+- fix(IText): `exitEditing` should clear contextTop [#9020](https://github.com/fabricjs/fabric.js/pull/9020)
+- ci(): prettier after changelog action [#9021](https://github.com/fabricjs/fabric.js/pull/9021)
+
+## [6.0.0-beta9]
+
+- fix(fabric): Fix the serialization and registry dependency from minification [#9009](https://github.com/fabricjs/fabric.js/pull/9009)
+- chore(TS): remove troublesome `AssertKeys` TS construct [#9012](https://github.com/fabricjs/fabric.js/pull/9012)
+- fix(lib): fix aligning_guideline zoom [#8998](https://github.com/fabricjs/fabric.js/pull/8998)
+- fix(IText): support control interaction in text editing mode [#8995](https://github.com/fabricjs/fabric.js/pull/8995)
+- fix(Textbox): `splitByGrapheme` measurements infix length bug [#8990](https://github.com/fabricjs/fabric.js/pull/8990)
+- patch(Text): styles es6 minor patch [#8988](https://github.com/fabricjs/fabric.js/pull/8988)
+
+## [6.0.0-beta8]
+
+- BREAKING fix(IText): detect cursor from proper offsets, remove getLocalPointer from IText class [#8972](https://github.com/fabricjs/fabric.js/pull/8972)
+- fix(Text): styles line break [#8973](https://github.com/fabricjs/fabric.js/pull/8973)
+- fix(): regression to itext focusing from #8939 [#8970](https://github.com/fabricjs/fabric.js/pull/8970)
+- ci(): warn build errors in dev mode [#8971](https://github.com/fabricjs/fabric.js/pull/8971)
+- ci(): invoke tests after changelog action [#8974](https://github.com/fabricjs/fabric.js/pull/8974)
+- chore(TS): Export more types [#8965](https://github.com/fabricjs/fabric.js/pull/8965)
+- BREAKING: fabric.util.makeElementSelectable / fabric.util.makeElementUnselectable are removed [#8930](https://github.com/fabricjs/fabric.js/pull/8930)
+- refactor(): Canvas DOM delegation to utility class [#8930](https://github.com/fabricjs/fabric.js/pull/8930)
+
+## [6.0.0-beta7]
+
+- feat(): Export setFilterBackend and port the texture filtering option from fabric 5, exports some extra types [#8954](https://github.com/fabricjs/fabric.js/pull/8954)
+- chore(): swap commonly used string with constants [#8933](https://github.com/fabricjs/fabric.js/pull/8933)
+- chore(TS): Add more text types [#8941](https://github.com/fabricjs/fabric.js/pull/8941)
+- ci(): fix changelog action race condition [#8949](https://github.com/fabricjs/fabric.js/pull/8949)
+- ci(): automate PR changelog [#8938](https://github.com/fabricjs/fabric.js/pull/8938)
+- chore(): move canvas click handler to TextManager [#8939](https://github.com/fabricjs/fabric.js/pull/8939)
+- refactor(): write less bulky code [#8943](https://github.com/fabricjs/fabric.js/pull/8943)
+
+## [6.0.0-beta6]
+
+- patch(): expose `Control#shouldActivate` [#8934](https://github.com/fabricjs/fabric.js/pull/8934)
+- feat(Color) Improve regex for new standards, more documentation and code cleanup [#8916](https://github.com/fabricjs/fabric.js/pull/8916)
+- fix(TS): extending canvas and object event types (`type` => `interface`) [#8926](https://github.com/fabricjs/fabric.js/pull/8926)
+- chore(build) simple deps update [#8929](https://github.com/fabricjs/fabric.js/pull/8929)
+- fix(Canvas): sync cleanup of dom elements in dispose [#8903](https://github.com/fabricjs/fabric.js/pull/8903)
+- chore(TS): export util types [#8915](https://github.com/fabricjs/fabric.js/pull/8915)
+- chore(TS): change enums with types [#8918](https://github.com/fabricjs/fabric.js/pull/8918)
+- chore(TS): export gradient types
+- chore(lint) export filter colors and brushes types [#8913](https://github.com/fabricjs/fabric.js/pull/8913)
+- chore(lint) Add a rule for import type [#8907](https://github.com/fabricjs/fabric.js/pull/8907)
+- fix(Object): dirty unflagging inconsistency [#8910](https://github.com/fabricjs/fabric.js/pull/8910)
+- chore(TS): minor type/import fixes [#8904](https://github.com/fabricjs/fabric.js/pull/8904)
+- chore(): Matrix util cleanup [#8894](https://github.com/fabricjs/fabric.js/pull/8894)
+- chore(TS): pattern cleanup + export types [#8875](https://github.com/fabricjs/fabric.js/pull/8875)
+- fix(): Disable offscreen check for bg and overlay when not needed [#8898](https://github.com/fabricjs/fabric.js/pull/8898)
+- chore(): cleanup #8888 [#8892](https://github.com/fabricjs/fabric.js/pull/8892)
+- feat(env): relative window/document, support iframe [#8897](https://github.com/fabricjs/fabric.js/pull/8897)
+- docs(): add repo repro link to `bug_report.yml` [#8900](https://github.com/fabricjs/fabric.js/pull/8900)
+- refactor(fabric.Line): Line position is calculated from the center between the 2 points now [#8877](https://github.com/fabricjs/fabric.js/pull/8877)
+- chore(Path, Polyline): Clean up old SVG import code [#8857](https://github.com/fabricjs/fabric.js/pull/8857)
+
+## [6.0.0-beta5]
+
+- refactor(): SVG loading and parsing functionality are now promises or async. Callback have been removed [#8884](https://github.com/fabricjs/fabric.js/pull/8884)
+- refactor(fabric.Line): Line position is calculated from the center between the 2 points now [#8877](https://github.com/fabricjs/fabric.js/pull/8877)
+- bundle(): export `setEnv` for test interoperability [#8888](https://github.com/fabricjs/fabric.js/pull/8888)
+
+## [6.0.0-beta4]
+
+- chore(): Code cleanup and reuse of code in svg-parsing code [#8881](https://github.com/fabricjs/fabric.js/pull/8881)
+- chore(TS): Parse transform attribute typing [#8878](https://github.com/fabricjs/fabric.js/pull/8878)
+- chore(TS): Fix typing for DOMParser [#8871](https://github.com/fabricjs/fabric.js/pull/8871)
+- fix(Path, Polyline): fix for SVG import [#8879](https://github.com/fabricjs/fabric.js/pull/8879)
+- chore(TS) add types for loadSVGFromURl, parseSVGDocument, loadSVGFromString [#8869](https://github.com/fabricjs/fabric.js/pull/8869)
+- chore(TS): finalize Path migration [#8438](https://github.com/fabricjs/fabric.js/pull/8438)
+- fix(Path, Obect) Fix path parsing edge case for zeroed arc command and for too small canvas patterns [#8853](https://github.com/fabricjs/fabric.js/pull/8853)
+
+## [6.0.0-beta3]
+
+- chore(TS): Path type fixes [#8842](https://github.com/fabricjs/fabric.js/pull/8842)
+- fix(TS): add types to some untyped empty arrays [#8830](https://github.com/fabricjs/fabric.js/pull/8830)
+- chore(TS): Complete typings for toObject/fromObject [#8756](https://github.com/fabricjs/fabric.js/pull/8756)
+- fix(): text styles edge case [#8820](https://github.com/fabricjs/fabric.js/pull/8820)
+- chore(TS): Group types [#8807](https://github.com/fabricjs/fabric.js/pull/8807)
+- chore(TS): Path util typings and refactoring [#8787](https://github.com/fabricjs/fabric.js/pull/8787)
+- rename(): `IPoint` => `XY` [#8806](https://github.com/fabricjs/fabric.js/pull/8806)
+- ci(): use sandbox apps in issue template, use the current branch when deploying an app, minors [#8803](https://github.com/fabricjs/fabric.js/pull/8803)
+- perf(): optimize `perPixelTargetFind` [#8770](https://github.com/fabricjs/fabric.js/pull/8770)
+- BREAKING fix(): reflect NUM_FRACTION_DIGITS to SVG path data [#8782] (https://github.com/fabricjs/fabric.js/pull/8782)
+- fix(IText): layout change regression caused by #8663 (`text` was changed but layout was skipped) [#8711](https://github.com/fabricjs/fabric.js/pull/8711)
+- fix(IText, Textbox): fix broken text input [#8775](https://github.com/fabricjs/fabric.js/pull/8775)
+- ci(): `.codesandbox` [#8135](https://github.com/fabricjs/fabric.js/pull/8135)
+- ci(): disallow circular deps [#8759](https://github.com/fabricjs/fabric.js/pull/8759)
+- fix(): env WebGL import cycle [#8758](https://github.com/fabricjs/fabric.js/pull/8758)
+- chore(TS): remove controls from prototype. BREAKING: controls aren't shared anymore [#8753](https://github.com/fabricjs/fabric.js/pull/8753)
+- chore(TS): remove object `type` from prototype [#8714](https://github.com/fabricjs/fabric.js/pull/8714)
+- chore(TS): type Object props [#8677](https://github.com/fabricjs/fabric.js/issues/8677)
+- chore(TS): remove default values from filter prototypes [#8742](https://github.com/fabricjs/fabric.js/issues/8742)
+- chore(TS): remove default values from Objects prototypes, ( filters in a followup ) [#8719](https://github.com/fabricjs/fabric.js/issues/8719)
+- fix(Intersection): bug causing selection edge case [#8735](https://github.com/fabricjs/fabric.js/pull/8735)
+- chore(TS): class interface for options/brevity [#8674](https://github.com/fabricjs/fabric.js/issues/8674)
+- ci(): fix import autocomplete in dev mode #8725
+- chore(): remove deprecated class util [#8731](https://github.com/fabricjs/fabric.js/pull/8731)
+- lint(): fix eslint errors [#8729](https://github.com/fabricjs/fabric.js/pull/8729)
+- fix(TS): `this.constructor` types [#8675](https://github.com/fabricjs/fabric.js/issues/8675)
+- fix(DraggableText): drag image blur [#8712](https://github.com/fabricjs/fabric.js/pull/8712)
+- ci(): Fix tests for firefox 110 update [#8710](https://github.com/fabricjs/fabric.js/pull/8710)
+- chore(): index files for exports and tree shaking [#8661](https://github.com/fabricjs/fabric.js/pull/8661)
+- ci(test): cleanup node config (#8694 followup) [#8707](https://github.com/fabricjs/fabric.js/issues/8707)
+- fix(): BREAKING set/discard active object return value, discard active object now return false if no discard happened [#8672](https://github.com/fabricjs/fabric.js/issues/8672)
+- fix(): selection logic to support nested multiselection [#8665](https://github.com/fabricjs/fabric.js/issues/8665)
+- fix(test): remove bad node config [#8694](https://github.com/fabricjs/fabric.js/issues/8694)
+- fix(): keep browser files as .js [#8690](https://github.com/fabricjs/fabric.js/issues/8690)
+- fix(): object dispose removes canvas/event refs [#8673](https://github.com/fabricjs/fabric.js/issues/8673)
+- fix(test): Textbox `fromObject` test is incorrectly trying to restore an instance [#8686](https://github.com/fabricjs/fabric.js/pull/8686)
+- TS(): Moved cache properties to static properties on classes [#xxxx](https://github.com/fabricjs/fabric.js/pull/xxxx)
+- refactor(): Moved cache properties to static properties on classes [#8662](https://github.com/fabricjs/fabric.js/pull/8662)
+- docs(): v6 announcements [#8664](https://github.com/fabricjs/fabric.js/issues/8664)
+- ci(): remove TS transformer [#8660](https://github.com/fabricjs/fabric.js/pull/8660)
+- refactor(): BREAKING remove stateful mixin and functionality [#8663](https://github.com/fabricjs/fabric.js/pull/8663)
+- patch(): Added WebGLProbe to env, removed isLikelyNode, added specific env dispose ( instead of cleanup JSDOM ) [#8652](https://github.com/fabricjs/fabric.js/pull/8652)
 - ci(): Removed the browser publish script [#8656](https://github.com/fabricjs/fabric.js/pull/8656)
 - feat(): Node entry point [#8632](https://github.com/fabricjs/fabric.js/pull/8632)
 - chore(): Change import and export strategy [#8622](https://github.com/fabricjs/fabric.js/pull/8622)

package/CONTRIBUTING.md

@@ -62,12 +62,12 @@ Answering questions and addressing issues, as well as fixing and adding types (s
 - [Issues][issues]
 - [Discussions][discussions]
 
-### 🎮 Adding a DEMO
+### 🎮 Adding a DEMO (currently not possible)
 
 Take a look at an existing [demo file][demo_file].\
 Create a new file in the same directory (`posts/demos/_posts`) and follow [**developing the website**](#fabricjscom-deprecated).
 
-### ~~`fabricjs.com`~~ (_deprecated_)
+### ~~`fabricjs.com`~~ (currently not possible)
 
 To develop fabric's site you need to clone [`fabricjs.com`][website_repo] in the same parent folder of [`fabric.js`][repo], so that `fabric.js` and `fabricjs.com` are siblings.
 
@@ -91,17 +91,19 @@ Fabric is an open source project 🦄 and as such depends on the **genuine effor
 
 - Read this section through.
 - Take a look at [**GOTCHAS**][gotchas]
-- Follow [Developing](#-developing-) and read [Testing](#-testing).
+- Follow [Developing](#-developing-) and [Testing](#-testing).
 
 ### ✅ Guidelines
 
+- **Be patient** \
+  Sometimes it takes time to get back to you. Someone eventually will. Having a small, concise and super clear change will make maintainers more prone to handle it quickly.
 - **Code Style** \
   Fabric uses [`prettier`][prettier] to format files and [`eslint`][eslint] for linting (`npm run lint -- --fix`).\
   To enjoy a seamless dev experience add the [`Prettier - Code formatter`][prettier_extension] extension via the extensions toolbar in VSCode.
-- **⛔ `dist`** \
-  Commit changes to [source files](src). Don't commit the generated [distribution files](dist).
+  If that doesn't work, once the PR is ready run `npm run prettier:write` and commit the changes.
+  Do not reorder imports. Irrelevant changes in a PR that are not created by prettier aren't needed nor welcome.
 - **Tests** \
-  PRs must be backed with relevant tests, follow [TESTING](#-testing).
+  PRs must be backed with relevant tests, follow [TESTING](#-testing). If you never wrote a test or you find our tests unclear to extend, just ask for help.
 - **Docs** \
   Add relevant comments to your code if necessary using [JSDoc 3][jsdoc] and update relevant guides.\
   The generated documentation can be found at [fabricjs.com][docs], see [DOCS](#-improving-docs).
@@ -110,6 +112,7 @@ Fabric is an open source project 🦄 and as such depends on the **genuine effor
 - **1️⃣ PR per feature/bug** \
   Create a new branch for every pull request.\
   If you want to do more than one thing, create multiple pull requests 💪.
+  If your bug fix or feature requires a refactor, don't refactor. Commit the bugfix or the feature with the current code structure, let it sink, give some time to surface issues with the change, then when the bug or the feature seem solid, a refactor or code improvement can be tried
 - **And there you go!** \
   If you still have questions we're always happy to help.
 
@@ -122,108 +125,106 @@ It is more than likely you will be requested to change stuff and refine your wor
 [![🧪](../../actions/workflows/tests.yml/badge.svg)](../../actions/workflows/tests.yml)
 [![CodeQL](../../actions/workflows/codeql-analysis.yml/badge.svg)](../../actions/workflows/codeql-analysis.yml)
 
-Test suites use [`QUnit`][qunit] for assertions and [`testem`][testem] for serving
+Test suites use [`QUnit`][qunit] for assertions and [`testem`][testem] for serving the browser tests
 
 - `unit` tests: test logic and state
-- `visual` tests: test visual outcome against image refs located at `/test/visual/golden`
+- `visual` tests: test visual outcome against image refs located at `test/visual/golden`
+- `UI` tests: testing with playwright
 
 ### Getting Started
 
-- build and watch for changes:
+- Build and watch for changes
+  ```bash
+  npm run build -- -f -w
+  ```
+- Run the entire test suite on `chrome` (many tests are skipped on `node`)
+  ```bash
+  npm test -- -a -c chrome
+  ```
+- Handle failing tests
+  - Fix logic
+  - If needed, alter tests with **caution**
+  - Rerun failing tests
+    - Save time by rerunning failing tests only
+      - Select failing test files
+        ```bash
+        npm test -- -c chrome
+        ```
+      - **OR** launch the browser test suite in _dev mode_ to watch for test changes
+        ```bash
+        npm test -- -c chrome --dev -l
+        ```
+    - In case of failing visual tests, there are 2 options to view visual diffs (in order to understand what is wrong)
+      - Testing in _visual debug mode_ is comfortable when using with `Github Desktop` to view the diffs since refs will be overwritten (rerunning tests will use the overwritten refs so be cautious)
+        ```bash
+        npm test -- -d -c chrome
+        ```
+      - Launching the browser test suite
+        ```bash
+        npm test -- -c chrome --dev -l
+        ```
+      - Take into account that different environments produce different outputs so it is advised to run both in `chrome` and `node`.
+      - Committing refs is done **ONLY** with `chrome` output.
+    - When you are done, rerun the entire test suit to verify all tests pass.
+    - If you are submitting a PR, visit the PR page on github to see all checks have passed (different platforms and config are covered by the checks).
+- Refer to the command docs
+  ```bash
+  npm test -- -h
+  ```
+
+## UI tests
+
+Run UI tests with Playwright in parallel in Chrome (headed mode).
 
 ```bash
-
-npm run build -- -f -w
-
+$ npm run test:e2e
 ```
 
-- run tests:
-
-```bash
-
-npm test -- -a -d
-> Running all tests in debug mode (read more in the help section)
-
-npm test -- -s visual --dev -l -c chrome
-> Running live visual tests on chrome (navigate to see)
+### Adding Tests
 
-npm test -- --help
+Backing a PR with tests that cover the changes that were made is a **MUST**. Aim to cover 100% of the cases.
 
-> Usage: fabric.js test [options]
+Add tests to relevant files or add new files when necessary under `test/unit` or `test/visual`.
 
-> run test suite
+- [`unit` test example][unit_test]
+- [`visual` test example][visual_test]
 
-Options:
-  -s, --suite <suite...>      test suite to run (choices: "unit", "visual")
-  -f, --file <file>           run a specific test file
-  --filter <filter>           filter tests by name
-  -a, --all                   run all tests (default: false)
-  -d, --debug                 debug visual tests by overriding refs (golden images) in case of visual changes (default:
-                              false)
-  -r, --recreate              recreate visual refs (golden images) (default: false)
-  -v, --verbose               log passing tests (default: false)
-  -l, --launch                launch tests in the browser (default: false)
-  --dev                       runs testem in `dev` mode, without a `ci` flag (default: false)
-  -c, --context <context...>  context to test in (choices: "chrome", "firefox", "node", default: "node")
-  -p, --port
-  -o, --out <out>             path to report test results to
-  --clear-cache               clear CLI test cache (default: false)
-  -h, --help                  display help for command
-
-```
+If you need to change test config ask for guidance.
 
 ---
 
 ## 🚧🎢 Developing 💡✨
 
-### Setting Up Locally
+### Getting Started
 
-1. 🍴 Fork the repository
-1. 💾 Clone your 🍴 to your 💻
+1. 🍴 Fork and clone 💾 the repository
 1. Install dependencies 🕹️ `npm i --include=dev`
-1. Next Up [Prototyping](#-prototyping) & [Testing](#-testing)
-
-#### Online
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
 
-Gitpod will start the [prototyping](#-prototyping) apps and expose them as endpoints.
-`A service is available on port ...` popups will show up.
-
-### 🧭 Prototyping
-
-[`.codesandbox/templates`](.codesandbox/templates) contains templates for **INSTANT** out-of-the-box prototyping **👍 Try it out**
+### Starting an App
 
 ```bash
+npm start <template>
+npm start -- --help
+```
 
-npm run sandbox build next [/path/to/sandbox]
-> building next app at /path/to/sandbox
-
-npm run sandbox start </path/to/sandbox>
-> starting dev server
-
-npm run sandbox deploy </path/to/sandbox>
-> created codesandbox https://codesandbox.io/s/fgh476
-
-npm run sandbox deploy -- --template node
-> created codesandbox https://codesandbox.io/s/fgh476
+You can deploy an app to codesandbox via the cli or build an app at a path of your choosing:
 
+```bash
+npm run sandbox deploy <path/to/app>
+npm run sandbox build <template> <path/to/app>
 npm run sandbox -- --help
+```
 
-> Usage: fabric.js sandbox [options] [command]
-
-> sandbox commands
+Refer to [`.codesandbox/README.md`](.codesandbox/README.md) for more information.
 
-Options:
-  -h, --help                      display help for command
+### Online
 
-Commands:
-  deploy [options] [path]         deploy a sandbox to codesandbox
-  build <template> [destination]  build and start a sandbox
-  start <path>                    start a sandbox
-  help [command]                  display help for command
+You can actively develop fabric online using [Github Codespaces][github_codespaces], [Gitpod][gitpod] or CodeSandbox:
 
-```
+- After the Github Codespace has started run `npm start <template>` to start a prototyping app.
+- Gitpod will start the prototyping apps and expose them as endpoints available on forwarded ports.
+  `A service is available on port ...` popups will show up.
+- Codesandbox: _available soon_.
 
 ### 🔮 Symlinking
 
@@ -231,6 +232,7 @@ Establish symlinking to work with a local version on separate projects.
 
 1. From `fabric.js` folder run `npm link` **OR** `yarn link`.
 1. From the project's folder run `npm link fabric` **OR** `yarn link fabric`.
+1. Consider flagging `--save` to avoid confusion regarding what version of fabric is being used by the project.
 
 See [npm link][npm_link] **OR** [yarn link][yarn_link].\
 Don't forget to unlink the package once you're done.
@@ -256,5 +258,9 @@ Don't forget to unlink the package once you're done.
 [jsdoc]: https://jsdoc.app/
 [qunit]: https://qunitjs.com/
 [testem]: https://github.com/testem/testem
+[unit_test]: https://github.com/fabricjs/fabric.js/blob/93dd2dcca705a4b481fbc9982da4952ef5b4ed1d/test/unit/point.js#L227-L237
+[visual_test]: https://github.com/fabricjs/fabric.js/blob/93dd2dcca705a4b481fbc9982da4952ef5b4ed1d/test/visual/generic_rendering.js#L44-L67
+[github_codespaces]: https://github.com/codespaces/new?hide_repo_select=true&ref=master&repo=712530
+[gitpod]: https://gitpod.io/from-referrer/
 [npm_link]: https://docs.npmjs.com/cli/v8/commands/npm-link
 [yarn_link]: https://yarnpkg.com/cli/link

package/README.md

@@ -42,7 +42,7 @@ A **simple and powerful Javascript HTML5 canvas library**.
 - Out of the box interactions such as scale, move, rotate, skew, group...
 - Built in shapes, controls, animations, image filters, gradients, patterns, brushes...
 - `JPG`, `PNG`, `JSON` and `SVG` i/o
-- Typed and modular
+- [Typed and modular](#migrating-to-v6)
 - [Unit tested](CONTRIBUTING.md#%F0%9F%A7%AA%20testing)
 
 #### Supported Browsers/Environments
@@ -60,20 +60,23 @@ A **simple and powerful Javascript HTML5 canvas library**.
 
 Fabric.js Does not use transpilation by default, the browser version we support is determined by the level of canvas api we want to use and some js syntax. While JS can be easily transpiled, canvas API can't.
 
-## Installation
+## Migrating to v6
+
+v6 is a **MAJOR** effort including migrating to TS and es6, countless fixes, rewrites and features.\
+Currently in beta, refer to [#8299](../../issues/8299) for guidance.
 
 ```bash
-$ npm install fabric --save
+$ npm install fabric@beta --save
 // or
-$ yarn add fabric
+$ yarn add fabric@beta
 ```
 
-```js
-// es6 imports
-import { fabric } from 'fabric';
+## Installation
 
-//  or cjs
-const fabric = require('fabric').fabric;
+```bash
+$ npm install fabric --save
+// or
+$ yarn add fabric
 ```
 
 #### Browser
@@ -92,6 +95,15 @@ Follow these [instructions][node_canvas_install] to get `node-canvas` up and run
 
 ## Quick Start
 
+```js
+// v6
+import { Canvas, Rect } from 'fabric'; // browser
+import { StaticCanvas, Rect } from 'fabric/node'; // node
+
+// v5
+import { fabric } from 'fabric';
+```
+
 <details><summary><b>Plain HTML</b></summary>
 
 ```html
@@ -117,10 +129,11 @@ Follow these [instructions][node_canvas_install] to get `node-canvas` up and run
 
 ```tsx
 import React, { useEffect, useRef } from 'react';
-import { fabric } from 'fabric';
+import * as fabric from 'fabric'; // v6
+import { fabric } from 'fabric'; // v5
 
 export const FabricJSCanvas = () => {
-  const canvasEl = useRef(null);
+  const canvasEl = useRef<HTMLCanvasElement>(null);
   useEffect(() => {
     const options = { ... };
     const canvas = new fabric.Canvas(canvasEl.current, options);
@@ -132,8 +145,8 @@ export const FabricJSCanvas = () => {
     }
   }, []);
 
-  return (<canvas width="300" height="300" ref={canvasEl}/>)
-});
+  return <canvas width="300" height="300" ref={canvasEl}/>;
+};
 
 ```
 
@@ -142,8 +155,9 @@ export const FabricJSCanvas = () => {
 <details><summary><b>Node.js</b></summary>
 
 ```js
-const http = require('http');
-const { fabric } = require('fabric');
+import http from 'http';
+import * as fabric from 'fabric/node'; // v6
+import { fabric } from 'fabric'; // v5
 
 const port = 8080;
 
@@ -177,6 +191,8 @@ http
 
 </details>
 
+See our ready to use [templates](./.codesandbox/templates/).
+
 ---
 
 ## Other Solutions

package/babel-jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+};