chore(TS) use export to get type definitions (#8585)

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/env",
+    [
+      "@babel/typescript",
+      {
+        "allowDeclareFields": true
+      }
+    ]
+  ]
+}

CHANGELOG.md

@@ -11,6 +11,8 @@
 - fix(): `_initRetinaScaling`  initializaing the scaling regardless of settings in Canvas. [#8565](https://github.com/fabricjs/fabric.js/pull/8565)
 - fix(): regression of canvas migration with pointer and sendPointToPlane [#8563](https://github.com/fabricjs/fabric.js/pull/8563)
 \- chore(TS): Add declare in front of properties that are type definitions. [#8574](https://github.com/fabricjs/fabric.js/pull/8574)
+- chore(TS): move to export, babel, new rollup, change import statement for fabric. [#8585](https://github.com/fabricjs/fabric.js/pull/8585);
+- chore(TS): Add declare in front of properties that are type definitions. [#8574](https://github.com/fabricjs/fabric.js/pull/8574)
 - refactor(Animation): BREAKING: Animation api reduction and semplification (byValue is removed, '+=' syntax is removed, callbacks fired 100%) [#8547](https://github.com/fabricjs/fabric.js/pull/8547)
 - feat(PolyControl): modify the shape of a poly with control points [#8556](https://github.com/fabricjs/fabric.js/pull/8556)
 - BREAKING: remove Object.stateful and Object.statefulCache [#8573](https://github.com/fabricjs/fabric.js/pull/8573)

index.js → index.ts

@@ -441,13 +441,4 @@ const fabric = {
   getCSSRules,
 };
 
-if (typeof exports !== 'undefined') {
-  exports.fabric = fabric;
-} else if (typeof define === 'function' && define.amd) {
-  /* _AMD_START_ */
-  define([], function () {
-    return fabric;
-  });
-} else if (typeof window !== 'undefined') {
-  window.fabric = fabric;
-}
+export default fabric;

package.json

@@ -76,8 +76,12 @@
     "jsdom": "^19.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-json": "^4.1.0",
+    "@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/lodash": "^4.14.180",
     "@types/node": "^17.0.21",
@@ -103,13 +107,11 @@
     "prettier": "2.7.1",
     "ps-list": "^8.1.0",
     "qunit": "^2.17.2",
-    "rollup": "^2.75.6",
-    "rollup-plugin-size-snapshot": "^0.12.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-ts": "^3.0.2",
+    "rollup": "^3.9.1",
     "source-map-support": "^0.5.21",
     "testem": "^3.8.0",
-    "typescript": "^4.7.4"
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4"
   },
   "engines": {
     "node": ">=14.0.0"

rollup.config.mjs

@@ -0,0 +1,47 @@
+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 dts from "rollup-plugin-dts";
+
+const splitter = /\n|\s|,/g;
+
+// https://rollupjs.org/guide/en/#configuration-files
+export default [
+  {
+    input: process.env.BUILD_INPUT?.split(splitter) || ['./index.ts'],
+    output: [
+      {
+        file: process.env.BUILD_OUTPUT || './dist/fabric.js',
+        name: 'fabric',
+        format: 'umd',
+        sourcemap: true,
+      },
+      Number(process.env.MINIFY)
+        ? {
+            file: process.env.BUILD_MIN_OUTPUT || './dist/fabric.min.js',
+            name: 'fabric',
+            format: 'umd',
+            plugins: [terser()],
+          }
+        : null,
+    ],
+    // 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: "./my-input/index.d.ts",
+  //   output: [{ file: "dist/my-library.d.ts", format: "es" }],
+  //   plugins: [dts()],
+  // },
+];

src/shapes/textbox.class.ts

@@ -27,12 +27,6 @@ export class Textbox extends IText {
    */
   declare dynamicMinWidth: number;
 
-  /**
-   * Cached array of text wrapping.
-   * @type Array
-   */
-  declare __cachedLines: Array<any> | null;
-
   /**
    * Use this boolean property in order to split strings that have no white space concept.
    * this is a cheap way to help with chinese/japanese

test/node_test_setup.js

@@ -25,7 +25,7 @@ QUnit.recreateVisualRefs = Number(process.env.QUNIT_RECREATE_VISUAL_REFS);
 QUnit.config.filter = process.env.QUNIT_FILTER;
 
 
-global.fabric = require('../dist/fabric').fabric;
+global.fabric = require('../dist/fabric');
 global.pixelmatch = require('pixelmatch');
 global.fs = require('fs');
 global.visualCallback = {

tsconfig.json

@@ -44,7 +44,7 @@
     /* Emit */
     "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
     "declarationMap": true /* Create sourcemaps for d.ts files. */,
-    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    "emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files. */,
     "sourceMap": true /* Create source map files for emitted JavaScript files. */,
     // "outFile": "",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     "outDir": "./dist" /* Specify an output folder for all emitted files. */,
@@ -98,5 +98,6 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "include": ["src"]
+  "exclude": ["dist"],
+  "include": ["./", "index.ts", "src"]
 }