Typescript support

[maciz84]

Hi Guys,

Do you have typescript support? When I try following the example it tells me that on onIdle() is not a function?

[vip30]

Vue.use(IdleVue, {
  eventEmitter: new Vue(),
  store,
  idleTime: 500
})

// class-component-hooks.js
Component.registerHooks([
  'onIdle',
  'onActive'
])

// Use either watch
@Watch('isAppIdle')
public onIdle() {
  console.log('Idle')
}

// or hooks
public onActive() {
  console.log('Active')
}

This is work for me (using vue-class-component)

[vip30]

declare module 'idle-vue' {
  import Vue, { PluginFunction } from 'vue'
  export interface IdleVueUseOptions {
    events?: string[]
    eventEmitter?: any
    idleTime?: number
    keepTracking?: boolean
    moduleName?: string
    startAtIdle?: boolean
    store?: any
  }
  module "vue/types/vue" {
    interface Vue {
      isAppIdle: boolean
    }
  }
 // In case you want to vue.extend format
  module "vue/types/options" {
    interface ComponentOptions<V extends Vue> {
      onIdle?: () => void
      onActive?: () => void
    }
  }
  export function install(): PluginFunction<IdleVueUseOptions>
}

And here is the index.d.ts

[maciz84]

Thank you so much for this

[maciz84]

Just to confirm, i can use either the index.d.ts or the Vue class component one? Or are they meant to be put together?

[vip30]

You need to use that together
D.ts is for the type declaration (so it can pass the compile and so the intellisense in Ide will work)
And the vue class component is the real implmentation

[maciz84]

This works perfectly. Thank you so much for your help

[Luciden]

Can you tell my what I might be doing wrong? Here's my Main.ts
I added idle-vue.d.ts to my src directory root with the contents of your index.d.ts

No errors, nothing happens. isAppIdle is undefined.

`
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import { store } from './store/store';
import * as IdleVue from 'idle-vue';
import Component from 'vue-class-component';

Vue.config.productionTip = false;

// Setup idle-vue
Vue.use(IdleVue, {
eventEmitter: new Vue(),
store,
idleTime: 500
});

Component.registerHooks([
'onIdle',
'onActive'
])

new Vue({
el: '#app',
router,
store,
components: { App },
onIdle() {
console.log('Idle')
},
onActive() {
console.log('Active')
},
template: '',
});`

[vip30]

FYI, you need to register the hooks before all of your codes.
Can you please try if it work or not?
As the above solutions is related to auto-suggestion on IDE only, it will not affect the real implementation in your code, if it still doesn't work I guess you may need to take a look on your store ?

// main.ts (Top)
import './class-component-hooks.ts'

// class-component-hooks.ts
Component.registerHooks([
'onIdle',
'onActive'
])

And if you want to use it in decorator format, I suggest you give it a try
https://github.com/vip30/vue-plugin-helper-decorator
My code as following:

// main.ts
Vue.use(IdleVue, {
  eventEmitter: new Vue(),
  keepTracking: true,
  idleTime: 180000
})

// xxx.vue
@Component({})
export default class App extends Vue {
  @OnActive()
  public callItWhenActive() {
     console.log('active')
  }
}

[Luciden]

Cool, I'll check it out. We wrote Window.SetTimeout version in the meantime. We need a warning followed by a log out. I suppose I could add a timeout to OnIdle()

[vip30]

#34