chore(TS) use export to get type definitions

[asturur]

Motivation

Get out of our transition type build definitely.

Description

I had to switch to babel after i was burned by the ts-plugin experience.
Babel output more errors and is more strict and more configurable.
In the configuration of rollup there are also some new bits about export d.ts files that will help us emit type declaration that mirror the interface without exporting internal types.

The build directory now has a src folder that contains type definition for each class and utils.

Just a note on class properties:

    constructor() {
      _defineProperty(this, "browserShadowBlurConstant", 1);
      _defineProperty(this, "DPI", 96);
      _defineProperty(this, "devicePixelRatio", 1);
      _defineProperty(this, "perfLimitSizeTotal", 2097152);
      _defineProperty(this, "maxCacheSideLimit", 4096);
      _defineProperty(this, "minCacheSideLimit", 256);
      _defineProperty(this, "disableStyleCopyPaste", false);
      _defineProperty(this, "enableGLFiltering", true);
      _defineProperty(this, "textureSize", 4096);
      _defineProperty(this, "forceGLPutImageData", false);
      _defineProperty(this, "cachesBoundsOfCurve", true);
      _defineProperty(this, "fontPaths", {});
      _defineProperty(this, "NUM_FRACTION_DIGITS", 4);
    }

If we pick up a transpile target that does not support public properties ( likely to be true ) this is how they should look like and also this is how we should define them when creating them from default values.
The _defineProperty function is very small and we should use the same, but i don't think we can force babel then to recognize our.
We could either keep them different or move the public property to manually defined values in the constructor for the sake of consistency.
I don't have a strong opinion as long as defaults are configurable.

Speakin of supported JS and code

canvas?.viewportTransform becomes canvas === null || canvas === void 0 ? void 0 : canvas.viewportTransform

And i hate it.

I highly prefer canvas && canvas.viewportTransform

Changes

• BREAKING: import fabric from 'fabric' rather than import { fabric } from 'fabric' ( not a choice appartenly )
• updated all dependencies to modern rollup
• added babel to transpile
• added babel preset/env and babel preset/typescript for necessary plugins and browserlist support
• kept configuration as neutral as possible

Follow ups

Looking in the built file for , void 0); will identify missed declared properties ( still many ) and they need to be cleaned up

In Action

[asturur]

@ShaMan123 remade this PR from scratch since the other branch was tainted from experiments

[github-actions]

Build Stats

file / KB (diff)	bundled	minified
fabric	943.540 (-0.072)	296.825 (0)

[github-actions]

Coverage after merging build-with-exports into master will be

83.12%

Coverage Report

File	Stmts	Branches	Funcs	Lines	Uncovered Lines
index.ts	100%	100%	100%	100%
src
cache.ts	96.97%	90%	100%	100%	56
config.ts	77.27%	66.67%	66.67%	84.62%	130, 138–140, 151–153
constants.ts	100%	100%	100%	100%
env.ts	72.73%	53.33%	100%	79.17%	22, 22–23, 23, 23, 25, 25, 27, 29, 31–32, 62
intersection.class.ts	100%	100%	100%	100%
pattern.class.ts	92.19%	85.71%	100%	96.30%	118, 124, 135, 144, 96
point.class.ts	100%	100%	100%	100%
shadow.class.ts	98.48%	96%	100%	100%	156
typedefs.ts	100%	100%	100%	100%
src/brushes
base_brush.class.ts	100%	100%	100%	100%
circle_brush.class.ts	0%	0%	0%	0%	100, 102–104, 113, 113, 113, 115, 117, 119–121, 123–126, 134, 141, 143, 23, 28–29, 37–41, 45–49, 56–59, 67–71, 73, 81, 81, 81, 81, 81–82, 84, 84, 84–87, 89, 97–98
pattern_brush.class.ts	97.06%	87.50%	100%	100%	21
pencil_brush.class.ts	91.86%	85.42%	100%	93.58%	122–123, 152, 152–154, 276, 280, 285–286, 68–69, 84–85
spray_brush.class.ts	0%	0%	0%	0%	100–101, 103–104, 112, 112, 112, 112, 112–113, 115–116, 123–124, 126, 128–132, 141, 145–146, 146, 154, 154, 154–157, 159–162, 166–167, 169, 171–174, 177, 184–185, 187, 189–190, 192, 199–200, 202–203, 206, 206, 213, 213, 217, 22–23, 25–27, 27, 27–29, 33, 42, 49, 56, 63, 70, 77, 89–91, 99
src/canvas
canvas.class.ts	93.14%	89.14%	94%	95.92%	1153, 1153–1154, 1157, 1177, 1177, 1239, 1275–1276, 1295–1296, 1304–1305, 1326, 1334, 1447–1448, 1450–1451, 1471–1472, 509, 576–577, 582, 592, 721–722, 724–725, 725, 725, 771–772, 833–834, 887–889, 919, 924–925, 954–955
canvas_events.ts	78.30%	75.69%	82.81%	79.41%	1003–1004, 1004, 1004–1006, 1008–1009, 1009, 1009, 1011, 1019, 1019, 1019–1021, 1021, 1021, 1027–1028, 1036–1037, 1037, 1037–1038, 1043, 1045, 1075–1077, 1080–1081, 1085–1086, 1202–1204, 1207–1208, 1280, 1400, 145, 1494–1495, 1501, 1505–1506, 1522, 1544, 1591, 1596, 1635, 170, 318–319, 319, 319–320, 320, 323–327, 332, 334, 347–350, 353, 372, 372, 372–373, 373, 373–374, 382, 387–388, 388, 388–389, 391, 400, 406–407, 407, 407, 443, 447, 447, 447, 447, 447–448, 450, 525, 527, 527, 527–529, 549, 551, 551, 551–552, 552, 552, 555, 555, 555–556, 559, 568–569, 571–572, 574, 574–575, 577–578, 590–591, 591, 591–592, 594–598, 604, 611, 651, 651, 651, 653, 655–659, 665, 671, 671, 671–672, 674, 677, 682, 695, 722, 778–779, 779, 779–780, 782, 785–786, 786, 786–787, 789–790, 793, 793–795, 798–799, 809, 891, 905, 912, 933, 965, 986–987
static_canvas.class.ts	94.67%	89.27%	97.92%	97.10%	1118–1119, 1119, 1119–1120, 1240, 1250, 1304–1305, 1308, 1343–1344, 1422, 1431, 1436, 1485–1486, 1714, 1714–1715, 1764, 1767, 1770, 1770, 1770, 1773, 1776, 1776, 1776, 338, 351, 404–405, 407–408, 417, 421–422, 425–426, 878
src/color
color.class.ts	92.20%	86.49%	100%	94.34%	330–331, 335–336, 339–340, 58, 88–89, 89, 91, 91, 91–92, 94–95
color_map.ts	100%	100%	100%	100%
constants.ts	100%	100%	100%	100%
util.ts	100%	100%	100%	100%
src/controls
changeWidth.ts	100%	100%	100%	100%
control.class.ts	93.98%	88.89%	90.91%	97.78%	235, 319, 319, 354
controls.render.ts	81.63%	78%	100%	84.78%	106, 111, 121, 121, 45, 50, 61, 61, 65–72, 81–82
default_controls.ts	86.67%	66.67%	100%	100%	122, 129
drag.ts	100%	100%	100%	100%
polyControl.ts	6.35%	0%	0%	11.43%	100, 105, 119, 121–124, 124, 127, 134, 17, 25–28, 30, 30, 30, 30, 30, 30, 30, 30, 50–56, 56, 56, 56, 56, 58, 63–64, 66, 76, 82–83, 83, 83–84, 88–90, 90, 90, 90, 90, 92
rotate.ts	20%	12.50%	50%	22.22%	45, 51, 51, 51–52, 55–57, 59, 59, 59, 59, 59–61, 61, 61–63, 65, 65, 65–67, 67, 67–68, 73, 73, 73–74, 76, 78, 80–81
scale.ts	93.41%	92.68%	100%	93.59%	129–130, 132–134, 148–149, 181–183, 42
scaleSkew.ts	78.79%	64.29%	100%	85.71%	27, 29, 29, 29, 31, 33, 35
skew.ts	91.03%	79.31%	100%	97.67%	130–131, 162–163, 170, 176, 178
util.ts	100%	100%	100%	100%
wrapWithFireEvent.ts	100%	100%	100%	100%
wrapWithFixedAnchor.ts	100%	100%	100%	100%
src/filters
2d_backend.class.ts	92%	83.33%	100%	93.75%	35–36
FilterBackend.ts	88.89%	88.89%	100%	85.71%	15–16
WebGLProbe.ts	37.14%	40%	60%	30%	28–30, 30, 30–31, 33–35, 43,

[asturur]

Oh yes of course now we need something that set fabric into the window to properly work when added as a script i assume

[asturur]

Well great :) it works either on browsers or on node

[asturur]

pointed out this was unused.

[asturur]

compared to master we are saving around 2000 bytes here, some babel magic probably.

-rw-r--r--  1 abogazzi  staff  306289 Jan 10 11:48 dist/fabric.min.js
vs
-rw-r--r--  1 abogazzi  staff  303949 Jan 10 11:44 dist/fabric.min.js

[asturur]

@ShaMan123 that's it.

If we want export and type declaration this is the PR

We need a follow up PR that removes more undefind class properties and then we should start moving the defaults in the class.

[ShaMan123]

Shouldn't we add more fields to the package for exports and types?

[ShaMan123]

I read that maybe we should add
exports: 'named'

[asturur]

Shouldn't we add more fields to the package for exports and types?

Yes we don't need to do all now. But yes we need to tell package.json where types are at least

[asturur]

export named doesn't make much sense, but if is possible we could do it.
i think import fabric from 'fabric' makes more sense if you an do import { Canvas } from 'fabric';
But is all really a test here, let's find out trying. IF we can revert the breaking change later, great.

[ShaMan123]

i think import fabric from 'fabric' makes more sense

I agree, or import * as fabric from 'fabric' (might be what will allow tree shacking as opposed to a default export)

[asturur]

Ok merging and reiterating soon with some code shaking test