@ngxs/schematics

    0.0.1-alpha.5 • Public • Published

    Schematics

    This repository contains schematics for generating NGXS Store in Angular apps using the Angular CLI.

    Installation

    Install Angular CLI

    You should be using @angular/cli@6.1.0 or newer.

    npm i -g @angular/cli

    Install NGXS Schematics

    npm i @ngxs/schematics

    Easy way to add NGXS Store in your application

    To add NGXS Store in application, you can use ng add with @ngxs/schematics.

    ng add @ngxs/schematics
    Option Description
    --skipInstall The flag to skip packages installing

    Result:

    Installed packages for tooling via npm.
    
      Adding npm dependencies
    
      ✅️ Added "@ngxs/devtools-plugin" into dependencies
      ✅️ Added "@ngxs/logger-plugin" into dependencies
      ✅️ Added "@ngxs/store" into dependencies
      ✅️ Added "@ngxs/schematics" into devDependencies
    
      Adding @ngxs/schematics to angular.json
    
      UPDATE package.json (2920 bytes)
      ✅️ Setting NGXS Schematics as default
    
      👏 Create your first ngxs store by using starter kit: ng g ngxs-sk --spec
    
      🔍 Installing packages...
    

    Usage

    Generating Components

    You can use the ng generate (or just ng g) command to generate ngxs components:

    ng generate @ngxs/schematics:store --name todo
    ng g @ngxs/schematics:store --name todo

    All possible commands in the table below:

    Scaffold Usage Aliases Options
    Store ng g @ngxs/schematics:store ngxs-store --name (required), --path, --sourceRoot, --spec (boolean)
    State ng g @ngxs/schematics:state ngxs-state --name (required), --path, --sourceRoot, --spec (boolean)
    Actions ng g @ngxs/schematics:actions ngxs-actions --name (required), --path, --sourceRoot
    Starter Kit ng g @ngxs/schematics:starter-kit ngxs-sk --path, --sourceRoot, --spec (boolean)

    Aliases

    For used the aliases you need to set @ngxs/schematics as the default collection. Update your project's angular.json:

    "cli"{
      "defaultCollection": "@ngxs/schematics"
    }

    Or simply use ng add @ngxs/schematics --skipInstall

    Options

    --name - there is a name of your store, state or actions
    --spec - flag that allow to generate the test file
    --sourceRoot - absolute path to create your files (in default - src)
    --path - path relative to --sourceRoot (for example, --path=app -> /src/app)

    Examples

    Create a NGXS Store

    To generate store with @ngxs/schematics:

    ng generate @ngxs/schematics:store --name todo

    Result:

    CREATE src/todo/todo.actions.ts
    CREATE src/todo/todo.state.ts
     

    Or with spec:

    ng generate @ngxs/schematics:store --name todo --spec

    Result:

    CREATE src/todo/todo.actions.ts
    CREATE src/todo/todo.state.spec.ts
    CREATE src/todo/todo.state.ts

    Create a NGXS State

    To generate state with @ngxs/schematics:

    ng generate @ngxs/schematics:state --name todo

    Result:

    CREATE src/todo/todo.state.ts
     

    Or with spec:

    ng generate @ngxs/schematics:state --name todo --spec

    Result:

    CREATE src/todo/todo.state.spec.ts
    CREATE src/todo/todo.state.ts

    Create a NGXS Actions

    To generate state with @ngxs/schematics:

    ng generate @ngxs/schematics:actions --name todo

    Result:

    CREATE src/todo/todo.actions.ts
     

    NGXS Starter Kit

    Usage

    To generate store with @ngxs/schematics:starter-kit:

    ng generate @ngxs/schematics:starter-kit

    Result:

    CREATE src/store/store.config.ts
    CREATE src/store/store.module.ts
    CREATE src/store/auth/auth.actions.ts
    CREATE src/store/auth/auth.state.ts
    CREATE src/store/dashboard/index.ts
    CREATE src/store/dashboard/states/dictionary/dictionary.actions.ts
    CREATE src/store/dashboard/states/dictionary/dictionary.state.ts
    CREATE src/store/dashboard/states/user/user.actions.ts
    CREATE src/store/dashboard/states/user/user.state.ts

    Or with spec:

    ng generate @ngxs/schematics:starter-kit --spec

    Result:

    CREATE src/store/store.config.ts
    CREATE src/store/store.module.ts
    CREATE src/store/auth/auth.actions.ts
    CREATE src/store/auth/auth.state.spec.ts
    CREATE src/store/auth/auth.state.ts
    CREATE src/store/dashboard/index.ts
    CREATE src/store/dashboard/states/dictionary/dictionary.actions.ts
    CREATE src/store/dashboard/states/dictionary/dictionary.state.spec.ts
    CREATE src/store/dashboard/states/dictionary/dictionary.state.ts
    CREATE src/store/dashboard/states/user/user.actions.ts
    CREATE src/store/dashboard/states/user/user.state.spec.ts
    CREATE src/store/dashboard/states/user/user.state.ts

    Install

    npm i @ngxs/schematics

    DownloadsWeekly Downloads

    7,516

    Version

    0.0.1-alpha.5

    License

    MIT

    Unpacked Size

    52.5 kB

    Total Files

    75

    Last publish

    Collaborators