improvement: Make properties more consistent and remove cyclic import

Author: microcipcip

src/components/useTimeout/stories/UseTimeoutDemo.vue

@@ -17,10 +17,10 @@
         <td colspan="3">
           <button
             class="button is-primary"
-            @click="resetTimer"
+            @click="reset"
             v-text="btnResetMsg"
           />
-          <button class="button is-danger" @click="cancelTimer">
+          <button class="button is-danger" @click="cancel">
             Cancel Timer
           </button>
         </td>
@@ -38,7 +38,7 @@ export default Vue.extend({
   name: 'UseTimeoutDemo',
   setup() {
     const timerDuration = 3000
-    const { isReady, isIdle, cancelTimer, resetTimer } = useTimeout(
+    const { isReady, isIdle, cancel, reset } = useTimeout(
       timerDuration,
       false
     )
@@ -54,7 +54,7 @@ export default Vue.extend({
       return 'Completed'
     })
 
-    return { btnResetMsg, timerStatus, cancelTimer, resetTimer }
+    return { btnResetMsg, timerStatus, cancel, reset }
   }
 })
 </script>

src/components/useTimeout/stories/useTimeout.md

@@ -11,8 +11,8 @@ useTimeout(
 ): {
     isReady: Ref<boolean | null>;
     isIdle: Ref<boolean>;
-    cancelTimer: () => void;
-    resetTimer: () => void;
+    cancel: () => void;
+    reset: () => void;
 }
 ```
 
@@ -28,8 +28,8 @@ useTimeout(
   - `true` when the timer is completed
   - `null` when the timer is cancelled
 - `isIdle: boolean` this value is `true` if the timer has ever been called, `false` otherwise
-- `cancelTimer: Function` the function used to cancel the timer
-- `resetTimer: Function` the function used for resetting the timer
+- `cancel: Function` the function used to cancel the timer
+- `reset: Function` the function used for resetting the timer
 
 ## Usage
 
@@ -38,8 +38,8 @@ useTimeout(
   <div>
     <p>Timer status: {{ isReady ? 'Called!' : 'Pending...' }}</p>
 
-    <button @click="resetTimer">Reset Timer</button>
-    <button @click="cancelTimer">Cancel Timer</button>
+    <button @click="reset">Reset Timer</button>
+    <button @click="cancel">Cancel Timer</button>
   </div>
 </template>
 
@@ -51,8 +51,8 @@ useTimeout(
     name: 'UseTimeoutDemo',
     setup() {
       const timerDuration = 3000
-      const { isReady, cancelTimer, resetTimer } = useTimeout(timerDuration)
-      return { isReady, cancelTimer, resetTimer }
+      const { isReady, cancel, reset } = useTimeout(timerDuration)
+      return { isReady, cancel, reset }
     }
   })
 </script>

src/components/useTimeout/useTimeout.ts

@@ -1,11 +1,7 @@
-import { useTimeoutFn } from '../../vue-use-kit'
+import { useTimeoutFn } from '../useTimeoutFn'
 
 const noop = () => null
 export function useTimeout(ms = 0, runOnMount = true) {
-  const { isReady, isIdle, cancelTimer, resetTimer } = useTimeoutFn(
-    noop,
-    ms,
-    runOnMount
-  )
-  return { isReady, isIdle, cancelTimer, resetTimer }
+  const { isReady, isIdle, cancel, reset } = useTimeoutFn(noop, ms, runOnMount)
+  return { isReady, isIdle, cancel, reset }
 }

src/components/useTimeoutFn/stories/UseTimeoutFnDemo.vue

@@ -23,10 +23,10 @@
         <td colspan="3">
           <button
             class="button is-primary"
-            @click="resetTimer"
+            @click="reset"
             v-text="btnResetMsg"
           />
-          <button class="button is-danger" @click="cancelTimer">
+          <button class="button is-danger" @click="cancel">
             Cancel Timer
           </button>
         </td>
@@ -48,7 +48,7 @@ export default Vue.extend({
     const timerHandler = () => {
       timerCallbackMsg.value = 'Timer completed!'
     }
-    const { isReady, isIdle, cancelTimer, resetTimer } = useTimeoutFn(
+    const { isReady, isIdle, cancel, reset } = useTimeoutFn(
       timerHandler,
       timerDuration,
       false
@@ -74,8 +74,8 @@ export default Vue.extend({
       timerCallbackMsg,
       btnResetMsg,
       timerStatus,
-      cancelTimer,
-      resetTimer
+      cancel,
+      reset
     }
   }
 })

src/components/useTimeoutFn/stories/useTimeoutFn.md

@@ -12,8 +12,8 @@ useTimeoutFn(
 ): {
     isReady: Ref<boolean | null>;
     isIdle: Ref<boolean>;
-    cancelTimer: () => void;
-    resetTimer: () => void;
+    cancel: () => void;
+    reset: () => void;
 }
 ```
 
@@ -30,8 +30,8 @@ useTimeoutFn(
   - `true` when the timer is completed
   - `null` when the timer is cancelled
 - `isIdle: boolean` this value is `true` if the timer has ever been called, `false` otherwise
-- `cancelTimer: Function` the function used to cancel the timer
-- `resetTimer: Function` the function used for resetting the timer
+- `cancel: Function` the function used to cancel the timer
+- `reset: Function` the function used for resetting the timer
 
 ## Usage
 
@@ -41,8 +41,8 @@ useTimeoutFn(
     <p>Timer status: {{ isReady ? 'Called!' : 'Pending...' }}</p>
     <p>Timeout Callback msg: {{ timerFnMsg }}</p>
 
-    <button @click="resetTimer">Reset Timer</button>
-    <button @click="cancelTimer">Cancel Timer</button>
+    <button @click="reset">Reset Timer</button>
+    <button @click="cancel">Cancel Timer</button>
   </div>
 </template>
 
@@ -60,12 +60,12 @@ useTimeoutFn(
         timerFnMsg.value = 'Timer completed!'
       }
 
-      const { isReady, cancelTimer, resetTimer } = useTimeoutFn(
+      const { isReady, cancel, reset } = useTimeoutFn(
         timerHandler,
         timerDuration
       )
 
-      return { timerFnMsg, isReady, cancelTimer, resetTimer }
+      return { timerFnMsg, isReady, cancel, reset }
     }
   })
 </script>

src/components/useTimeoutFn/useTimeoutFn.spec.ts

@@ -15,22 +15,22 @@ const testComponent = (onMount = true) => ({
     <div>
       <div id="isIdle" v-if="isIdle"></div>
       <div id="isReady" v-if="isReady">
-        <button id="cancelTimer" @click="cancelTimer"></button>
-        <button id="resetTimer" @click="resetTimer"></button>
+        <button id="cancel" @click="cancel"></button>
+        <button id="reset" @click="reset"></button>
         <div id="isCallbackCalled" v-if="isCallbackCalled"></div>
       </div>
     </div>
   `,
   setup() {
     const isCallbackCalled = ref(false)
-    const { isReady, isIdle, cancelTimer, resetTimer } = useTimeoutFn(
+    const { isReady, isIdle, cancel, reset } = useTimeoutFn(
       () => {
         isCallbackCalled.value = true
       },
       1000,
       onMount
     )
-    return { isReady, isIdle, cancelTimer, resetTimer, isCallbackCalled }
+    return { isReady, isIdle, cancel, reset, isCallbackCalled }
   }
 })
 
@@ -41,26 +41,26 @@ describe('useTimeoutFn', () => {
     expect(setTimeout).toHaveBeenCalledTimes(1)
   })
 
-  it('should call setTimeout again when resetTimer is called', async () => {
+  it('should call setTimeout again when reset is called', async () => {
     expect(setTimeout).toHaveBeenCalledTimes(0)
     const wrapper = mount(testComponent())
     expect(setTimeout).toHaveBeenCalledTimes(1)
     jest.runAllTimers()
 
-    // Wait for Vue to append #resetTimer in the DOM
+    // Wait for Vue to append #reset in the DOM
     await wrapper.vm.$nextTick()
-    wrapper.find('#resetTimer').trigger('click')
+    wrapper.find('#reset').trigger('click')
     expect(setTimeout).toHaveBeenCalledTimes(2)
   })
 
-  it('should hide all elements when cancelTimer is called', async () => {
+  it('should hide all elements when cancel is called', async () => {
     const wrapper = mount(testComponent())
     jest.runAllTimers()
 
     // Wait for Vue to append #isReady in the DOM
     await wrapper.vm.$nextTick()
     expect(wrapper.find('#isReady').exists()).toBe(true)
-    wrapper.find('#cancelTimer').trigger('click')
+    wrapper.find('#cancel').trigger('click')
     jest.runAllTimers()
 
     // Wait for Vue to remove #isReady from the DOM

src/components/useTimeoutFn/useTimeoutFn.ts

@@ -5,7 +5,7 @@ export function useTimeoutFn(callback: Function, ms = 0, runOnMount = true) {
   const isIdle = ref(!runOnMount)
   let timeout: any = null
 
-  const cancelTimer = () => {
+  const cancel = () => {
     isReady.value = null
     if (timeout) {
       clearTimeout(timeout)
@@ -26,7 +26,7 @@ export function useTimeoutFn(callback: Function, ms = 0, runOnMount = true) {
   }
 
   onMounted(() => runOnMount && setTimer())
-  onUnmounted(cancelTimer)
+  onUnmounted(cancel)
 
-  return { isReady, isIdle, cancelTimer, resetTimer: setTimer }
+  return { isReady, isIdle, cancel, reset: setTimer }
 }