upjs-rails 0.18.1 → 0.19.0

data/lib/assets/javascripts/up/log.js.coffee

@@ -46,6 +46,7 @@ up.log = (($) ->
     block = args.pop() # Coffeescript copies the arguments array
     if message
       up.browser.puts('groupCollapsed', prefix(message), args...)
+      # up.browser.puts('log', prefix(message), args...)
       try
         block()
       finally

data/lib/assets/javascripts/up/motion.js.coffee

@@ -346,10 +346,13 @@ up.motion = (($) ->
     if transitionOrName == 'none'
       transitionOrName = false
 
-    up.log.group ('Morphing %o to %o (using %o)' if transitionOrName), source, target, transitionOrName, ->
+    $old = $(source)
+    $new = $(target)
+
+    ensureMorphable($old, transitionOrName)
+    ensureMorphable($new, transitionOrName)
 
-      $old = $(source)
-      $new = $(target)
+    up.log.group ('Morphing %o to %o (using %o)' if transitionOrName), source, target, transitionOrName, ->
 
       parsedOptions = u.only(options, 'reveal', 'restoreScroll', 'source')
       parsedOptions = u.extend(parsedOptions, animateOptions(options))
@@ -380,6 +383,12 @@ up.motion = (($) ->
       else
         return skipMorph($old, $new, parsedOptions)
 
+  ensureMorphable = ($element, transition) ->
+    if transition && $element.parents('body').length == 0
+      element = $element.get(0)
+      u.error("Can't morph a <%s> element (%o)", element.tagName, element)
+
+
   ###*
   This causes the side effects of a successful transition, but instantly.
   We use this to skip morphing for old browsers, or when the developer

data/lib/assets/javascripts/up/proxy.js.coffee

@@ -231,7 +231,7 @@ up.proxy = (($) ->
   Once the response is received, a `up:proxy:receive` event will
   be emitted.
   
-  @function up.proxy.ajax
+  @function up.ajax
   @param {String} request.url
   @param {String} [request.method='GET']
   @param {String} [request.target='body']
@@ -341,7 +341,7 @@ up.proxy = (($) ->
         emission()
 
   ###*
-  This event is [emitted]/(up.emit) when [AJAX requests](/up.proxy.ajax)
+  This event is [emitted]/(up.emit) when [AJAX requests](/up.ajax)
   are taking long to finish.
 
   By default Up.js will wait 300 ms for an AJAX request to finish
@@ -366,7 +366,7 @@ up.proxy = (($) ->
       busyEventEmitted = false
 
   ###*
-  This event is [emitted]/(up.emit) when [AJAX requests](/up.proxy.ajax)
+  This event is [emitted]/(up.emit) when [AJAX requests](/up.ajax)
   have [taken long to finish](/up:proxy:busy), but have finished now.
 
   @event up:proxy:idle
@@ -398,6 +398,7 @@ up.proxy = (($) ->
 
     request.headers ||= {}
     request.headers['X-Up-Target'] = request.target
+
     request.data = u.requestDataAsArray(request.data)
 
     if u.contains(config.wrapMethods, request.method)
@@ -422,7 +423,7 @@ up.proxy = (($) ->
       promise.fail (args...) -> entry.deferred.reject(args...)
 
   ###*
-  This event is [emitted]/(up.emit) before an [AJAX request](/up.proxy.ajax)
+  This event is [emitted]/(up.emit) before an [AJAX request](/up.ajax)
   is starting to load.
 
   @event up:proxy:load
@@ -433,7 +434,7 @@ up.proxy = (($) ->
   ###
 
   ###*
-  This event is [emitted]/(up.emit) when the response to an [AJAX request](/up.proxy.ajax)
+  This event is [emitted]/(up.emit) when the response to an [AJAX request](/up.ajax)
   has been received.
 
   @event up:proxy:received
@@ -516,3 +517,5 @@ up.proxy = (($) ->
   defaults: -> u.error('up.proxy.defaults(...) no longer exists. Set values on he up.proxy.config property instead.')
   
 )(jQuery)
+
+up.ajax = up.proxy.ajax

data/lib/assets/javascripts/up/syntax.js.coffee

@@ -181,6 +181,11 @@ up.syntax = (($) ->
     If set to `true` and a fragment insertion contains multiple
     elements matching the selector, `compiler` is only called once
     with a jQuery collection containing all matching elements. 
+  @param {Boolean} [options.keep=false]
+    If set to `true` compiled fragment will be [persisted](/up-keep) during
+    [page updates](/a-up-target).
+
+    This has the same effect as setting an `up-keep` attribute on the element.
   @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).
@@ -200,23 +205,45 @@ up.syntax = (($) ->
     # Silently discard any compilers that are registered on unsupported browsers
     return unless up.browser.isSupported()
     compiler = args.pop()
-    options = u.options(args[0], batch: false)
+    options = u.options(args[0])
     compilers.push
       selector: selector
       callback: compiler
       batch: options.batch
-  
+      keep: options.keep
+
   applyCompiler = (compiler, $jqueryElement, nativeElement) ->
     up.puts ("Compiling '%s' on %o" unless compiler.isDefault), compiler.selector, nativeElement
+    if compiler.keep
+      value = if u.isString(compiler.keep) then compiler.keep else ''
+      $jqueryElement.attr('up-keep', value)
     destroyer = compiler.callback.apply(nativeElement, [$jqueryElement, data($jqueryElement)])
     if u.isFunction(destroyer)
       $jqueryElement.addClass(DESTROYABLE_CLASS)
       $jqueryElement.data(DESTROYER_KEY, destroyer)
 
-  compile = ($fragment) ->
+  ###*
+  Applies all compilers on the given element and its descendants.
+  Unlike [`up.hello`](/up.hello), this doesn't emit any events.
+
+  @function up.syntax.compile
+  @param {Array<Element>} [options.skip]
+    A list of elements whose subtrees should not be compiled.
+  @internal
+  ###
+  compile = ($fragment, options) ->
+    options = u.options(options)
+    $skipSubtrees = $(options.skip)
+
     up.log.group "Compiling fragment %o", $fragment.get(0), ->
       for compiler in compilers
         $matches = u.findWithSelf($fragment, compiler.selector)
+
+        $matches = $matches.filter ->
+          $match = $(this)
+          u.all $skipSubtrees, (element) ->
+            $match.closest(element).length == 0
+
         if $matches.length
           up.log.group ("Compiling '%s' on %d element(s)" unless compiler.isDefault), compiler.selector, $matches.length, ->
             if compiler.batch
@@ -224,7 +251,15 @@ up.syntax = (($) ->
             else
               $matches.each -> applyCompiler(compiler, $(this), this)
 
-  runDestroyers = ($fragment) ->
+  ###*
+  Runs any destroyers 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) ->
     u.findWithSelf($fragment, ".#{DESTROYABLE_CLASS}").each ->
       $element = $(this)
       destroyer = $element.data(DESTROYER_KEY)
@@ -286,68 +321,17 @@ up.syntax = (($) ->
   reset = ->
     compilers = u.select compilers, (compiler) -> compiler.isDefault
 
-  ###*
-  Compiles a page fragment that has been inserted into the DOM
-  without Up.js.
-
-  **As long as you manipulate the DOM using Up.js, you will never
-  need to call this method.** You only need to use `up.hello` if the
-  DOM is manipulated without Up.js' involvement, e.g. by setting
-  the `innerHTML` property or calling jQuery methods like
-  `html`, `insertAfter` or `appendTo`:
-
-      $element = $('.element');
-      $element.html('<div>...</div>');
-      up.hello($element);
-
-  This function emits the [`up:fragment:inserted`](/up:fragment:inserted)
-  event.
-
-  @function up.hello
-  @param {String|Element|jQuery} selectorOrElement
-  @param {String|Element|jQuery} [options.origin]
-  @return {jQuery}
-    The compiled element
-  @stable
-  ###
-  hello = (selectorOrElement, options) ->
-    $element = $(selectorOrElement)
-    eventAttrs = u.options options,
-      $element: $element
-      message: ['Inserted fragment %o', $element.get(0)]
-    up.emit('up:fragment:inserted', eventAttrs)
-    $element
-
-  ###*
-  When a page fragment has been [inserted or updated](/up.replace),
-  this event is [emitted](/up.emit) on the fragment.
-
-  \#\#\#\# Example
-
-      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
-    The fragment that has been inserted or updated.
-  @stable
-  ###
-
-  up.on 'ready', (-> hello(document.body))
-  up.on 'up:fragment:inserted', (event, $element) -> compile($element)
-  up.on 'up:fragment:destroy', (event, $element) -> runDestroyers($element)
   up.on 'up:framework:boot', snapshot
   up.on 'up:framework:reset', reset
 
   compiler: compiler
-  hello: hello
+  compile: compile
+  clean: clean
   data: data
 
 )(jQuery)
 
 up.compiler = up.syntax.compiler
-up.hello = up.syntax.hello
 
 up.ready = -> up.util.error('up.ready no longer exists. Please use up.hello instead.')
 up.awaken = -> up.util.error('up.awaken no longer exists. Please use up.compiler instead.')

data/lib/assets/javascripts/up/util.js.coffee

@@ -163,7 +163,7 @@ up.util = (($) ->
     $element = $(element)
     selector = undefined
 
-    # up.puts("Creating selector from element %o", $element.get(0))
+    up.puts("Creating selector from element %o", $element.get(0))
 
     if upId = presence($element.attr("up-id"))
       selector = "[up-id='#{upId}']"
@@ -172,7 +172,6 @@ up.util = (($) ->
     else if name = presence($element.attr("name"))
       selector = "[name='#{name}']"
     else if classes = presence(nonUpClasses($element))
-      console.log("using klass!", classes)
       selector = ''
       for klass in classes
         selector += ".#{klass}"
@@ -646,6 +645,24 @@ up.util = (($) ->
         break
     match
 
+  ###*
+  Returns whether the given function returns a truthy value
+  for all elements in the given array.
+
+  @function up.util.all
+  @param {Array<T>} array
+  @param {Function<T>} tester
+  @return {Boolean}
+  @experimental
+  ###
+  all = (array, tester) ->
+    match = true
+    for element in array
+      unless tester(element)
+        match = false
+        break
+    match
+
   ###*
   Returns all elements from the given array that are
   neither `null` or `undefined`.
@@ -1436,31 +1453,30 @@ up.util = (($) ->
   @internal
   ###
   requestDataAsArray = (data) ->
-    if isMissing(data)
-      []
-    else if isArray(data)
-      data
-    else if isObject(data)
-      { name: name, value: value } for name, value of data
-    else
-      error('Unknown options.data type for %o', data)
+    query = requestDataAsQuery(data)
+    array = []
+    for part in query.split('&')
+      if isPresent(part)
+        pair = part.split('=')
+        array.push
+          name: decodeURIComponent(pair[0])
+          value: decodeURIComponent(pair[1])
+    array
 
   ###*
   Returns an URL-encoded query string for the given params object.
 
-  @function up.util.requestDataAsQueryString
+  @function up.util.requestDataAsQuery
   @param {Object|Array|Undefined|Null} data
   @internal
   ###
-  requestDataAsQueryString = (data) ->
-    array = requestDataAsArray(data)
-    query = ''
-    if isPresent(array)
-      query += '?'
-      each array, (field, index) ->
-        query += '&' unless index == 0
-        query += encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value)
-    query
+  requestDataAsQuery = (data) ->
+    if data
+      query = $.param(data)
+      query = query.replace(/\+/g, '%20')
+      query
+    else
+      ""
 
   ###*
   Throws a fatal error with the given message.
@@ -1485,7 +1501,7 @@ up.util = (($) ->
     throw new Error(asString)
 
   requestDataAsArray: requestDataAsArray
-  requestDataAsQueryString: requestDataAsQueryString
+  requestDataAsQuery: requestDataAsQuery
   offsetParent: offsetParent
   fixedToAbsolute: fixedToAbsolute
   presentAttr: presentAttr
@@ -1507,6 +1523,7 @@ up.util = (($) ->
   map: map
   times: times
   any: any
+  all: all
   detect: detect
   select: select
   reject: reject

data/lib/upjs/rails/version.rb

@@ -4,6 +4,6 @@ module Upjs
     # The current version of the upjs-rails gem.
     # This version number is also used for releases of the Up.js
     # frontend code.
-    VERSION = '0.18.1'
+    VERSION = '0.19.0'
   end
 end

data/spec_app/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    upjs-rails (0.18.0)
+    upjs-rails (0.18.1)
       rails (>= 3)
 
 GEM
@@ -210,6 +210,3 @@ DEPENDENCIES
   uglifier (>= 1.3.0)
   upjs-rails!
   web-console (~> 2.0)
-
-BUNDLED WITH
-   1.11.2

data/spec_app/spec/javascripts/helpers/reset_up.js.coffee

@@ -1,5 +1,4 @@
 afterEach ->
   up.reset()
   $('.up-error').remove()
-
- 
+  console.debug('--- Up.js was reset after example ---')

data/spec_app/spec/javascripts/helpers/to_be_blank.js.coffee

@@ -0,0 +1,5 @@
+beforeEach ->
+  jasmine.addMatchers
+    toBeBlank: (util, customEqualityTesters) ->
+      compare: (actual) ->
+        pass: up.util.isBlank(actual)

data/spec_app/spec/javascripts/helpers/to_be_given.js.coffee

@@ -0,0 +1,5 @@
+beforeEach ->
+  jasmine.addMatchers
+    toBeGiven: (util, customEqualityTesters) ->
+      compare: (actual) ->
+        pass: up.util.isGiven(actual)

data/spec_app/spec/javascripts/helpers/to_be_missing.js.coffee

@@ -0,0 +1,5 @@
+beforeEach ->
+  jasmine.addMatchers
+    toBeMissing: (util, customEqualityTesters) ->
+      compare: (actual) ->
+        pass: up.util.isMissing(actual)

data/spec_app/spec/javascripts/up/flow_spec.js.coffee

@@ -47,9 +47,9 @@ describe 'up.flow', ->
             expect(@lastRequest().data()['bar-key']).toEqual(['bar-value'])
 
           it "encodes the given params into the URL of a GET request", ->
-            givenParams = { 'foo-key': 'foo value', 'bar-key': 'bar value' }
+            givenParams = { 'foo-key': 'foo-value', 'bar-key': 'bar-value' }
             up.replace('.middle', '/path', method: 'get', data: givenParams)
-            expect(@lastRequest().url).toEndWith('/path?foo-key=foo+value&bar-key=bar+value')
+            expect(@lastRequest().url).toEndWith('/path?foo-key=foo-value&bar-key=bar-value')
 
         it 'uses a HTTP method given as { method } option', ->
           up.replace('.middle', '/path', method: 'put')
@@ -58,7 +58,7 @@ describe 'up.flow', ->
         describe 'if the server responds with a non-200 status code', ->
 
           it 'replaces the <body> instead of the given selector', ->
-            implantSpy = up.flow.knife.mock('implant') # can't have the example replace the Jasmine test runner UI
+            implantSpy = up.flow.knife.mock('extract') # can't have the example replace the Jasmine test runner UI
             up.replace('.middle', '/path')
             @respond(status: 500)
             expect(implantSpy).toHaveBeenCalledWith('body', jasmine.any(String), jasmine.any(Object))
@@ -391,7 +391,7 @@ describe 'up.flow', ->
           up.replace('.selector', '/path')
           expect(up.browser.loadPage).toHaveBeenCalledWith('/path', jasmine.anything())
           
-    describe 'up.flow.implant', ->
+    describe 'up.extract', ->
       
       it 'Updates a selector on the current page with the same selector from the given HTML string', ->
 
@@ -406,7 +406,7 @@ describe 'up.flow', ->
           <div class="after">new-after</div>
           """
 
-        up.flow.implant('.middle', html)
+        up.extract('.middle', html)
 
         expect($('.before')).toHaveText('old-before')
         expect($('.middle')).toHaveText('new-middle')
@@ -414,49 +414,299 @@ describe 'up.flow', ->
 
       it "throws an error if the selector can't be found on the current page", ->
         html = '<div class="foo-bar">text</div>'
-        implant = -> up.flow.implant('.foo-bar', html)
-        expect(implant).toThrowError(/Could not find selector ".foo-bar" in current body/i)
+        extract = -> up.extract('.foo-bar', html)
+        expect(extract).toThrowError(/Could not find selector ".foo-bar" in current body/i)
 
       it "throws an error if the selector can't be found in the given HTML string", ->
         affix('.foo-bar')
-        implant = -> up.flow.implant('.foo-bar', '')
-        expect(implant).toThrowError(/Could not find selector ".foo-bar" in response/i)
+        extract = -> up.extract('.foo-bar', '')
+        expect(extract).toThrowError(/Could not find selector ".foo-bar" in response/i)
 
       it "ignores an element that matches the selector but also matches .up-destroying", ->
         html = '<div class="foo-bar">text</div>'
         affix('.foo-bar.up-destroying')
-        implant = -> up.flow.implant('.foo-bar', html)
-        expect(implant).toThrowError(/Could not find selector/i)
+        extract = -> up.extract('.foo-bar', html)
+        expect(extract).toThrowError(/Could not find selector/i)
 
       it "ignores an element that matches the selector but also matches .up-ghost", ->
         html = '<div class="foo-bar">text</div>'
         affix('.foo-bar.up-ghost')
-        implant = -> up.flow.implant('.foo-bar', html)
-        expect(implant).toThrowError(/Could not find selector/i)
+        extract = -> up.extract('.foo-bar', html)
+        expect(extract).toThrowError(/Could not find selector/i)
 
       it "ignores an element that matches the selector but also has a parent matching .up-destroying", ->
         html = '<div class="foo-bar">text</div>'
         $parent = affix('.up-destroying')
         $child = affix('.foo-bar').appendTo($parent)
-        implant = -> up.flow.implant('.foo-bar', html)
-        expect(implant).toThrowError(/Could not find selector/i)
+        extract = -> up.extract('.foo-bar', html)
+        expect(extract).toThrowError(/Could not find selector/i)
 
       it "ignores an element that matches the selector but also has a parent matching .up-ghost", ->
         html = '<div class="foo-bar">text</div>'
         $parent = affix('.up-ghost')
         $child = affix('.foo-bar').appendTo($parent)
-        implant = -> up.flow.implant('.foo-bar', html)
-        expect(implant).toThrowError(/Could not find selector/i)
+        extract = -> up.extract('.foo-bar', html)
+        expect(extract).toThrowError(/Could not find selector/i)
 
       it 'only replaces the first element matching the selector', ->
         html = '<div class="foo-bar">text</div>'
         affix('.foo-bar')
         affix('.foo-bar')
-        up.flow.implant('.foo-bar', html)
+        up.extract('.foo-bar', html)
         elements = $('.foo-bar')
         expect($(elements.get(0)).text()).toEqual('text')
         expect($(elements.get(1)).text()).toEqual('')
 
+      describe 'handling of [up-keep] elements', ->
+
+        squish = (string) ->
+          if u.isString(string)
+            string = string.replace(/^\s+/g, '')
+            string = string.replace(/\s+$/g, '')
+            string = string.replace(/\s+/g, ' ')
+          string
+
+        beforeEach ->
+# Need to refactor this spec file so examples don't all share one example
+          $('.before, .middle, .after').remove()
+
+        it 'keeps an [up-keep] element, but does replace other elements around it', ->
+          $container = affix('.container')
+          $container.affix('.before').text('old-before')
+          $container.affix('.middle[up-keep]').text('old-middle')
+          $container.affix('.after').text('old-after')
+          up.extract '.container', """
+            <div class='container'>
+              <div class='before'>new-before</div>
+              <div class='middle' up-keep>new-middle</div>
+              <div class='after'>new-after</div>
+            </div>
+            """
+          expect($('.before')).toHaveText('new-before')
+          expect($('.middle')).toHaveText('old-middle')
+          expect($('.after')).toHaveText('new-after')
+
+        it 'keeps an [up-keep] element, but does replace text nodes around it', ->
+          $container = affix('.container')
+          $container.html """
+            old-before
+            <div class='element' up-keep>old-inside</div>
+            old-after
+            """
+          up.extract '.container', """
+            <div class='container'>
+              new-before
+              <div class='element' up-keep>new-inside</div>
+              new-after
+            </div>
+            """
+          expect(squish($('.container').text())).toEqual('new-before old-inside new-after')
+
+        describe 'if an [up-keep] element is itself a direct replacement target', ->
+
+          it "keeps that element", ->
+            affix('.keeper[up-keep]').text('old-inside')
+            up.extract '.keeper', "<div class='keeper' up-keep>new-inside</div>"
+            expect($('.keeper')).toHaveText('old-inside')
+
+          it "does not compile the kept element a second time"
+
+          it "only emits an event up:fragment:kept, but not an event up:fragment:inserted", ->
+            insertedListener = jasmine.createSpy('subscriber to up:fragment:inserted')
+            up.on('up:fragment:inserted', insertedListener)
+            keptListener = jasmine.createSpy('subscriber to up:fragment:kept')
+            up.on('up:fragment:kept', keptListener)
+            up.on 'up:fragment:inserted', insertedListener
+            $keeper = affix('.keeper[up-keep]').text('old-inside')
+            up.extract '.keeper', "<div class='keeper' up-keep>new-inside</div>"
+            expect(insertedListener).not.toHaveBeenCalled()
+            expect(keptListener).toHaveBeenCalledWith(jasmine.anything(), $('.keeper'), jasmine.anything())
+
+        it "removes an [up-keep] element if no matching element is found in the response", ->
+          $container = affix('.container')
+          $container.html """
+            <div class='foo'>old-foo</div>
+            <div class='bar' up-keep>old-bar</div>
+            """
+          up.extract '.container', """
+            <div class='container'>
+              <div class='foo'>new-foo</div>
+            </div>
+            """
+          expect($('.container .foo')).toExist()
+          expect($('.container .bar')).not.toExist()
+
+        it "updates an element if a matching element is found in the response, but that other element is no longer [up-keep]", ->
+          $container = affix('.container')
+          $container.html """
+            <div class='foo'>old-foo</div>
+            <div class='bar' up-keep>old-bar</div>
+            """
+          up.extract '.container', """
+            <div class='container'>
+              <div class='foo'>new-foo</div>
+              <div class='bar'>new-bar</div>
+            </div>
+            """
+          expect($('.container .foo')).toHaveText('new-foo')
+          expect($('.container .bar')).toHaveText('new-bar')
+
+        it 'moves a kept element to the ancestry position of the matching element in the response', ->
+          $container = affix('.container')
+          $container.html """
+            <div class="parent1">
+              <div class="keeper" up-keep>old-inside</div>
+            </div>
+            <div class="parent2">
+            </div>
+            """
+          up.extract '.container', """
+            <div class='container'>
+              <div class="parent1">
+              </div>
+              <div class="parent2">
+                <div class="keeper" up-keep>old-inside</div>
+              </div>
+            </div>
+            """
+          expect($('.keeper')).toHaveText('old-inside')
+          expect($('.keeper').parent()).toEqual($('.parent2'))
+
+        it 'lets developers choose a selector to match against as the value of the up-keep attribute', ->
+          $container = affix('.container')
+          $container.html """
+            <div class="keeper" up-keep=".stayer"></div>
+            """
+          up.extract '.container', """
+            <div class='container'>
+              <div up-keep class="stayer"></div>
+            </div>
+            """
+          expect('.keeper').toExist()
+
+        it 'does not compile a kept element a second time', ->
+          compiler = jasmine.createSpy('compiler')
+          up.compiler('.keeper', compiler)
+          $container = affix('.container')
+          $container.html """
+            <div class="keeper" up-keep>old-text</div>
+            """
+
+          console.log '*** before hello ***'
+          up.hello($container)
+          console.log '*** after hello ***'
+          expect(compiler.calls.count()).toEqual(1)
+
+          up.extract '.container', """
+            <div class='container'>
+              <div class="keeper" up-keep>new-text</div>
+            </div>
+            """
+          expect(compiler.calls.count()).toEqual(1)
+          expect('.keeper').toExist()
+
+        it 'lets listeners cancel the keeping by preventing default on an up:fragment:keep event', ->
+          $keeper = affix('.keeper[up-keep]').text('old-inside')
+          $keeper.on 'up:fragment:keep', (event) -> event.preventDefault()
+          up.extract '.keeper', "<div class='keeper' up-keep>new-inside</div>"
+          expect($('.keeper')).toHaveText('new-inside')
+
+        it 'lets listeners prevent up:fragment:keep event if the element was kept before (bugfix)', ->
+          $keeper = affix('.keeper[up-keep]').text('version 1')
+          $keeper.on 'up:fragment:keep', (event) ->
+            event.preventDefault() if event.$newElement.text() == 'version 3'
+          up.extract '.keeper', "<div class='keeper' up-keep>version 2</div>"
+          expect($('.keeper')).toHaveText('version 1')
+          up.extract '.keeper', "<div class='keeper' up-keep>version 3</div>"
+          expect($('.keeper')).toHaveText('version 3')
+
+        it 'emits an up:fragment:kept event on a kept element and up:fragment:inserted on an updated parent', ->
+          insertedListener = jasmine.createSpy()
+          up.on('up:fragment:inserted', insertedListener)
+          keptListener = jasmine.createSpy()
+          up.on('up:fragment:kept', keptListener)
+
+          $container = affix('.container')
+          $container.html """
+            <div class="keeper" up-keep></div>
+            """
+          up.extract '.container', """
+            <div class='container'>
+              <div class="keeper" up-keep></div>
+            </div>
+            """
+          expect(insertedListener).toHaveBeenCalledWith(jasmine.anything(), $('.container'), jasmine.anything())
+          expect(keptListener).toHaveBeenCalledWith(jasmine.anything(), $('.container .keeper'), jasmine.anything())
+
+        it 'emits an up:fragment:kept event on a kept element with a newData property corresponding to the up-data attribute value of the discarded element', ->
+          keptListener = jasmine.createSpy()
+          up.on 'up:fragment:kept', (event) -> keptListener(event.$element, event.newData)
+          $container = affix('.container')
+          $keeper = $container.affix('.keeper[up-keep]').text('old-inside')
+          up.extract '.container', """
+            <div class='container'>
+              <div class='keeper' up-keep up-data='{ "foo": "bar" }'>new-inside</div>
+            </div>
+          """
+          expect($('.keeper')).toHaveText('old-inside')
+          expect(keptListener).toHaveBeenCalledWith($keeper, { 'foo': 'bar' })
+
+        it 'emits an up:fragment:kept with { newData: {} } if the discarded element had no up-data value', ->
+          keptListener = jasmine.createSpy()
+          up.on('up:fragment:kept', keptListener)
+          $container = affix('.container')
+          $keeper = $container.affix('.keeper[up-keep]').text('old-inside')
+          up.extract '.keeper', """
+            <div class='container'>
+              <div class='keeper' up-keep>new-inside</div>
+            </div>
+          """
+          expect($('.keeper')).toHaveText('old-inside')
+          expect(keptListener).toEqual(jasmine.anything(), $('.keeper'), {})
+
+        it 'reuses the same element and emits up:fragment:kept during multiple extractions', ->
+          keptListener = jasmine.createSpy()
+          up.on 'up:fragment:kept', (event) -> keptListener(event.$element, event.newData)
+          $container = affix('.container')
+          $keeper = $container.affix('.keeper[up-keep]').text('old-inside')
+          up.extract '.keeper', """
+            <div class='container'>
+              <div class='keeper' up-keep up-data='{ \"key\": \"value1\" }'>new-inside</div>
+            </div>
+          """
+          up.extract '.keeper', """
+            <div class='container'>
+              <div class='keeper' up-keep up-data='{ \"key\": \"value2\" }'>new-inside</div>
+          """
+          $keeper = $('.keeper')
+          expect($keeper).toHaveText('old-inside')
+          expect(keptListener).toHaveBeenCalledWith($keeper, { key: 'value1' })
+          expect(keptListener).toHaveBeenCalledWith($keeper, { key: 'value2' })
+
+        it "doesn't let the discarded element appear in a transition", (done) ->
+          oldTextDuringTransition = undefined
+          newTextDuringTransition = undefined
+          transition = ($old, $new) ->
+            oldTextDuringTransition = squish($old.text())
+            newTextDuringTransition = squish($new.text())
+            u.resolvedDeferred()
+          $container = affix('.container')
+          $container.html """
+            <div class='foo'>old-foo</div>
+            <div class='bar' up-keep>old-bar</div>
+            """
+          newHtml = """
+            <div class='container'>
+              <div class='foo'>new-foo</div>
+              <div class='bar' up-keep>new-bar</div>
+            </div>
+            """
+          promise = up.extract('.container', newHtml, transition: transition)
+          promise.then ->
+            expect(oldTextDuringTransition).toEqual('old-foo old-bar')
+            expect(newTextDuringTransition).toEqual('new-foo old-bar')
+            done()
+
     describe 'up.destroy', ->
       
       it 'removes the element with the given selector', ->
@@ -502,3 +752,4 @@ describe 'up.flow', ->
     describe 'up.reset', ->
   
       it 'should have tests'
+