RubyGems - unpoly-rails - Versions diffs - 0.57.0 → 0.60.0 - Mend

unpoly-rails 0.57.0 → 0.60.0

Potentially problematic release.

This version of unpoly-rails might be problematic. Click here for more details.

Files changed (186) hide show

data/lib/assets/javascripts/unpoly/proxy.coffee CHANGED

@@ -38,13 +38,14 @@ Other Unpoly modules contain even more tricks to outsmart network latency:
 - [Instantaneous feedback for links that are currently loading](/a.up-active)
 - [Follow links on `mousedown` instead of `click`](/a-up-instant)
-@class up.proxy
+@module up.proxy
 ###
-up.proxy = (($) ->
+up.proxy = do ->
   u = up.util
+  e = up.element
-  $waitingLink = undefined
+  waitingLink = undefined
   preloadDelayTimer = undefined
   slowDelayTimer = undefined
   pendingCount = undefined
@@ -85,7 +86,7 @@ up.proxy = (($) ->
     cache after an unsafe request.
   @stable
   ###
-  config = u.config
+  config = new up.Config
     slowDelay: 300
     preloadDelay: 75
     cacheSize: 70
@@ -118,14 +119,14 @@ up.proxy = (($) ->
     if request.target != 'html'
       # Since <html> is the root tag, a request for the `html` selector
       # will contain all other selectors.
-      requestForHtml = request.copy(target: 'html')
+      requestForHtml = request.variant(target: 'html')
       candidates.push(requestForHtml)
       # Although <body> is not the root tag, we consider it the selector developers
       # will use when they want to replace the entire page. Hence we consider it
       # a suitable match for all other selectors, including `html`.
       if request.target != 'body'
-        requestForBody = request.copy(target: 'body')
+        requestForBody = request.variant(target: 'body')
         candidates.push(requestForBody)
     for candidate in candidates
@@ -141,7 +142,7 @@ up.proxy = (($) ->
     slowDelayTimer = null
   reset = ->
-    $waitingLink = null
+    waitingLink = null
     cancelPreloadDelay()
     cancelSlowDelay()
     pendingCount = 0
@@ -158,10 +159,10 @@ up.proxy = (($) ->
   \#\#\# Example
       up.request('/search', params: { query: 'sunshine' }).then(function(response) {
-        console.log('The response text is %o', response.text);
+        console.log('The response text is %o', response.text)
       }).catch(function() {
-        console.error('The request failed');
-      });
+        console.error('The request failed')
+      })
   \#\#\# Caching
@@ -193,7 +194,7 @@ up.proxy = (($) ->
   @param {Object} [options.headers={}]
     An object of additional HTTP headers.
   @param {Object|FormData|string|Array} [options.params={}]
-    [Parameters](/up.params) that should be sent as the request's payload.
+    [Parameters](/up.Params) that should be sent as the request's payload.
   @param {string} [options.timeout]
     A timeout in milliseconds.
@@ -239,7 +240,7 @@ up.proxy = (($) ->
       promise = loadOrQueue(request)
       set(request, promise)
       # Uncache failed requests
-      promise.catch (e) ->
+      promise.catch ->
         remove(request)
     if !request.preload
@@ -266,10 +267,10 @@ up.proxy = (($) ->
   \#\#\# Example
       up.request('/search', params: { query: 'sunshine' }).then(function(text) {
-        console.log('The response text is %o', text);
+        console.log('The response text is %o', text)
       }).catch(function() {
-        console.error('The request failed');
-      });
+        console.error('The request failed')
+      })
   @function up.ajax
   @param {string} [url]
@@ -288,7 +289,9 @@ up.proxy = (($) ->
     An object of additional header key/value pairs to send along
     with the request.
   @param {Object|FormData|string|Array} [options.params]
-    [Parameters](/up.params) that should be sent as the request's payload.
+    [Parameters](/up.Params) that should be sent as the request's payload.
+    On IE 11 and Edge, `FormData` payloads require a [polyfill for `FormData#entries()`](https://github.com/jimmywarting/FormData).
   @param {string} [request.timeout]
     A timeout in milliseconds for the request.
@@ -300,7 +303,7 @@ up.proxy = (($) ->
     Use [`up.request()`](/up.request) instead.
   ###
   ajax = (args...) ->
-    up.warn('up.ajax() has been deprecated. Use up.request() instead.')
+    up.legacy.warn('up.ajax() has been deprecated. Use up.request() instead.')
     new Promise (resolve, reject) ->
       pickResponseText = (response) -> resolve(response.text)
       makeRequest(args...).then(pickResponseText, reject)
@@ -336,9 +339,9 @@ up.proxy = (($) ->
       # we wrap the mission in a function for scheduling below.
       emission = ->
         if isBusy() # a fast response might have beaten the delay
-          up.emit('up:proxy:slow', message: 'Proxy is slow to respond')
+          up.emit('up:proxy:slow', log: 'Proxy is slow to respond')
           slowEventEmitted = true
-      slowDelayTimer = u.setTimer(config.slowDelay, emission)
+      slowDelayTimer = u.timer(config.slowDelay, emission)
   ###**
@@ -368,19 +371,17 @@ up.proxy = (($) ->
   Here is the JavaScript to make it alive:
-      up.compiler('.spinner', function($element) {
-        show = function() { $element.show() };
-        hide = function() { $element.hide() };
+      up.compiler('.spinner', function(element) {
+        show = () => { up.element.show(element) }
+        hide = () => { up.element.hide(element) }
-        hide();
+        hide()
         return [
           up.on('up:proxy:slow', show),
           up.on('up:proxy:recover', hide)
-        ];
-      });
+        ]
+      })
   The `up:proxy:slow` event will be emitted after a delay of 300 ms
   to prevent the spinner from flickering on and off.
@@ -399,7 +400,7 @@ up.proxy = (($) ->
     if isIdle()
       cancelSlowDelay()
       if slowEventEmitted
-        up.emit('up:proxy:recover', message: 'Proxy has recovered from slow response')
+        up.emit('up:proxy:recover', log: 'Proxy has recovered from slow response')
         slowEventEmitted = false
   ###**
@@ -429,9 +430,9 @@ up.proxy = (($) ->
   load = (request) ->
     eventProps =
       request: request
-      message: ['Loading %s %s', request.method, request.url]
+      log: ['Loading %s %s', request.method, request.url]
-    if up.bus.nobodyPrevents('up:proxy:load', eventProps)
+    if up.event.nobodyPrevents('up:proxy:load', eventProps)
       responsePromise = request.send()
       u.always responsePromise, responseReceived
       u.always responsePromise, pokeQueue
@@ -454,7 +455,7 @@ up.proxy = (($) ->
   registerAliasForRedirect = (response) ->
     request = response.request
     if response.url && request.url != response.url
-      newRequest = request.copy(
+      newRequest = request.variant(
         method: response.method
         url: response.url
       )
@@ -463,13 +464,13 @@ up.proxy = (($) ->
   responseReceived = (response) ->
     if response.isFatalError()
       up.emit 'up:proxy:fatal',
-        message: 'Fatal error during request'
+        log: 'Fatal error during request'
         request: response.request
         response: response
     else
       registerAliasForRedirect(response) unless response.isError()
       up.emit 'up:proxy:loaded',
-        message: ['Server responded with HTTP %d (%d bytes)', response.status, response.text.length]
+        log: ['Server responded with HTTP %d (%d bytes)', response.status, response.text.length]
         request: response.request
         response: response
@@ -557,24 +558,24 @@ up.proxy = (($) ->
   ###
   clear = cache.clear
-  up.bus.deprecateRenamedEvent('up:proxy:received', 'up:proxy:loaded')
+  # up.legacy.renamedEvent('up:proxy:received', 'up:proxy:loaded')
-  preloadAfterDelay = ($link) ->
-    delay = parseInt(u.presentAttr($link, 'up-delay')) || config.preloadDelay
-    unless $link.is($waitingLink)
-      $waitingLink = $link
+  preloadAfterDelay = (link) ->
+    delay = e.numberAttr(link, 'up-delay') || config.preloadDelay
+    unless link == waitingLink
+      waitingLink = link
       cancelPreloadDelay()
       curriedPreload = ->
-        u.muteRejection preload($link)
-        $waitingLink = null
+        u.muteRejection preload(link)
+        waitingLink = null
       startPreloadDelay(curriedPreload, delay)
   startPreloadDelay = (block, delay) ->
     preloadDelayTimer = setTimeout(block, delay)
-  stopPreload = ($link) ->
-    if $link.is($waitingLink)
-      $waitingLink = undefined
+  stopPreload = (link) ->
+    if link == waitingLink
+      waitingLink = undefined
       cancelPreloadDelay()
   ###**
@@ -584,22 +585,22 @@ up.proxy = (($) ->
   making the interaction feel instant.
   @function up.proxy.preload
-  @param {string|Element|jQuery}
+  @param {string|Element|jQuery} linkOrSelector
     The element whose destination should be preloaded.
-  @param {object} options
+  @param {Object} options
     Options that will be passed to the function making the HTTP requests.
   @return
     A promise that will be fulfilled when the request was loaded and cached
   @experimental
   ###
   preload = (linkOrSelector, options) ->
-    $link = $(linkOrSelector)
+    link = e.get(linkOrSelector)
-    if up.link.isSafe($link)
-      preloadEventAttrs = { message: ['Preloading link %o', $link.get(0)], $element: $link, $link: $link }
-      up.bus.whenEmitted('up:link:preload', preloadEventAttrs).then ->
-        variant = up.link.followVariantForLink($link)
-        variant.preloadLink($link, options)
+    if up.link.isSafe(link)
+      preloadEventAttrs = { log: ['Preloading link %o', link], target: link }
+      up.event.whenEmitted('up:link:preload', preloadEventAttrs).then ->
+        variant = up.link.followVariantForLink(link)
+        variant.preloadLink(link, options)
     else
       Promise.reject(new Error("Won't preload unsafe link"))
@@ -607,7 +608,7 @@ up.proxy = (($) ->
   This event is [emitted](/up.emit) before a link is [preloaded](/up.preload).
   @event up:link:preload
-  @param {jQuery} event.$link
+  @param {Element} event.target
     The link element that will be preloaded.
   @param event.preventDefault()
     Event listeners may call this method to prevent the link from being preloaded.
@@ -625,9 +626,9 @@ up.proxy = (($) ->
   ###
   wrapMethod = (method, params) ->
     if u.contains(config.wrapMethods, method)
-      params = up.params.add(params, up.protocol.config.methodParam, method)
+      params.add(up.protocol.config.methodParam, method)
       method = 'POST'
-    [method, params]
+    method
   ###**
   Links with an `up-preload` attribute will silently fetch their target
@@ -644,15 +645,13 @@ up.proxy = (($) ->
     but will also make the interaction feel less instant.
   @stable
   ###
-  up.compiler 'a[up-preload], [up-href][up-preload]', ($link) ->
-    if up.link.isSafe($link)
-      $link.on 'mouseenter touchstart', (event) ->
-        # Don't do anything if we are hovering over the child of a link.
-        # The actual link will receive the event and bubble in a second.
-        if up.link.shouldProcessEvent(event, $link)
-          preloadAfterDelay($link)
-      $link.on 'mouseleave', ->
-        stopPreload($link)
+  up.compiler 'a[up-preload], [up-href][up-preload]', (link) ->
+    if up.link.isSafe(link)
+      link.addEventListener 'mouseenter', (event) ->
+        if up.link.shouldProcessEvent(event, link)
+          preloadAfterDelay(link)
+      link.addEventListener 'mouseleave', ->
+        stopPreload(link)
   up.on 'up:framework:reset', reset
@@ -668,8 +667,6 @@ up.proxy = (($) ->
   isSafeMethod: isSafeMethod
   wrapMethod: wrapMethod
   config: config
-)(jQuery)
 up.ajax = up.proxy.ajax
 up.request = up.proxy.request

data/lib/assets/javascripts/unpoly/radio.coffee CHANGED

@@ -5,9 +5,9 @@ Passive updates
 This work-in-progress package will contain functionality to
 passively receive updates from the server.
-@class up.radio
+@module up.radio
 ###
-up.radio = (($) ->
+up.radio = do ->
   u = up.util
@@ -27,7 +27,7 @@ up.radio = (($) ->
     By default this is not set and the original replacement's transition is used.
   @stable
   ###
-  config = u.config
+  config = new up.Config
     hungry: ['[up-hungry]']
     hungryTransition: null
@@ -58,5 +58,3 @@ up.radio = (($) ->
   config: config
   hungrySelector: hungrySelector
-)(jQuery)

data/lib/assets/javascripts/unpoly/rails.coffee CHANGED

@@ -3,23 +3,22 @@ Play nice with Rails UJS
 ========================
 ###
-up.rails = (($) ->
+up.rails = do ->
   u = up.util
+  e = up.element
   isRails = ->
-    !!$.rails
+    !!(window.Rails || (window.jQuery?.rails))
   u.each ['method', 'confirm'], (feature) ->
     dataAttribute = "data-#{feature}"
     upAttribute = "up-#{feature}"
-    up.macro "[#{dataAttribute}]", ($element) ->
-      if isRails() && up.link.isFollowable($element)
+    up.macro "[#{dataAttribute}]", (element) ->
+      if isRails() && up.link.isFollowable(element)
         replacement = {}
-        replacement[upAttribute] = $element.attr(dataAttribute)
-        u.setMissingAttrs($element, replacement)
-        $element.removeAttr(dataAttribute)
-)(jQuery)
+        replacement[upAttribute] = element.getAttribute(dataAttribute)
+        e.setMissingAttrs(element, replacement)
+        element.removeAttribute(dataAttribute)

data/lib/assets/javascripts/unpoly/syntax.coffee.erb CHANGED

@@ -7,21 +7,22 @@ in order to integrate libraries or implement custom behavior.
 Unpoly lets you organize your JavaScript snippets using [compilers](/up.compiler).
-For instance, to activate the [Masonry](http://masonry.desandro.com/) jQuery plugin for every element
+For instance, to activate the [Masonry](http://masonry.desandro.com/) library for every element
 with a `grid` class, use this compiler:
-    up.compiler('.grid', function($element) {
-      $element.masonry();
-    });
+    up.compiler('.grid', function(element) {
+      new Masonry(element, { itemSelector: '.grid--item' })
+    })
 The compiler function will be called on matching elements when the page loads
 or when a matching fragment is [inserted via AJAX](/up.link) later.
-@class up.syntax
+@module up.syntax
 ###
-up.syntax = (($) ->
+up.syntax = do ->
   u = up.util
+  e = up.element
   SYSTEM_MACRO_PRIORITIES = {
     '[up-back]': -100        # sets [up-href] to previous URL
@@ -32,40 +33,39 @@ up.syntax = (($) ->
     '[data-confirm]': -400,  # converts [data-conform] to [up-confirm] only if link has followable [up-*] attributes
   }
-  isBooting = true
   compilers = []
   macros = []
   ###**
-  Registers a function to be called whenever an element with
+  Registers a function to be called when an element with
   the given selector is inserted into the DOM.
   Use compilers to activate your custom Javascript behavior on matching
   elements.
-  You should migrate your [jQuery ready callbacks](https://api.jquery.com/ready/)
-  to compilers.
+  You should migrate your [`DOMContentLoaded`](https://api.jquery.com/ready/)
+  callbacks to compilers. This will make sure they run both at page load and
+  when [a new fragment is inserted later](/a-up-target).
+  It will also organize your JavaScript snippets by selector of affected elements.
   \#\#\# Example
-  Let's say that any element with the `action` class should alert a message when clicked.
-  We can implement this behavior as a compiler function that is called on all elements matching
-  the `.action` selector:
+  This jQuery compiler will insert the current time into a
+  `<div class='current-time'></div>`:
-      up.compiler('.action', function($element) {
-        $element.on('click', function() {
-          alert('Action was clicked!');
-        });
-      });
+      up.compiler('.current-time', function(element) {
+        var now = new Date()
+        element.textContent = now.toString()
+      })
   The compiler function will be called once for each matching element when
   the page loads, or when a matching fragment is [inserted](/up.replace) later.
-  \#\#\# Integrating jQuery plugins
+  \#\#\# Integrating JavaScript libraries
-  `up.compiler()` is a great way to integrate jQuery plugins.
+  `up.compiler()` is a great way to integrate JavaScript libraries.
   Let's say your JavaScript plugin wants you to call `lightboxify()`
   on links that should open a lightbox. You decide to
   do this for all links with an `lightbox` class:
@@ -75,24 +75,9 @@ up.syntax = (($) ->
   This JavaScript will do exactly that:
-      up.compiler('a.lightbox', function($element) {
-        $element.lightboxify();
-      });
-  \#\#\# Custom elements
-  You can use `up.compiler()` to implement custom elements like this:
-      <clock></clock>
-  Here is the JavaScript that inserts the current time into to these elements:
-      up.compiler('clock', function($element) {
-        var now = new Date();
-        $element.text(now.toString()));
-      });
+      up.compiler('a.lightbox', function(element) {
+        lightboxify(element)
+      })
   \#\#\# Cleaning up after yourself
@@ -105,24 +90,24 @@ up.syntax = (($) ->
   side effects, like a [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)
   or [event handlers bound to the document root](/up.on).
-  Here is a version of `<clock>` that updates
+  Here is a version of `.current-time` that updates
   the time every second, and cleans up once it's done. Note how it returns
   a function that calls `clearInterval`:
-      up.compiler('clock', function($element) {
+      up.compiler('.current-time', function(element) {
         function update() {
-          var now = new Date();
-          $element.text(now.toString()));
+          var now = new Date()
+          element.textContent = now.toString()
         }
-        setInterval(update, 1000);
+        setInterval(update, 1000)
         return function() {
-          clearInterval(update);
+          clearInterval(update)
         };
-      });
+      })
   If we didn't clean up after ourselves, we would have many ticking intervals
   operating on detached DOM elements after we have created and removed a couple
@@ -143,43 +128,18 @@ up.syntax = (($) ->
   The JSON will parsed and handed to your compiler as a second argument:
-      up.compiler('.google-map', function($element, pins) {
-        var map = new google.maps.Map($element);
+      up.compiler('.google-map', function(element, pins) {
+        var map = new google.maps.Map(element)
         pins.forEach(function(pin) {
-          var position = new google.maps.LatLng(pin.lat, pin.lng);
+          var position = new google.maps.LatLng(pin.lat, pin.lng)
           new google.maps.Marker({
             position: position,
             map: map,
             title: pin.title
-          });
-        });
-      });
-  \#\#\# Migrating jQuery event handlers to `up.compiler()`
-  Within the compiler, Unpoly will bind `this` to the
-  native DOM element to help you migrate your existing jQuery code to
-  this new syntax.
-  So if you had this before:
-      $(function() {
-        $('.action').on('click', function() {
-          $(this).something();
-        });
-      });
-  ... you can reuse the callback function like this:
-      up.compiler('.action', function($element) {
-        $element.on('click', function() {
-          $(this).something();
-        });
-      });
+          })
+        })
+      })
   @function up.compiler
@@ -198,13 +158,14 @@ up.syntax = (($) ->
     [page updates](/a-up-target).
     This has the same effect as setting an `up-keep` attribute on the element.
-  @param {Function($element, data)} compiler
+  @param {Function(element, data)} compiler
     The function to call when a matching element is inserted.
-    The function takes the new element as the first argument (as a jQuery object).
+    The function takes the new element as the first argument.
     If the element has an [`up-data`](/up-data) attribute, its value is parsed as JSON
     and passed as a second argument.
-    The function may return a destructor function that destroys the compiled
+    The function may return a destructor function that cleans the compiled
     object before it is removed from the DOM. The destructor is supposed to
     [clear global state](/up.compiler#cleaning-up-after-yourself)
     such as timeouts and event handlers bound to the document.
@@ -213,13 +174,48 @@ up.syntax = (($) ->
   @stable
   ###
   registerCompiler = (args...) ->
-    compiler = buildCompiler(args...)
-    insertCompiler(compilers, compiler)
+    compiler = buildCompiler(args)
+    return insertCompiler(compilers, compiler)
+  ###**
+  Registers a function to be called when an element with
+  the given selector is inserted into the DOM. The function is called
+  with each matching element as a
+  [jQuery object](https://learn.jquery.com/using-jquery-core/jquery-object/).
+  If you're not using jQuery, use `up.compiler()` instead, which calls
+  the compiler function with a native element.
+  \#\#\# Example
+  This jQuery compiler will insert the current time into a
+  `<div class='current-time'></div>`:
+      up.$compiler('.current-time', function($element) {
+        var now = new Date()
+        $element.text(now.toString())
+      })
+  @function up.$compiler
+  @param {string} selector
+    The selector to match.
+  @param {Object} [options]
+    See [`options` argument for `up.compiler()`](/up.compiler#parameters).
+  @param {Function($element, data)} compiler
+    The function to call when a matching element is inserted.
+    See [`compiler` argument for `up.compiler()`](/up.compiler#parameters).
+    @stable
+  ###
+  registerJQueryCompiler = (args...) ->
+    compiler = registerCompiler(args...)
+    compiler.jQuery = true
+    compiler
   ###**
   Registers a [compiler](/up.compiler) that is run before all other compilers.
-  You can use `up.macro()` to register a compiler that sets other UJS attributes.
+  Use `up.macro()` to register a compiler that sets multiply Unpoly attributes.
   \#\#\# Example
@@ -229,21 +225,21 @@ up.syntax = (($) ->
       <a href="/page2" up-target=".content" up-transition="cross-fade" up-duration="300">Page 2</a>
       <a href="/page3" up-target=".content" up-transition="cross-fade" up-duration="300">Page 3</a>
-  We would much rather define a new `content-link` attribute that let's us
+  We would much rather define a new `[content-link]` attribute that let's us
   write the same links like this:
       <a href="/page1" content-link>Page 1</a>
       <a href="/page2" content-link>Page 2</a>
       <a href="/page3" content-link>Page 3</a>
-  We can define the `content-link` attribute by registering a macro that
-  sets the `up-target`, `up-transition` and `up-duration` attributes for us:
+  We can define the `[content-link]` attribute by registering a macro that
+  sets the `[up-target]`, `[up-transition]` and `[up-duration]` attributes for us:
-      up.macro('[content-link]', function($link) {
-        $link.attr('up-target', '.content');
-        $link.attr('up-transition', 'cross-fade');
-        $link.attr('up-duration', '300');
-      });
+      up.macro('[content-link]', function(link) {
+        link.setAttribute('up-target', '.content')
+        link.setAttribute('up-transition', 'cross-fade')
+        link.setAttribute('up-duration', '300')
+      })
   Examples for built-in macros are [`a[up-dash]`](/a-up-dash) and [`[up-expand]`](/up-expand).
@@ -252,32 +248,73 @@ up.syntax = (($) ->
     The selector to match.
   @param {Object} options
     See options for [`up.compiler()`](/up.compiler).
-  @param {Function($element, data)} macro
+  @param {Function(element, data)} macro
     The function to call when a matching element is inserted.
-    See [`up.compiler()`](/up.compiler) for details.
+    See [`up.compiler()`](/up.compiler#parameters) for details.
   @stable
   ###
   registerMacro = (args...) ->
-    macro = buildCompiler(args...)
-    if isBooting
+    macro = buildCompiler(args)
+    if up.framework.isBooting()
       macro.priority = detectSystemMacroPriority(macro.selector) ||
         up.fail('Unregistered priority for system macro %o', macro.selector)
-    insertCompiler(macros, macro)
+    return insertCompiler(macros, macro)
+  ###**
+  Registers a [compiler](/up.compiler) that is run before all other compilers.
+  The compiler function is called with each matching element as a
+  [jQuery object](https://learn.jquery.com/using-jquery-core/jquery-object/).
+  If you're not using jQuery, use `up.macro()` instead, which calls
+  the macro function with a native element.
+  \#\#\# Example
+      up.$macro('[content-link]', function($link) {
+        $link.attr(
+          'up-target': '.content',
+          'up-transition': 'cross-fade',
+          'up-duration':'300'
+        )
+      })
+  @function up.$macro
+  @param {string} selector
+    The selector to match.
+  @param {Object} options
+    See [`options` argument for `up.compiler()`](/up.compiler#parameters).
+  @param {Function(element, data)} macro
+    The function to call when a matching element is inserted.
+    See [`compiler` argument for `up.compiler()`](/up.compiler#parameters).
+  @stable
+  ###
+  registerJQueryMacro = (args...) ->
+    macro = registerMacro(args...)
+    macro.jQuery = true
+    macro
   detectSystemMacroPriority = (macroSelector) ->
     for substr, priority of SYSTEM_MACRO_PRIORITIES
       if macroSelector.indexOf(substr) >= 0
         return priority
-  buildCompiler = (selector, args...) ->
+  parseCompilerArgs = (args) ->
+    selector = args.shift()
     callback = args.pop()
     options = u.extractOptions(args)
+    return [selector, options, callback]
+  buildCompiler = (args) ->
+    [selector, options, callback] = parseCompilerArgs(args)
     options = u.options(options,
       selector: selector,
-      isSystem: isBooting,
+      isDefault: up.framework.isBooting(),
       priority: 0,
       batch: false
-      keep: false
+      keep: false,
+      jQuery: false
     )
     return u.assign(callback, options)
@@ -286,6 +323,7 @@ up.syntax = (($) ->
     while (existingCompiler = queue[index]) && (existingCompiler.priority >= newCompiler.priority)
       index += 1
     queue.splice(index, 0, newCompiler)
+    return newCompiler
   ###**
   Applies all compilers on the given element and its descendants.
@@ -296,33 +334,44 @@ up.syntax = (($) ->
     A list of elements whose subtrees should not be compiled.
   @internal
   ###
-  compile = ($fragment, options) ->
+  compile = (fragment, options) ->
     orderedCompilers = macros.concat(compilers)
-    compileRun = new up.CompilePass($fragment, orderedCompilers, options)
+    compileRun = new up.CompilePass(fragment, orderedCompilers, options)
     compileRun.compile()
   ###**
-  @function up.syntax.destructor
+  Registers a function to be called when the given element
+  is [destroyed](/up.destroy).
+  The preferred way to register a destructor function is to `return`
+  it from a [compiler function](/up.compiler).
+  @function up.destructor
+  @param {Element} element
+  @param {Function|Array<Function>} destructor
+    One or more destructor functions
   @internal
   ###
   registerDestructor = (element, destructor) ->
-    element = u.element(element)
     unless destructors = element.upDestructors
       destructors = []
       element.upDestructors = destructors
       element.classList.add('up-can-clean')
-    destructors.push(destructor)
+    if u.isArray(destructor)
+      destructors.push(destructor...)
+    else
+      destructors.push(destructor)
   ###**
-  Runs any destroyers on the given fragment and its descendants.
+  Runs any destructor on the given fragment and its descendants.
   Unlike [`up.destroy()`](/up.destroy), this doesn't emit any events
   and does not remove the element from the DOM.
   @function up.syntax.clean
   @internal
   ###
-  clean = ($fragment) ->
-    cleanables = u.selectInSubtree($fragment, '.up-can-clean')
+  clean = (fragment) ->
+    cleanables = e.subtree(fragment, '.up-can-clean')
     u.each cleanables, (cleanable) ->
       if destructors = cleanable.upDestructors
         destructor() for destructor in destructors
@@ -369,28 +418,25 @@ up.syntax = (($) ->
   The JSON will parsed and handed to your compiler as a second argument:
-      up.compiler('.google-map', function($element, pins) {
-        var map = new google.maps.Map($element);
+      up.compiler('.google-map', function(element, pins) {
+        var map = new google.maps.Map(element)
         pins.forEach(function(pin) {
-          var position = new google.maps.LatLng(pin.lat, pin.lng);
+          var position = new google.maps.LatLng(pin.lat, pin.lng)
           new google.maps.Marker({
             position: position,
             map: map,
             title: pin.title
-          });
-        });
-      });
+          })
+        })
+      })
   Similarly, when an event is triggered on an element annotated with
   [`up-data`], the parsed object will be passed to any matching
   [`up.on()`](/up.on) handlers.
-      up.on('click', '.google-map', function(event, $element, pins) {
-        console.log("There are %d pins on the clicked map", pins.length);
-      });
+      up.on('click', '.google-map', function(event, element, pins) {
+        console.log("There are %d pins on the clicked map", pins.length)
+      })
   @selector [up-data]
   @param {JSON} up-data
@@ -398,8 +444,8 @@ up.syntax = (($) ->
   @stable
   ###
   readData = (elementOrSelector) ->
-    if element = u.element(elementOrSelector)
-      u.jsonAttr(element, 'up-data') || {}
+    element = e.get(elementOrSelector)
+    e.jsonAttr(element, 'up-data') || {}
   ###**
   Resets the list of registered compiler directives to the
@@ -408,22 +454,24 @@ up.syntax = (($) ->
   @internal
   ###
   reset = ->
-    compilers = u.select(compilers, 'isSystem')
-    macros = u.select(macros, 'isSystem')
+    compilers = u.filter(compilers, 'isDefault')
+    macros = u.filter(macros, 'isDefault')
-  up.on 'up:framework:booted', -> isBooting = false
   up.on 'up:framework:reset', reset
   <% if ENV['JS_KNIFE'] %>knife: eval(Knife.point)<% end %>
   compiler: registerCompiler
   macro: registerMacro
+  $compiler: registerJQueryCompiler
+  $macro: registerJQueryMacro
   destructor: registerDestructor
   compile: compile
   clean: clean
   data: readData
-)(jQuery)
 up.compiler = up.syntax.compiler
+up.$compiler = up.syntax.$compiler
 up.destructor = up.syntax.destructor
 up.macro = up.syntax.macro
+up.$macro = up.syntax.$macro