Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ngxs/schematics
:wrench: Schematics for @ngxs/store
https://github.com/ngxs/schematics
angular cli ngxs schematics stage-2
Last synced: 3 days ago
JSON representation
:wrench: Schematics for @ngxs/store
- Host: GitHub
- URL: https://github.com/ngxs/schematics
- Owner: ngxs
- License: mit
- Created: 2018-09-24T09:10:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-23T01:05:02.000Z (8 months ago)
- Last Synced: 2024-05-23T02:24:44.985Z (7 months ago)
- Topics: angular, cli, ngxs, schematics, stage-2
- Language: TypeScript
- Homepage:
- Size: 1010 KB
- Stars: 82
- Watchers: 7
- Forks: 15
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚠️ DEPRECATED ⚠️
**Deprecated:** This package is no longer actively maintained.
💡 We recommend using the schematics from the [ngxs/store](https://www.ngxs.io/introduction/schematics) package.
---
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/[email protected]` or newer.
```bash
npm i -g @angular/cli
```
### Install NGXS Schematics
```bash
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`.
```bash
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:
```bash
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`:
```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`:
```bash
ng generate @ngxs/schematics:store --name todo
```
Result:
```ts
CREATE src/todo/todo.actions.ts
CREATE src/todo/todo.state.ts
```
Or with spec:
```bash
ng generate @ngxs/schematics:store --name todo --spec
```
Result:
```ts
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`:
```bash
ng generate @ngxs/schematics:state --name todo
```
Result:
```ts
CREATE src/todo/todo.state.ts
```
Or with spec:
```bash
ng generate @ngxs/schematics:state --name todo --spec
```
Result:
```ts
CREATE src/todo/todo.state.spec.ts
CREATE src/todo/todo.state.ts
```
### Create a NGXS Actions
To generate state with `@ngxs/schematics`:
```bash
ng generate @ngxs/schematics:actions --name todo
```
Result:
```ts
CREATE src/todo/todo.actions.ts
```
## NGXS Starter Kit
### Usage
To generate store with `@ngxs/schematics:starter-kit`:
```bash
ng generate @ngxs/schematics:starter-kit
```
Result:
```ts
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:
```bash
ng generate @ngxs/schematics:starter-kit --spec
```
Result:
```ts
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
```