Found the container problem, we had arrow functions in the es5 code:
Also arrow function in Keyboard, Ticker, and interval. So replacing those with anonymous functions.
For the Frame error, it does not seem to like the obj.default - not sure why. It says missing name after . like it does not like using "default" as a property name.
Default is a reserved word in JS so I can see why it doesn’t work!
Okay - replacing them with
And see if it gets past the check... it should. Other minifiers did not care about obj.default buy the one we are using in Distill seems to. We ran into that problem before with another keyword in js. Can't remember - a weird one like "description" or something.
Okay... that is updated and seemed to get us past the issues.
Let us know if there is anything else as you go, and thanks for your patience and help.
Cheers.
Thank you! I’ll test it tomorrow.
Distill works now, but the distilled output is missing ZIM.Monitor.
Uncaught TypeError: can't access property "frames", zim.Monitor is undefined
ZIM.Monitor is also missing from the functions list so I'm unable to add it manually.
Edit: I have got a working distill with the following steps:
// zapp directives
WW.zapp_scaling = null;
WW.zapp_width = null;
WW.zapp_height = null;
WW.zapp_color = null;
WW.zapp_outerColor = null;
WW.zapp_assets = null;
WW.zapp_path = null;
WW.zapp_progress = null;
WW.zapp_gpu = null;
WW.zapp_gpuObj = null;
WW.zapp_maxNum = null;
WW.zapp_singleTouch = null;
I've discovered another Distill issue with the following input:
21 28 22 1 50.44 50.5 50.435 50.34 10 17.6 12 50.432 47.5 7 59 50.6 50.7 7.5 47.6 34.85 50.8 13.5 9 41.5 13.45 50 48.1 40 52 50.97 45.3 8 54 41.55 27.66 27.6 27.5 55 41.1 48 6.1 6 18 20 19 41.7 45 11.5 17 30 53.2 81.5 81.6 31 34 51 47.8 47.7 32 47.87 13 13.1 27.8 13.3 27.7 13.47 13.34 13.4 53.15 41.8 14 41.95 41.97 41.6 27.9 45.5 47.88 69.972 33.16 35 50.1 11.7 45.12 33.165 69.9 33.15 53.5 9.8 9.7 83.3 83.35 83 9.99 83.36 13.46 39 13.32 53 45.22 84
Error:
[ERROR] 12871:11:missing ; before statement
[ERROR] 1:0:Compilation produced 1 syntax errors.
org.mozilla.javascript.EvaluatorException: Compilation produced 1 syntax errors.
at com.yahoo.platform.yui.compressor.YUICompressor$1.runtimeError(YUICompressor.java:154)
at org.mozilla.javascript.Parser.parse(Parser.java:392)
at org.mozilla.javascript.Parser.parse(Parser.java:337)
at com.yahoo.platform.yui.compressor.JavaScriptCompressor.parse(JavaScriptCompressor.java:312)
at com.yahoo.platform.yui.compressor.JavaScriptCompressor.(JavaScriptCompressor.java:533)
at com.yahoo.platform.yui.compressor.YUICompressor.main(YUICompressor.java:131)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:566)
at com.yahoo.platform.yui.compressor.Bootstrap.main(Bootstrap.java:21)
Oh - will add the Monitor and zapp directives. And test that batch of numbers. I suppose we should just test all the numbers or add a little switch somewhere that does that for us. Should be able to look into this today. Cheers.
Started in on it - looking good. I think we can just remove any line with ZIM.Monitor. Anyway - have to go out to a punk book event. Will continue on afterwards. Nothing active yet.
Distill has been updated. We had a let variable in the Blob code. We ran Distill with all the functions and noted five classes that will not run with Distill minify as they have ES6 in them. For those, you can check no minify and minify yourself. No minify will also let you still run Distill and see where any errors may happen. For instance, if we let an arrow function or const/let slip in.
Distill is working great now thank you.
I am amazed how much both CreateJS grew from 1.3.4 => 1.5, and ZIM Cat 04 => ZIM 019, for the same project. A lot of code which apparently can't be tree-shaken has been added to both.
CreateJS 1.3.4 => 243kB
CreateJS (2.0 see Pull Request) => 266kB
ZIMJS CAT04 (DISTILLED) => 150kB
ZIMJS 019 (DISTILLED) => 270kB
Unless we can tree shake the recently added features better, which I'm not using on Topmarks, I'm inclined to stick with the older versions and patch the modernization changes back into CreateJS 1.3.4.
So your distill numbers, you put in the same app code numbers for each, and the difference coming out was 120k of minified code? That is a lot. What were your numbers and we will see what is causing the difference.
So I collate all the distill numbers across my all games using a python script. It pops out these:
21 28 22 1 50.44 6.1 50.5 50.435 50.34 10 17.6 12 50.432 47.5 7 59 50.6 50.7 7.5 47.6 34.85 50.8 13.5 9 41.5 13.45 50 48.1 40 52 50.97 48 41.55 41.97 54 27.66 27.6 27.5 55 41.1 41.7 41.95 69.9 47.7 33.15 9.8 11.7 30 45.3 6 18 20 19 35 45 11.5 17 9.7 13.46 7.8 66.5 45.5 13.61 41.64 13.2 41.71 50.1 8 31 34 56 27.68 41.2 36 41.63 32 45.12 83.3 83.35 83 9.99 83.36 41.8 53 27.65 51 41.6 39 13.32 45.22 53.2 81.5 81.6 47.8 47.87 13 13.1 27.8 13.3 27.7 13.47 13.34 13.4 53.15 14 27.9 47.88 69.972 33.16 33.165 53.5 13.466
Using the above numbers...
// ZIM - https://zimjs.com - DISTILLED NON-MINIFIED (570.7 KB) cat/04/ZIM
// ZIM - https://zimjs.com - DISTILLED NON-MINIFIED (737.1 KB) 019/ZIM
So a lot of dependencies must have been added to the parts of ZIM that I've used.
Sorry, @Chris_S - lost the thread on this one.
Here is a diff test on these two. I just scanned it quickly and cannot quite tell - did not see individual classes that have been added - it seems like just lots of additions to the classes there. But did not look closely enough. Maybe AI can tell faster.
https://www.diffchecker.com/qm5qjBRI/
Will see if I can get it to analyse.
Asked Claude: what new classes or methods have been added from the first file to the second file? And how many bytes are in each. Also, list the top 20 classes or functions that are in both files ordered by the most changes and list the bytes or kb of the changes.
| Rank | Class / Function | Approx. Change |
|---|---|---|
| 1 | Frame | ~65 KB added -” pointer events, cursor system, ready/ticker params, loadAssets overhaul, format detection, keyboardMessage, blur detection |
| 2 | Blob | ~45 KB added -” splitBlob, makeSquiggle, reversePoints, splitPoints, selectPoint, removePoint, stickThickness, circleColor params, SVG string support |
| 3 | Squiggle | ~40 KB added -” makeBlob, appendPoints, reversePoints, splitPoints, removePoint, selectPoint, stickThickness, circleColor, traverse rework |
| 4 | animate | ~35 KB added -” startCall, animateCall, sequenceRatio, rewindPick, noAnimateCall, pathDamp, Timeline-style percentComplete, latestTween, style param |
| 5 | Tile | ~30 KB added -” per-cell backgrounds, backdropColor, mat, scaleToH/V, variable spacing arrays, setSpacing, setProps, remake overhaul |
| 6 | Button | ~20 KB added -” full 3-state system (normal/roll/down), downBacking, downIcon, downColor, downBorderColor, autoPadding, width=auto |
| 7 | Bitmap | ~18 KB added -” keyOut, removeGreenScreen, addBitmapData, color flood fill, getColorAt array return, scale param, cacheScale |
| 8 | Emitter | ~15 KB added -” warm/doWarm, focusWarm, variable life per particle, Sprite frame randomization, improved pooling |
| 9 | drag | ~15 KB added -” axis param, dropTargets/dropCopy/dropSnap/dropBack/dropEnd/dropFull/dropHitTest/dropScale, circle boundary, List drop support, dropOriginal |
| 10 | Container | ~12 KB added -” sortBy(), normalize(), getBounds(targetSpace), setBounds normalization, cache adjustBounds option, backdropColor |
| 11 | Sprite | ~10 KB added -” JSON hash/array/XML format auto-detection, randFrame, run improvements, single frame support |
| 12 | Label | ~8 KB added -” lineHeight setter, paddingH/V rename, colorOnly, labelHeight fixes, italic background skew |
| 13 | loop | ~7 KB added -” interval async looping, immediate param, complete/completeParams, collapse, Dictionary loop support |
| 14 | getStyle / styleTransforms | ~7 KB added -” groupOnly, lazy group detection, DIR RTL, shadow, cursor, noMouse, siz, uppercase, tap/change/hold style support |
| 15 | series | ~6 KB added -” flip(), mix(), random(), shuffle(), recursive Pick inside series, length property |
| 16 | convertColor | ~6 KB added -” hsl conversion, 8-digit hex, hexstring type, array return, number input |
| 17 | pos | ~5 KB added -” DIR RTL start/end support, add:false fix, zimPos tracking |
| 18 | CheckBox | ~5 KB added -” rtl param, PICK support for label/startChecked, layout fixes |
| 19 | Ticker | ~4 KB added -” isUpdating(), getFPS(), mID/tether params throughout, pointer-based leftEvent |
| 20 | specialColor | ~4 KB added -” angle-based gradient support, auto-bounds for radial/linear, full rewrite of gradient logic |
Unfortunately did not add sizes - and my tokens are up for the day. I guess it was a pretty big job ;-).
New classes:
| Class | Notes |
|---|---|
| ZIM.Point | Extended from createjs.Point with degree-based angle() and project() |
| ZIM.SVGContainer | SVG path processing |
| ZIM.Dat | XML/data parser |
| ZIM.Flare | New shape type |
| ZIM.MultiEffect | Hue/saturation/brightness/contrast filter |
| ZIM.GradientColor | Gradient color with angle support |
New methods and funcitons:
| Method | Notes |
|---|---|
| ZIM.browserScrollX / Y | Replaces old scrollX / scrollY |
| ZIM.scrollX / scrollY | Renamed to browserScroll internally |
| ZIM.arraysEqual | Array comparison |
| ZIM.arrayMinMax | Get min/max of an array |
| ZIM.reversePoints | Reverse Blob/Squiggle points |
| ZIM.appendPoints | Append points to a path |
| ZIM.prependPoints | Prepend points to a path |
| ZIM.splitPoints | Split a path at an index |
| ZIM.trimPointEnds | Trim point handle ends |
| ZIM.transformPoints | Transform Blob/Squiggle points |
| ZIM.getPointAtPercent | Get point along a line at percent |
| ZIM.svgToBitmap | Convert SVG to Bitmap |
| ZIM.setProps | Set properties on array of objects |
| ZIM.isPick extended | Now handles noPick passthrough |
| ZIM.ggo / zgo | URL navigation helper |
| ZIM.zum | Parse pixel values (parseInt on CSS) |
| ZIM.zimEase | Custom ease curve generator |
| ZIM.getStyle groupOnly | New parameter for group-only style lookup |
| ZIM.Pick.getMinMax | Get min/max from ZIM VEE |
| series().flip() | New bounce variant on series |
| series().mix() | Shuffle avoiding last value |
| series().shuffle() | Shuffle array |
| series().random() | Random mode |
| Container.sortBy() | Sort children by property |
| Container.normalize() | Normalize children positions/ratios |
| Blob.splitBlob() | Split blob into two blobs |
| Blob.makeSquiggle() | Convert Blob to Squiggle |
| Squiggle.makeBlob() | Convert Squiggle to Blob |
| Squiggle.removePoint() | Remove point at index |
| Blob.removePoint() | Remove point at index |
| Squiggle/Blob.selectPoint() | Programmatically select a point |
| Squiggle/Blob.reversePoints() | Reverse point order |
| Squiggle.appendPoints() | Append points |
| Squiggle.splitPoints() | Split into two Squiggles |
| Bitmap.keyOut() | Color keying (chroma key) |
| Bitmap.removeGreenScreen() | HSL-based green screen removal |
| Bitmap.addBitmapData() | CreateJS BitmapData support |
| Bitmap.color() | Flood fill color |
| Sprite JSON hash/array format support | Phaser/TexturePacker format auto-detection |
| Frame ready callback parameter | Direct function parameter |
| Frame ticker callback parameter | Ticker function in Frame constructor |
| Frame.keyboardMessage() | Iframe keyboard access helper |
| Frame.cursorList + cursor system | Full custom cursor management |
| Frame pointer events | Full pointer event system added |
| Frame.reloaded | Detect page reload |
| Emitter warm / doWarm | Pre-warm particle system |
| Emitter focusWarm | Re-warm on tab focus |
| Tile scaleToH/V/Type | Scale items to fit cells |
| Tile backgroundColor / backing per cell | Per-cell backgrounds |
| Tile backdropColor | Overall tile backdrop |
| Tile mat | Mat/overlay for tile |
| Tile setSpacing() | Dynamic spacing update |
| Tile setProps() | Set properties on all items |
| Tile variable spacing (arrays) | spacingH/V can now vary per gap |
| Button downBackgroundColor | Third state (pressed) color |
| Button downBacking/Icon | Third state visuals |
| Button.wait() | Programmatic wait trigger |
| CheckBox rtl parameter | Right-to-left support |
| Label paddingH/V renamed | (were paddingHorizontal/Vertical) |
| Label lineHeight setter | Dynamic line height |
| ZIM.hov() | Hover shortcut method |
| ZIM.dye() | Color tint method |
| ZIM.blendmodes() | Cycle blend modes |
| ZIM.ble() | Blend mode shortcut |
| ZIM.change() / noChange() | Change event helpers |
| ZIM.noTap() | Remove tap events |
| ZIM.hitTestRectPoint() | Hit test rect vs point |
| ZIM.hitTestCirclePoint() | Hit test circle vs point |
| zimify bounds params a,b,c,d | Can now auto-set bounds |
One question... why is Flare in there. That is a pretty big class - I will check to see, maybe there is a duplicate distill number for it.
OH - the new classes listed are mostly not in there - they are just references in the included code but were never activated so distill does not pick them up.
There are actually 126 ZIM entries in the Cat version and 127 ZIM entries in the 019 version. So... that is good. I do not know what the new one is in ZIM but it can't be that bad. So, to me, it looks like the difference in size is additions to the existing classes. We will have a look at the leading ones there... Frame, Blob, Squiggle, Animate, Tile, etc. but I bet there will not be too much we can do about it.
Almost 300k for the top 10. That is about 22k g-zipped.
Was the Bitmap library added, and isn't that quite large? I seem to remember looking at that and wondering why it wasn't an optional external library.
To be honest, I've been on an epic journey the last couple of months. I have created a minimal, modular framework with zero dependencies. It includes the typical scene graph features. But I've also added a Lottie style animation module which supports your typical transformations as well as awesome path deformation, spatial motion animations, programmatic modifiers, the list goes on. I also made a visual "Morph Editor" tool with scrubbable play head on the timeline.
The upshot, is that I'm using ZIM less than I was, and I have felt sadness about it as I've loved working with ZIM!
The current 420KB gzipped CreateJS + ZIM 019 combo, has been heading in a direction I wasn't comfortable with. Each recent releases have added some really cool new features, but they have generally been less useful for us. Compare this with my modern, opinionated framework which, including common game bootstrapping code with fullscreen and visibilitychange handling etc, is 29KB gzipped.
