Lazy Closure Compiling

[nicopowa]

Following issue #4109

No choice yesterday, production code with warnings :(

I've been using Closure Compiler for a while, lots of personal & professional projects.

At the beginning I had one compile script per project (Linux or Windows), then I had to run different compile scripts within the same projects, and I got lazy.

Closure Compiler can export JavaScript to better JavaScript.

Vanilla ice cream is beautiful, command lines and frameworks are painful.

I wrote some code with a simple goal :

• click the button
• get some #00FF00 background-color Closure output
• click an other button
• upload complete
• go out fora ride, a swim, a coffee, or a beer.

My friends call it "the horrible code that produces nice code" 🤓

It is indeed horrible, but three years later, smooth late night hours :)

NPM, CommonJS, one and only dependency : google-closure-compiler

The full project can export other painful things :

• minified CSS
• externs
• PDF/HTML docs from JSDoc comments & types
• more docs from Markdown wikis

Using other dependencies :

• espree
• highlight.js
• markdown-it
• puppeteer
• sass

It can also compile some NodeJS CJS server into a single file, no node_modules black hole. Hardcore code, wonderful output.

I'm the only user, no need docs, but here it is ! Very basic, copy paste Markdown from Gitlab, see below.

Some codes are running on my jailbroken iPad1 iOs 5.1.1, incredible !

I'd be very pleased to share ideas and learn more Closure things

Thanks !

Also I chatted with Bard for the first time a few days ago, about Closure compiler, had a lot of fun.

And more questions ...

• bundled ES6 class to Worker experiment, not working yet
• things with typedef and obfuscation
• Closure Compiler ❤️

[nicopowa]

Lazy Google Closure Compiling

First things first

❤️️ Vanilla ice cream 🍦

🤖 Documented code

This tool aims to make never ending command lines magically disappear.

Please note : bugs could magically appear.

Goals

• clean maintainable code
• advanced compilation
• dot-syntax property names, NO_MORE["STR_PROPS"] ! ⛔
• debug || production packages
• compile library project with exposed properties and methods, or merge it in a single obfuscated bundle
• merge projects and dependencies
• extend compiled ES5 classes from uncompiled ES6 for dev & debug
• easy compiler options management
• include externs files
• produce optimal light obfuscated minified code files

Rules

To make things run smoothly :

• define a const DEBUG=true; script tag in inside development html file
• create compile.json file in project's root directory
• extra JSDoc properties
  • @construct : non-standard JSDoc for ES6 classes constructor
  • @async : standard JSDoc, but Closure doesn't like it
  • @getter/setter : non-standard
  • @force : non-standard, force export definition while compiling fully obfuscated bundled code
  • @comment : non-standard, I don't like untagged JSDoc lines
• dirty code exporting clean code 🤓

How it works :

• click the button
• parse compile.json file
• merge dependencies : recursive parsing compile.json files from sub projects
• create file list
• inject base.js from Closure Library to make Closure Compiler and JSDoc work together
• remove duplicates : files, dependencies, externs
• setup compile mode : bundle or standalone (see below)
• setup compile type : release or debug (see below)
• set output file : {myproject}.{compile_mode}.{compile_type}.min.js
• set options : add or override compiler command line options if needed
• inject externs files
• build final command line
• run it
• parse stdout & stderr
• create readable result : errors, warnings, line numbers, character indexes, highlight code
• inject copyright alongside "The Closure Library Authors"
• clean up the mess

Compile modes

bundle

• create tmp directory
• process and edit all files to be compiled
• remove all JSDoc @export tags to maximize obfuscation
• set DEBUG const to false, remove all if(DEBUG) {} code blocks
• keep @export if @force

standalone

• produce compiled code with public definitions exported to publish some library project

Compile types

debug

• verbose mode, keep if(DEBUG) {} code blocks

release

• empty console 🤫

Default options

• compilation_level : ADVANCED_OPTIMIZATIONS
• isolation_mode : IIFE
• warning_level : VERBOSE
• language_in : ECMASCRIPT_NEXT
• language_out : ECMASCRIPT5_STRICT
• rewrite_polyfills : false

Compile configuration

• compile.json file inside project root directory
  • object containing one property/value for every custom compilation mode
  • each compilation mode contains the following keys :
    • files : array of files to be compiled, path relative to compile.json file
    • options : inject compiler command line options, object containing "debug" and "release" keys, each represented by an array of objects {compilerCommandFlag: "flagValue"}
    • externs : array of strings, externs path, externs file name is hardcoded (path/to/project/project.externs.js)
    • merge : array of strings, projects to be merged into final package, "path/to/merged/project/{compileMode}

Sample projects

- DefaultApp : server module + client pwa base + mvc + utils

- DefaultLib : client lib 

Compiled NodeJS server

Single file ES5 server x)

HTTP/S, URL & error handling, GET && POST, cookies, multi-module, static files, and more stuff.

chaotic undocumented code, but the index.min.js runs smoothly

[niloc132]

Can you share a link to the project, or to the example apps that use it?

[nicopowa]

I like this one, not updated for a while.
https://github.com/nicopowa/snippet

Also I use it a lot for private projects, several museums and exhibitions in France.

& interesting MediaStreams / audio / video processing experiments .