Super simplify UI 1.12.0 Builder

[rxaviers]

jQuery UI 1.12 has adopted the Mobile way to declare its CSS dependencies using JS comments. Given this step, we are able to super generalize builder. For example, the following JSON could be used as a configuration-guide on how to build the package.

Maintenance/changes for the package content could ideally be adjusted by fixing the configuration JSON instead of changing the download builder (the builder code).

{
  "external/jquery.js": {
    "bower": {
      "endpoint": "jquery@<version>",
      "file": "dist/jquery.js"
    }
  },
  "images": {
    "themeroller-images": {
      "vars": "{{vars}}"
    }
  },
  "index.html": {
    "template": xxx
  },
  "jquery-ui.css": {
    "concat": [
      "bundle://jquery-ui.structure.css",
      "bundle://jquery-ui.theme.css"
    ]
  },
  "jquery-ui.js": {
    "amd": {
      "include": "{{components}}"
    }
  },
  "jquery-ui.structure.css": {
    "jquery-css": {
      "selector": "structure",
      "include": "{{components}}"
    }
  },
  "jquery-ui.theme.css": {
    "themeroller": {
      "base": {
        "jquery-css": {
          "selector": "theme",
          "include": "{{components}}"
        }
      },
      "vars": "{{vars}}"
    }
  },
  "jquery-ui.min.css": {
    "sqwish": [
      "bundle://jquery-ui.css"
    ]
  },
  "jquery-ui.min.js": {
    "uglify": [
      "bundle://jquery-ui.css"
    ]
  },
  "jquery-ui.structure.min.css": {
    "sqwish": [
      "bundle://jquery-ui.structure.css"
    ]
  },
  "jquery-ui.theme.min.css": {
    "sqwish": [
      "bundle://jquery-ui.theme.css"
    ]
  },
}

The idea is having a builder API similar to Builder( configuration, runtime );. For example:

Builder( configurationAbove, {
  components: [ "core", "widget", ... ]
  vars: {
    ffDefault: "Arial,Helvetica,sans-serif",
    fsDefault: "1em",
    ...
  }
});

• Need to polish this idea.

[arschmitz]

@rxaviers something like this would make sense, considering this needs to be used by both ui, and mobile. To have it as general as possible will be a good thing.

[scottgonzalez]

A few concerns off the top of my head:

• JSON configurations tend to be painful for this stuff. This is why large projects never have sane Gruntfiles.
• We'll probably need to build fairly complex dependency logic to handle things like building minified files only after their dependent files. This is like rebuilding the dependency mappings from AMD.
• We probably shouldn't use module names for actions. sqwish and uglify may be tools we use today, but what about tomorrow?
• We probably want to resolve external dependencies within the individual projects, rather than having a bower endpoint in the config.

[rxaviers]

something like this would make sense, considering this needs to be used by both ui, and mobile. To have it as general as possible will be a good thing.

Yeap, this would make the merge a lot smoother.

[arschmitz]

Just as a note on the current mobile builder, and how it works, its not specific to mobile its a generic amd builder.
https://github.com/gseguin/node-amd-builder

[rxaviers]

• We'll probably need to build fairly complex dependency logic to handle things like building minified files only after their dependent files. This is like rebuilding the dependency mappings from AMD.

Not really. Deferreds will do it. Minifying the final JS (or CSS) bundle is simply minifying a deferred after it has been resolved. No dependency logic needs to take place.

• We probably shouldn't use module names for actions. sqwish and uglify may be tools we use today, but what about tomorrow?

mincss and minjs respectively as a suggestion.

• We probably want to resolve external dependencies within the individual projects, rather than having a bower endpoint in the config.

I have no objection if instead you want to use a committed external file from the jQuery UI repo, e.g., https://github.com/jquery/jquery-ui/blob/master/external/jquery/jquery.js?

[rxaviers]

Just as a note on the current mobile builder, and how it works, its not specific to mobile its a generic amd builder. https://github.com/gseguin/node-amd-builder

Yeap, we know. Anything in particular we are missing?

[scottgonzalez]

Not really. Deferreds will do it.

So we'll convert the source files to promises? That sounds like a pretty clean approach.

mincss and minjs respectively as a suggestion.

I'm fine with that or anything else that describes the action.

I have no objection if instead you want to use a committed external file from the jQuery UI repo, e.g., https://github.com/jquery/jquery-ui/blob/master/external/jquery/jquery.js?

Yeah, I think that makes more sense. That way it just points to a local file like all the other source files.

[rxaviers]

So we'll convert the source files to promises? That sounds like a pretty clean approach.

Source files don't need to be converted into promises. But, the actions do. The way I'm thinking is an action (e.g., minify) can take as an input the promise of another action (e.g., the JS bundle built by require.js optimizer).

Anyway, we don't need to use a JSON configuration here if not appropriate. We could use a JS commonJS file similarly to https://github.com/jquery/jquery-release if it helps.

What is important is that the lowlevel engine of the builder can be abstracted, so the package can be easily configured/customized.

[rxaviers]

What is important is that the lowlevel engine of the builder can be abstracted, so the package can be easily configured/customized.

By the way, I'm looking for ideas on how we could accomplish that...

Mimicking https://github.com/jquery/jquery-release, follow an alternative suggestion.

var ThemeRoller = require( "themeroller" );
var amdBuilder = require( "amd-builder" );
var cssBuilder = require( "css-builder" );

module.exports = function( Package, runtime ) {

Package.define({

  // shallow copy from source files.
  "external/jquery.js": "external/jquery/jquery.js",

  "images": function( callback ) {
    new ThemeRoller( runtime.vars ).doImages( callback );
  },
  "index.html": function() {
    return renderTemplate( runtime.components );
  },
  "jquery-ui.css": function( callback ) {
    when( structureCss, themeCss). done(function( structure, theme ) {
      callback( banner + concat( structure, theme ) );
    });
  },
  "jquery-ui.js": function( callback ) {
    amdBuilder({
      include: runtime.components
    }, callback );
  },
  ...
});

};

[rxaviers]

JSON configurations tend to be painful for this stuff. This is why large projects never have sane Gruntfiles.

Agree.