unpoly-rails 0.57.0 → 0.60.0

data/lib/assets/javascripts/unpoly/{dom.coffee.erb → fragment.coffee.erb}

@@ -2,23 +2,27 @@
 Fragment update API
 ===================
   
-This module exposes a low-level Javascript API to [change](/up.replace) or
+The `up.fragment` module exposes a high-level Javascript API to [update](/up.replace) or
 [destroy](/up.destroy) page fragments.
 
+Fragments are [compiled](/up.compiler) elements that can be updated from a server URL.
+They also exist on a layer (page, modal, popup).
+
 Most of Unpoly's functionality (like [fragment links](/up.link) or [modals](/up.modal))
-is built from these functions. You can use them to extend Unpoly from your
+is built from `up.fragment` functions. You may use them to extend Unpoly from your
 [custom Javascript](/up.syntax).
 
-@class up.dom
+@module up.fragment
 ###
-up.dom = (($) ->
+up.fragment = do ->
   
   u = up.util
+  e = up.element
 
   ###**
   Configures defaults for fragment insertion.
 
-  @property up.dom.config
+  @property up.fragment.config
   @param {string} [options.fallbacks=['body']]
     When a fragment updates cannot find the requested element, Unpoly will try this list of alternative selectors.
 
@@ -34,7 +38,7 @@ up.dom = (($) ->
     By default this is not set and the original replacement's transition is used.
   @stable
   ###
-  config = u.config
+  config = new up.Config
     fallbacks: ['body']
     fallbackTransition: null
 
@@ -43,48 +47,22 @@ up.dom = (($) ->
 
   setSource = (element, sourceUrl) ->
     unless sourceUrl is false
-      $element = $(element)
       sourceUrl = u.normalizeUrl(sourceUrl) if u.isPresent(sourceUrl)
-      $element.attr("up-source", sourceUrl)
+      element.setAttribute("up-source", sourceUrl)
 
   ###**
   Returns the URL the given element was retrieved from.
 
-  @method up.dom.source
+  @method up.fragment.source
   @param {string|Element|jQuery} selectorOrElement
   @experimental
   ###
   source = (selectorOrElement) ->
-    $element = $(selectorOrElement).closest('[up-source]')
-    u.presence($element.attr("up-source")) || up.browser.url()
-
-  ###**
-  Resolves the given CSS selector (which might contain `&` references)
-  to a full CSS selector without ampersands.
-
-  If passed an `Element` or `jQuery` element, returns a CSS selector string
-  for that element.
-
-  @function up.dom.resolveSelector
-  @param {string|Element|jQuery} selectorOrElement
-  @param {string|Element|jQuery} origin
-    The element that this selector resolution is relative to.
-    That element's selector will be substituted for `&` ([like in Sass](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector)).
-  @return {string}
-  @internal
-  ###
-  resolveSelector = (selectorOrElement, origin) ->
-    if u.isString(selectorOrElement)
-      selector = selectorOrElement
-      if u.contains(selector, '&')
-        if u.isPresent(origin) # isPresent returns false for empty jQuery collection
-          originSelector = u.selectorForElement(origin)
-          selector = selector.replace(/\&/, originSelector)
-        else
-          up.fail("Found origin reference (%s) in selector %s, but no origin was given", '&', selector)
+    element = e.get(selectorOrElement)
+    if element = e.closest(element, '[up-source]')
+      element.getAttribute("up-source")
     else
-      selector = u.selectorForElement(selectorOrElement)
-    selector
+      up.browser.url()
 
   ###**
   Replaces elements on the current page with corresponding elements
@@ -103,7 +81,7 @@ up.dom = (($) ->
 
   We now replace the second `<div>`:
 
-      up.replace('.two', '/new');
+      up.replace('.two', '/new')
 
   The server renders a response for `/new`:
 
@@ -181,7 +159,7 @@ up.dom = (($) ->
   @param {string} [options.method='get']
     The HTTP method to use for 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.
   @param {string} [options.transition='none']
   @param {string|boolean} [options.history=true]
     If a string is given, it is used as the URL the browser's location bar and history.
@@ -196,6 +174,8 @@ up.dom = (($) ->
     Whether to [reveal](/up.reveal) the new fragment when the server responds with an error.
 
     You can also pass a CSS selector for the element to reveal.
+  @param {number} [options.revealPadding}
+
   @param {boolean} [options.restoreScroll=false]
     If set to true, Unpoly will try to restore the scroll position
     of all the viewports around or below the updated element. The position
@@ -254,23 +234,25 @@ up.dom = (($) ->
     try
       improvedTarget = bestPreflightSelector(selectorOrElement, successOptions)
       improvedFailTarget = bestPreflightSelector(options.failTarget, failureOptions)
-    catch e
+    catch error
       # Since we're an async function, we should not throw exceptions but return a rejected promise.
       # http://2ality.com/2016/03/promise-rejections-vs-exceptions.html
-      return Promise.reject(e)
-
-    request = new up.Request(
+      return Promise.reject(error)
+
+    requestAttrs = u.only options,
+      'method',
+      'data', # deprecated
+      'params',
+      'cache',
+      'preload',
+      'headers',
+      'timeout'
+    u.assign requestAttrs,
       url: url
-      method: options.method
-      data: options.data # deprecated, use { params }
-      params: options.params
       target: improvedTarget
       failTarget: improvedFailTarget
-      cache: options.cache
-      preload: options.preload
-      headers: options.headers
-      timeout: options.timeout
-    )
+
+    request = new up.Request(requestAttrs)
 
     onSuccess = (response) ->
       processResponse(true, improvedTarget, request, response, successOptions)
@@ -343,7 +325,7 @@ up.dom = (($) ->
       html = '<div class="one">new one</div>' +
              '<div class="two">new two</div>';
 
-      up.extract('.two', html);
+      up.extract('.two', html)
 
   Unpoly looks for the selector `.two` in the strings and updates its
   contents in the current page. The current page now looks like this:
@@ -371,7 +353,7 @@ up.dom = (($) ->
         keep: true
         layer: 'auto'
 
-      up.layout.saveScroll() unless options.saveScroll == false
+      up.viewport.saveScroll() unless options.saveScroll == false
 
       u.rejectOnError ->
         # Allow callers to create the targeted element right before we swap.
@@ -391,22 +373,20 @@ up.dom = (($) ->
             # async swapElements() is scheduled for the next microtask and we must not change the options
             # for the previous iteration.
             swapOptions = u.merge(options, u.only(step, 'origin', 'reveal'))
-
-            responseDoc.prepareForInsertion(step.$new)
-
-            swapPromise = swapElements(step.$old, step.$new, step.pseudoClass, step.transition, swapOptions)
+            responseDoc.prepareForInsertion(step.newElement)
+            swapPromise = swapElements(step.oldElement, step.newElement, step.pseudoClass, step.transition, swapOptions)
             swapPromises.push(swapPromise)
 
         # Delay all further links in the promise chain until all fragments have been swapped
         Promise.all(swapPromises)
 
-  bestPreflightSelector = (selector, options) ->
-    cascade = new up.ExtractCascade(selector, options)
+  bestPreflightSelector = (selectorOrElement, options) ->
+    cascade = new up.ExtractCascade(selectorOrElement, options)
     cascade.bestPreflightSelector()
 
-  bestMatchingSteps = (selector, response, options) ->
+  bestMatchingSteps = (selectorOrElement, response, options) ->
     options = u.merge(options, { response })
-    cascade = new up.ExtractCascade(selector, options)
+    cascade = new up.ExtractCascade(selectorOrElement, options)
     cascade.bestMatchingSteps()
 
   updateHistoryAndTitle = (options) ->
@@ -414,47 +394,50 @@ up.dom = (($) ->
     up.history[options.historyMethod](options.history) if options.history
     document.title = options.title if u.isString(options.title)
 
-  swapElements = ($old, $new, pseudoClass, transition, options) ->
+  swapElements = (oldElement, newElement, pseudoClass, transition, options) ->
     transition ||= 'none'
 
     # When the server responds with an error, or when the request method is not
     # reloadable (not GET), we keep the same source as before.
     if options.source == 'keep'
-      options = u.merge(options, source: source($old))
+      options = u.merge(options, source: source(oldElement))
 
-    # Remember where the element came from in case someone needs to up.reload($new) later.
-    setSource($new, options.source)
+    # Remember where the element came from in case someone needs to up.reload(newElement) later.
+    setSource(newElement, options.source)
 
     if pseudoClass
       # Text nodes are wrapped in a .up-insertion container so we can
       # animate them and measure their position/size for scrolling.
       # This is not possible for container-less text nodes.
-      $wrapper = $new.contents().wrapAll('<div class="up-insertion"></div>').parent()
+      wrapper = e.createFromSelector('.up-insertion')
+      while childNode = newElement.firstChild
+        wrapper.appendChild(childNode)
 
       # Note that since we're prepending/appending instead of replacing,
-      # `$new` will not actually be inserted into the DOM, only its children.
+      # newElement will not actually be inserted into the DOM, only its children.
       if pseudoClass == 'before'
-        $old.prepend($wrapper)
+        oldElement.insertAdjacentElement('afterbegin', wrapper)
       else
-        $old.append($wrapper)
+        oldElement.insertAdjacentElement('beforeend', wrapper)
 
-      hello($wrapper.children(), options)
+      for child in wrapper.children
+        hello(child, options)
 
       # Reveal element that was being prepended/appended.
       # Since we will animate (not morph) it's OK to allow animation of scrolling
-      # if the user has configured up.layout.config.duration.
-      promise = up.layout.scrollAfterInsertFragment($wrapper, options)
+      # if options.scrollBehavior is given.
+      promise = up.viewport.scrollAfterInsertFragment(wrapper, options)
 
       # Since we're adding content instead of replacing, we'll only
-      # animate $new instead of morphing between $old and $new
-      promise = promise.then -> up.animate($wrapper, transition, options)
+      # animate newElement instead of morphing between oldElement and newElement
+      promise = u.always(promise, up.animate(wrapper, transition, options))
 
       # Remove the wrapper now that is has served it purpose
-      promise = promise.then -> u.unwrapElement($wrapper)
+      promise = promise.then -> e.unwrap(wrapper)
 
       return promise
 
-    else if keepPlan = findKeepPlan($old, $new, options)
+    else if keepPlan = findKeepPlan(oldElement, newElement, options)
       # Since we're keeping the element that was requested to be swapped,
       # there is nothing left to do here, except notify event listeners.
       emitFragmentKept(keepPlan)
@@ -463,66 +446,70 @@ up.dom = (($) ->
     else
       # This needs to happen before prepareClean() below.
       # Otherwise we would collect destructors for elements we want to keep.
-      options.keepPlans = transferKeepableElements($old, $new, options)
+      options.keepPlans = transferKeepableElements(oldElement, newElement, options)
 
-      $parent = $old.parent()
+      parent = oldElement.parentNode
 
       morphOptions = u.merge options,
         beforeStart: ->
-          markElementAsDestroying($old)
-          emitFragmentDestroy($old, log: false)
+          markElementAsDestroying(oldElement)
         afterInsert: ->
-          up.hello($new, options)
+          up.hello(newElement, options)
         beforeDetach: ->
-          up.syntax.clean($old)
+          up.syntax.clean(oldElement)
         afterDetach: ->
-          $old.remove() # clean up jQuery data
-          emitFragmentDestroyed($old, $parent: $parent, log: false)
+          e.remove(oldElement) # clean up jQuery data
+          emitFragmentDestroyed(oldElement, parent: parent, log: false)
 
-      return up.morph($old, $new, transition, morphOptions)
+      return up.morph(oldElement, newElement, transition, morphOptions)
 
 
-  # This will find all [up-keep] descendants in $old an, overwrite their partner
-  # element in $new and leave a visually identical clone in $old for a later transition.
+  # This will find all [up-keep] descendants in oldElement, overwrite their partner
+  # element in newElement and leave a visually identical clone in oldElement for a later transition.
   # Returns an array of keepPlans.
-  transferKeepableElements = ($old, $new, options) ->
+  transferKeepableElements = (oldElement, newElement, options) ->
     keepPlans = []
     if options.keep
-      for keepable in $old.find('[up-keep]')
-        $keepable = $(keepable)
-        if plan = findKeepPlan($keepable, $new, u.merge(options, descendantsOnly: true))
-          # Replace $keepable with its clone so it looks good in a transition between
-          # $old and $new. Note that $keepable will still point to the same element
+      for keepable in oldElement.querySelectorAll('[up-keep]')
+        if plan = findKeepPlan(keepable, newElement, u.merge(options, descendantsOnly: true))
+          # plan.oldElement is now keepable
+
+          # Replace keepable with its clone so it looks good in a transition between
+          # oldElement and newElement. Note that keepable will still point to the same element
           # after the replacement, which is now detached.
-          $keepableClone = $keepable.clone()
-          u.detachWith($keepable, $keepableClone)
+          keepableClone = keepable.cloneNode(true)
+          e.replace(keepable, keepableClone)
 
-          # $keepable.replaceWith($keepableClone)
-          # Since we're going to swap the entire $old and $new containers afterwards,
-          # replace the matching element with $keepable so it will eventually return to the DOM.
-          plan.$newElement.replaceWith($keepable)
+          # Since we're going to swap the entire oldElement and newElement containers afterwards,
+          # replace the matching element with keepable so it will eventually return to the DOM.
+          e.replace(plan.newElement, keepable)
           keepPlans.push(plan)
     keepPlans
 
 
-  findKeepPlan = ($element, $new, options) ->
+  findKeepPlan = (element, newElement, options) ->
     if options.keep
-      $keepable = $element
-      if partnerSelector = u.castedAttr($keepable, 'up-keep')
+      keepable = element
+      if partnerSelector = e.booleanOrStringAttr(keepable, 'up-keep')
         u.isString(partnerSelector) or partnerSelector = '&'
-        partnerSelector = resolveSelector(partnerSelector, $keepable)
+        partnerSelector = e.resolveSelector(partnerSelector, keepable)
         if options.descendantsOnly
-          $partner = $new.find(partnerSelector)
+          partner = e.first(newElement, partnerSelector)
         else
-          $partner = u.selectInSubtree($new, partnerSelector)
-        $partner = $partner.first()
-        if $partner.length && $partner.is('[up-keep]')
+          partner = e.subtree(newElement, partnerSelector)[0]
+        if partner && e.matches(partner, '[up-keep]')
           plan =
-            $element: $keepable # the element that should be kept
-            $newElement: $partner # the element that would have replaced it but now does not
-            newData: up.syntax.data($partner) # the parsed up-data attribute of the element we will discard
-          keepEventArgs = u.merge(plan, message: ['Keeping element %o', $keepable.get(0)])
-          if up.bus.nobodyPrevents('up:fragment:keep', keepEventArgs)
+            oldElement: keepable # the element that should be kept
+            newElement: partner # the element that would have replaced it but now does not
+            newData: up.syntax.data(partner) # the parsed up-data attribute of the element we will discard
+
+          keepEventArgs =
+            target: keepable
+            newFragment: partner
+            newData: plan.newData
+            log: ['Keeping element %o', keepable]
+
+          if up.event.nobodyPrevents('up:fragment:keep', keepEventArgs)
             plan
 
   ###**
@@ -554,13 +541,13 @@ up.dom = (($) ->
   On the client we can achieve this by listening to an `up:keep:fragment` event
   and preventing it if the `src` attribute of the old and new element differ:
 
-      up.compiler('audio', function($element) {
-        $element.on('up:fragment:keep', function(event) {
-          if $element.attr('src') !== event.$newElement.attr('src') {
-            event.preventDefault();
+      up.compiler('audio', function(element) {
+        element.addEventListener('up:fragment:keep', function(event) {
+          if element.getAttribute('src') !== event.newElement.getAttribute('src') {
+            event.preventDefault()
           }
-        });
-      });
+        })
+      })
 
   If we don't want to solve this on the client, we can achieve the same effect
   on the server. By setting the value of the `up-keep` attribute we can
@@ -586,9 +573,9 @@ up.dom = (($) ->
   @event up:fragment:keep
   @param event.preventDefault()
     Event listeners may call this method to prevent the element from being preserved.
-  @param {jQuery} event.$element
+  @param {Element} event.target
     The fragment that will be kept.
-  @param {jQuery} event.$newElement
+  @param {Element} event.newFragment
     The discarded element.
   @param {Object} event.newData
     The value of the [`up-data`](/up-data) attribute of the discarded element,
@@ -600,16 +587,16 @@ up.dom = (($) ->
   This event is [emitted](/up.emit) when an existing element has been [kept](/up-keep)
   during a page update.
 
-  Event listeners can inspect the discarded update through `event.$newElement`
+  Event listeners can inspect the discarded update through `event.newElement`
   and `event.newData` and then modify the preserved element when necessary.
 
   @event up:fragment:kept
-  @param {jQuery} event.$element
+  @param {Element} event.target
     The fragment that has been kept.
-  @param {jQuery} event.$newElement
-    The discarded element.
+  @param {Element} event.newFragment
+    The discarded fragment.
   @param {Object} event.newData
-    The value of the [`up-data`](/up-data) attribute of the discarded element,
+    The value of the [`up-data`](/up-data) attribute of the discarded fragment,
     parsed as a JSON object.
   @stable
   ###
@@ -624,9 +611,9 @@ up.dom = (($) ->
   the `innerHTML` property or calling jQuery methods like
   `html`, `insertAfter` or `appendTo`:
 
-      $element = $('.element');
-      $element.html('<div>...</div>');
-      up.hello($element);
+      element = document.createElement('div')
+      element.innerHTML = '... HTML that needs to be activated ...'
+      up.hello(element)
 
   This function emits the [`up:fragment:inserted`](/up:fragment:inserted)
   event.
@@ -635,82 +622,98 @@ up.dom = (($) ->
   @param {string|Element|jQuery} selectorOrElement
   @param {string|Element|jQuery} [options.origin]
   @param {string|Element|jQuery} [options.kept]
-  @return {jQuery}
+  @return {Element}
     The compiled element
   @stable
   ###
   hello = (selectorOrElement, options) ->
-    $element = $(selectorOrElement)
+    element = e.get(selectorOrElement)
     options = u.options(options, keepPlans: [])
     keptElements = []
     for plan in options.keepPlans
       emitFragmentKept(plan)
-      keptElements.push(plan.$element[0])
-    up.syntax.compile($element, skip: keptElements)
-    emitFragmentInserted($element, options)
-    $element
+      keptElements.push(plan.oldElement)
+    up.syntax.compile(element, skip: keptElements)
+    emitFragmentInserted(element, options)
+    element
 
   ###**
-  When a page fragment has been [inserted or updated](/up.replace),
+  When any page fragment has been [inserted or updated](/up.replace),
   this event is [emitted](/up.emit) on the fragment.
 
+  If you're looking to run code when a new fragment matches
+  a selector, use `up.compiler()` instead.
+
   \#\#\# Example
 
-      up.on('up:fragment:inserted', function(event, $fragment) {
-        console.log("Looks like we have a new %o!", $fragment);
-      });
+      up.on('up:fragment:inserted', function(event, fragment) {
+        console.log("Looks like we have a new %o!", fragment)
+      })
 
   @event up:fragment:inserted
-  @param {jQuery} event.$element
+  @param {Element} event.target
     The fragment that has been inserted or updated.
   @stable
   ###
-  emitFragmentInserted = ($element, options) ->
-    up.emit 'up:fragment:inserted',
-      $element: $element
-      message: ['Inserted fragment %o', $element.get(0)]
+  emitFragmentInserted = (element, options) ->
+    up.emit element, 'up:fragment:inserted',
+      log: ['Inserted fragment %o', element]
       origin: options.origin
 
   emitFragmentKept = (keepPlan) ->
-    eventAttrs = u.merge(keepPlan, message: ['Kept fragment %o', keepPlan.$element.get(0)])
-    up.emit('up:fragment:kept', eventAttrs)
-
-  emitFragmentDestroy = ($element, options) ->
-    if shouldLogDestruction($element, options)
-      message = ['Destroying fragment %o', $element.get(0)]
-    up.emit 'up:fragment:destroy', { $element, message }
+    keptElement = keepPlan.oldElement
+    eventAttrs =
+      target: keptElement,
+      newFragment: keepPlan.newElement
+      newData: keepPlan.newData
+      log: ['Kept fragment %o', keptElement]
 
-  emitFragmentDestroyed = ($element, options) ->
-    if shouldLogDestruction($element, options)
-      message = ['Destroyed fragment %o', $element.get(0)]
-
-    $parent = options.$parent or up.fail("Missing { $parent } option")
+    up.emit('up:fragment:kept', eventAttrs)
 
-    up.emit 'up:fragment:destroyed',
-      $target: $parent,
-      $parent: $parent,
-      $element: $element,
-      message: message
+  emitFragmentDestroyed = (fragment, options) ->
+    if shouldLogDestruction(fragment, options)
+      log = ['Destroyed fragment %o', fragment]
+    parent = options.parent or up.fail("Missing { parent } option")
+    up.emit(parent, 'up:fragment:destroyed', { fragment, parent, log })
 
-  isRealElement = ($element) ->
-    unreal = '.up-destroying'
-    $element.closest(unreal).length == 0
+  isRealElement = (element) ->
+    !e.closest(element, '.up-destroying')
 
   ###**
   Returns the first element matching the given selector, but
   ignores elements that are being [destroyed](/up.destroy) or that are being
   removed by a [transition](/up.morph).
 
-  If the given argument is already a jQuery collection (or an array
-  of DOM elements), the first element matching these conditions
-  is returned.
-
   Returns `undefined` if no element matches these conditions.
 
-  Also see the [`.up-destroying`](/up-destroying) class.
+  \#\#\# Example
+
+  To select the first element with the selector `.foo`:
+
+      var fooInModal = up.fragment.first('.foo')
+
+  You may also pass a `{ layer }` option to only match elements witin a layer:
+
+      var fooInModal = up.fragment.first('.foo', { layer: 'modal' })
+
+  You may also pass a root element as a first argument:
+
+      var container = up.fragment.first('.container')
+      var fooInContainer = up.fragment.first(container, '.foo')
 
-  @function up.first
-  @param {string|Element|jQuery|Array<Element>} selectorOrElement
+  \#\#\# Similar features
+
+  - The [`.up-destroying`](/up-destroying) class is assigned to elements during their removal animation.
+  - The [`up.element.first()`](/up.element.first) function simply returns the first element matching a selector
+    without further filtering.
+
+  @function up.fragment.first
+  @param {Element|jQuery} [root=document]
+    The root element for the search. Only the root's children will be matched.
+
+    May be omitted to search through all elements in the `document`.
+  @param {string} selector
+    The selector to match
   @param {string} [options.layer='auto']
     The name of the layer in which to find the element.
 
@@ -718,86 +721,63 @@ up.dom = (($) ->
   @param {string|Element|jQuery} [options.origin]
     An second element or selector that can be referenced as `&` in the first selector:
 
-        $input = $('input.email');
-        up.first('.field:has(&)', $input); // returns the .field containing $input
-  @return {jQuery|undefined}
+        var input = document.querySelector('input.email')
+        up.fragment.first('fieldset:has(&)', { origin: input }) // returns the <fieldset> containing input
+  @return {Element|undefined}
     The first element that is neither a ghost or being destroyed,
     or `undefined` if no such element was found.
   @experimental
   ###
-  first = (selectorOrElement, options) ->
-    options = u.options(options, layer: 'auto')
-    resolved = resolveSelector(selectorOrElement, options.origin)
-    if options.layer == 'auto'
-      firstInPriority(resolved, options.origin)
+  first = (args...) ->
+    options = u.extractOptions(args)
+    selector = args.pop()
+    root = args[0] || document
+    layer = options.layer ? 'auto'
+    origin = options.origin
+
+    selector = e.resolveSelector(selector, origin)
+    if layer == 'auto'
+      firstInPriority(root, selector, origin)
     else
-      firstInLayer(resolved, options.layer)
+      firstInLayer(root, selector, layer)
 
-  firstInPriority = (selectorOrElement, origin) ->
+  firstInPriority = (parent, selector, origin) ->
     layers = ['popup', 'modal', 'page']
-    $match = undefined
-    if u.isPresent(origin)
+    if origin
       originLayer = layerOf(origin)
       # Make the origin's layer the top priority
       u.remove(layers, originLayer)
       layers.unshift(originLayer)
-    for layer in layers
-      if $match = firstInLayer(selectorOrElement, layer)
-        break
-    $match
-
-  firstInLayer = (selectorOrElement, layer) ->
-    $elements = $(selectorOrElement)
-    $match = undefined
-    for element in $elements
-      $element = $(element)
-      if isRealElement($element) && matchesLayer($element, layer)
-        $match = $element
-        break
-    $match
+    u.findResult layers, (layer) ->
+      return firstInLayer(parent, selector, layer)
+
+  firstInLayer = (parent, selector, layer) ->
+    elements = e.all(parent, selector)
+    return u.findResult elements, (element) ->
+      if isRealElement(element) && matchesLayer(element, layer)
+        return element
 
   ###**
-  @function up.dom.layerOf
+  @function up.fragment.layerOf
   @internal
   ###
-  layerOf = (selectorOrElement) ->
-    $element = $(selectorOrElement)
-    if $element.length
-      if up.popup.contains($element)
-        'popup'
-      else if up.modal.contains($element)
-        'modal'
-      else
-        'page'
+  layerOf = (element) ->
+    if up.popup.contains(element)
+      'popup'
+    else if up.modal.contains(element)
+      'modal'
+    else
+      'page'
 
-  matchesLayer = (selectorOrElement, layer) ->
-    !layer || layerOf(selectorOrElement) == layer
+  matchesLayer = (element, layer) ->
+    !layer || layerOf(element) == layer
 
   ###**
-  Returns all elements matching the given selector, but
-  ignores elements that are being [destroyed](/up.destroy) or [transitioned](/up.morph).
-
-  If the given argument is already a jQuery collection (or an array
-  of DOM elements), returns the subset of the given list that is matching these conditions.
-
-  @function up.all
-  @param {string|jQuery|Array<Element>} selectorOrElements
-  @param {string|Element|jQuery} [options.origin]
-    An second element or selector that can be referenced as `&` in the first selector.
-  @param {string} [options.layer]
-    The name of the layer in which to find the element. Valid values are
-    `'page'`, `'modal'` and `'popup'`.
-  @return {jQuery}
-    A jQuery collection of matching elements.
-  @experimental
+  @function up.fragment.createPlaceHolder
+  @internal
   ###
-  all = (selectorOrElements, options) ->
-    options = u.options(options)
-    resolved = resolveSelector(selectorOrElements, options.origin)
-    $root = $(u.option(options.root, document))
-    $root.find(resolved).filter (index, element) ->
-      $element = $(element)
-      isRealElement($element) && matchesLayer($element, options.layer)
+  createPlaceholder = (selector, container = document.body) ->
+    e.affix(container, selector, class: 'up-placeholder')
 
   ###**
   Destroys the given element or selector.
@@ -808,7 +788,7 @@ up.dom = (($) ->
   Note that if you choose to animate the element removal using `options.animate`,
   the element won't be removed until after the animation has completed.
 
-  Emits events [`up:fragment:destroy`](/up:fragment:destroy) and [`up:fragment:destroyed`](/up:fragment:destroyed).
+  Emits events [`up:fragment:destroyed`](/up:fragment:destroyed).
   
   @function up.destroy
   @param {string|Element|jQuery} selectorOrElement
@@ -816,7 +796,7 @@ up.dom = (($) ->
     A URL that will be pushed as a new history entry when the element begins destruction.
   @param {string} [options.title]
     The document title to set when the element begins destruction.
-  @param {string|Function} [options.animation='none']
+  @param {string|Function(element, options): Promise} [options.animation='none']
     The animation to use before the element is removed from the DOM.
   @param {number} [options.duration]
     The duration of the animation. See [`up.animate()`](/up.animate).
@@ -829,59 +809,46 @@ up.dom = (($) ->
   @stable
   ###
   destroy = (selectorOrElement, options) ->
-    $element = $(selectorOrElement)
+    element = e.get(selectorOrElement)
     options = u.options(options, animation: false)
 
-    if $element.length == 0
+    unless element
       return Promise.resolve()
 
-    markElementAsDestroying($element)
-    emitFragmentDestroy($element, options)
+    markElementAsDestroying(element)
 
     updateHistoryAndTitle(options)
 
     animate = ->
       animateOptions = up.motion.animateOptions(options)
-      up.motion.animate($element, options.animation, animateOptions)
+      up.motion.animate(element, options.animation, animateOptions)
 
     wipe = ->
-      $parent = $element.parent()
-      up.syntax.clean($element)
-      $element.remove()
-      emitFragmentDestroyed($element, { $parent })
+      parent = element.parentNode
+      up.syntax.clean(element)
+      e.remove(element)
+      emitFragmentDestroyed(element, { parent: parent, log: options.log })
 
     animate().then(wipe)
 
-  shouldLogDestruction = ($element, options) ->
+  shouldLogDestruction = (element, options) ->
     # Don't log destruction for elements that are either Unpoly internals or frequently destroyed
-    options.log != false && !$element.is('.up-placeholder, .up-tooltip, .up-modal, .up-popup')
+    options.log != false && !e.matches(element, '.up-placeholder, .up-tooltip, .up-modal, .up-popup')
 
   ###**
   Elements are assigned the `.up-destroying` class before they are [destroyed](/up.destroy)
   or while they are being removed by a [transition](/up.morph).
 
-  If the removal is animated, the class is assigned before the animation.
+  If the removal is animated, the class is assigned before the animation starts.
 
-  Also see the [`up.first()`](/up.first) function.
+  To select an element while ignoring elements that are being destroyed,
+  see the [`up.fragment.first()`](/up.fragment.first) function.
 
   @selector .up-destroying
   @stable
   ###
-  markElementAsDestroying = ($element) ->
-    $element.addClass('up-destroying')
-
-  ###**
-  Before a page fragment is being [destroyed](/up.destroy), this
-  event is [emitted](/up.emit) on the fragment.
-
-  If the destruction is animated, this event is emitted before the
-  animation begins.
-
-  @event up:fragment:destroy
-  @param {jQuery} event.$element
-    The page fragment that is about to be destroyed.
-  @stable
-  ###
+  markElementAsDestroying = (element) ->
+    element.classList.add('up-destroying')
 
   ###**
   This event is [emitted](/up.emit) after a page fragment was [destroyed](/up.destroy) and removed from the DOM.
@@ -891,10 +858,12 @@ up.dom = (($) ->
   The event is emitted on the parent element of the fragment that was removed.
 
   @event up:fragment:destroyed
-  @param {jQuery} event.$element
-    The page fragment that has been removed from the DOM.
-  @param {jQuery} event.$parent
-    The parent element of the fragment that has been removed from the DOM.
+  @param {Element} event.fragment
+    The detached element that has been removed from the DOM.
+  @param {Element} event.parent
+    The former parent element of the fragment that has now been detached from the DOM.
+  @param {Element} event.target
+    The former parent element of the fragment that has now been detached from the DOM.
   @stable
   ###
 
@@ -903,9 +872,7 @@ up.dom = (($) ->
 
   \#\#\# Example
 
-      up.on('new-mail', function() {
-        up.reload('.inbox');
-      });
+      up.on('new-mail', function() { up.reload('.inbox') })
 
   Unpoly remembers the URL from which a fragment was loaded, so you
   don't usually need to give an URL when reloading.
@@ -925,33 +892,33 @@ up.dom = (($) ->
     replace(selectorOrElement, sourceUrl, options)
 
   up.on 'up:app:boot', ->
-    $body = $(document.body)
-    setSource($body, up.browser.url())
-    hello($body)
+    body = document.body
+    setSource(body, up.browser.url())
+    hello(body)
 
   up.on 'up:framework:reset', reset
 
   <% if ENV['JS_KNIFE'] %>knife: eval(Knife.point)<% end %>
+  createPlaceholder: createPlaceholder
   replace: replace
   reload: reload
   destroy: destroy
   extract: extract
   first: first
-  all: all
   source: source
-  resolveSelector: resolveSelector
   hello: hello
   config: config
   layerOf: layerOf
 
-)(jQuery)
+up.replace = up.fragment.replace
+up.extract = up.fragment.extract
+up.reload = up.fragment.reload
+up.destroy = up.fragment.destroy
+up.hello = up.fragment.hello
 
-up.replace = up.dom.replace
-up.extract = up.dom.extract
-up.reload = up.dom.reload
-up.destroy = up.dom.destroy
-up.first = up.dom.first
-up.all = up.dom.all
-up.hello = up.dom.hello
+up.first = (args...) ->
+  up.legacy.warn('up.first() has been renamed to up.fragment.first()')
+  up.fragment.first(args...)
 
-up.deprecateRenamedModule 'flow', 'dom'
+up.legacy.renamedModule 'flow', 'fragment'
+up.legacy.renamedModule 'dom', 'fragment'