Navigator Prefabricating Marinates

    v-timers
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.9 • Public • Published

    v-timers

    Simple mixin to manage timers or intervals for Vue.js

    Latest Version on NPM Software License npm npm

    Installation

    1.1 Use CDN

    <script src="https://cdn.jsdelivr.net/npm/v-timers/dist/v-timers.umd.js"></script>
    

    1.2 Install from package manager

    npm install v-timers
    yarn add v-timers
    

    2.1. Global import

    import Vue from 'vue'
    import VTimers from 'v-timers'
    
    Vue.use(VTimers)

    2.2. Or use mixin for the specific component

    import {mixin as VTimers} from 'v-timers'
    // -------- //
    import { VTimerMixin } from 'v-timers'
    
    export default {
      mixins: [VTimers],
      // ------ //
      mixins: [VTimerMixin],
    }

    2.3. Nuxt Module

    nuxt.config.js:

    export default {
      modules: [
        'v-timers/nuxt'
      ]
    }

    What it does?

    It creates timer instances in components and slightly reduces boilerplate code with their handling.
    See the following code

    export default {
      methods: {
        log () {
          console.log('Hello world')
        }
      },
      created () {
        // It looks OK for the first look
        // But imagine that you have more than one timer
        this.$options.interval = setInterval(this.log, 1000)
        // Ok? What about check if timer works?
        // And it's not reactive so you should create data option
        console.log(this.$options.interval !== null)  
        // Still ok? So what about reusable timers?
        // New method for that? Rly?  
      },
      // Did you forget that it should be destroyed?
      beforeDestroy () {
        clearInterval(this.$options.interval)
      }
    }

    It's ugly, isn't it? So let's try to fix this :)

    Same code with v-timers:

    export default {
      timers: {
        log: { time: 1000, autoStart: true }
      },
      methods: {
        log () {
          console.log('Hello world')
        }
      }
    }

    Configuration

    Timer object

    {
      // Name of timer
      // Default: timer key (with object notation)
      name: String,
    
      // Tick callback or method name from component
      // Note: callback is binded to component instance
      // Default: name
      callback: Function/String,
    
      // Autostart timer from created hook
      // Default: false
      autoStart: Boolean,
    
      // Set true to repeat (with setInterval) or false (setTimeout)
      // Default: false
      repeat: Boolean,
    
      // Set true to call first tick immediate 
      // Note: repeat must be true too
      // Default: false
      immediate: Boolean,
    
      // Time between ticks
      // Default: 1000
      time: Number
      
      // Switch timer`s status between activated and deactivated
      // Default: false
      isSwitchTab: Boolean
    }

    Changing timer duration

    this.timers.log.time = 2000

    NOTE: you should restart timer to apply changes

    Component methods

    // Starts `log` timer
    this.$timer.start('log')
    // Stops `log` timer
    this.$timer.stop('log')

    isRunning property

    this.timers.log.isRunning

    Events

    TimerComponent.vue

    import { timer } from 'v-timers'
    
    export default {
      timers: [
        timer('log', 1000)
      ],
      methods: {
        log () {
          console.log('It works!')
        }
      }
    }

    App.vue

    <template>
      <timer-component
        @timers:start:log="timerStarted"
        @timers:stop:log="timerStopped"
        @timers:tick:log="timerTicked"
      />
    </template>

    3 ways of timers declaration

    Object notation

    export default {
      timers: {
        log: { time: 1000, ...options }
      }
    }

    Array notation

    export default {
      timers: [
        { name: 'log', time: 1000, ...options }
      ]
    }

    Helper function

    import { timer } from 'v-timers'
    
    export default {
      timers: [
        timer('log', 1000, { ...options })
      ]
    }

    Author

    Chantouch Sek

    License

    MIT

    Install

    npm i v-timers

    DownloadsWeekly Downloads

    52

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    15.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • chantouchsek