ngxs / schematics Goto Github PK

View Code? Open in Web Editor NEW

82.0 7.0 15.0 941 KB

:wrench: Schematics for @ngxs/store

License: MIT License

TypeScript 100.00%

angular schematics cli ngxs stage-2

schematics's Introduction

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.

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

schematics's People

Contributors

Stargazers

Watchers

Forkers

kyusupov33 mmrath kayvanbree adammedford eranshmil joshaaronlevy shamil2 doginal abartoszko webia1 almsallati oleksandryatsiuk dev-sampsonorson vevl ag2rd

schematics's Issues

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

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

Secure alert

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

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

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

ng add @ngxs/store

ng add @ngxs/store

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

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

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

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

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

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

Add ngxs schematics docs

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

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.

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)

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)

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/.``

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:

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.

@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

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)

@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: