Find the implementation here:
https://github.com/saikumar197/formgenerator
Overview
Schematics is powerful and generic facility to support the CLI scaffolding,It paces up the development productivity and makes the developer job ease by gathering the initial requirements as blueprint for the development process.
Schematics as code and other artifacts generators help us setup and configure a new project (or parts of it) in a standardized and automated way which helps us with
- Structure standardisation
- Enforcing patterns
- Enforcing best practices
- Enforcing naming conventions
- Reuse implementations
- Automate tasks
Main Goals for the @schematics/form-generator are
- Extensibility and Reusability
- Atomicity
- Safe and synchronous
Prerequisites
Before we start, we have to install `@angular-devkit/schematics-cli` package to be able to to use schematics command in our terminal. This command is similar to well-known `ng generate` but the main advantage is that we can run it anywhere because it’s completely independent from the Angular CLI.
Structure concepts
The schematic consist of a main file which exports a factory function. This function is called with the schematics options. The factory returns us a rule which is called with the virtual representation of the file system(tree) and the schematics context.
Collection.json
The `collection.json` file is the main definition file of the whole schematics library and contains definitions of all schematics available in that library.
Schematic Factory
The schematic factory contains function which accepts the `_options` argument returns us a `Rule`.
We can parametrise our schematic rule (returned by the factory) so that it behaves accordingly.
The Rule
The second main component of the schematic implementation is the rule itself. Rule is called with a **Tree** and a **SchematicContext**. Once called, rule is supposed to make adjustments to the tree and return it back for the further processing.
The rule can call additional already implemented rules in its body because it posses everything that is needed for a rule execution.
The Tree
Tree is then virtual representation of every file in the workspace. Using a virtual tree instead of manipulating files directly comes with a couple of big advantages.
we only commit changes to the tree if every schematics ran successfully
we can preview changes without actually making them ( with ` — dry-run` flag)
the whole process is faster as the I/O operations ( writing files to disk ) happens only at the end of the processing
- Schema.json
By creating a schema.json file at the same level as your entry file will serve us to define defaults for our options, flag them as required, make sure we’re passing the right types, and even issuing prompts. - Template
we are using `__name@dasherize__` which passes the variable name from options to the factory function which in turn is passed to template for name parametrisation.
Form Generator
@schematics/form-generator
- Generate the complete form component html, css and necessary typescript files with the entity model derived from the json config.
- This inserts the Ngmodule imports and updates the module declarations array.
This schematic is responsible for generate a form schematic using a pass by JSON, using bootstrap!
`ng g form path/name-component ./jsons/schema.json`
Configure forms schematic in another project
Configuring can be done in two ways.
- Configuring through linking the package
During development of angular schematics, if the workspace is configured locally
In the schematics repo build the schematics by
`npm run build`.
link the package through npm by linking the path
`npm link ../schematics/forms`
this will install the package in the workspace.
Change the default connection to the package in angular.json in workspace
```
“cli”: {
“analytics”: false,
“defaultCollection”: “@schematics/forms”
}
```
Generate the schematic templates by command
`ng g forms`
- **Configuring as npm package.**
By`npm pack` command, generates a `.tgz` file which can be installed anywhere in schematics-cli
`npm install ../schematics/forms/schematics-forms.tgz`
Or can published to npm.js, which can be installed as external package which references in package.json
`npm install @schematics/forms`
#Testing
To test locally, install @angular-devkit/schematics-cli globally and use the schematics command line tool. That tool acts the same as the generate command of the Angular CLI, but also has a debug mode.
Check the documentation with
`schematics — help`
##Unit Testing
`npm run test` will run the unit tests
#Publishing
To publish, simply do:
`npm run build`
`npm publish`