docs(core): code syntax typescript & image dimension (#4569)
This commit is contained in:
parent
aeec4bd4d9
commit
28aa63fcec
@ -65,20 +65,20 @@ This step is very manual and varies widely based on the usage of features from v
|
|||||||
|
|
||||||
- Bare spies
|
- Bare spies
|
||||||
- Jasmine
|
- Jasmine
|
||||||
```ts
|
```typescript
|
||||||
const myMock = jasmine.createSpy('myMock);
|
const myMock = jasmine.createSpy('myMock);
|
||||||
```
|
```
|
||||||
- Jest
|
- Jest
|
||||||
```ts
|
```typescript
|
||||||
const myMock = jest.fn();
|
const myMock = jest.fn();
|
||||||
```
|
```
|
||||||
- Spies on existing objects
|
- Spies on existing objects
|
||||||
- Jasmine
|
- Jasmine
|
||||||
```ts
|
```typescript
|
||||||
spyOn(foo, 'setBar');
|
spyOn(foo, 'setBar');
|
||||||
```
|
```
|
||||||
- Jest
|
- Jest
|
||||||
```ts
|
```typescript
|
||||||
jest.spyOn(foo, ‘setBar’);
|
jest.spyOn(foo, ‘setBar’);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -92,7 +92,7 @@ Changing knobs in the url query parameters allows your Cypress tests to test dif
|
|||||||
|
|
||||||
**\*.component.stories.ts file**
|
**\*.component.stories.ts file**
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
import { text, number } from '@storybook/addon-knobs';
|
import { text, number } from '@storybook/addon-knobs';
|
||||||
import { ButtonComponent } from './button.component';
|
import { ButtonComponent } from './button.component';
|
||||||
|
|
||||||
@ -115,7 +115,7 @@ export const primary = () => ({
|
|||||||
|
|
||||||
**Cypress \*.spec.ts file**
|
**Cypress \*.spec.ts file**
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
describe('shared-ui', () => {
|
describe('shared-ui', () => {
|
||||||
beforeEach(() =>
|
beforeEach(() =>
|
||||||
cy.visit(
|
cy.visit(
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 45 KiB |
@ -83,7 +83,7 @@ Changing knobs in the url query parameters allows your Cypress tests to test dif
|
|||||||
|
|
||||||
**\*.stories.tsx file**
|
**\*.stories.tsx file**
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { text, number } from '@storybook/addon-knobs';
|
import { text, number } from '@storybook/addon-knobs';
|
||||||
import { Button } from './button';
|
import { Button } from './button';
|
||||||
@ -97,7 +97,7 @@ export const primary = () => (
|
|||||||
|
|
||||||
**Cypress \*.spec.ts file**
|
**Cypress \*.spec.ts file**
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
describe('shared-ui', () => {
|
describe('shared-ui', () => {
|
||||||
beforeEach(() =>
|
beforeEach(() =>
|
||||||
cy.visit(
|
cy.visit(
|
||||||
|
|||||||
@ -208,7 +208,7 @@ nx generate lib ui-button
|
|||||||
|
|
||||||
The new library can be used in your app like by adding this code to `App.tsx`:
|
The new library can be used in your app like by adding this code to `App.tsx`:
|
||||||
|
|
||||||
```tsx
|
```typescriptx
|
||||||
//...
|
//...
|
||||||
import { UiButton } from '@acme/ui-button';
|
import { UiButton } from '@acme/ui-button';
|
||||||
//...
|
//...
|
||||||
|
|||||||
@ -51,7 +51,7 @@ In our `impl.ts` file, we're creating an `Options` interface that matches the js
|
|||||||
|
|
||||||
The `impl.ts` contains the actual code for your builder. Your builder should use the `createBuilder` function of the `@angular-devkit/architect` package to create a builder that can be run via the Nx CLI tools.
|
The `impl.ts` contains the actual code for your builder. Your builder should use the `createBuilder` function of the `@angular-devkit/architect` package to create a builder that can be run via the Nx CLI tools.
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
import { BuilderOutput, createBuilder } from '@angular-devkit/architect';
|
import { BuilderOutput, createBuilder } from '@angular-devkit/architect';
|
||||||
import * as childProcess from 'child_process';
|
import * as childProcess from 'child_process';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
@ -89,7 +89,7 @@ Part of the power of the architect API is the ability to compose builders via ex
|
|||||||
|
|
||||||
Here's an example of this (from a hypothetical project), that will serve an api (project name: "api") in watch mode, then serve a frontend app (project name: "web-client") in watch mode:
|
Here's an example of this (from a hypothetical project), that will serve an api (project name: "api") in watch mode, then serve a frontend app (project name: "web-client") in watch mode:
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
import {
|
import {
|
||||||
BuilderContext,
|
BuilderContext,
|
||||||
BuilderOutput,
|
BuilderOutput,
|
||||||
@ -178,7 +178,7 @@ The first difference to adjust is to mark the executor as an Nx Executor in the
|
|||||||
|
|
||||||
Your executor's implementation must consist of a function that takes an options object and returns a `Promise<{ success: boolean }>`. Given the echo implementation provided in the Angular Devkit Builder section above, our Nx executor would look like this:
|
Your executor's implementation must consist of a function that takes an options object and returns a `Promise<{ success: boolean }>`. Given the echo implementation provided in the Angular Devkit Builder section above, our Nx executor would look like this:
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
import * as childProcess from 'child_process';
|
import * as childProcess from 'child_process';
|
||||||
|
|
||||||
interface Options {
|
interface Options {
|
||||||
|
|||||||
@ -31,7 +31,7 @@ The `schema.json` provides a description of the generator, available options, va
|
|||||||
|
|
||||||
The initial generator function creates a library.
|
The initial generator function creates a library.
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
import { Tree, formatFiles, installPackagesTask } from '@nrwl/devkit';
|
import { Tree, formatFiles, installPackagesTask } from '@nrwl/devkit';
|
||||||
import { libraryGenerator } from '@nrwl/workspace';
|
import { libraryGenerator } from '@nrwl/workspace';
|
||||||
|
|
||||||
@ -117,7 +117,7 @@ happynrwl/
|
|||||||
|
|
||||||
Next, update the `index.ts` file for the schematic, and create different rules for generating a library, and generating the new files. Both rules have access to the available options provided for the schematic.
|
Next, update the `index.ts` file for the schematic, and create different rules for generating a library, and generating the new files. Both rules have access to the available options provided for the schematic.
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
import {
|
import {
|
||||||
apply,
|
apply,
|
||||||
chain,
|
chain,
|
||||||
@ -195,7 +195,7 @@ UPDATE package.json (1959 bytes)
|
|||||||
|
|
||||||
To create a TypeScript schema to use in your generator function, define a TypeScript file next to your schema.json named schema.ts. Inside the schema.ts, define an interface to match the properties in your schema.json file, and whether they are required.
|
To create a TypeScript schema to use in your generator function, define a TypeScript file next to your schema.json named schema.ts. Inside the schema.ts, define an interface to match the properties in your schema.json file, and whether they are required.
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
export interface SchematicOptions {
|
export interface SchematicOptions {
|
||||||
name: string;
|
name: string;
|
||||||
type?: string;
|
type?: string;
|
||||||
@ -204,7 +204,7 @@ export interface SchematicOptions {
|
|||||||
|
|
||||||
Import the TypeScript schema into your generator file and replace the any in your generator function with the interface.
|
Import the TypeScript schema into your generator file and replace the any in your generator function with the interface.
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
import { Tree, formatFiles, installPackagesTask } from '@nrwl/devkit';
|
import { Tree, formatFiles, installPackagesTask } from '@nrwl/devkit';
|
||||||
import { libraryGenerator } from '@nrwl/workspace';
|
import { libraryGenerator } from '@nrwl/workspace';
|
||||||
|
|
||||||
|
|||||||
@ -97,7 +97,7 @@ A utility library can depend only on utility libraries.
|
|||||||
|
|
||||||
An example ui lib module: **libs/shared/util-formatting**
|
An example ui lib module: **libs/shared/util-formatting**
|
||||||
|
|
||||||
```ts
|
```typescript
|
||||||
export { formatDate, formatTime } from './src/format-date-fns';
|
export { formatDate, formatTime } from './src/format-date-fns';
|
||||||
export { formatCurrency } from './src/format-currency';
|
export { formatCurrency } from './src/format-currency';
|
||||||
```
|
```
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user