npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-messagist

v0.1.0

Published

Configurable interface for conversational user engagement

Downloads

10

Readme

Messagist

Configurable conversation flow for great user engagement

Messagist in action

Getting Started

Using Messagist

It's quite simple. Messeagist is prepared as a Vue component object, so the easiest is to use it as a global component:

import Messagist from 'vue-messagist'

Vue.component('messagist', Messagist)

This makes a messagist component available, which has one mandatory messages property. That brings us to the important part of messagist. It's fully customizeable based on the passed in object. So let's check out an example configuration.

Structure of a Messages Objects

// Basic Structure

{
  key: {
    content: [
      'Message a',
      'Message b'
    ],
    choices: {
      new_key: 'Answer selects new_key'
    }
  }
}

That should be quite simple to follow I hope. Let's break this down a little.

  • key -- The main key identifieng the messages to be printed and the possible choices
  • content -- Those are the messages that will be printed automatically once this key is active. You can pass in a simple string if there is only one message to print.
  • choices -- The choices allow moving the conversation forward to the next pieces of content. Each choices key value will be the main identifier.

Too answer your next question upfront, how to tell Messagist about your entry point. Just call the initial part init.

{
  init: {
    content: [
      'Hello',
      'I am Messagist, and will be your new best friend!'
    ],
    choices: {
      accept: 'Okay Messagist, I accept that ♥️'
    }
  },
  accept: {
    content: '🎉🎉🎉 That makes me happy'
  }
}

Putting it together

Okay, so lets put that piece of code to good use. Let's create the markup first:

<div id="app">
  <messagist :messages="messages"></div>
</div>

and the JS on the page could look like this.

import Messagist from 'vue-messagist'

Vue.component('messagist', Messagist)

const messages = {...} // the message example from above

new Vue({
  el: '#app',

  data: {
    messages
  }
})

Communicate to the outside

Sometimes a basic message flow is not enough. It may be relevant to trigger some user input or whatever you come up with. The important part is, that you may want to break out of the flow of the messages and continue at a custom point in time.

So Messagist allows you to hook into custom events and trigger events when needed. That sounds pretty cool and I think it also is a cool feature :) So lets check out how this is done.

The important piece here is the action key. It can be put into an choice response like this:

{
  init: {
    content: 'Please share me your favorite cat picture.',
    choices: {
      cat: {
        text: 'Whats your favorite cat',
        action() { this.trigger('favorite-cat') }
      }
    }
  },
  cat: {
    content: 'Thank you'
  }
}

So far so good. Inside the action method we call this.trigger. The trigger method is a little secret method Messagist provides to send out an event, but also pass over a callback function that allows to continue the flow of Messagist at any point.

I know that sounds quite complicated, but let's start with a easy example to take the mystery out of this function.

<div id="app">
  <messagist
    :messages="messages"
    @favorite-cat="customCat"
  ></div>
</div>
new Vue({
  el: '#app',

  data: {
    messages: {...} // The example from above
  },

  methods: {
    customCat(done) {
      done('I like brown cats.')
    }
  }
})

Okay, so what's going on. On the messagist element we can then listen for the favorite-cat event whenever it gets triggered and we pass in a local method in classic Vue mannor. Under the hood it's just a $emit event we listen for so that should make things clearer. The important piece is then the customCat method we reference. A continue function gets passed in as first parameter. That continue function will then take a string, that will be printed as response, and Messagsit will continue in the flow like before. In our code example it would then try to continue with the cat key and print 'Thank you' on the screen.

You could also pass in an action directly to a Messagist section. That's helpful if you do not want to continue afterwards or do not want to trigger an action to a choice.

{
  init: {
    content: 'I will trigger one action after this message.',
    action() { this.trigger('finished') }
  }
}
<messagist
  :messages="messages"
  @finished="finished"
></div>

Complex continue

If a direct usage of the passed in done function isn't cutting it (what's very likely), just try to store that callback function and use it when ready.

I prepared a example in the examples folder. Check it out

The gist of it is to store the done function in your app and call it when ready.

new Vue({
  el: '#app',

  data: {
    messages,
    continue: null,
    showMyCustomComponent: false
  },

  methods: {
    first(done) {
      // this function gets called by a Messagist event
      this.continue = done
      this.showMyComponent = true
    },

    second() {
      // This callback gets called from the custom local component
      this.continue('I am all done now!')
    }
  }
})

TBU

There are a lot of things I think about adding to Messagist, but it's a fun tool to work with already, so I though about sharing it right away.

Some examples:

  • Options for custom styling (colors etc)
  • Options for delays
  • Avatars
  • ...

Please let me know about ideas you have for this project by leaving an issue on th repo, or reach out to me on Twitter