ngxs / schematics

:wrench: Schematics for @ngxs/store

NGXS is a state management pattern + library for Angular

---

Quick Links

• ✨ Learn about it on the docs site
• 💬 Ask a question in our Discord server (we are migrating from our slack server).
• 🚀 See it in action on Stackblitz
• 😎 Checkout the sample application
• 🔧 Scaffolding application using NGXS Schematics
• 📖 Read the blog posts
• ⚡️ Development of NGXS Labs
• 📝 Learn about updates from the changelog
• ❤️ Give back by becoming a Contributor or a Sponsor
• 👂 We would love to hear about your experience with NGXS, you can leave your feedback here

---

The Goal of NGXS

NGXS tries to make things as simple and accessible as possible. There can be a lot of boilerplate code in state management, thus a main goal of NGXS is to reduce boilerplate allowing you to do more things with less. It is also not necessary to be super familiar with RxJs.

The Goal of NGXS Labs

The idea with this github organisation is to provide a place for the community to create libraries that augment the main framework with functionality that does not need to be integrated directly into the framework and therefore can evolve through their initial iterations of experimentation without affecting the main @ngxs/store library.

Getting Started - Local Development

Installation

To get started locally, follow these instructions:

1. If you haven't done it already, make a fork of this repo.
2. Clone to your local computer using git.
3. Make sure that you have installed NodeJS.
4. Make sure that you have yarn installed.
5. Run yarn install.
6. Run yarn build:packages.

Creating new packages or add feature/fix

if you make changes @ngxs/store

1. Run development mode yarn build:packages --package store --watch
2. Run serve integration examples yarn start
3. ...development...
4. Run tests yarn test:ci
5. Create pull request

if you add a new package @ngxs/my-super-plugin

1. Create a new project folder packages/my-super-plugin
2. Create template library with ngPackagr
3. Add your project to package.json
4. Run development mode yarn build:packages --package my-super-plugin --watch
5. ...development...
6. Run build yarn build:packages --package my-super-plugin
7. Run tests yarn test:ci
8. Create pull request

NGXS Labs

If you have ideas for creating unique libraries, you can join us. Email us at [email protected]. Or you can email us on Twitter or Slack.

Packages

Tools

Project	Package	Version	Links
NGXS CLI	@ngxs/cli
NGXS Schematics	@ngxs/schematics

Packages

Project	Package	Version	Links
NGXS Store	@ngxs/store
NGXS Logger-plugin	@ngxs/logger-plugin
NGXS Devtools-plugin	@ngxs/devtools-plugin
NGXS WebSocket-plugin	@ngxs/websocket-plugin
NGXS Form-plugin	@ngxs/form-plugin
NGXS Router-plugin	@ngxs/router-plugin
NGXS Storage-plugin	@ngxs/storage-plugin
NGXS HMR	@ngxs/hmr-plugin

NGXS Labs

Project	Package	Version	Links
NGXS-labs Data	@ngxs-labs/data
NGXS-labs Emitter	@ngxs-labs/emitter
NGXS-labs Immer adapter	@ngxs-labs/immer-adapter
NGXS-labs Dispatch decorator	@ngxs-labs/dispatch-decorator
NGXS-labs Select snapshot decorator	@ngxs-labs/select-snapshot
NGXS-labs Async storage plugin	@ngxs-labs/async-storage-plugin
NGXS-labs Entity state	@ngxs-labs/entity-state
NGXS-labs Testing tools	@ngxs-labs/testing
NGXS-labs Actions Executing	@ngxs-labs/actions-executing
NGXS-labs Attach Action	@ngxs-labs/attach-action

Community

Project	Package	Version	Links
Reset Plugin	ngxs-reset-plugin
NGXS-Loading-plugin	ngxs-loading-plugin
NGXS-History-plugin	ngxs-history-plugin

Contributors

Thanks to all our contributors!

schematics's Issues

ng add adds 1.0.0 of @ngxs/schematics to package, which doesn't exist

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Current behavior

When running ng add @ngxs/schematics, Angular tries to add 1.0.0 to the package.json. Since the 0.0.1-alpha.0 was just released, that doesn't make any sense.

For a workaround: Just change the package.json version to 0.0.1-alpha.0.

Expected behavior

I would expect the command to install the latest version.

Minimal reproduction of the problem with instructions

Run ng add @ngxs/schematics

What is the motivation / use case for changing the behavior?

It seems a waste of time and prone to errors to have to define your ngxs/schematics version before every release.

Generated files should follow OS line endings

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Current behavior

While running checking in the files generated by schematics on my linux machine, noticed that all line-ending were DOS style. See attached image.

Expected behavior

The generated files should follow the default line-endings of the OS.

Minimal reproduction of the problem with instructions

Add schematics to an existing Angular project on a Linux machine.

ng g @ngxs/schematics:store --name=app --path=app/store

Check the line endings on generated files.

What is the motivation / use case for changing the behavior?

While making changes to generated files, too many EOL related changes show up - depending upon the editor & git configuration.

For now, I am running dos2unix on generated files.

Environment

Libs:
- @angular/core version: 8.2.0
- @ngxs/store version: 3.5.0
 
For Tooling issues:
- Node version: v10.16.0
- Platform:  Linux

Others:
Fedora release 29 (5.1.18-200.fc29.x86_64)

Secure alert

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

File: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid regExp for packageRules[0].packagePatterns: ^@angular-.,^@schematics/.``

Schematic should support lint via option --lint-fix

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Current behavior

The option --lint-fix is not accepted by the schematic @ngxs/schematics:store.

Expected behavior

Allow the files generated by schematics to be automatically linted similar to @ng/cli.

Minimal reproduction of the problem with instructions

Run these commands to see difference:

ng g @ngxs/schematics:store --name=test --path=app/store --lint-fix=true
ng g c test --lint-fix=true

What is the motivation / use case for changing the behavior?

After generated files are checked in, the linting by IDE (using project configuration) causes additional changes in subsequent commits.

Environment

Libs:
- @angular/core version: 8.2.0
- @ngxs/store version: 3.5.0
 
For Tooling issues:
- Node version: v10.16.0
- Platform: Linux

Others:
Fedora release 29 (5.1.18-200.fc29.x86_64)

Consistent Behavior: support --project, treat first arg as --name

1. in monorepo setup, when --project is provided, schematics should derive sourceRoot and projectType from angular.json for that project.

ng g @ngxs/schematics:store --name=store/auth --spec --project=auth  -d

should generate:

CREATE libs/auth/src/libs/store/auth/auth.actions.ts
CREATE libs/auth/src/libs/store/auth/auth.state.spec.ts
CREATE libs/auth/src/libs/store/auth/auth.state.ts 

Workaround

ng g @ngxs/schematics:store --name=store/auth --spec --project=auth  --sourceRoot=libs/auth/src/libs -d

2. when --name consists path, it should not add extra path prefix. i.e., store/auth/auth.actions.ts -> store/auth.actions.ts

ng g @ngxs/schematics:store --name=store/auth --spec --project=auth  -d

should generate

CREATE libs/auth/src/libs/store/auth.actions.ts 
CREATE libs/auth/src/libs/store/auth.state.spec.ts 
CREATE libs/auth/src/libs/store/auth.state.ts

3. when --name is not provided, first arg should be treated as --name

ng g @ngxs/schematics:store store/auth --spec --project=auth  -d

4. --spec=true should be default. if users don't need spec , they can provide --spec=false

An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID

I tried this on a new clean Angular 13 app, but I get an error after I try ng add @ngxs/schematics:

Skipping installation: Package already installed
An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID

[error] Error: NOT SUPPORTED: keyword "id", use "$id" for schema ID
    at Object.code (D:\Code\ngtemp\node_modules\ajv\dist\vocabularies\core\id.js:6:15)
    at keywordCode (D:\Code\ngtemp\node_modules\ajv\dist\compile\validate\index.js:454:13)
    at D:\Code\ngtemp\node_modules\ajv\dist\compile\validate\index.js:222:17
    at CodeGen.code (D:\Code\ngtemp\node_modules\ajv\dist\compile\codegen\index.js:439:13)
    at CodeGen.block (D:\Code\ngtemp\node_modules\ajv\dist\compile\codegen\index.js:568:18)
    at iterateKeywords (D:\Code\ngtemp\node_modules\ajv\dist\compile\validate\index.js:219:9)
    at groupKeywords (D:\Code\ngtemp\node_modules\ajv\dist\compile\validate\index.js:208:13)
    at D:\Code\ngtemp\node_modules\ajv\dist\compile\validate\index.js:192:13
    at CodeGen.code (D:\Code\ngtemp\node_modules\ajv\dist\compile\codegen\index.js:439:13)
    at CodeGen.block (D:\Code\ngtemp\node_modules\ajv\dist\compile\codegen\index.js:568:18)

Cannot found @ngxs/schematics package on npm

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Current behavior

Package not found on npm repository

Expected behavior

package found

Minimal reproduction of the problem with instructions

npm i @ngxs/schematics

npm ERR! code E404
npm ERR! 404 Not Found: @ngxs/schematics@latest

What is the motivation / use case for changing the behavior?

Environment

Libs:
- @angular/core version: X.Y.Z
- @ngxs/store version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v10.13.0
- Platform:  

Others:

Just testing ngxs and this project...

Thank you!

Alexandre

Generating examples

Feature Request

ng g ngxs-schematics:example --type [ simple | best-practise ]

$ ng g ngxs-schematics:example --type simple
[CREATE] ./app/store/app.state.ts

$ ng g ngxs-schematics:example --type best-practise
[CREATE] ./app/store/app.state.ts
[CREATE] ./app/store/app.actions.ts
[CREATE] ./app/store/app.state.spec.ts

[CREATE] ./app/store/auth/auth.state.ts
[CREATE] ./app/store/auth/auth.actions.ts
[CREATE] ./app/store/auth/auth.state.spec.ts

[CREATE] ./app/store/dashboard/dashboard.state.ts
[CREATE] ./app/store/dashboard/dashboard.actions.ts
[CREATE] ./app/store/dashboard/dashboard.state.spec.ts

Desired behavior

@ngxs/schematics should be added to devDependencies

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Current behavior

@ngxs/schematics added to Dependencies

Expected behavior

@ngxs/schematics should be added to devDependencies

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Libs:
- @angular/core version: X.Y.Z
- @ngxs/store version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Add schema property to schematics providing CLI hints and Angular Console support

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Current behavior

The provided schematics do not have a 'schema' property referencing a schema.json for each schematic.
Just schema.d.ts which provides typing but emits no usable code.

Expected behavior

Each schematic has a schema property populated with the path to a JSON file providing schematic defaults.

What is the motivation / use case for changing the behavior?

Required for use with Angular Console and prompts provided by the CLI; can be used for additional schematic validation internally

Add tsconfig path

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Add ngxs schematics docs

Add @ngxs/schematics documentation in https://github.com/ngxs/store/tree/master/docs/plugins

Behave more similarly to Angular's schematics

I'm submitting a...

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Performance issue
• Feature request
• Documentation issue or request
• Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
• Other... Please describe:

Current behavior

ng g @ngxs/schematics:state states/test
CREATE src/states/test/test.state.spec.ts (685 bytes)
CREATE src/states/test/test.state.ts (337 bytes)

Expected behavior

ng g @ngxs/schematics:state states/test
CREATE src/app/states/test.state.spec.ts (146 bytes)
CREATE src/app/states/test.state.ts (22 bytes)

What is the motivation / use case for changing the behavior?

I'd like to be able to use NGXS' schematics the same way I use Angular's schematics. Right now, if I want the same result, I have to run a command like this :

ng g @ngxs/schematics:actions --name logout --sourceRoot src/app --path actions --spec true

With Angular's schematics, the commands looks like this :

ng g class classes/test

@schematics/angular:component not getting respected when using "defaultCollection": "@ngxs/schematics"

I'm submitting a...

[ x] Bug report  

Current behavior

have "style":"scss" in angular.json

"schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },

and

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

ng g c xyz creating an component with css types of styles instead of scss:

CREATE src/app/xyz/xyz.component.html (22 bytes)
CREATE src/app/xyz/xyz.component.spec.ts (607 bytes)
CREATE src/app/xyz/xyz.component.ts (257 bytes)
CREATE src/app/xyz/xyz.component.css (0 bytes)

Expected behavior

component gets generated with scss styles type

CREATE src/app/xyz/xyz.component.html (22 bytes)
CREATE src/app/xyz/xyz.component.spec.ts (607 bytes)
CREATE src/app/xyz/xyz.component.ts (257 bytes)
CREATE src/app/xyz/xyz.component.scss (0 bytes)

Minimal reproduction of the problem with instructions

ng g my-app --style=scss
ng add @ngxs/schematics
ng g c xyz

What is the motivation / use case for changing the behavior?

respect the angular cli styles config:

"schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },

Environment

OS: win32 x64
Angular: 7.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package Version

@ngxs/schematics: ^0.0.1-alpha.5
@angular-devkit/architect 0.13.5
@angular-devkit/build-angular 0.13.5
@angular-devkit/build-optimizer 0.13.5
@angular-devkit/build-webpack 0.13.5
@angular-devkit/core 7.3.5
@angular-devkit/schematics 7.3.5
@angular/cdk 7.3.3
@angular/cli 7.3.5
@angular/fire 5.1.1
@angular/flex-layout 7.0.0-beta.23
@angular/material 7.3.3
@angular/pwa 0.13.5
@ngtools/webpack 7.3.5
@schematics/angular 7.3.5
@schematics/update 0.13.5
rxjs 6.4.0
typescript 3.2.4
webpack 4.29.0

For Tooling issues:

• Node version: v10.14.2
• Platform: Mac, Windows

Would it be possible to have a sorter command line for ng generate @ngxs/schematics ?

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[x] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Current behavior

In my opinion, ng generate @ngxs/schematics ... is kind of a long command. Would you be possible to have a sorter one, e.g ng generate ngxs ... (inspired from nrwl)

Expected behavior

N.A.

Minimal reproduction of the problem with instructions

N.A.

What is the motivation / use case for changing the behavior?

It is faster to type ng generate ngxs comparing to ng generate @ngxs/schematics.

Environment

Libs:
- @angular/core version: 7.1.0
- @ngxs/store version: 3.3.1


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.14.0
- Platform:  Mac, Windows

Others:
N.A.

State generation with addition to module

Feature Request

$ ng g ngxs-schematics:store folder/test_state --spec
[CREATE] ./app/folder/test_state.state.ts
[CREATE] ./app/folder/test_state.actions.ts
[CREATE] ./app/folder/test_state.state.spec.ts
[UPDATE] ./app/app.module.ts

Desired behavior

Proper storage generation

Needs to support the `flat` flag

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Current behavior

Currently the store, state and actions schematics generate within a folder named after the name provided.
For example, ng generate @ngxs/schematics:store sample --path=app/src/sample/store generates:

src/app/src/sample/store/sample/sample.actions.ts
src/app/src/sample/store/sample/sample.state.spec.ts
src/app/src/sample/store/sample/sample.state.ts

It does not allow me to generate these files directly into the app/src/sample/store folder but always creates the subfolder.

Expected behavior

I would like to be able to specify --flat=true to generate the files directly into the target.
For example, ng generate @ngxs/schematics:store sample --path=app/src/sample/store --flat=true would generate:

src/app/src/sample/store/sample.actions.ts
src/app/src/sample/store/sample.state.spec.ts
src/app/src/sample/store/sample.state.ts

What is the motivation / use case for changing the behavior?

Not to force a directory structure on the user and to align with an option available in @angular/schematics.

ng add @ngxs/store

ng add @ngxs/store