refactor(core): move implementation source into package

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- refactor(core): move implementation source into package [#11041](https://github.com/fabricjs/fabric.js/pull/11041)
 - fix(config): resolve device pixel ratio through env [#11040](https://github.com/fabricjs/fabric.js/pull/11040)
 - refactor(env): move runtime env setup to packages [#11039](https://github.com/fabricjs/fabric.js/pull/11039)
 - chore(): Monorepo follow up steps [#11033](https://github.com/fabricjs/fabric.js/pull/11033)

eslint.config.mjs

@@ -15,9 +15,9 @@ export default tseslint.config(
       'packages/e2e/test-report/*',
       'packages/e2e/test-results/*',
       '.codesandbox/**/*',
-      'src/mixins/eraser_brush.mixin.ts',
-      'src/util/lang_class.ts',
-      'src/parkinglot',
+      'packages/core/src/mixins/eraser_brush.mixin.ts',
+      'packages/core/src/util/lang_class.ts',
+      'packages/core/src/parkinglot',
     ],
   },
   eslint.configs.recommended,

fabric.ts

@@ -1,191 +1 @@
-export {
-  getDevicePixelRatio,
-  getEnv,
-  getFabricDocument,
-  getFabricWindow,
-  setEnv,
-  setEnvFactory,
-} from './src/env';
-export type * from './src/env';
-export { cache } from './src/cache';
-export { VERSION as version, iMatrix } from './src/constants';
-export { config } from './src/config';
-export { classRegistry } from './src/ClassRegistry';
-export { runningAnimations } from './src/util/animation/AnimationRegistry';
-
-export type * from './src/typedefs';
-
-export type * from './src/EventTypeDefs';
-export type { ITextEvents } from './src/shapes/IText/ITextBehavior';
-
-export { Observable } from './src/Observable';
-
-export type {
-  TCanvasSizeOptions,
-  TSVGExportOptions,
-} from './src/canvas/StaticCanvas';
-export type { StaticCanvasOptions } from './src/canvas/StaticCanvasOptions';
-export { StaticCanvas } from './src/canvas/StaticCanvas';
-export { Canvas } from './src/canvas/Canvas';
-export type { CanvasOptions } from './src/canvas/CanvasOptions';
-export { CanvasDOMManager } from './src/canvas/DOMManagers/CanvasDOMManager';
-export { StaticCanvasDOMManager } from './src/canvas/DOMManagers/StaticCanvasDOMManager';
-
-export type { XY } from './src/Point';
-export { Point } from './src/Point';
-export type { IntersectionType } from './src/Intersection';
-export { Intersection } from './src/Intersection';
-export { Color } from './src/color/Color';
-export type * from './src/color/typedefs';
-
-export * from './src/gradient';
-export * from './src/Pattern';
-export { Shadow } from './src/Shadow';
-export type { SerializedShadowOptions } from './src/Shadow';
-
-export { BaseBrush } from './src/brushes/BaseBrush';
-export type * from './src/brushes/typedefs';
-
-export { PencilBrush } from './src/brushes/PencilBrush';
-export { CircleBrush } from './src/brushes/CircleBrush';
-export { SprayBrush } from './src/brushes/SprayBrush';
-export { PatternBrush } from './src/brushes/PatternBrush';
-
-// many path types
-export type * from './src/util/path/typedefs';
-
-export {
-  FabricObject,
-
-  /**
-   * @deprecated Due to a naming conflict with the
-   * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object JS API},
-   * `fabric.Object` has been renamed to `FabricObject`
-   *
-   * @example
-   * import { Object } from 'fabric'; // deprecated
-   * import { FabricObject } from 'fabric'; // migration path
-   *
-   */
-  FabricObject as Object,
-} from './src/shapes/Object/FabricObject';
-/**
- * Exported so we can tweak default values
- */
-export {
-  FabricObject as BaseFabricObject,
-  type DrawContext,
-} from './src/shapes/Object/Object';
-/**
- * Exported so we can tweak default values
- */
-export { InteractiveFabricObject } from './src/shapes/Object/InteractiveObject';
-
-export type {
-  TFabricObjectProps,
-  FabricObjectProps,
-  SerializedObjectProps,
-} from './src/shapes/Object/types';
-export type { SerializedLineProps } from './src/shapes/Line';
-export { Line } from './src/shapes/Line';
-export type { CircleProps, SerializedCircleProps } from './src/shapes/Circle';
-export { Circle } from './src/shapes/Circle';
-export { Triangle } from './src/shapes/Triangle';
-export type {
-  EllipseProps,
-  SerializedEllipseProps,
-} from './src/shapes/Ellipse';
-export { Ellipse } from './src/shapes/Ellipse';
-export type { RectProps, SerializedRectProps } from './src/shapes/Rect';
-export { Rect } from './src/shapes/Rect';
-export type { PathProps, SerializedPathProps } from './src/shapes/Path';
-export { Path } from './src/shapes/Path';
-export type { SerializedPolylineProps } from './src/shapes/Polyline';
-export { Polyline } from './src/shapes/Polyline';
-export { Polygon } from './src/shapes/Polygon';
-export type {
-  GraphemeBBox,
-  SerializedTextProps,
-  TPathAlign,
-  TPathSide,
-  TextProps,
-} from './src/shapes/Text/Text';
-export {
-  FabricText,
-  /**
-   * @deprecated Due to a naming conflict with the
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/Text/Text Web API},
-   * `fabric.Text` has been renamed to `FabricText`
-   *
-   * @example
-   * import { Text } from 'fabric'; // deprecated
-   * import { FabricText } from 'fabric'; // migration path
-   *
-   */
-  FabricText as Text,
-} from './src/shapes/Text/Text';
-export type {
-  ITextProps,
-  SerializedITextProps,
-  CursorRenderingData,
-  CursorBoundaries,
-} from './src/shapes/IText/IText';
-export { IText } from './src/shapes/IText/IText';
-export type {
-  GraphemeData,
-  SerializedTextboxProps,
-  TextboxProps,
-} from './src/shapes/Textbox';
-export { Textbox } from './src/shapes/Textbox';
-export type {
-  CompleteTextStyleDeclaration,
-  TextStyleDeclaration,
-  TextStyle,
-} from './src/shapes/Text/StyledText';
-export type {
-  GroupEvents,
-  GroupProps,
-  GroupOwnProps,
-  SerializedGroupProps,
-} from './src/shapes/Group';
-export { Group } from './src/shapes/Group';
-export * from './src/LayoutManager';
-export type { SerializedLayoutManager } from './src/LayoutManager';
-export type {
-  ActiveSelectionOptions,
-  MultiSelectionStacking,
-} from './src/shapes/ActiveSelection';
-export { ActiveSelection } from './src/shapes/ActiveSelection';
-export {
-  FabricImage,
-
-  /**
-   * @deprecated Due to a naming conflict with the
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image Web API},
-   * `fabric.Image` has been renamed to `FabricImage`
-   *
-   * @example
-   * import { Image } from 'fabric'; // deprecated
-   * import { FabricImage } from 'fabric'; // migration path
-   *
-   */
-  FabricImage as Image,
-} from './src/shapes/Image';
-export type {
-  ImageSource,
-  SerializedImageProps,
-  ImageProps,
-} from './src/shapes/Image';
-export { createCollectionMixin } from './src/Collection';
-
-export * as util from './src/util';
-
-export { loadSVGFromString } from './src/parser/loadSVGFromString';
-export { loadSVGFromURL } from './src/parser/loadSVGFromURL';
-export { parseSVGDocument } from './src/parser/parseSVGDocument';
-
-export { Control } from './src/controls/Control';
-export * as controlsUtils from './src/controls';
-export type { ControlRenderingStyleOverride } from './src/controls';
-
-export * from './src/filters';
+export * from './packages/core/src';

index.node.ts

@@ -1,6 +1,6 @@
 // First we set the env variable
 
-import { setEnv } from './src/env';
+import { setEnv } from './packages/core/src/env';
 import { getEnv, getNodeCanvas } from './packages/node/src/env';
 
 setEnv(getEnv());
@@ -12,7 +12,7 @@ import {
   Canvas as CanvasBase,
   StaticCanvas as StaticCanvasBase,
 } from './fabric';
-import { FabricObject as FabricObjectBase } from './src/shapes/Object/Object';
+import { FabricObject as FabricObjectBase } from './packages/core/src/shapes/Object/Object';
 
 FabricObjectBase.ownDefaults.objectCaching = false;
 

index.ts

@@ -1,4 +1,4 @@
-import { setEnvFactory } from './src/env';
+import { setEnvFactory } from './packages/core/src/env';
 import { getEnv } from './packages/browser/src/env';
 
 setEnvFactory(getEnv);

package.json

@@ -42,18 +42,8 @@
   "files": [
     "dist",
     "dist-extensions",
-    "src/**/*.ts",
-    "!src/**/*.spec.ts",
-    "!src/**/*.test.ts",
-    "!src/**/__tests__/**",
-    "!src/**/__screenshots__/**",
-    "!src/**/__snapshots__/**",
-    "!src/benchmarks/**",
     "extensions/README.MD",
-    "!extensions/**/*.ts",
-    "fabric.ts",
-    "index.ts",
-    "index.node.ts"
+    "!extensions/**/*.ts"
   ],
   "packageManager": "pnpm@10.29.1",
   "scripts": {
@@ -79,7 +69,7 @@
     "playwright:typecheck": "pnpm --dir packages/e2e run typecheck",
     "sandbox": "node ./scripts/sandbox.mjs sandbox",
     "local-server": "serve ./ -l tcp://localhost:8080",
-    "lint": "eslint src extensions packages --fix",
+    "lint": "eslint extensions packages --fix",
     "prettier:check": "oxfmt --check .",
     "prettier:write": "oxfmt .",
     "prepare": "husky install"

packages/browser/src/env.ts

@@ -1,6 +1,9 @@
 /* eslint-disable no-restricted-globals */
-import { WebGLProbe } from '../../../src/filters/GLProbes/WebGLProbe';
-import type { TCopyPasteData, TFabricEnv } from '../../../src/env/types';
+import {
+  WebGLProbe,
+  type TCopyPasteData,
+  type TFabricEnv,
+} from '@fabricjs/core';
 
 const copyPasteData: TCopyPasteData = {};
 

src/Collection.spec.ts → packages/core/src/Collection.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { createCollectionMixin } from './Collection';
 import { Rect } from './shapes/Rect';
-import { FabricObject } from '../fabric';
+import { FabricObject } from '../../../fabric';
 
 let collection: TestCollection;
 let collection2: TestCollection;

src/Pattern/Pattern.spec.ts → packages/core/src/Pattern/Pattern.spec.ts

@@ -4,8 +4,8 @@ import { Pattern } from './Pattern';
 import { getFabricDocument } from '../env';
 import { StaticCanvas } from '../canvas/StaticCanvas';
 import type { SerializedPatternOptions } from './types';
-import GrayFloralImage from '../../test/fixtures/greyfloral.png';
-import { isJSDOM } from '../../vitest.extend';
+import GrayFloralImage from '../../../../test/fixtures/greyfloral.png';
+import { isJSDOM } from '../../../../vitest.extend';
 
 describe('Pattern', () => {
   const IMG_SRC = isJSDOM() ? 'greyfloral.png' : GrayFloralImage;

src/brushes/PencilBrush.spec.ts → packages/core/src/brushes/PencilBrush.spec.ts

@@ -4,7 +4,7 @@ import { PencilBrush } from './PencilBrush';
 import { parsePath } from '../util';
 import { Path } from '../shapes/Path';
 import { Point } from '../Point';
-import { createPointerEvent } from '../../test/utils';
+import { createPointerEvent } from '../../../../test/utils';
 
 describe('PencilBrush', () => {
   let canvas: Canvas;

src/canvas/Canvas-dispose.spec.ts → packages/core/src/canvas/Canvas-dispose.spec.ts

@@ -7,8 +7,8 @@ import {
   runningAnimations,
   StaticCanvas,
   util,
-} from '../../fabric';
-import { makeRect } from '../../test/utils';
+} from '../../../../fabric';
+import { makeRect } from '../../../../test/utils';
 
 describe('Canvas dispose', () => {
   describe.for([

src/canvas/Canvas-events.spec.ts → packages/core/src/canvas/Canvas-events.spec.ts

@@ -13,8 +13,8 @@ import type {
   TPointerEventInfo,
   TPointerEvent,
 } from '../EventTypeDefs.ts';
-import { getFabricDocument, IText, version } from '../../fabric';
-import { createPointerEvent } from '../../test/utils';
+import { getFabricDocument, IText, version } from '../../../../fabric';
+import { createPointerEvent } from '../../../../test/utils';
 
 describe('Canvas events mixin', () => {
   const SUB_TARGETS_JSON = `{"version":"${version}","objects":[{"type":"ActiveSelection","left":-152,"top":656.25,"width":356.5,"height":356.5,"scaleX":0.45,"scaleY":0.45,"objects":[]},{"type":"Group","left":11,"top":6,"width":511.5,"height":511.5,"objects":[{"type":"Rect","left":-255.75,"top":-255.75,"width":50,"height":50,"fill":"#6ce798","scaleX":10.03,"scaleY":10.03,"opacity":0.8},{"type":"Group","left":-179.75,"top":22,"width":356.5,"height":356.5,"scaleX":0.54,"scaleY":0.54,"objects":[{"type":"Rect","left":-178.25,"top":-178.25,"width":50,"height":50,"fill":"#4862cc","scaleX":6.99,"scaleY":6.99,"opacity":0.8},{"type":"Group","left":-163.25,"top":-161.25,"width":177.5,"height":177.5,"objects":[{"type":"Rect","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"Rect","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"Triangle","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"Rect","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]},{"type":"Group","left":-34.25,"top":-31.25,"width":177.5,"height":177.5,"scaleX":1.08,"scaleY":1.08,"objects":[{"type":"Rect","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"Rect","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"Triangle","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"Rect","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]}]},{"type":"Group","left":-202.75,"top":-228.5,"width":356.5,"height":356.5,"scaleX":0.61,"scaleY":0.61,"objects":[{"type":"Rect","left":-178.25,"top":-178.25,"width":50,"height":50,"fill":"#4862cc","scaleX":6.99,"scaleY":6.99,"opacity":0.8},{"type":"Group","left":-163.25,"top":-161.25,"width":177.5,"height":177.5,"objects":[{"type":"Rect","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"Rect","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"Triangle","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"Rect","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]},{"type":"Group","left":-34.25,"top":-31.25,"width":177.5,"height":177.5,"scaleX":1.08,"scaleY":1.08,"objects":[{"type":"Rect","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"Rect","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"Triangle","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"Rect","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]}]},{"type":"Group","left":138.3,"top":-90.22,"width":356.5,"height":356.5,"scaleX":0.42,"scaleY":0.42,"angle":62.73,"objects":[{"type":"Rect","left":-178.25,"top":-178.25,"width":50,"height":50,"fill":"#4862cc","scaleX":6.99,"scaleY":6.99,"opacity":0.8},{"type":"Group","left":-163.25,"top":-161.25,"width":177.5,"height":177.5,"objects":[{"type":"Rect","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"Rect","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"Triangle","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"Rect","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]},{"type":"Group","left":-34.25,"top":-31.25,"width":177.5,"height":177.5,"scaleX":1.08,"scaleY":1.08,"objects":[{"type":"Rect","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"Rect","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"Triangle","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"Rect","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]}]}]}]}`;

src/canvas/Canvas.spec.ts → packages/core/src/canvas/Canvas.spec.ts

@@ -9,8 +9,8 @@ import type {
   FabricObject,
   MultiSelectionStacking,
   TPointerEvent,
-} from '../../fabric';
-import { createPointerEvent, makeRect } from '../../test/utils';
+} from '../../../../fabric';
+import { createPointerEvent, makeRect } from '../../../../test/utils';
 import {
   ActiveSelection,
   Circle,
@@ -20,9 +20,9 @@ import {
   Group,
   Path,
   version,
-} from '../../fabric';
-import TEST_IMAGE from '../../test/fixtures/test_image.gif';
-import { isJSDOM } from '../../vitest.extend';
+} from '../../../../fabric';
+import TEST_IMAGE from '../../../../test/fixtures/test_image.gif';
+import { isJSDOM } from '../../../../vitest.extend';
 import {
   EMPTY_JSON,
   PATH_DATALESS_JSON,

src/canvas/StaticCanvas.fixtures.ts → packages/core/src/canvas/StaticCanvas.fixtures.ts

@@ -1,7 +1,7 @@
 import { VERSION as version } from '../constants';
 import { type FabricImage } from '../shapes/Image';
-import { isJSDOM } from '../../vitest.extend';
-import TEST_IMAGE_GIF from '../../test/fixtures/test_image.gif';
+import { isJSDOM } from '../../../../vitest.extend';
+import TEST_IMAGE_GIF from '../../../../test/fixtures/test_image.gif';
 
 export const CANVAS_SVG =
   '<?xml version="1.0" encoding="UTF-8" standalone="no" ?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +

src/canvas/StaticCanvas.spec.ts → packages/core/src/canvas/StaticCanvas.spec.ts

@@ -3,7 +3,7 @@ import { Canvas } from './Canvas';
 
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import type { TMat2D } from '../typedefs';
-import { FabricText, Gradient, Pattern, version } from '../../fabric';
+import { FabricText, Gradient, Pattern, version } from '../../../../fabric';
 import { config } from '../config';
 import { Rect } from '../shapes/Rect';
 import { Circle } from '../shapes/Circle';
@@ -13,7 +13,7 @@ import { FabricImage } from '../shapes/Image';
 import { Point } from '../Point';
 import { Group } from '../shapes/Group';
 import { Path } from '../shapes/Path';
-import { makeRect } from '../../test/utils';
+import { makeRect } from '../../../../test/utils';
 import { Ellipse } from '../shapes/Ellipse';
 import { Line } from '../shapes/Line';
 import { Polyline } from '../shapes/Polyline';
@@ -33,7 +33,7 @@ import {
   IMG_WIDTH,
   IMG_HEIGHT,
 } from './StaticCanvas.fixtures';
-import { isJSDOM, sanitizeSVG } from '../../vitest.extend';
+import { isJSDOM, sanitizeSVG } from '../../../../vitest.extend';
 
 describe('StaticCanvas', () => {
   const canvas = new StaticCanvas(undefined, {
@@ -2113,7 +2113,8 @@ describe('StaticCanvas', () => {
 
   it('provides Node.js stream methods when in Node environment', async () => {
     if (isJSDOM()) {
-      const { Canvas: FabricNodeCanvas } = await import('../../index.node');
+      const { Canvas: FabricNodeCanvas } =
+        await import('../../../../index.node');
       const canvas = new FabricNodeCanvas();
       expect(canvas.createPNGStream).toBeTypeOf('function');
       expect(canvas.createJPEGStream).toBeTypeOf('function');