build() Remove header.js, remove fabric global object, use exports from TS to build the lib #8549
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
asturur
commented
Dec 30, 2022
tsconfig.json
Outdated
| @@ -25,7 +25,7 @@ | |||
|
|
|||
| /* Modules */ | |||
| "module": "es2022" /* Specify what module code is generated. */, | |||
| // "rootDir": "./", /* Specify the root folder within your source files. */ | |||
| "rootDir": "./", /* Specify the root folder within your source files. */ | |||
There was a problem hiding this comment.
this was the fixing change, could be that it would have worked with the old dependencies anyway
|
Build Stats
|
fabric 5 build output{
fabric: {
version: '5.1.0',
document: Document,
jsdomImplForWrapper,
nodeCanvas,
window,
isTouchSupported: false,
isLikelyNode: true,
SHARED_ATTRIBUTES: [
'display', 'transform',
'fill', 'fill-opacity',
'fill-rule', 'opacity',
'stroke', 'stroke-dasharray',
'stroke-linecap', 'stroke-dashoffset',
'stroke-linejoin', 'stroke-miterlimit',
'stroke-opacity', 'stroke-width',
'id', 'paint-order',
'vector-effect', 'instantiated_by_use',
'clip-path'
],
DPI: 96,
reNum: '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)',
commaWsp: '(?:\\s+,?\\s*|,\\s*)',
rePathCommand: /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/gi,
reNonWord: /[ \n\.,;!\?\-]/,
fontPaths: {},
iMatrix: [ 1, 0, 0, 1, 0, 0 ],
svgNS: 'http://www.w3.org/2000/svg',
perfLimitSizeTotal: 2097152,
maxCacheSideLimit: 4096,
minCacheSideLimit: 256,
charWidthsCache: {},
textureSize: 2048,
disableStyleCopyPaste: false,
enableGLFiltering: true,
devicePixelRatio: 1,
browserShadowBlurConstant: 1,
arcToSegmentsCache: {},
boundsOfCurveCache: {},
cachesBoundsOfCurve: true,
forceGLPutImageData: false,
initFilterBackend: [Function (anonymous)],
Observable: {
fire: [Function: fire],
on: [Function: on],
once: [Function: once],
off: [Function: off]
},
Collection: {
_objects: [],
add: [Function: add],
insertAt: [Function: insertAt],
remove: [Function: remove],
forEachObject: [Function: forEachObject],
getObjects: [Function: getObjects],
item: [Function: item],
isEmpty: [Function: isEmpty],
size: [Function: size],
contains: [Function: contains],
complexity: [Function: complexity]
},
CommonMethods: {
_setOptions: [Function: _setOptions],
_initGradient: [Function: _initGradient],
_initPattern: [Function: _initPattern],
_setObject: [Function: _setObject],
set: [Function: set],
_set: [Function: _set],
toggle: [Function: toggle],
get: [Function: get]
},
util: {
cos: [Function: cos],
sin: [Function: sin],
removeFromArray: [Function: removeFromArray],
getRandomInt: [Function: getRandomInt],
degreesToRadians: [Function: degreesToRadians],
radiansToDegrees: [Function: radiansToDegrees],
rotatePoint: [Function: rotatePoint],
rotateVector: [Function: rotateVector],
createVector: [Function: createVector],
calcAngleBetweenVectors: [Function: calcAngleBetweenVectors],
getHatVector: [Function: getHatVector],
getBisector: [Function: getBisector],
projectStrokeOnPoints: [Function: projectStrokeOnPoints],
transformPoint: [Function: transformPoint],
makeBoundingBoxFromPoints: [Function: makeBoundingBoxFromPoints],
invertTransform: [Function: invertTransform],
toFixed: [Function: toFixed],
parseUnit: [Function: parseUnit],
falseFunction: [Function: falseFunction],
getKlass: [Function: getKlass],
getSvgAttributes: [Function: getSvgAttributes],
resolveNamespace: [Function: resolveNamespace],
loadImage: [Function: loadImage],
loadImageInDom: [Function: loadImageInDom],
enlivenObjects: [Function: enlivenObjects],
enlivenObjectEnlivables: [Function: enlivenObjectEnlivables],
enlivenPatterns: [Function: enlivenPatterns],
groupSVGElements: [Function: groupSVGElements],
populateWithProperties: [Function: populateWithProperties],
createCanvasElement: [Function: createCanvasElement],
copyCanvasElement: [Function: copyCanvasElement],
toDataURL: [Function: toDataURL],
createImage: [Function: createImage],
multiplyTransformMatrices: [Function: multiplyTransformMatrices],
qrDecompose: [Function: qrDecompose],
calcRotateMatrix: [Function: calcRotateMatrix],
calcDimensionsMatrix: [Function: calcDimensionsMatrix],
composeMatrix: [Function: composeMatrix],
resetObjectTransform: [Function: resetObjectTransform],
saveObjectTransform: [Function: saveObjectTransform],
isTransparent: [Function: isTransparent],
parsePreserveAspectRatioAttribute: [Function: parsePreserveAspectRatioAttribute],
clearFabricFontCache: [Function: clearFabricFontCache],
limitDimsByArea: [Function: limitDimsByArea],
capValue: [Function: capValue],
findScaleToFit: [Function: findScaleToFit],
findScaleToCover: [Function: findScaleToCover],
matrixToSVG: [Function: matrixToSVG],
removeTransformFromObject: [Function: removeTransformFromObject],
addTransformToObject: [Function: addTransformToObject],
applyTransformToObject: [Function: applyTransformToObject],
sizeAfterTransform: [Function: sizeAfterTransform],
mergeClipPaths: [Function: mergeClipPaths],
joinPath: [Function (anonymous)],
parsePath: [Function: parsePath],
makePathSimpler: [Function: makePathSimpler],
getSmoothPathFromPoints: [Function: getSmoothPathFromPoints],
getPathSegmentsInfo: [Function: getPathSegmentsInfo],
getBoundsOfCurve: [Function: getBoundsOfCurve],
getPointOnPath: [Function: getPointOnPath],
transformPath: [Function: transformPath],
array: [Object],
object: [Object],
fire: [Function: fire],
on: [Function: on],
once: [Function: once],
off: [Function: off],
string: [Object],
createClass: [Function: createClass],
addListener: [Function (anonymous)],
removeListener: [Function (anonymous)],
getPointer: [Function (anonymous)],
isTouchEvent: [Function (anonymous)],
setStyle: [Function: setStyle],
makeElementUnselectable: [Function: makeElementUnselectable],
makeElementSelectable: [Function: makeElementSelectable],
setImageSmoothing: [Function: setImageSmoothing],
getById: [Function: getById],
toArray: [Function: toArray],
addClass: [Function: addClass],
makeElement: [Function: makeElement],
wrapElement: [Function: wrapElement],
getScrollLeftTop: [Function: getScrollLeftTop],
getElementOffset: [Function: getElementOffset],
getNodeCanvas: [Function: getNodeCanvas],
cleanUpJsdomNode: [Function: cleanUpJsdomNode],
request: [Function: request],
animate: [Function: animate],
requestAnimFrame: [Function: requestAnimFrame],
cancelAnimFrame: [Function: cancelAnimFrame],
animateColor: [Function: animateColor],
ease: [Object]
},
log: [Function: log],
warn: [Function: warn],
runningAnimations: [
cancelAll: [Function: cancelAll],
cancelByCanvas: [Function: cancelByCanvas],
cancelByTarget: [Function: cancelByTarget],
findAnimationIndex: [Function: findAnimationIndex],
findAnimation: [Function: findAnimation],
findAnimationsByTarget: [Function: findAnimationsByTarget]
],
svgValidTagNamesRegEx: /^(path|circle|polygon|polyline|ellipse|rect|line|image|text)\b/i,
svgViewBoxElementsRegEx: /^(symbol|image|marker|pattern|view|svg)\b/i,
svgInvalidAncestorsRegEx: /^(pattern|defs|symbol|metadata|clipPath|mask|desc)\b/i,
svgValidParentsRegEx: /^(symbol|g|a|svg|clipPath|defs)\b/i,
cssRules: {},
gradientDefs: {},
clipPaths: {},
parseTransformAttribute: [Function (anonymous)],
parseSVGDocument: [Function (anonymous)],
parseFontDeclaration: [Function: parseFontDeclaration],
getGradientDefs: [Function: getGradientDefs],
parseAttributes: [Function: parseAttributes],
parseElements: [Function: parseElements],
parseStyleAttribute: [Function: parseStyleAttribute],
parsePointsAttribute: [Function: parsePointsAttribute],
getCSSRules: [Function: getCSSRules],
loadSVGFromURL: [Function: loadSVGFromURL],
loadSVGFromString: [Function: loadSVGFromString],
ElementsParser: [Function (anonymous)],
Point: [Function: Point],
Intersection: [Function: Intersection] {
intersectLineLine: [Function (anonymous)],
intersectLinePolygon: [Function (anonymous)],
intersectPolygonPolygon: [Function (anonymous)],
intersectPolygonRectangle: [Function (anonymous)]
},
Color: [Function: Color] {
reRGBa: /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i,
reHSLa: /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i,
reHex: /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i,
colorNameMap: [Object],
fromRgb: [Function (anonymous)],
sourceFromRgb: [Function (anonymous)],
fromRgba: [Function (anonymous)],
fromHsl: [Function (anonymous)],
sourceFromHsl: [Function (anonymous)],
fromHsla: [Function (anonymous)],
fromHex: [Function (anonymous)],
sourceFromHex: [Function (anonymous)],
fromSource: [Function (anonymous)]
},
controlsUtils: {
scaleCursorStyleHandler: [Function: scaleCursorStyleHandler],
skewCursorStyleHandler: [Function: skewCursorStyleHandler],
scaleSkewCursorStyleHandler: [Function: scaleSkewCursorStyleHandler],
rotationWithSnapping: [Function (anonymous)],
scalingEqually: [Function (anonymous)],
scalingX: [Function (anonymous)],
scalingY: [Function (anonymous)],
scalingYOrSkewingX: [Function: scalingYOrSkewingX],
scalingXOrSkewingY: [Function: scalingXOrSkewingY],
changeWidth: [Function (anonymous)],
skewHandlerX: [Function: skewHandlerX],
skewHandlerY: [Function: skewHandlerY],
dragHandler: [Function: dragHandler],
scaleOrSkewActionName: [Function: scaleOrSkewActionName],
rotationStyleHandler: [Function: rotationStyleHandler],
fireEvent: [Function: fireEvent],
wrapWithFixedAnchor: [Function: wrapWithFixedAnchor],
wrapWithFireEvent: [Function: wrapWithFireEvent],
getLocalPoint: [Function: getLocalPoint],
renderCircleControl: [Function: renderCircleControl],
renderSquareControl: [Function: renderSquareControl]
},
Control: [Function: Control],
Gradient: [Function: klass] {
superclass: null,
subclasses: [],
fromElement: [Function: fromElement]
},
Pattern: [Function: klass] { superclass: null, subclasses: [] },
Shadow: [Function: klass] {
superclass: null,
subclasses: [],
reOffsetsAndBlur: /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/
},
StaticCanvas: [Function: klass] {
superclass: null,
subclasses: [Array],
EMPTY_JSON: '{"objects": [], "background": "white"}',
supports: [Function: supports]
},
BaseBrush: [Function: klass] { superclass: null, subclasses: [Array] },
PencilBrush: [Function: klass] { superclass: [Function], subclasses: [Array] },
CircleBrush: [Function: klass] { superclass: [Function], subclasses: [] },
SprayBrush: [Function: klass] { superclass: [Function], subclasses: [] },
PatternBrush: [Function: klass] { superclass: [Function], subclasses: [] },
Canvas: [Function: klass] {
superclass: null,
subclasses: [Array],
EMPTY_JSON: '{"objects": [], "background": "white"}',
supports: [Function: supports]
},
Object: [Function: klass] {
superclass: null,
subclasses: [Array],
NUM_FRACTION_DIGITS: 2,
ENLIVEN_PROPS: [Array],
_fromObject: [Function (anonymous)],
__uid: 0
},
Line: [Function: klass] {
superclass: [Function],
subclasses: [],
ATTRIBUTE_NAMES: [Array],
fromElement: [Function (anonymous)],
fromObject: [Function (anonymous)]
},
Circle: [Function: klass] {
superclass: [Function],
subclasses: [],
ATTRIBUTE_NAMES: [Array],
fromElement: [Function (anonymous)],
fromObject: [Function (anonymous)]
},
Triangle: [Function: klass] {
superclass: [Function],
subclasses: [],
fromObject: [Function (anonymous)]
},
Ellipse: [Function: klass] {
superclass: [Function],
subclasses: [],
ATTRIBUTE_NAMES: [Array],
fromElement: [Function (anonymous)],
fromObject: [Function (anonymous)]
},
Rect: [Function: klass] {
superclass: [Function],
subclasses: [],
ATTRIBUTE_NAMES: [Array],
fromElement: [Function (anonymous)],
fromObject: [Function (anonymous)]
},
Polyline: [Function: klass] {
superclass: [Function],
subclasses: [Array],
ATTRIBUTE_NAMES: [Array],
fromElementGenerator: [Function (anonymous)],
fromElement: [Function (anonymous)],
fromObject: [Function (anonymous)]
},
Polygon: [Function: klass] {
superclass: [Function],
subclasses: [],
ATTRIBUTE_NAMES: [Array],
fromElement: [Function (anonymous)],
fromObject: [Function (anonymous)]
},
Path: [Function: klass] {
superclass: [Function],
subclasses: [],
fromObject: [Function (anonymous)],
ATTRIBUTE_NAMES: [Array],
fromElement: [Function (anonymous)]
},
Group: [Function: klass] {
superclass: [Function],
subclasses: [Array],
fromObject: [Function (anonymous)]
},
ActiveSelection: [Function: klass] {
superclass: [Function],
subclasses: [],
fromObject: [Function (anonymous)]
},
Image: [Function: klass] {
superclass: [Function],
subclasses: [],
CSS_CANVAS: 'canvas-img',
fromObject: [Function (anonymous)],
fromURL: [Function (anonymous)],
ATTRIBUTE_NAMES: [Array],
fromElement: [Function (anonymous)],
filters: [Object]
},
isWebglSupported: [Function (anonymous)],
WebglFilterBackend: [Function: WebglFilterBackend],
Canvas2dFilterBackend: [Function: Canvas2dFilterBackend],
Text: [Function: klass] {
superclass: [Function],
subclasses: [Array],
ATTRIBUTE_NAMES: [Array],
DEFAULT_SVG_FONT_SIZE: 16,
fromElement: [Function (anonymous)],
fromObject: [Function (anonymous)],
genericFonts: [Array]
},
IText: [Function: klass] {
superclass: [Function],
subclasses: [Array],
fromObject: [Function (anonymous)]
},
Textbox: [Function: klass] {
superclass: [Function],
subclasses: [],
fromObject: [Function (anonymous)]
}
}
} |
|
type generation does not work, this ecosystem is shit. |
|
Why do you dislike the index files? |
|
Seems to work now |
|
Ok i still need to make a real compare between this export and old export and see what got lost, but this is ready to go. getEnv or config are somehow related. @ShaMan123 give it another check. I didn't remove any utils, not even the internal one. |
|
also 16k of unminified code disapparead means i forgot something. 400 lines of code are missing. and 4k bytes. |
asturur
changed the title
FilterBackend should be configurable. But maybe it should be standalone and have a setter of its own. Not sure. |
ShaMan123
reviewed
Jan 3, 2023
There was a problem hiding this comment.
IMO env should be a class with an exported instance, same as config for the following reasons:
- test stubbing/mocking is easy (no need for
setEnvForTests, an object is better to export in this case than multiple exports) - setting up custom env can done easily by the dev (subclassing) if we expose some setters
- internal state (is initialized etc.). We will probably need that when tackling SSR and node env.
- code styling
Shouldn't the index file be .ts? And shouldn't it reside under src?
All in all looks fine
Comment on lines
+430
to
+439
| 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; | ||
| } |
There was a problem hiding this comment.
what about this?
next PR?
this is handled by the umd output in rollup
There was a problem hiding this comment.
We have to fix exports.
Then this will go away automagically i hope.
Next PR or next 2, or next 3, i m not sure how hard it is.
That issue we had with prototype breaking and i m pointing the finger to different transpiling could be a pandora box of issues
| }); | ||
| } | ||
|
|
||
| setupEnv(); |
There was a problem hiding this comment.
Good point.
So we are talking about drp right?
If we move it to env will that be enough to do a lazy init?
All the index files
|
Co-authored-by: Shachar <34343793+ShaMan123@users.noreply.github.com>
The removed index files didn't get in the final build ever, unless you would use them as objects ( for example easing did, but wasn't 400 lines ). |
frankrousseau
pushed a commit
to cgwire/fabric.js
that referenced
this pull request
Jan 6, 2023
…rom TS to build the lib (fabricjs#8549)
ShaMan123
pushed a commit
that referenced
this pull request
Mar 16, 2024
…rom TS to build the lib (#8549)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
Try to package a build with proper import export withour relying on the fabric global object
Description
Slowly trying to get this to work, i hoped it was straight forward but it didn't work out of the box
Changes
Main changes
Other changes
In Action