Distill Errors with ZIM 019

Distill with ZIM 019 is currently broken.

I managed to run zim.distill() and got the following output:

7 83 28 9.99 17 6.1 83.36 21 22 1 50.44 50.5 50.435 50.34 10 17.6 12 50.432 47.5 59 50.6 50.7 7.5 47.6 34.85 52 50.97 48.1 40 41.7 51 41.55 50 50.8 13.5 9 48 54 41.5 13.45 53 41.8 41.6 6 18 20 19 45 45.3 11.5 30 41.97 8 13.46 31 41.1 34 39 13.32 32 45.12 45.22 83.3 83.35

Entering this into ZIM - Distill - ZIM Minify Tool - ZIMjs gives:

Error:
[ERROR] 6565:30:syntax error

[ERROR] 6566:23:syntax error

[ERROR] 6568:18:missing ; before statement

[ERROR] 6571:30:syntax error

[ERROR] 6572:23:syntax error

[ERROR] 6573:18:missing ; before statement

[ERROR] 6584:18:syntax error

[ERROR] 6585:8:syntax error

[ERROR] 6595:6:syntax error

[ERROR] 6596:18:syntax error

[ERROR] 6597:8:syntax error

[ERROR] 6600:6:missing ; before statement

[ERROR] 6602:4:syntax error

[ERROR] 6603:36:missing ; before statement

[ERROR] 6613:4:syntax error

[ERROR] 6615:21:missing ; before statement

[ERROR] 6618:18:syntax error

[ERROR] 6619:42:missing ; before statement

[ERROR] 6621:5:syntax error

[ERROR] 6624:4:syntax error

[ERROR] 6626:3:syntax error

[ERROR] 6679:2:syntax error

[ERROR] 11031:19:missing name after . operator

[ERROR] 11046:26:missing name after . operator

[ERROR] 11048:33:missing name after . operator

[ERROR] 11049:16:missing name after . operator

[ERROR] 11050:10:missing ) after argument list

[ERROR] 11051:15:syntax error

[ERROR] 11059:33:missing ; before statement

[ERROR] 11067:26:missing name after . operator

[ERROR] 11069:16:missing name after . operator

[ERROR] 11070:16:missing name after . operator

[ERROR] 11071:33:missing name after . operator

[ERROR] 11074:16:missing name after . operator

[ERROR] 11079:3:syntax error

[ERROR] 11081:32:missing ; before statement

[ERROR] 11089:3:syntax error

[ERROR] 11091:8:syntax error

[ERROR] 11092:18:missing ; before statement

[ERROR] 11093:15:syntax error

[ERROR] 11094:11:invalid return

[ERROR] 11095:4:syntax error

[ERROR] 11103:20:missing name after . operator

[ERROR] 11104:26:missing name after . operator

[ERROR] 11105:11:missing ) in parenthetical

[ERROR] 11106:16:syntax error

[ERROR] 11107:5:syntax error

[ERROR] 11108:10:syntax error

[ERROR] 11109:4:syntax error

[ERROR] 11110:3:syntax error

[ERROR] 11128:26:missing name after . operator

[ERROR] 11129:20:missing name after . operator

[ERROR] 11131:25:missing name after . operator

[ERROR] 11132:10:syntax error

[ERROR] 11133:58:missing ; before statement

[ERROR] 11135:4:syntax error

[ERROR] 11137:9:syntax error

[ERROR] 11138:3:syntax error

[ERROR] 11140:8:syntax error

[ERROR] 11141:24:missing ; before statement

[ERROR] 11142:9:syntax error

[ERROR] 11143:30:missing ; before statement

[ERROR] 11145:5:syntax error

[ERROR] 11146:4:syntax error

[ERROR] 11147:4:syntax error

[ERROR] 11156:19:missing name after . operator

[ERROR] 11157:25:missing name after . operator

[ERROR] 11158:10:missing ) after argument list

[ERROR] 11159:15:syntax error

[ERROR] 11160:4:syntax error

[ERROR] 11161:4:syntax error

[ERROR] 11162:2:syntax error

[ERROR] 11164:27:missing ; before statement

[ERROR] 11166:21:missing ; before statement

[ERROR] 11188:2:syntax error

[ERROR] 11189:27:missing ; before statement

[ERROR] 11190:27:missing ; before statement

[ERROR] 11192:2:syntax error

[ERROR] 11197:27:missing ; before statement

[ERROR] 11198:8:syntax error

[ERROR] 11199:2:syntax error

[ERROR] 11200:5:syntax error

[ERROR] 11603:1:syntax error

[ERROR] 11618:7:invalid return

[ERROR] 11619:1:syntax error

[ERROR] 1:0:Compilation produced 85 syntax errors.
org.mozilla.javascript.EvaluatorException: Compilation produced 85 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)

Well, at least when we have an error, we go big! Will take a look.

1 Like

We see the same:

image

But... with fewer numbers, we are getting something... so must be a specific number... doing some testing.

Seems to be an error with 50.5 and 83. Checking them out and also looking for that type of error perhaps in numbers that we did not test.

The error started in ZIM 016 - the Distill works with these (Container and Frame) before ZIM 016. I think this shows that not too much Distilling is going on these days. So seeing what the issue is.

Actually, container distills in 015 but frame does not. Both these have extra code underneath the class but still included in the distill number

image

image

Hmmm, was hoping that ZIM 015 did not have the extra code in the container but it does - it is pretty well the same code between the numbers.

image

There is a different error... it seems the errors are coming from the minifier saying that the code it is minifying has a bad syntax. Here is the error code for the Frame:

image

And here is the error code for the container

image

Okay... am just off to do a chore. Will think on it. It is a little tricky to debug as it is a node app and we might have to log in to another server, stop and start processes, etc. blah. But should be able to figure it out in the next couple hours.

Maybe if we can switch the minified and the complete code or comment out the minification, we can see what code it is trying to minify. And that would give us a clue because the line number would be there. etc. Right now, it is exiting before we see the non-minified code due to the error.

image

Thanks for your efforts Dan! I'm amazed more people don't use Distill. ZIM CAT 04 distilled down to 76kb transferred, whereas ZIM 019 without distillation is 445kb transferred. When your game downloads lots of images and music, and unfortunately ads to pay the bills, then Distill gives a fantastic saving that's not to be sniffed at.

Also, when the browser has to parse 1.5MB of JavaScript (unpacked) for ZIM then it's a big blocker on low end devices - I really notice problems with Time to Interactive core web vitals with those.

1 Like

Going in now with a temporary modified distill that comments out the minified and should show the code it was trying to minify. That way we can check the line numbers against the errors.

Found the container problem, we had arrow functions in the es5 code:

image

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.

image

Default is a reserved word in JS so I can see why it doesn’t work!

1 Like

Okay - replacing them with

image

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.

image

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.

1 Like

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:

  1. Add ZIM.Monitor (84) and ZIM.interval (9.8) to the DISTILL input.
  2. Manually add the zapp directives to the bottom of the distilled output:
// 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.

See ZIM Distill Updates

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.

Comparison of minified sizes (not gzipped):

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.