source: trip-planner-front/node_modules/@angular-devkit/schematics/README.md@ 6c1585f

Last change on this file since 6c1585f was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit
  • Property mode set to 100644
File size: 12.7 KB
Line 
1# Schematics
2
3> A scaffolding library for the modern web.
4
5## Description
6
7Schematics are generators that transform an existing filesystem. They can create files, refactor existing files, or move files around.
8
9What distinguishes Schematics from other generators, such as Yeoman or Yarn Create, is that schematics are purely descriptive; no changes are applied to the actual filesystem until everything is ready to be committed. There is no side effect, by design, in Schematics.
10
11# Glossary
12
13| Term | Description |
14| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
15| **Schematics** | A generator that executes descriptive code without side effects on an existing file system. |
16| **Collection** | A list of schematics metadata. Schematics can be referred by name inside a collection. |
17| **Tool** | The code using the Schematics library. |
18| **Tree** | A staging area for changes, containing the original file system, and a list of changes to apply to it. |
19| **Rule** | A function that applies actions to a `Tree`. It returns a new `Tree` that will contain all transformations to be applied. |
20| **Source** | A function that creates an entirely new `Tree` from an empty filesystem. For example, a file source could read files from disk and create a Create Action for each of those. |
21| **Action** | An atomic operation to be validated and committed to a filesystem or a `Tree`. Actions are created by schematics. |
22| **Sink** | The final destination of all `Action`s. |
23
24# Tooling
25
26Schematics is a library, and does not work by itself. A [reference CLI](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics_cli/bin/schematics.ts) is available on this repository, and is published on NPM at [@angular-devkit/schematics-cli](https://www.npmjs.com/package/@angular-devkit/schematics-cli). This document explains the library usage and the tooling API, but does not go into the tool implementation itself.
27
28The tooling is responsible for the following tasks:
29
301. Create the Schematic Engine, and pass in a Collection and Schematic loader.
311. Understand and respect the Schematics metadata and dependencies between collections. Schematics can refer to dependencies, and it's the responsibility of the tool to honor those dependencies. The reference CLI uses NPM packages for its collections.
321. Create the Options object. Options can be anything, but the schematics can specify a JSON Schema that should be respected. The reference CLI, for example, parses the arguments as a JSON object and validates it with the Schema specified by the collection.
331. Schematics provides some JSON Schema formats for validation that tooling should add. These validate paths, html selectors and app names. Please check the reference CLI for how these can be added.
341. Call the schematics with the original Tree. The tree should represent the initial state of the filesystem. The reference CLI uses the current directory for this.
351. Create a Sink and commit the result of the schematics to the Sink. Many sinks are provided by the library; FileSystemSink and DryRunSink are examples.
361. Output any logs propagated by the library, including debugging information.
37
38The tooling API is composed of the following pieces:
39
40## Engine
41
42The `SchematicEngine` is responsible for loading and constructing `Collection`s and `Schematics`. When creating an engine, the tooling provides an `EngineHost` interface that understands how to create a `CollectionDescription` from a name, and how to create a `SchematicDescription`.
43
44# Schematics (Generators)
45
46Schematics are generators and part of a `Collection`.
47
48## Collection
49
50A Collection is defined by a `collection.json` file (in the reference CLI). This JSON defines the following properties:
51
52| Prop Name | Type | Description |
53| ----------- | -------- | --------------------------- |
54| **name** | `string` | The name of the collection. |
55| **version** | `string` | Unused field. |
56
57## Schematic
58
59# Operators, Sources and Rules
60
61A `Source` is a generator of a `Tree`; it creates an entirely new root tree from nothing. A `Rule` is a transformation from one `Tree` to another. A `Schematic` (at the root) is a `Rule` that is normally applied on the filesystem.
62
63## Operators
64
65`FileOperator`s apply changes to a single `FileEntry` and return a new `FileEntry`. The result follows these rules:
66
671. If the `FileEntry` returned is null, a `DeleteAction` will be added to the action list.
681. If the path changed, a `RenameAction` will be added to the action list.
691. If the content changed, an `OverwriteAction` will be added to the action list.
70
71It is impossible to create files using a `FileOperator`.
72
73## Provided Operators
74
75The Schematics library provides multiple `Operator` factories by default that cover basic use cases:
76
77| FileOperator | Description |
78| -------------------------------- | -------------------------------------------------------------------- |
79| `contentTemplate<T>(options: T)` | Apply a content template (see the [Templating](#templating) section) |
80| `pathTemplate<T>(options: T)` | Apply a path template (see the [Templating](#templating) section) |
81
82## Provided Sources
83
84The Schematics library additionally provides multiple `Source` factories by default:
85
86| Source | Description |
87| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
88| `empty()` | Creates a source that returns an empty `Tree`. |
89| `source(tree: Tree)` | Creates a `Source` that returns the `Tree` passed in as argument. |
90| `url(url: string)` | Loads a list of files from the given URL and returns a `Tree` with the files as `CreateAction` applied to an empty `Tree`. |
91| `apply(source: Source, rules: Rule[])` | Apply a list of `Rule`s to a source, and return the resulting `Source`. |
92
93## Provided Rules
94
95The schematics library also provides `Rule` factories by default:
96
97| Rule | Description |
98| ------------------------------------------- | -------------------------------------------------------------------------------------- |
99| `noop()` | Returns the input `Tree` as is. |
100| `chain(rules: Rule[])` | Returns a `Rule` that's the concatenation of other `Rule`s. |
101| `forEach(op: FileOperator)` | Returns a `Rule` that applies an operator to every file of the input `Tree`. |
102| `move(root: string)` | Moves all the files from the input to a subdirectory. |
103| `merge(other: Tree)` | Merge the input `Tree` with the other `Tree`. |
104| `contentTemplate<T>(options: T)` | Apply a content template (see the Template section) to the entire `Tree`. |
105| `pathTemplate<T>(options: T)` | Apply a path template (see the Template section) to the entire `Tree`. |
106| `template<T>(options: T)` | Apply both path and content templates (see the Template section) to the entire `Tree`. |
107| `filter(predicate: FilePredicate<boolean>)` | Returns the input `Tree` with files that do not pass the `FilePredicate`. |
108
109# Templating
110
111As referenced above, some functions are based upon a file templating system, which consists of path and content templating.
112
113The system operates on placeholders defined inside files or their paths as loaded in the `Tree` and fills these in as defined in the following, using values passed into the `Rule` which applies the templating (i.e. `template<T>(options: T)`).
114
115## Path Templating
116
117| Placeholder | Description |
118| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
119| `__variable__` | Replaced with the value of `variable`. |
120| `__variable@function__` | Replaced with the result of the call `function(variable)`. Can be chained to the left (`__variable@function1@function2__ ` etc). |
121
122## Content Templating
123
124| Placeholder | Description |
125| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
126| `<%= expression %>` | Replaced with the result of the call of the given expression. This only supports direct expressions, no structural (for/if/...) JavaScript. |
127| `<%- expression %>` | Same as above, but the value of the result will be escaped for HTML when inserted (i.e. replacing '<' with '&lt;') |
128| `<% inline code %>` | Inserts the given code into the template structure, allowing to insert structural JavaScript. |
129| `<%# text %>` | A comment, which gets entirely dropped. |
130
131# Examples
132
133## Simple
134
135An example of a simple Schematics which creates a "hello world" file, using an option to determine its path:
136
137```typescript
138import { Tree } from '@angular-devkit/schematics';
139
140export default function MySchematic(options: any) {
141 return (tree: Tree) => {
142 tree.create(options.path + '/hi', 'Hello world!');
143 return tree;
144 };
145}
146```
147
148A few things from this example:
149
1501. The function receives the list of options from the tooling.
1511. It returns a [`Rule`](src/engine/interface.ts#L73), which is a transformation from a `Tree` to another `Tree`.
152
153## Templating
154
155A simplified example of a Schematics which creates a file containing a new Class, using an option to determine its name:
156
157```typescript
158// files/__name@dasherize__.ts
159
160export class <%= classify(name) %> {
161}
162```
163
164```typescript
165// index.ts
166
167import { strings } from '@angular-devkit/core';
168import {
169 Rule,
170 SchematicContext,
171 SchematicsException,
172 Tree,
173 apply,
174 branchAndMerge,
175 mergeWith,
176 template,
177 url,
178} from '@angular-devkit/schematics';
179import { Schema as ClassOptions } from './schema';
180
181export default function (options: ClassOptions): Rule {
182 return (tree: Tree, context: SchematicContext) => {
183 if (!options.name) {
184 throw new SchematicsException('Option (name) is required.');
185 }
186
187 const templateSource = apply(url('./files'), [
188 template({
189 ...strings,
190 ...options,
191 }),
192 ]);
193
194 return branchAndMerge(mergeWith(templateSource));
195 };
196}
197```
198
199Additional things from this example:
200
2011. `strings` provides the used `dasherize` and `classify` functions, among others.
2021. The files are on-disk in the same root directory as the `index.ts` and loaded into a `Tree`.
2031. Then the `template` `Rule` fills in the specified templating placeholders. For this, it only knows about the variables and functions passed to it via the options-object.
2041. Finally, the resulting `Tree`, containing the new file, is merged with the existing files of the project which the Schematic is run on.
Note: See TracBrowser for help on using the repository browser.