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

terii

v1.0.2

Published

Terii is a tiny little library to help you manage state across your application. Terii creates a central store that enables you to both better control and cascade state across your application. The code and parts of the documentation have been taken from

Downloads

13

Readme

Terii

npm minified+gzip deps

Terii is a tiny library to help you manage state across your application. It was originally written by Andy Bell under another name: Beedle.

I have ported Andy's code to TypeScript (and added unsubscribe). That's all folks.

Terii (japanese: テリー pron. Terī) is the japanese name of the character Beedle from The Legend of Zelda series. It might be better written as Terry, but it was not available on npm, 😅

Table of Contents

Getting started

You can pull Terii down via npm or take a zip of this repository. The rest of this guide assumes you've used npm.

Install

npm install terii

Create a store instance

First up, import it into your JavaScript:

import { Store } from 'terii'

Once you've got that you should create some actions, mutations and some initial state:

const actions = {
  saySomething(context, payload) {
    context.commit('setMessage', payload)
  },
}

const mutations = {
  setMessage(state, payload) {
    state.message = payload

    return state
  },
}

const initialState = {
  message: 'Hello, world',
}

Once you've got those setup, you can create a Store instance like this:

const storeInstance = new Store({
  actions,
  mutations,
  initialState,
})

Use in your app

Let's say you've got a text box that you type a message into. When the content is changed, it could dispatch a new message to your store:

// Grab the textarea and dispatch the action on 'input'
const textElement = document.querySelector('textarea')

textElement.addEventListener('input', () => {
  // Dispatch the action, which will subsequently pass this message to the mutation
  // which in turn, updates the store's state
  storeInstance.dispatch('saySomething', textElement.value.trim())
})

Listen for changes (and stop listening)

Terii uses the Pub/Sub pattern to transmit changes. Let's attach the message to a DOM element:

// Grab the text element and attach it to the stateChange event
const messageElement = document.querySelector('.js-message-element')

// This fires every time the state updates
storeInstance.subscribe('.js-message-element', (state) => {
  messageElement.innerText = state.message
})

If necessary, we can stop listening for changes by unsubscribing:

// we stop listening to what we subscribed earlier
storeInstance.unsubscribe('.js-message-element')

How it works

Terii creates a pattern where a single source of truth, the 'Application State' cascades state across your app in a predictable fashion. To modify state, a set flow of actions and mutations help create a traceable data-flow that makes things a little easier to debug.

Using a Pub/Sub pattern which notifies anything that is subscribed to changes, a fully reactive front-end can be achieved with a few kilobytes of vanilla JavaScript.

A mini library for small projects

Terii is inspired by libraries like Redux, but certainly isn't designed to replace it. Terii is aimed more at tiny little applications or where a development team might be looking to create the smallest possible footprint with their JavaScript.

Performance budget

Terii is intended to be tiny, so the largest that the uncompressed size will ever get to is 5kb.

Browser support

Terii is aimed at browsers that support ES6 by default. It also uses a Proxy to monitor state, so anything that supports Proxy will support Terii.

You could use the Proxy polyfill to support more browsers.

Most major browsers will support Terii with no issues.

TypeScript

TypeScript types are included.

Contributing

If you are intereseted in contributing to this project, please refer to the documentation.

Changelog

Check the releases page for the latest changes.

License

Original work Copyright (c) 2018 Andy Bell - MIT License

Modified work Copyright (c) 2021 Mirco Sanguineti - See License