Convert existing logic over to AMD-style defines

Author: Ian MacLeod

PRIMER.md

@@ -291,6 +291,8 @@ This user is a manager.
 <a name="module-registry"></a>
 ## Module registry
 
+TODO(nevir): Document `define` and friends.
+
 Polymer provides and internally uses a JavaScript "module registry" to organize library code defined outside the context of a custom element prototype, and may be used to organize user code when convenient as well.  The registry is responsible for storing and retrieving JS modules by name.  As this facility does not provide dependency loading, it is the responsibility of the user to HTMLImport files containing any dependent modules before use.
 
 Modules are registered using the `modulate` global function, passing a name to register and a factory function that returns the module:

polymer-micro.html

@@ -17,7 +17,7 @@
 
 <script>
 
-  using('Base', function(Base) {
+  define(['Base'], function(Base) {
 
     Base.addFeature({
 

polymer-mini.html

@@ -17,7 +17,7 @@
 
 <script>
 
-  using('Base', function(Base) {
+  define(['Base'], function(Base) {
 
     Base.addFeature({
 

polymer.html

@@ -20,7 +20,7 @@
 
 <script>
 
-  using('Base', function(Base) {
+  define(['Base'], function(Base) {
 
     Base.addFeature({
 

src/expr/polymer-expr.html

@@ -20,7 +20,7 @@
 
 <script>
 
-  using('Base', function(Base) {
+  define(['Base'], function(Base) {
 
     Base.addFeature({
 

src/expr/resolveUrl.html

@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <script>
-using(['Base'], function(Base) {
+define(['Base'], function(Base) {
 
   var domModule = document.createElement('dom-module');
 

src/expr/x-styling-defaults.html

@@ -10,8 +10,8 @@
 <link rel="import" href="../lib/style-util.html">
 <script>
 
-  modulate('StyleDefaults', ['Base', 'StyleUtil'], function(Base, styleUtil) {
-    
+  define('StyleDefaults', ['Base', 'StyleUtil'], function(Base, styleUtil) {
+
     Base.addFeature({
 
       // TODO(sorvell): decide if this fits; an element can supply

src/expr/x-styling.html

@@ -12,7 +12,7 @@
 <link rel="import" href="../lib/shadow-settings.html">
 <link rel="import" href="x-styling-defaults.html">
 <script>
-  using(['Base', 'StyleTransformer', 'StyleUtil', 'ShadowSettings', 'StyleDefaults'],
+  define(['Base', 'StyleTransformer', 'StyleUtil', 'ShadowSettings', 'StyleDefaults'],
     function(Base, transformer, styleUtil, settings, defaults) {
 
     var beforeReady = Base._beforeReady;

src/features/micro/attributes.html

@@ -50,8 +50,8 @@
    *
    * @class base feature: attributes
    */
-  
-  using('Base', function(Base) {
+
+  define(['Base'], function(Base) {
 
     Base.addFeature({
 

src/features/micro/constructor.html

@@ -36,7 +36,7 @@
    * @class base feature: constructor
    */
 
-  using('Base', function(Base) {
+  define(['Base'], function(Base) {
 
     Base.addFeature({
 

src/features/micro/extends.html

@@ -26,8 +26,8 @@
    *   @class base feature: extends
    */
 
-  using('Base', function(Base) {
-    
+  define(['Base'], function(Base) {
+
     Base.addFeature({
 
       _prepExtends: function() {

src/features/micro/mixins.html

@@ -9,7 +9,7 @@
 -->
 <script>
 
-  using('Base', function(Base) {
+  define(['Base'], function(Base) {
 
     /**
      * Automatically extend using objects referenced in `mixins`
@@ -39,7 +39,9 @@
           var host = this;
           this.mixins.forEach(function(m) {
             if (typeof m === 'string') {
-              using(m, function(m) {
+              // TODO(nevir): Switch this to local (or global?) `require` once
+              // we have that.
+              define([m], function(m) {
                 Base.extend(host, m);
               });
             } else {

src/features/micro/published.html

@@ -10,7 +10,7 @@
 <script>
 
 
-  using('Base', function(Base) {
+  define(['Base'], function(Base) {
 
 
     /**

src/features/mini/content.html

@@ -10,7 +10,7 @@
 <link rel="import" href="../../lib/array-splice.html">
 <script>
 
-  using(['Base', 'ArraySplice'], function(Base, ArraySplice) {
+  define(['Base', 'ArraySplice'], function(Base, ArraySplice) {
 
     /**
 

src/features/mini/ready.html

@@ -30,7 +30,7 @@
    * @class standard feature: ready
    */
 
-  using('Base', function(Base) {
+  define(['Base'], function(Base) {
 
     hostStack = [];
 

src/features/mini/shadow.html

@@ -9,8 +9,8 @@
 -->
 <link rel="import" href="../../lib/shadow-settings.html">
 <script>
-  
-using(['Base', 'ShadowSettings'], function(Base, settings) {
+
+define(['Base', 'ShadowSettings'], function(Base, settings) {
 
   /**
     Implements `shadyRoot` compatible dom scoping using native ShadowDOM.

src/features/mini/template.html

@@ -21,8 +21,8 @@
    *  
    * @class standard feature: template
    */
-  
-  using('Base', function(Base) {
+
+  define(['Base'], function(Base) {
 
     var domModule = document.createElement('dom-module');
 

src/features/standard/annotations.html

@@ -113,7 +113,7 @@
 
 */
 
-  using(['Base', 'Annotations'], function(Base, Annotations) {
+  define(['Base', 'Annotations'], function(Base, Annotations) {
 
     Base.addFeature({
 

src/features/standard/configure.html

@@ -41,7 +41,7 @@
   directly (on-foo-changed).
   */
 
-  using(['Base'], function(Base) {
+  define(['Base'], function(Base) {
 
     Base.addFeature({
 

src/features/standard/effects.html

@@ -84,7 +84,7 @@
    * @class data feature: bind
    */
 
-  using(['Base', 'bind', 'bind-annotations'], 
+  define(['Base', 'bind', 'bind-annotations'],
    function(Base, Bind, BindAnnotations) {
 
     Base.addFeature({

src/features/standard/events.html

@@ -9,13 +9,15 @@
 -->
 <script>
 
+  // TODO(nevir): We should expose these constants directly on `Polymer`, or
+  // maybe implement AMD's global `require()`.
   /**
    * Supports `listeners` and `keyPresses` objects.
    * 
    * Example:
-   * 
-   *     using('Base', function(Base) {
-   * 
+   *
+   *     define(['Base'], function(Base) {
+   *
    *       Polymer({
    * 
    *         listeners: {
@@ -38,7 +40,7 @@
    * 
    */
 
-  using('Base', function(Base) {
+  define(['Base'], function(Base) {
 
     Base.addFeature({
 

src/features/standard/notify-path.html

@@ -58,7 +58,7 @@
    * @class data feature: path notification
    */
 
-using(['Base', 'Annotations'], function(Base, Annotations) {
+define(['Base', 'Annotations'], function(Base, Annotations) {
 
   Base.addFeature({
     /**

src/features/standard/styling.html

@@ -12,7 +12,7 @@
 <link rel="import" href="../../lib/shadow-settings.html">
 <script>
 
-  using(['Base', 'StyleTransformer', 'StyleUtil', 'ShadowSettings', 'Annotations'], 
+  define(['Base', 'StyleTransformer', 'StyleUtil', 'ShadowSettings', 'Annotations'],
     function(Base, transformer, styleUtil, settings, Annotations) {
 
     var prepTemplate = Base._prepTemplate;

src/features/standard/utils.html

@@ -13,7 +13,7 @@
 
 <script>
 
-using(['Base', 'Async', 'Debounce'], function(Base, Async, Debounce) {
+define(['Base', 'Async', 'Debounce'], function(Base, Async, Debounce) {
 
   Base.addFeature({
 

src/lib/annotations/annotations.html

@@ -62,7 +62,7 @@
  * @class Template feature
  */
 
-  modulate('Annotations', function() {
+  define('Annotations', function() {
 
     // null-array (shared empty array to avoid null-checks)
     var nar = [];

src/lib/annotations/demo/app-chrome.html

@@ -36,7 +36,7 @@
 
   <script>
 
-    using('Annotations', function(Annotations) {
+    define('Annotations', function(Annotations) {
 
       var template = document.querySelector('template');
       var list = Annotations.parseAnnotations(template);

src/lib/array-observe.html

@@ -11,7 +11,7 @@
 
 <script>
 
-modulate('ArrayObserve', 'Debounce', function(Debounce) {
+define('ArrayObserve', ['Debounce'], function(Debounce) {
 
   var callbacks = new WeakMap();
 

src/lib/array-splice.html

@@ -8,8 +8,8 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <script>
-modulate('ArraySplice', function() {
-  
+define('ArraySplice', function() {
+
   function newSplice(index, removed, addedCount) {
     return {
       index: index,

src/lib/async.html

@@ -9,8 +9,8 @@
 -->
 <script>
 
-modulate('Async', function() {
-  
+define('Async', function() {
+
   var currVal = 0;
   var lastVal = 0;
   var callbacks = [];

src/lib/base.html

@@ -9,7 +9,7 @@
 -->
 <script>
 
-  modulate('Base', function() {
+  define('Base', function() {
 
     var Base = {
 

src/lib/bind/bind-annotations.html

@@ -10,7 +10,7 @@
 
 <script>
 
-  modulate('bind-annotations', ['bind'], function(Bind) {
+  define('bind-annotations', ['bind'], function(Bind) {
 
     /*
      * Parses the annotations list created by `annotations` features to perform

src/lib/bind/bind-effects.html

@@ -9,7 +9,7 @@
 -->
 <script>
 
-  using(['Annotations', 'bind'], function(Annotations, Bind) {
+  define(['Annotations', 'bind'], function(Annotations, Bind) {
 
     Bind.addComputedPropertyEffect = function(model, name, expression) {
       var index = expression.indexOf('(');

src/lib/bind/bind.html

@@ -9,7 +9,7 @@
 -->
 <script>
 
-  modulate('bind', function() {
+  define('bind', function() {
 
     var Bind = {
 

src/lib/bind/demo/src/annotations-bind-demo.html

@@ -18,7 +18,7 @@
 
   // TODO(sjmiles): should 'bind-annotations' blend the other two modules
   // somehow so we don't need to include all three here?
-  using(['Annotations', 'bind', 'bind-annotations'], 
+  define(['Annotations', 'bind', 'bind-annotations'],
 
    function(Annotations, Bind, BindAnnotations) {
 

src/lib/bind/demo/src/bind-demo.html

@@ -4,7 +4,7 @@
 
 <script>
 
-  using(['bind'], function(Bind) {
+  define(['bind'], function(Bind) {
 
     var out = document.querySelector('#bd');
     out.innerHTML += '<hr><h3>bind demo</h3><hr>';

src/lib/collection.html

@@ -13,7 +13,7 @@
 
 <script>
 
-modulate('Collection', ['Base', 'ArrayObserve', 'Debounce'], function(Base, ArrayObserve, Debounce) {
+define('Collection', ['Base', 'ArrayObserve', 'Debounce'], function(Base, ArrayObserve, Debounce) {
 
   var collections = new WeakMap();
 

src/lib/css-parse.html

@@ -4,7 +4,7 @@
   Extremely simple css parser. Intended to be not more than what we need
   and definitely not necessarly correct =).
 */
-modulate('CssParse', function() {
+define('CssParse', function() {
 
   // given a string of css, return a simple rule tree
   function parse(text) {

src/lib/debounce.html

@@ -9,8 +9,8 @@
 -->
 <script>
 
-modulate('Debounce', 'Async', function(Async) {
-  
+define('Debounce', ['Async'], function(Async) {
+
   // usage
 
   // invoke cb.call(this) in 100ms, unless the job is re-registered,