phoenix_live_view 0.16.3 → 0.17.2

package/CHANGELOG.md

@@ -1,5 +1,122 @@
 # Changelog
 
+## 0.17.2 (2021-10-22)
+
+### Bug fixes
+  - Fix HTML engine bug causing attribute expressions to be incorrectly evaluated in certain cases
+  - Fix show/hide/toggle custom display not being restored.
+  - Fix default `to` target for `JS.show|hide|dispatch`
+  - Fix form input targetting
+
+## 0.17.1 (2021-10-21)
+
+### Bug fixes
+  - Fix SVG element support for phx binding interactions
+
+## 0.17.0 (2021-10-21)
+
+### Breaking Changes
+
+#### on_mount changes
+
+The hook API introduced in LiveView 0.16 has been improved based on feedback.
+LiveView 0.17 removes the custom module-function callbacks for the
+`Phoenix.LiveView.on_mount/1` macro and the `:on_mount` option for
+`Phoenix.LiveView.Router.live_session/3` in favor of supporting a custom
+argument. For clarity, the module function to be invoked during the mount
+lifecycle stage will always be named `on_mount/4`.
+
+For example, if you had invoked `on_mount/1` like so:
+
+```elixir
+on_mount MyAppWeb.MyHook
+on_mount {MyAppWeb.MyHook, :assign_current_user}
+```
+
+and defined your callbacks as:
+
+```elixir
+# my_hook.ex
+
+def mount(_params, _session, _socket) do
+end
+
+def assign_current_user(_params, _session, _socket) do
+end
+```
+
+Change the callback to:
+
+```elixir
+# my_hook.ex
+
+def on_mount(:default, _params, _session, _socket) do
+end
+
+def on_mount(:assign_current_user, _params, _session, _socket) do
+end
+```
+
+When given only a module name, the first argument to `on_mount/4` will be the
+atom `:default`.
+
+#### LEEx templates in stateful LiveComponents
+
+Stateful LiveComponents (where an `:id` is given) must now return HEEx templates
+(`~H` sigil or `.heex` extension). LEEx temlates (`~L` sigil or `.leex` extension)
+are no longer supported. This addresses bugs and allows stateful components
+to be rendered more efficiently client-side.
+
+#### phx-disconnected class has been replaced with phx-loading
+
+Due to a bug in the newly released Safari 15, the previously used `.phx-disconnected` class has been replaced by a new `.phx-loading` class. The reason for the change is `phx.new` included a `.phx-disconnected` rule in the generated `app.css` which triggers the Safari bug. Renaming the class avoids applying the erronous rule for existing applications. Folks can upgrade by simply renaming their `.phx-disconnected` rules to `.phx-loading`.
+
+#### phx-capture-click has been deprecated in favor of phx-click-away
+
+The new phx-click-away binding replaces phx-capture-click and is much more versatile because it can detect "click focus" being lost on containers.
+
+#### Removal of previously deprecated functionality
+
+Some functionality that was previously deprecated has been removed:
+
+  - Implicit assigns in `live_component` do-blocks is no longer supported
+  - Passing a `@socket` to `live_component` will now raise if possible
+
+### Enhancements
+  - Allow slots in function components: they are marked as `<:slot_name>` and can be rendered with `<%= render_slot @slot_name %>`
+  - Add JS command for executing JavaScript utility operations on the client with an extended push API
+  - Optimize string attributes:
+    - If the attribute is a string interpolation, such as `<div class={"foo bar #{@baz}"}>`, only the interpolation part is marked as dynamic
+    - If the attribute can be empty, such as "class" and "style", keep the attribute name as static
+  - Add a function component for rendering `Phoenix.LiveComponent`. Instead of `<%= live_component FormComponent, id: "form" %>`, you must now do: `<.live_component module={FormComponent} id="form" />`
+
+### Bug fixes
+  - Fix LiveViews with form recovery failing to properly mount following a reconnect when preceeded by a live redirect
+  - Fix stale session causing full redirect fallback when issuing a `push_redirect` from mount
+  - Add workaround for Safari bug causing img tags with srcset and video with autoplay to fail to render
+  - Support EEx interpolation inside HTML comments in HEEx templates
+  - Support HTML tags inside script tags (as in regular HTML)
+  - Raise if using quotes in attribute names
+  - Include the filename in error messages when it is not possible to parse interpolated attributes
+  - Make sure the test client always sends the full URL on `live_patch`/`live_redirect`. This mirrors the behaviour of the JavaScript client
+  - Do not reload flash from session on `live_redirect`s
+  - Fix select drop-down flashes in chrome when the DOM is patched during focus
+
+### Deprecations
+  - `<%= live_component MyModule, id: @user.id, user: @user %>` is deprecated in favor of `<.live_component module={MyModule} id={@user.id} user={@user} />`. Notice the new API requires using HEEx templates. This change allows us to further improve LiveComponent and bring new features such as slots to them.
+  - `render_block/2` in deprecated in favor of `render_slot/2`
+
+## 0.16.4 (2021-09-22)
+
+### Enhancements
+  - Improve HEEx error messages
+  - Relax HTML tag validation to support mixed case tags
+  - Support self closing HTML tags
+  - Remove requirement for handle_params to be defined for lifecycle hooks
+
+### Bug fixes
+  - Fix pushes failing to include channel `join_ref` on messages
+
 ## 0.16.3 (2021-09-03)
 
 ### Bug fixes
@@ -97,7 +214,7 @@ will emit warnings in future releases. We recommend using the `~H` sigil and the
 extension for all future templates in your application. You should also plan to migrate
 the old templates accordingly using the recommendations below.
 
-Migrating from `LEEx` to `HEEx` is relatively straighforward. There are two main differences.
+Migrating from `LEEx` to `HEEx` is relatively straightforward. There are two main differences.
 First of all, HEEx does not allow interpolation inside tags. So instead of:
 
 ```elixir
@@ -181,6 +298,10 @@ Change it to:
 import { LiveSocket } from "phoenix_live_view"
 ```
 
+Additionally on the client, the root LiveView element no longer exposes the
+LiveView module name, therefore the `phx-view` attribute is never set.
+Similarly, the `viewName` property of client hooks has been removed.
+
 ### Enhancements
   - Introduce HEEx templates
   - Introduce `Phoenix.Component`
@@ -309,7 +430,7 @@ import { LiveSocket } from "phoenix_live_view"
 ## 0.14.8 (2020-10-30)
 
 ### Bug fixes
-  - Fix compatiblity with latest Plug
+  - Fix compatibility with latest Plug
 
 ## 0.14.7 (2020-09-25)
 
@@ -433,7 +554,7 @@ import { LiveSocket } from "phoenix_live_view"
 
 ### Backwards incompatible changes
   - No longer send event metadata by default. Metadata is now opt-in and user defined at the `LiveSocket` level.
-  To maintain backwards compatiblity with pre-0.13 behaviour, you can provide the following metadata option:
+  To maintain backwards compatibility with pre-0.13 behaviour, you can provide the following metadata option:
 
   ```javascript
   let liveSocket = new LiveSocket("/live", Socket, {
@@ -520,7 +641,7 @@ The new implementation will check there is a button at `#term .buttons a`, with
   - Add `phx-trigger-action` form annotation to trigger an HTTP form submit on next DOM patch
 
 ### Bug fixes
-  - Fix `phx-target` `@myself` targetting a sibling LiveView component with the same component ID
+  - Fix `phx-target` `@myself` targeting a sibling LiveView component with the same component ID
   - Fix `phx:page-loading-stop` firing before the DOM patch has been performed
   - Fix `phx-update="prepend"` failing to properly patch the DOM when the same ID is updated back to back
   - Fix redirects on mount failing to copy flash
@@ -626,7 +747,7 @@ The new implementation will check there is a button at `#term .buttons a`, with
   - Allow the router to be accessed as `socket.router`
   - Allow `MFArgs` as the `:session` option in the `live` router macro
   - Trigger page loading event when main LV errors
-  - Automatially clear the flash on live navigation examples - only the newly assigned flash is persisted
+  - Automatically clear the flash on live navigation examples - only the newly assigned flash is persisted
 
 ## 0.8.1 (2020-02-27)
 
@@ -653,7 +774,7 @@ The new implementation will check there is a button at `#term .buttons a`, with
   - Add `put_live_layout` plug to put the root layout used for live routes
   - Allow `redirect` and `push_redirect` from mount
   - Use acknowledgement tracking to avoid patching inputs until the server has processed the form event
-  - Add css loading states to all phx bound elements with event specfic css classes
+  - Add css loading states to all phx bound elements with event specific css classes
   - Dispatch `phx:page-loading-start` and `phx:page-loading-stop` on window for live navigation, initial page loads, and form submits, for user controlled page loading integration
   - Allow any phx bound element to specify `phx-page-loading` to dispatch loading events above when the event is pushed
   - Add client side latency simulator with new `enableLatencySim(milliseconds)` and `disableLatencySim()`
@@ -779,7 +900,7 @@ Also note that **the session from now on will have string keys**. LiveView will
   - Allow `live_link` and `live_redirect` to exist anywhere in the page and it will always target the main LiveView (the one defined at the router)
 
 ### Backwards incompatible changes
-  - `phx-target="window"` has been removed in favor of `phx-window-keydown`, `phx-window-focus`, etc, and the `phx-target` binding has been repurposed for targetting LiveView and LiveComponent events from the client
+  - `phx-target="window"` has been removed in favor of `phx-window-keydown`, `phx-window-focus`, etc, and the `phx-target` binding has been repurposed for targeting LiveView and LiveComponent events from the client
   - `Phoenix.LiveView` no longer defined `live_render` and `live_link`. These functions have been moved to `Phoenix.LiveView.Helpers` which can now be fully imported in your views. In other words, replace `import Phoenix.LiveView, only: [live_render: ..., live_link: ...]` by `import Phoenix.LiveView.Helpers`
 
 ## 0.4.1 (2019-11-07)

package/assets/js/phoenix_live_view/constants.js

@@ -20,10 +20,10 @@ export const PHX_DROP_TARGET = "drop-target"
 export const PHX_ACTIVE_ENTRY_REFS = "data-phx-active-refs"
 export const PHX_LIVE_FILE_UPDATED = "phx:live-file:updated"
 export const PHX_SKIP = "data-phx-skip"
-export const PHX_REMOVE = "data-phx-remove"
+export const PHX_PRUNE = "data-phx-prune"
 export const PHX_PAGE_LOADING = "page-loading"
 export const PHX_CONNECTED_CLASS = "phx-connected"
-export const PHX_DISCONNECTED_CLASS = "phx-disconnected"
+export const PHX_DISCONNECTED_CLASS = "phx-loading"
 export const PHX_NO_FEEDBACK_CLASS = "phx-no-feedback"
 export const PHX_ERROR_CLASS = "phx-error"
 export const PHX_PARENT_ID = "data-phx-parent-id"

package/assets/js/phoenix_live_view/dom.js

@@ -12,6 +12,7 @@ import {
   PHX_PARENT_ID,
   PHX_PRIVATE,
   PHX_REF,
+  PHX_ROOT_ID,
   PHX_SESSION,
   PHX_STATIC,
   PHX_UPLOAD_REF,
@@ -20,7 +21,6 @@ import {
 } from "./constants"
 
 import {
-  clone,
   logError
 } from "./utils"
 
@@ -57,7 +57,7 @@ let DOM = {
   },
 
   markPhxChildDestroyed(el){
-    el.setAttribute(PHX_SESSION, "")
+    if(this.isPhxChild(el)){ el.setAttribute(PHX_SESSION, "") }
     this.putPrivate(el, "destroyed", true)
   },
 
@@ -116,9 +116,18 @@ let DOM = {
     el[PHX_PRIVATE][key] = value
   },
 
+  updatePrivate(el, key, defaultVal, updateFunc){
+    let existing = this.private(el, key)
+    if(existing === undefined){
+      this.putPrivate(el, key, updateFunc(defaultVal))
+    } else {
+      this.putPrivate(el, key, updateFunc(existing))
+    }
+  },
+
   copyPrivates(target, source){
     if(source[PHX_PRIVATE]){
-      target[PHX_PRIVATE] = clone(source[PHX_PRIVATE])
+      target[PHX_PRIVATE] = source[PHX_PRIVATE]
     }
   },
 
@@ -296,15 +305,6 @@ let DOM = {
     }
   },
 
-  syncPropsToAttrs(el){
-    if(el instanceof HTMLSelectElement){
-      let selectedItem = el.options.item(el.selectedIndex)
-      if(selectedItem && selectedItem.getAttribute("selected") === null){
-        selectedItem.setAttribute("selected", "")
-      }
-    }
-  },
-
   isTextualInput(el){ return FOCUSABLE_INPUTS.indexOf(el.type) >= 0 },
 
   isNowTriggerFormExternal(el, phxTriggerExternal){
@@ -347,7 +347,7 @@ let DOM = {
   },
 
   replaceRootContainer(container, tagName, attrs){
-    let retainedAttrs = new Set(["id", PHX_SESSION, PHX_STATIC, PHX_MAIN])
+    let retainedAttrs = new Set(["id", PHX_SESSION, PHX_STATIC, PHX_MAIN, PHX_ROOT_ID])
     if(container.tagName.toLowerCase() === tagName.toLowerCase()){
       Array.from(container.attributes)
         .filter(attr => !retainedAttrs.has(attr.name.toLowerCase()))
@@ -367,6 +367,42 @@ let DOM = {
       container.replaceWith(newContainer)
       return newContainer
     }
+  },
+
+  getSticky(el, name, defaultVal){
+    let op = (DOM.private(el, "sticky") || []).find(([existingName, ]) => name === existingName)
+    if(op){
+      let [_name, _op, stashedResult] = op
+      return stashedResult
+    } else {
+      return typeof(defaultVal) === "function" ? defaultVal() : defaultVal
+    }
+  },
+
+  deleteSticky(el, name){
+    this.updatePrivate(el, "sticky", [], ops => {
+      return ops.filter(([existingName, _]) => existingName !== name)
+    })
+  },
+
+  putSticky(el, name, op){
+    let stashedResult = op(el)
+    this.updatePrivate(el, "sticky", [], ops => {
+      let existingIndex = ops.findIndex(([existingName, ]) => name === existingName)
+      if(existingIndex >= 0){
+        ops[existingIndex] = [name, op, stashedResult]
+      } else {
+        ops.push([name, op, stashedResult])
+      }
+      return ops
+    })
+  },
+
+  applyStickyOperations(el){
+    let ops = DOM.private(el, "sticky")
+    if(!ops){ return }
+
+    ops.forEach(([name, op, _stashed]) => this.putSticky(el, name, op))
   }
 }
 

package/assets/js/phoenix_live_view/dom_patch.js

@@ -2,7 +2,7 @@ import {
   PHX_COMPONENT,
   PHX_DISABLE_WITH,
   PHX_FEEDBACK_FOR,
-  PHX_REMOVE,
+  PHX_PRUNE,
   PHX_ROOT_ID,
   PHX_SESSION,
   PHX_SKIP,
@@ -44,7 +44,8 @@ export default class DOMPatch {
     this.cidPatch = isCid(this.targetCID)
     this.callbacks = {
       beforeadded: [], beforeupdated: [], beforephxChildAdded: [],
-      afteradded: [], afterupdated: [], afterdiscarded: [], afterphxChildAdded: []
+      afteradded: [], afterupdated: [], afterdiscarded: [], afterphxChildAdded: [],
+      aftertransitionsDiscarded: []
     }
   }
 
@@ -61,7 +62,7 @@ export default class DOMPatch {
 
   markPrunableContentForRemoval(){
     DOM.all(this.container, "[phx-update=append] > *, [phx-update=prepend] > *", el => {
-      el.setAttribute(PHX_REMOVE, "")
+      el.setAttribute(PHX_PRUNE, "")
     })
   }
 
@@ -76,9 +77,11 @@ export default class DOMPatch {
     let phxFeedbackFor = liveSocket.binding(PHX_FEEDBACK_FOR)
     let disableWith = liveSocket.binding(PHX_DISABLE_WITH)
     let phxTriggerExternal = liveSocket.binding(PHX_TRIGGER_ACTION)
+    let phxRemove = liveSocket.binding("remove")
     let added = []
     let updates = []
     let appendPrependUpdates = []
+    let pendingRemoves = []
     let externalFormTriggered = null
 
     let diffHTML = liveSocket.time("premorph container prep", () => {
@@ -99,6 +102,12 @@ export default class DOMPatch {
           return el
         },
         onNodeAdded: (el) => {
+          // hack to fix Safari handling of img srcset and video tags
+          if(el instanceof HTMLImageElement && el.srcset){
+            el.srcset = el.srcset
+          } else if(el instanceof HTMLVideoElement && el.autoplay){
+            el.play()
+          }
           if(DOM.isNowTriggerFormExternal(el, phxTriggerExternal)){
             externalFormTriggered = el
           }
@@ -116,8 +125,12 @@ export default class DOMPatch {
           this.trackAfter("discarded", el)
         },
         onBeforeNodeDiscarded: (el) => {
-          if(el.getAttribute && el.getAttribute(PHX_REMOVE) !== null){ return true }
+          if(el.getAttribute && el.getAttribute(PHX_PRUNE) !== null){ return true }
           if(el.parentNode !== null && DOM.isPhxUpdate(el.parentNode, phxUpdate, ["append", "prepend"]) && el.id){ return false }
+          if(el.getAttribute && el.getAttribute(phxRemove)){
+            pendingRemoves.push(el)
+            return false
+          }
           if(this.skipCIDSibling(el)){ return false }
           return true
         },
@@ -134,6 +147,7 @@ export default class DOMPatch {
             this.trackBefore("updated", fromEl, toEl)
             DOM.mergeAttrs(fromEl, toEl, {isIgnored: true})
             updates.push(fromEl)
+            DOM.applyStickyOperations(fromEl)
             return false
           }
           if(fromEl.type === "number" && (fromEl.validity && fromEl.validity.badInput)){ return false }
@@ -142,6 +156,7 @@ export default class DOMPatch {
               this.trackBefore("updated", fromEl, toEl)
               updates.push(fromEl)
             }
+            DOM.applyStickyOperations(fromEl)
             return false
           }
 
@@ -151,26 +166,28 @@ export default class DOMPatch {
             DOM.mergeAttrs(fromEl, toEl, {exclude: [PHX_STATIC]})
             if(prevSession !== ""){ fromEl.setAttribute(PHX_SESSION, prevSession) }
             fromEl.setAttribute(PHX_ROOT_ID, this.rootID)
+            DOM.applyStickyOperations(fromEl)
             return false
           }
 
           // input handling
           DOM.copyPrivates(toEl, fromEl)
           DOM.discardError(targetContainer, toEl, phxFeedbackFor)
-          DOM.syncPropsToAttrs(toEl)
 
           let isFocusedFormEl = focused && fromEl.isSameNode(focused) && DOM.isFormInput(fromEl)
-          if(isFocusedFormEl && !this.forceFocusedSelectUpdate(fromEl, toEl)){
+          if(isFocusedFormEl){
             this.trackBefore("updated", fromEl, toEl)
             DOM.mergeFocusedInput(fromEl, toEl)
             DOM.syncAttrsToProps(fromEl)
             updates.push(fromEl)
+            DOM.applyStickyOperations(fromEl)
             return false
           } else {
             if(DOM.isPhxUpdate(toEl, phxUpdate, ["append", "prepend"])){
               appendPrependUpdates.push(new DOMPostMorphRestorer(fromEl, toEl, toEl.getAttribute(phxUpdate)))
             }
             DOM.syncAttrsToProps(toEl)
+            DOM.applyStickyOperations(toEl)
             this.trackBefore("updated", fromEl, toEl)
             return true
           }
@@ -191,6 +208,14 @@ export default class DOMPatch {
     added.forEach(el => this.trackAfter("added", el))
     updates.forEach(el => this.trackAfter("updated", el))
 
+    if(pendingRemoves.length > 0){
+      liveSocket.transitionRemoves(pendingRemoves)
+      liveSocket.requestDOMUpdate(() => {
+        pendingRemoves.forEach(el => el.remove())
+        this.trackAfter("transitionsDiscarded", pendingRemoves)
+      })
+    }
+
     if(externalFormTriggered){
       liveSocket.disconnect()
       externalFormTriggered.submit()
@@ -198,11 +223,6 @@ export default class DOMPatch {
     return true
   }
 
-  forceFocusedSelectUpdate(fromEl, toEl){
-    let isSelect = ["select", "select-one", "select-multiple"].find((t) => t === fromEl.type)
-    return fromEl.multiple === true || (isSelect && fromEl.innerHTML != toEl.innerHTML)
-  }
-
   isCIDPatch(){ return this.cidPatch }
 
   skipCIDSibling(el){

package/assets/js/phoenix_live_view/js.js

@@ -0,0 +1,169 @@
+import DOM from "./dom"
+
+let JS = {
+  exec(eventType, phxEvent, view, el, defaults){
+    let [defaultKind, defaultArgs] = defaults || [null, {}]
+    let commands = phxEvent.charAt(0) === "[" ?
+      JSON.parse(phxEvent) : [[defaultKind, defaultArgs]]
+
+    commands.forEach(([kind, args]) => {
+      if(kind === defaultKind && defaultArgs.data){
+        args.data = Object.assign(args.data || {}, defaultArgs.data)
+      }
+      this[`exec_${kind}`](eventType, phxEvent, view, el, args)
+    })
+  },
+
+  // private
+
+  // commands
+
+  exec_dispatch(eventType, phxEvent, view, sourceEl, {to, event, detail}){
+    if(to){
+      DOM.all(document, to, el => DOM.dispatchEvent(el, event, detail))
+    } else {
+      DOM.dispatchEvent(sourceEl, event, detail)
+    }
+  },
+
+  exec_push(eventType, phxEvent, view, sourceEl, args){
+    let {event, data, target, page_loading, loading, value} = args
+    let pushOpts = {page_loading: !!page_loading, loading: loading, value: value}
+    let targetSrc = eventType === "change" ? sourceEl.form : sourceEl
+    let phxTarget = target || targetSrc.getAttribute(view.binding("target")) || targetSrc
+    view.withinTargets(phxTarget, (targetView, targetCtx) => {
+      if(eventType === "change"){
+        let {newCid, _target, callback} = args
+        if(_target){ pushOpts._target = _target }
+        targetView.pushInput(sourceEl, targetCtx, newCid, event || phxEvent, pushOpts, callback)
+      } else if(eventType === "submit"){
+        targetView.submitForm(sourceEl, targetCtx, event || phxEvent, pushOpts)
+      } else {
+        targetView.pushEvent(eventType, sourceEl, targetCtx, event || phxEvent, data, pushOpts)
+      }
+    })
+  },
+
+  exec_add_class(eventType, phxEvent, view, sourceEl, {to, names, transition, time}){
+    if(to){
+      DOM.all(document, to, el => this.addOrRemoveClasses(el, names, [], transition, time, view))
+    } else {
+      this.addOrRemoveClasses(sourceEl, names, [], transition, view)
+    }
+  },
+
+  exec_remove_class(eventType, phxEvent, view, sourceEl, {to, names, transition, time}){
+    if(to){
+      DOM.all(document, to, el => this.addOrRemoveClasses(el, [], names, transition, time, view))
+    } else {
+      this.addOrRemoveClasses(sourceEl, [], names, transition, time, view)
+    }
+  },
+
+  exec_transition(eventType, phxEvent, view, sourceEl, {time, to, names}){
+    let els = to ? DOM.all(document, to) : [sourceEl]
+    els.forEach(el => {
+      this.addOrRemoveClasses(el, names, [])
+      view.transition(time, () => this.addOrRemoveClasses(el, [], names))
+    })
+  },
+
+  exec_toggle(eventType, phxEvent, view, sourceEl, {to, display, ins, outs, time}){
+    if(to){
+      DOM.all(document, to, el => this.toggle(eventType, view, el, display, ins || [], outs || [], time))
+    } else {
+      this.toggle(eventType, view, sourceEl, display, ins || [], outs || [], time)
+    }
+  },
+
+  exec_show(eventType, phxEvent, view, sourceEl, {to, display, transition, time}){
+    if(to){
+      DOM.all(document, to, el => this.show(eventType, view, el, display, transition, time))
+    } else {
+      this.show(eventType, view, sourceEl, transition, time)
+    }
+  },
+
+  exec_hide(eventType, phxEvent, view, sourceEl, {to, display, transition, time}){
+    if(to){
+      DOM.all(document, to, el => this.hide(eventType, view, el, display, transition, time))
+    } else {
+      this.hide(eventType, view, sourceEl, display, transition, time)
+    }
+  },
+
+  // utils for commands
+
+  show(eventType, view, el, display, transition, time){
+    let isVisible = this.isVisible(el)
+    if(transition.length > 0 && !isVisible){
+      this.toggle(eventType, view, el, display, transition, [], time)
+    } else if(!isVisible){
+      this.toggle(eventType, view, el, display, [], [], null)
+    }
+  },
+
+  hide(eventType, view, el, display, transition, time){
+    let isVisible = this.isVisible(el)
+    if(transition.length > 0 && isVisible){
+      this.toggle(eventType, view, el, display, [], transition, time)
+    } else if(isVisible){
+      this.toggle(eventType, view, el, display, [], [], time)
+    }
+  },
+
+  toggle(eventType, view, el, display, in_classes, out_classes, time){
+    if(in_classes.length > 0 || out_classes.length > 0){
+      if(this.isVisible(el)){
+        this.addOrRemoveClasses(el, out_classes, in_classes)
+        view.transition(time, () => {
+          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = "none")
+          this.addOrRemoveClasses(el, [], out_classes)
+        })
+      } else {
+        if(eventType === "remove"){ return }
+        this.addOrRemoveClasses(el, in_classes, out_classes)
+        DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = (display || "block"))
+        view.transition(time, () => {
+          this.addOrRemoveClasses(el, [], in_classes)
+        })
+      }
+    } else {
+      let newDisplay = this.isVisible(el) ? "none" : (display || "block")
+      DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = newDisplay)
+    }
+  },
+
+  addOrRemoveClasses(el, adds, removes, transition, time, view){
+    if(transition && transition.length > 0){
+      this.addOrRemoveClasses(el, transition, [])
+      return view.transition(time, () => this.addOrRemoveClasses(el, adds, removes.concat(transition)))
+    }
+    window.requestAnimationFrame(() => {
+      let [prevAdds, prevRemoves] = DOM.getSticky(el, "classes", [[], []])
+      let keepAdds = adds.filter(name => prevAdds.indexOf(name) < 0 && !el.classList.contains(name))
+      let keepRemoves = removes.filter(name => prevRemoves.indexOf(name) < 0 && el.classList.contains(name))
+      let newAdds = prevAdds.filter(name => removes.indexOf(name) < 0).concat(keepAdds)
+      let newRemoves = prevRemoves.filter(name => adds.indexOf(name) < 0).concat(keepRemoves)
+
+      DOM.putSticky(el, "classes", currentEl => {
+        currentEl.classList.remove(...newRemoves)
+        currentEl.classList.add(...newAdds)
+        return [newAdds, newRemoves]
+      })
+    })
+  },
+
+  hasAllClasses(el, classes){ return classes.every(name => el.classList.contains(name)) },
+
+  isVisible(el){
+    let style = window.getComputedStyle(el)
+    return !(style.opacity === 0 || style.display === "none")
+  },
+
+  isToggledOut(el, out_classes){
+    return !this.isVisible(el) || this.hasAllClasses(el, out_classes)
+  }
+}
+
+export default JS