Skip to content

AMD support #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

AMD support #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
601691d
AMD support, build js bundles using requirejs
rxaviers Jul 18, 2013
97a917c
AMD support, overload requirejs "node/file" to use memory cached file…
rxaviers Jul 24, 2013
eb19371
AMD support, make Builder#build asynchronous
rxaviers Aug 1, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions download.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
var downloadLogger, jqueryUis,
_ = require( "underscore" ),
Builder = require( "./lib/builder" ),
fs = require( "fs" ),
Handlebars = require( "handlebars" ),
JqueryUi = require( "./lib/jquery-ui" ),
Expand Down Expand Up @@ -83,7 +84,7 @@ Frontend.prototype = {

create: function( fields, response, callback ) {
try {
var build, components, packer, start, theme,
var builder, components, jqueryUi, packer, start, theme,
themeVars = null;
if ( fields.theme !== "none" ) {
themeVars = querystring.parse( fields.theme );
Expand All @@ -99,10 +100,11 @@ Frontend.prototype = {
});
components = Object.keys( _.omit( fields, "scope", "theme", "theme-folder-name", "version" ) );
start = new Date();
build = JqueryUi.find( fields.version ).build( components, {
jqueryUi = JqueryUi.find( fields.version );
builder = new Builder( jqueryUi, components, {
scope: fields.scope
});
packer = new Packer( build, theme, {
packer = new Packer( builder, theme, {
scope: fields.scope
});
response.setHeader( "Content-Type", "application/zip" );
Expand All @@ -116,9 +118,9 @@ Frontend.prototype = {
JSON.stringify({
build_size: written,
build_time: new Date() - start,
components: build.components,
components: builder.components,
theme_name: theme.name,
version: build.pkg.version
version: jqueryUi.pkg.version
})
);
return callback();
Expand Down
4 changes: 2 additions & 2 deletions lib/builder.1.10.0.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ stripBanner = util.stripBanner;
/**
* Builder 1.10
*/
function Builder_1_10_0( build, jqueryUi, components, options ) {
function Builder_1_10_0( build, jqueryUi, components, options, callback ) {
var _bundleCss, baseCss, baseCssMin, cssComponentFileNames, existingCss, jsComponentFileNames, selectedDemoRe, selectedRe,
files = jqueryUi.files(),
min = function( file ) {
Expand Down Expand Up @@ -200,7 +200,7 @@ function Builder_1_10_0( build, jqueryUi, components, options ) {
// Ad hoc
build.jqueryCore = files.jqueryCore;

return build;
callback( null, build );
}

module.exports = Builder_1_10_0;
120 changes: 82 additions & 38 deletions lib/builder.1.11.0.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
var _basename, demoIndexTemplate, docsTemplate, flatten, stripBanner,
async = require( "async" ),
banner = require( "./banner" ),
Files = require( "./files" ),
fs = require( "fs" ),
handlebars = require( "handlebars" ),
path = require( "path" ),
rjs = require( "./rjs" ),
sqwish = require( "sqwish" ),
ThemeRoller = require( "./themeroller" ),
util = require( "./util" );
Expand All @@ -23,8 +25,8 @@ path.basename = function() {
/**
* Builder 1.11
*/
function Builder_1_11_0( build, jqueryUi, components, options ) {
var _bundleCss, baseCss, baseCssMin, cssComponentFileNames, docsCategories, existingCss, jsComponentFileNames, selectedDemoRe, selectedRe,
function Builder_1_11_0( build, jqueryUi, components, options, callback ) {
var _bundleCss, baseCss, baseCssMin, cssComponentFileNames, docsCategories, existingCss, selectedDemoRe, selectedRe,
files = jqueryUi.files(),
min = function( file ) {
return files.min( file );
Expand Down Expand Up @@ -69,41 +71,6 @@ function Builder_1_11_0( build, jqueryUi, components, options ) {
return (/images/).test( file.path );
});

// I18n files
if ( components.indexOf( "datepicker" ) >= 0 ) {
build.i18nFiles = files.i18nFiles;
build.i18nMinFiles = files.i18nFiles.map( min );
build.bundleI18n = Files({
path: "jquery-ui-i18n.js",
data: files.i18nFiles.reduce(function( sum, file ) {
return sum + stripBanner( file );
}, banner( jqueryUi.pkg, files.i18nFiles.paths().map( path.basename ) ) )
});
build.bundleI18nMin = Files({
path: "jquery-ui-i18n.min.js",
data: banner( jqueryUi.pkg, files.i18nFiles.paths().map( path.basename ), { minify: true }) + stripBanner( files.min( build.bundleI18n[ 0 ] ) )
});
} else {
build.i18nFiles = build.i18nMinFiles = build.bundleI18n = build.bundleI18nMin = Files();
}

// Bundle JS (and minified)
jsComponentFileNames = components.map(function( component ) {
return component + ".js";
});
build.bundleJs = Files({
path: "jquery-ui.js",
data: build.components.reduce(function( sum, component ) {
return sum + stripBanner( files.get( "ui/" + component + ".js" ) );
}, banner( jqueryUi.pkg, jsComponentFileNames ) )
});
build.bundleJsMin = Files({
path: "jquery-ui.min.js",
data: build.components.reduce(function( sum, component ) {
return sum + stripBanner( files.min( files.get( "ui/" + component + ".js" ) ) );
}, banner( jqueryUi.pkg, jsComponentFileNames, { minify: true } ) )
});

// Bundle CSS (and minified)
existingCss = function( component ) {
return files.get( "themes/base/" + component + ".css" ) !== undefined;
Expand Down Expand Up @@ -208,7 +175,84 @@ function Builder_1_11_0( build, jqueryUi, components, options ) {
// Ad hoc
build.jqueryCore = files.jqueryCore;

return build;
// I18n files
function i18nFiles( callback ) {
if ( components.indexOf( "datepicker" ) >= 0 ) {
build.i18nFiles = files.i18nFiles;
build.i18nMinFiles = files.i18nFiles.map( min );
async.series([
function( callback ) {
rjs({
files: files,
include: files.i18nFiles.rename( /ui\//, "" ).map(function( file ) {
return file.path;
}),
exclude: [ "jquery", "jqueryui/core", "jqueryui/datepicker" ],
jquery: files.jqueryCore[ 0 ].path
}, function( error, data ) {
if ( error ) {
return callback( error );
}
build.bundleI18n = Files({
path: "jquery-ui-i18n.js",
data: banner( jqueryUi.pkg, files.i18nFiles.paths().map( path.basename ) ) + data
});
callback();
});
},
function( callback ) {
build.bundleI18nMin = Files({
path: "jquery-ui-i18n.min.js",
data: banner( jqueryUi.pkg, files.i18nFiles.paths().map( path.basename ), { minify: true }) + stripBanner( files.min( build.bundleI18n[ 0 ] ) )
});
callback();
}
], callback );
} else {
build.i18nFiles = build.i18nMinFiles = build.bundleI18n = build.bundleI18nMin = Files();
callback();
}
}

// Bundle JS (and minified)
function bundleJs( callback ) {
var jsComponentFileNames = components.map(function( component ) {
return component + ".js";
});
async.series([
function( callback ) {
rjs({
files: files,
include: jsComponentFileNames,
exclude: [ "jquery" ],
jquery: files.jqueryCore[ 0 ].path
}, function( error, data ) {
if ( error ) {
return callback( error );
}
build.bundleJs = Files({
path: "jquery-ui.js",
data: banner( jqueryUi.pkg, jsComponentFileNames ) + data
});
callback();
});
},
function( callback ) {
build.bundleJsMin = Files({
path: "jquery-ui.min.js",
data: banner( jqueryUi.pkg, jsComponentFileNames, { minify: true } ) + stripBanner( files.min( build.bundleJs[ 0 ] ) )
});
callback();
}
], callback );
}

async.series([
i18nFiles,
bundleJs
], function( error ) {
callback( error, build );
});
}

module.exports = Builder_1_11_0;
40 changes: 31 additions & 9 deletions lib/builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
var cache,
Builder_1_10_0 = require( "./builder.1.10.0.js" ),
Builder_1_11_0 = require( "./builder.1.11.0.js" ),
Cache = require( "./cache" ),
semver = require( "semver" );

Expand All @@ -22,23 +20,47 @@ function Builder( jqueryUi, components, options ) {
}

Builder.prototype = {
build: function() {
build: function( callback ) {
var cacheKey = this.jqueryUi.pkg.version + JSON.stringify( this.expandComponents( this.components ) ),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sidenotes:

Builder#build was synchronous (the bundles were created by concatenating strings). Now, with requirejs, it gets async.

Initially, I've tried to avoid changing the workflow of Builder to be asynchronously. I came up with an idea of wrapping rjs output with an Stream (on rjs completion, it set the readable stream as readable) (it was using https://github.com/isaacs/readable-stream to support node 0.8). The idea worked just fine, because Builder could return an output synchronously, and the archiver (zipper) knew how to handle the asynchronous Stream data. Although, it turned out to be a problem for two reasons: (a) on certain places I needed to process the bundles (but, my own stream wrapper was able to chain those operations), (b) packer copies the same bundle into two different locations, when that happens both files reference the same data, after the first data is read by the zipper, the Stream drains out, when it tries to read the second file, the read gets stuck and thats a complicated problem to solve. I gave up and thought it was easier to change Builder to be async :P.

I had prepared the async change terrain with this previous commit 5c336d2.

cached = cache.get( cacheKey );

if ( cached ) {
return cached;

// if we have data, call the callback, otherwise push ours
if ( cached.data ) {
callback( null, cached.data );
} else {
cached.callbacks.push( callback );
}
return true;
}

cached = {
callbacks: [ callback ]
};
cache.set( cacheKey, cached );

function done( err, data ) {
var callbacks = cached.callbacks;
if ( !err ) {
cached.data = data;
delete cached.callbacks;
}
callbacks.forEach(function( callback ) {
callback( err, data );
});
delete cached.callbacks;
if ( err ) {
cache.destroy( cacheKey );
}
}

// FIXME s/1.11.0pre/1.11.0
if ( semver.gte( this.jqueryUi.pkg.version, "1.11.0pre" ) ) {
cached = Builder_1_11_0( this, this.jqueryUi, this.components, this.options );
require( "./builder.1.11.0" )( this, this.jqueryUi, this.components, this.options, done );
} else {
cached = Builder_1_10_0( this, this.jqueryUi, this.components, this.options );
require( "./builder.1.10.0" )( this, this.jqueryUi, this.components, this.options, done );
}

cache.set( cacheKey, cached );
return cached;
},

expandComponents: function( components ) {
Expand Down
9 changes: 0 additions & 9 deletions lib/jquery-ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,15 +87,6 @@ JqueryUi.find = function( version ) {
};

JqueryUi.prototype = {
build: function( components, options ) {
var builder;
if ( !Builder ) {
Builder = require( "./builder" );
}
builder = new Builder( this, components, options );
return builder.build();
},

categories: function() {
if ( !this._categories ) {
var map = {};
Expand Down
Loading