[TYPO3-dev] protopack

Sat Apr 26 13:25:47 CEST 2008

Hi,

i think protopack could be interesting for us. Compressing JS libs can be 
problematic as most packers have problems with some lines. Therefor is a 
package called protopack, i post the readme here for interesting read:

Disclaimer:

The compressed versions of Prototype/Scriptaculous included in this package 
are

NOT SUPPORTED by the Prototype Development Team or Thomas Fuchs. If you find 
a bug,

please email at john.david.dalton at gmail.com.

About:

ProtoPack is an organized collection of compressed versions of Prototype and 
Scriptaculous.

In MOST cases all I have done is format the code so that it is easily 
compressed by

MOST popular JavaScript compressors.

Note:

If you wish to re-compress Prototype v1.6 or higher Do NOT use Dean Edward's 
Packer 3.0 with "Shrink variables" option.

Read about why Prototype 1.6 has issues with the "Shrink variables" option 
under the "Interesting notes"

section of this readme.

If using YUI Compressor v2.2 or higher the $super variable is skipped so you 
don't have to worry about it.

I am also aware that Prototype v1.6 or higher has issues with the PHP 
version of Douglas Crockford's

JSMin found here: http://javascript.crockford.com/jsmin2.php.txt

However, Ryan Grove's port works perfectly well:

http://code.google.com/p/jsmin-php/

Run the following commands in Zend Studio to prepare Prototype 
1.6/Scriptaculous 1.8.1 or higher for

Packer 3.0 variable shrinking :

1) Find and Replace (Ctrl+H)

2) In "Find What" field type: $super(

3) In "Replace With" field type: "$super"(

4) Run Dean Edwards' Packer 3 with "Shrink variables" checked

5) Take output and replace "$super"( with $super( and replace the first

method param of methods containing "$super(" with $super

Instructions:

* This pack contains the following compressed versions of Prototype: 1.4, 
1.5, 1.5.1.2, 1.6.0.2

and Scriptaculous: 1.7.1_beta3, 1.8.1

* The root folder has an example using one of the smallest Prototype 1.6.0.2 
forms in this package.

* prototype.js is prototype-1.6.0.2-shrinkvars.js.

* "Protoculous" is a single file with Prototype and Scriptaculous combined.

Open the "files" folder.

Choose either "original", "formatted", or "compressed".

Original > The original unmodified forms of all the Prototype/Scriptaculous 
versions.

Formatted > The formatted forms of all the Prototype/Scriptaculous versions.

These versions contain all the semicolons, regExp mods and such that make 
them work with the compressors.

Compressed > The compressed forms of all the Prototype/Scriptaculous 
versions.

Each version has 2 different compressed forms.

- packer: compressed with Dean Edward's Packer 3 \w "Base62 encode" and 
"Shrink variables" options

- shrinkvars : compressed with Dean Edward's Packer 3 \w "Shrink variables" 
option only

Gzipped > The "gzipped" folders contain the gzipped forms of all the scripts 
in the current folder.

Realistically, I would stick to the gzipped "shrinkvars" versions.

They have no js compression, which means no startup delay.

In MOST cases they also create the smallest gzipped file size (Prototype 
1.6.0.2 is 20.7kb).

To load gzipped files you need to go through a server side language such as 
PHP.

Some have used the .gz file directly but that's not universally supported.

* Learn about Real File Compression at:

* http://www.thinkvitamin.com/features/webapps/serving-javascript-fast

*

* OR JavaScript/CSS file concatenation and compression at:

* http://code.google.com/p/minify/

* 
http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files

*

* OR Prado - The awesome PHP Framework that utilize script concatenation and 
compression at:

* http://www.pradosoft.com

* http://www.pradosoft.com/demos/quickstart/?page=Advanced.Scripts3

*

* OR Andrea Giammarchi has created a great GzOutput.class for PHP 5.

* Use in conjunction with the "shrinkvars" js versions to get the best of 
the gzipped goodness.

* http://www.devpro.it/php5_id_145.html

* http://webreflection.blogspot.com/

Example Prototype usage:

Good:

<script type="text/javascript" src="prototype.js"></script>

Good:

<script type="text/javascript" src="gz.php?src=prototype"></script>

Bad:

<script type="text/javascript" src="prototype.gz"></script>

Example Protoculous usage:

Good:

<script type="text/javascript" src="protoculous.js"></script>

Good:

<script type="text/javascript" src="protoculous-packer.js"></script>

Good:

<script type="text/javascript" src="protoculous.js?load=addon"></script>

Good:

<script type="text/javascript" src="gz.php?src=protoculous"></script>

Bad:

<script type="text/javascript" src="protoculous.gz"></script>

Custom Scriptaculous Builds:

As of Scriptaculous 1.8.0, I have left the Scriptaculous/Protoculous 
"shrinkvar"

versions segmented so you can create your own custom compressed builds.

To do so simply:

1) Remove the sections you dont want

2) Remove the comments by hand or running Dean Edward's Packer (with no 
options selected)

3) Optionally Gzip

4) Done.

An example of a popular custom build can be found in 
files\compressed\protoculous\version (1.6.0.2 + 1.8.1)\

protoculous-effects-shrinkvars.js

protoculous-effects-packer.js

Tested successfully on:

win:

opera 9.10, 9.5 alpha

firefox 2.0.0.1, 2.0.0.11

ie 7.0

ie 6.0.2

ie 5.5

safari 3 (xp beta)

mac:

firefox 1.5.01

firefox 2.0.0.2

camino 1.0.4

opera 9.1

omniWeb 5.1.3

safari 1.3.2

safari 2.0.2

safari 2.0.4

safari 3 (osx 10.4.9 beta)

webkit 2.0.4 (nightly build)

omniweb 5.5.4

Tested unsuccessfully on:

win:

ie 5.1

mac:

ie 5.2

opera 6.3

Interesting notes:

I have tried YUI Compressor, Dojo Shrink Safe and others and have found Dean 
Edwards packer to be

superior for compressing Prototype. In some cases YUI Compressor produces 
smaller standard code, by

about 1.6kb, but gzips a bit bigger.

Prototype v1.6 or higher no longer need to be formatted because all of the 
missing semi-colons

have been added by the core devs.

Prototype 1.6 and controls.js of Scriptaculous 1.8.1 would not initially 
compress via Dean Edward's Packer with "shrinkvar" option,

because of how Prototype uses the var "$super".

More info can be found here: http://ajax.sys-con.com/read/464826.htm

Safari doesn't like Dean Edward's "Packer 2" when it removes the semicolons 
after a "throw".

I had to add those back to all the encodings.

Safari 2.0.4/Omniweb 5.5.4 have a bug in them that causes certian "High 
ASCII" text in eval()'s to error out.

For example: eval('if(/"/.¡(""));'.replace(/¡/g,'test'));

That is why I switched to none High ASCII compressions.

vg Steffen