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

nimbus-state

v1.0.3

Published

A lightweight state management library for Vue, now preparing to support SolidJS and React

Downloads

4

Readme

Nimbus State Management for Vue

Overview

Nimbus is a lightweight, efficient state management library designed specifically for Vue.js applications, paired with a powerful CLI tool to streamline state management operations. It provides a simple yet flexible API for managing application state without the overhead of more complex solutions like Vuex, making it ideal for small to mid-sized projects that require straightforward state management with minimal setup.

Key Features

  • Lightweight and Minimalistic: Focused on essential state management features.
  • Easy to Learn and Use: Simple API and CLI commands make it accessible for developers of all skill levels.
  • Dynamic Module Loading: Supports flexible and scalable state structures through dynamic loading of actions and mutations.
  • CLI Tool: Offers command-line functionalities to generate actions, mutations, and templates, enhancing developer productivity and workflow.
  • Customizable: Allows for easy customization and extension through a templating system for actions and mutations.

Installation

To install Nimbus and its CLI tool, use npm or yarn:

npm install nimbus-state

Quick Start Guide

Setting Up Nimbus

  1. Create the Store: Use the setupStore.js to handle the dynamic importing of your actions and mutations.

    // src/nimbus/setupStore.js
    import Nimbus from "nimbus-state";
    
    async function loadModule(modulePath) {
      const module = await import(modulePath);
      return module.default;
    }
    
    async function setupStore() {
      const actions = await loadModule("./actions.js");
      const mutations = await loadModule("./mutations.js");
      const state = {
        users: [],
        products: [],
      };
    
      return new Nimbus({ state, mutations, actions });
    }
    
    export default setupStore;
  2. Integrate Nimbus into Your Vue App: Modify the main.js to integrate Nimbus into your Vue application.

    // src/main.js
    import { createApp } from "vue";
    import App from "./App.vue";
    import setupStore from "./nimbus/setupStore";
    
    async function initApp() {
      const store = await setupStore();
      const app = createApp(App);
      app.provide("store", store); // Assuming Nimbus works similarly to Vuex
      app.mount("#app");
    }
    
    initApp().catch(console.error);

Using the CLI Tool

The Nimbus CLI enhances your development experience by automating the creation of state management components. Here's how you can use it:

Generate Actions and Mutations

  • Generate a Mutation: Create a mutation template with a specified name.

    nimbus generate mutation setUserData
  • Generate an Action: Create an action template that fetches user data.

    nimbus generate action fetchUserData

Manage Templates

  • Create Custom Templates: Customize or create new templates for your project's specific needs.

    nimbus template create myCustomTemplate --type action
  • Apply Templates: Apply a saved template to generate a new module.

    nimbus apply myCustomTemplate src/store/actions

Roadmap

  • Enhanced Templating System: Expand the templating capabilities to support complex scenarios.
  • Community-Driven Templates: Establish a repository for shared user templates.
  • Performance Optimizations: Optimize for scalability in larger applications.

Contributing

Contributions are welcome! Whether improving documentation, adding features, or reporting bugs, your input is valued. See CONTRIBUTING.md for more details.

License

Nimbus is open source and available under the MIT license.