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

@valueadd/schematics

v3.2.0

Published

ValueAdd schematics

Downloads

416

Readme

Features

  • Generating NgRx state
  • Generating CRUD for NgRx (for single entities and collections)
  • Creating single NgRx Action
  • Creating method in data-service with a given payload
  • Creating single case for Reducer

Installation

To install schematics simply run

npm i -g @valueadd/schematics

Usage

State

Create basic state with actions, effects, reducer and selectors files (also with spec.ts)

Properties:

  • name - name of state
  • module - path to module of state
  • facade - generate facade
  • root - whether state is in root of application
  • skipFormat - defines whether file formatting should be skipped
  • skipPackageJson - skip filling package.json
  • onlyAddFiles - skip filling module.ts
  • onlyEmptyRoot - fill module.ts with store configuration and skip adding store files
  • creators - whether to use creator NgRx syntax

Example:

ng g @valueadd/schematics:ngrx 
--name=todo
--module=/libs/data-access-todo/src/lib/data-access-todo.module.ts 
--root=false 
--facade

CRUD

Create CRUD operations in ngrx/store data access module

Properties:

  • entity – entity name
  • stateDir – path to +state directory
  • dataService – path to data service file
  • actionsPrefix – prefix used in Types enum [default: entity name] (“[PREFIKS] Get Todo”)
  • responseType – response return type (you can specify return type for each operation by following pattern : e.g.: c:TestModel,r:TestModel)
  • mapResponse – add map operator to response pipe (to specify map response for each type follow pattern from responseType)
  • backend – backend to use (none, http, localStorage)
  • creators - whether to use creator NgRx syntax

Example:

ng g @valueadd/schematics:crud 
--entity=Todo 
--dataService=/libs/data-access-todo/src/lib/services/todo-data.service.ts 
--actionsPrefix=Todo 
--stateDir=/libs/data-access-todo/src/lib/+state 
--responseType="" 
--mapResponse=""

Action

Creating single Action with given payload

Properties:

  • name – action’s name
  • stateDir – path to state directory
  • prefix – action prefix in action’s type string
  • payload – type of action’s payload
  • skipFormat - defines whether file formatting should be skipped
  • backend - backend to use (http, localStorage)
  • creators - whether to use creator NgRx syntax

Example:

ng g @valueadd/schematics:action 
--name=EditTodo 
--stateDir=/libs/data-access-todo/src/lib/+state 
--payload=Todo 
--prefix=Todo

Data service

Create method in a given data service

Properties:

  • dataService – the path to the data service

  • entity - entity name

  • collection - defines whether the method operates on the entity collection

  • methodBackend – backend to use (none, http, localStorage)

  • methodName – name of the method

  • methodProperties – method’s properties ({name}:{type},{name2}:{type2})

  • methodReturnType – method’s return type

  • operation - CRUD operation to create (create, read, update, delete)

  • skipFormat - defines whether file formatting should be skipped

  • skipTest - defines whether creating tests should be skipped

Example:

ng g @valueadd/schematics:data-service 
--dataService=/libs/shared/data-access-module/src/lib/services/module-data.service.ts 
--entity=ToDo
--backend=none 
--methodName=testMethod 
--methodProperties=“data: object” 
--methodReturnType=any

Reducer

Create single case in reducer

Properties:

  • actionName – action’s name
  • stateDir – path to state directory
  • propsToUpdate – properties to update. Follow pattern: {propertyName}:{value}:{?type}. You can separate multiple properties with comma
  • selectors – generate selectors for given properties
  • facade – generate facade
  • creators - whether to use creator NgRx syntax

Example:

ng g @valueadd/schematics:reducer 
--actionName=EditTodo 
--stateDir=/libs/data-access-todo/src/lib/+state 
--propsToUpdate="editingTodo:action.payload:Todo|null" 
--selectors 
--facade