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

@slvi/data

v1.0.2

Published

SLVI/Data is an abstraction over the Store, Effects, and Entity that radically reduces the amount of code you'll write. As with any abstraction, while you gain simplicity, you lose the explicitness of direct interaction with the supporting NgRx libraries.

Downloads

6

Readme

SLVI-DM

SLVI Data Management


Many applications have substantial domain models with 10s or 100s of entity types.

Such applications typically create, retrieve, update, and delete entity data that are "persisted" in a database of some sort, hosted on a remote server.

Developers who build these apps with the NgRx Store, Effects, and Entity libraries alone tend to write a large number of actions, action-creators, reducers, effects, dispatchers, and selectors as well as the HTTP GET, PUT, POST, and DELETE methods for each entity type. There will be a lot of repetitive code to create, maintain, and test. The more entities in your model, the bigger the challenge.

With SLVI/Data you can develop large entity models quickly with very little code and without knowing much NgRx at all. Yet all of NgRx remains accessible to you, when and if you want it.

SLVI/Data is an abstraction over the Store, Effects, and Entity that radically reduces the amount of code you'll write. As with any abstraction, while you gain simplicity, you lose the explicitness of direct interaction with the supporting NgRx libraries.

This library was made with Love, generated with Nx.


Default Level (Component Level)


  1. Inject DataSandBoxFactory in your component constructor().
  2. Ask your factory to create your sandBox immediately then follow this code example.
  • once you finished, you already got your sandBox and you can call any function as much as you need.

    import { DataSandBoxFactory, DataSandBoxService } from '@slvi/data';
    ...
    export class Component {
        ...
        sandBox: DataSandBoxService; // Define sandBox Variable in Component
        ...
        constructor(
            ...
            private factory: DataSandBoxFactory, // Factory Injection
            ...
        ) {}
    
        ngOnInit(): void {
            // Or Here
            this.sandBox = this.factory.create('ENTITY_ID', 'ENDPOINT_ID');
        }
    }

Advanced Level (SandBox Level - For More control)


  1. Create your own @Injectable() CustomSandBox extends DataSandBoxService to inherit everything.
  2. Inject your CustomSandBox in your component constructor().
  • Start using it normally same as default or implement your custom methods.

    import { DataSandBoxService } from '@slvi/data';
    ...
    export class CustomSandBox extends DataSandBoxService {
        constructor() {
            super('ENTITY_ID', 'ENDPOINT_ID');
        }
    }
    export class Component {
        constructor(
        ...
        private sandBox: CustomSandBox,
        ...
        ) {}
    }

Usage


One-Entity / single-Item


  1. For manipulating operations for (one-entity) use:

    // Body is Optional
    this.sandBox.create(BODY);
    this.sandBox.read(ITEM_ID);
    this.sandBox.update(ITEM_ID, BODY);
    this.sandBox.delete(ITEM_ID);
    ...
    // For forcing calling API ignoring cache.
    this.sandBox.readForced(ITEM_ID);
  • Subscribe item$ property in sandBox to get current item in store or simply use item$ | async in your HTML.

    this.sandBox.item$.subscribe((item) {
        // Implement your own code
    })

List-of-Entities / Many-of-Items


  1. For manipulating operations for (bulk/list-entities) use:

    // Body is Optional
    this.sandBox.createBulk(BODY);
    this.sandBox.listRead(QUERY_PARAMS);
    this.sandBox.bulkUpdate(ITEMS_IDS, BODY);
    this.sandBox.bulkDelete(ITEMS_IDS, BODY);
    ...
    // Special Case :: For Infinity scroll or follow pagination to fetch all data with max response limit
    this.sandBox.listReadInfinity(QUERY_PARAMS);
    ...
    // For forcing calling API ignoring cache
    this.sandBox.readForced(QUERY_PARAMS);
  2. You can Subscribe items$ property in sandBox to get current items in store.

    this.sandBox.items$.subscribe((items) {
        // Implement your own code
    })

For full Documentation in GitHub.