extract shared code between weex/web transition modules

Author: yyx990803

src/platforms/web/runtime/modules/transition.js

@@ -1,10 +1,11 @@
 /* @flow */
 
 import { inBrowser, isIE9 } from 'core/util/index'
-import { cached, extend } from 'shared/util'
+import { once } from 'shared/util'
 import { mergeVNodeHook } from 'core/vdom/helpers/index'
 import { activeInstance } from 'core/instance/lifecycle'
 import {
+  resolveTransition,
   nextFrame,
   addTransitionClass,
   removeTransitionClass,
@@ -228,47 +229,6 @@ export function leave (vnode: VNodeWithData, rm: Function) {
   }
 }
 
-function resolveTransition (def?: string | Object): ?Object {
-  if (!def) {
-    return
-  }
-  /* istanbul ignore else */
-  if (typeof def === 'object') {
-    const res = {}
-    if (def.css !== false) {
-      extend(res, autoCssTransition(def.name || 'v'))
-    }
-    extend(res, def)
-    return res
-  } else if (typeof def === 'string') {
-    return autoCssTransition(def)
-  }
-}
-
-const autoCssTransition: (name: string) => Object = cached(name => {
-  return {
-    enterClass: `${name}-enter`,
-    leaveClass: `${name}-leave`,
-    appearClass: `${name}-enter`,
-    enterToClass: `${name}-enter-to`,
-    leaveToClass: `${name}-leave-to`,
-    appearToClass: `${name}-enter-to`,
-    enterActiveClass: `${name}-enter-active`,
-    leaveActiveClass: `${name}-leave-active`,
-    appearActiveClass: `${name}-enter-active`
-  }
-})
-
-function once (fn: Function): Function {
-  let called = false
-  return () => {
-    if (!called) {
-      called = true
-      fn()
-    }
-  }
-}
-
 function _enter (_: any, vnode: VNodeWithData) {
   if (!vnode.data.show) {
     enter(vnode)

src/platforms/web/runtime/transition-util.js

@@ -1,9 +1,40 @@
 /* @flow */
 
 import { inBrowser, isIE9 } from 'core/util/index'
-import { remove } from 'shared/util'
+import { remove, extend, cached } from 'shared/util'
 import { addClass, removeClass } from './class-util'
 
+export function resolveTransition (def?: string | Object): ?Object {
+  if (!def) {
+    return
+  }
+  /* istanbul ignore else */
+  if (typeof def === 'object') {
+    const res = {}
+    if (def.css !== false) {
+      extend(res, autoCssTransition(def.name || 'v'))
+    }
+    extend(res, def)
+    return res
+  } else if (typeof def === 'string') {
+    return autoCssTransition(def)
+  }
+}
+
+const autoCssTransition: (name: string) => Object = cached(name => {
+  return {
+    enterClass: `${name}-enter`,
+    leaveClass: `${name}-leave`,
+    appearClass: `${name}-enter`,
+    enterToClass: `${name}-enter-to`,
+    leaveToClass: `${name}-leave-to`,
+    appearToClass: `${name}-enter-to`,
+    enterActiveClass: `${name}-enter-active`,
+    leaveActiveClass: `${name}-leave-active`,
+    appearActiveClass: `${name}-enter-active`
+  }
+})
+
 export const hasTransition = inBrowser && !isIE9
 const TRANSITION = 'transition'
 const ANIMATION = 'animation'

src/platforms/weex/runtime/modules/transition.js

@@ -1,5 +1,6 @@
-import { extend, cached, noop } from 'shared/util'
+import { extend, once, noop } from 'shared/util'
 import { activeInstance } from 'core/instance/lifecycle'
+import { resolveTransition } from 'web/runtime/transition-util'
 
 export default {
   create: enter,
@@ -221,47 +222,6 @@ function leave (vnode, rm) {
   }
 }
 
-function resolveTransition (def) {
-  if (!def) {
-    return
-  }
-  /* istanbul ignore else */
-  if (typeof def === 'object') {
-    const res = {}
-    if (def.css !== false) {
-      extend(res, autoCssTransition(def.name || 'v'))
-    }
-    extend(res, def)
-    return res
-  } else if (typeof def === 'string') {
-    return autoCssTransition(def)
-  }
-}
-
-function once (fn) {
-  let called = false
-  return () => {
-    if (!called) {
-      called = true
-      fn()
-    }
-  }
-}
-
-const autoCssTransition = cached(name => {
-  return {
-    enterClass: `${name}-enter`,
-    leaveClass: `${name}-leave`,
-    appearClass: `${name}-enter`,
-    enterToClass: `${name}-enter-to`,
-    leaveToClass: `${name}-leave-to`,
-    appearToClass: `${name}-enter-to`,
-    enterActiveClass: `${name}-enter-active`,
-    leaveActiveClass: `${name}-leave-active`,
-    appearActiveClass: `${name}-enter-active`
-  }
-})
-
 // determine the target animation style for an entering transition.
 function getEnterTargetState (el, stylesheet, startClass, endClass, activeClass, vm) {
   const targetState = {}

src/shared/util.js

@@ -225,3 +225,16 @@ export function looseIndexOf (arr: Array<mixed>, val: mixed): number {
   }
   return -1
 }
+
+/**
+ * Ensure a function is called only once.
+ */
+export function once (fn: Function): Function {
+  let called = false
+  return () => {
+    if (!called) {
+      called = true
+      fn()
+    }
+  }
+}