Neighbor's Preppy Maltese

    twitchext-vuex

    0.2.2 • Public • Published

    Twitch-Ext-Vuex

    An abstraction of the Twitch Extension helper for VueX

    Description

    This lib allow you to abstract the Twitch extension helper for your twitch extension project using Vue / Vuex.

    You can easily have a reactive Twitch extension without worrying about all the set up.

    Dependencies

    • Vue
    • Vuex

    How to use

    Use the Vue plugin

    By default the store will be accessible on the twitch module.

    You need to create the store before using it in the plugin.

    import Vue from "vue";
    import App from "./App";
    import Vuex from "vuex";
    import { ExtensionPlugin } from "twitchext-vuex";
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store();
    
    Vue.use(ExtensionPlugin, { store });
    
    new Vue({
      el: "#app",
      store,
      render: h => h(App)
    });
    

    You will be able to to access the data as computed values

    computed(){
      ...
      opaqueId(){
        return this.$twitchExtension.viewer.id
      }
    }
    

    Store description

    General data

    The data structure is based on the - Twitch Extension Helper

    You can access the data using the same structure

    ...
    computed:{
      ...
      opaqueId(){
        return this.$twitchExtension.viewer.id
      }
    }
    

    Custom data

    bits

    bits.getBitsAmount(sku:string):number return the bits amount of given sku. Return 0 if the sku doesn't exist.

    bits.hasOngoingBitTransaction:boolean return if the user has a bits transaction going on.

    Channel

    channel.initialized:boolean return if the channel information have been set.

    id:string return the channel id of the stream.

    Configuration Service

    configuration.initialized:boolean return if the configuration service has been set.

    Position

    position.initialized:boolean return if the position information have been set.

    Viewer

    viewer.initialized:boolean return if the viewer information have been set.

    Context

    For the default data structure see the OnContext method.

    The same structure is used to store the data under the context field.

    context.initialized:boolean return if the context information have been set.

    Query Params

    For the default data structure see the Query Params doc.

    Use this.$twitchExtension.queryParams to access the values.

    Values for testing

    When developing your extension, you might want to force some feature flags to true.

    These are only meant to make testing easier! Remember to turn these values off when sending to review.

    Force isBitEnabled to true

    Set the value

    Vue.use(ExtensionPlugin, { store, settings:{
      forceFlags:{
        forceIsBitsEnabled:true
      }  
    }});
    

    Access it

    this.$store.state.forceIsBitsEnabled
    

    Use a custom main module name

    You can use a custom VueX module name to match your project needs

    Vue.use(Vuex);
    
    const store = new Vuex.Store();
    
    Vue.use(ExtensionPlugin, { store, module:'extension' });
    
    new Vue({
      el: "#app",
      store,
      render: h => h(App)
    });
    

    Other frameworks

    React

    You can use my other package for React : TwitchExt-React

    Resources

    Install

    npm i twitchext-vuex

    DownloadsWeekly Downloads

    53

    Version

    0.2.2

    License

    ISC

    Unpacked Size

    29 kB

    Total Files

    3

    Last publish

    Collaborators

    • breci