Improve Emitter/Library authoring documentation (#2725)
Fixes #2728. --------- Co-authored-by: Timothee Guerin <tiguerin@microsoft.com>
This commit is contained in:
Travis Prescott
GitHub
Родитель
216d28ebe4
Коммит
42545acd3b
|
|
@ -34,6 +34,7 @@ words:
|
|||
- jsyaml
|
||||
- keyer
|
||||
- lzutf
|
||||
- mocharc
|
||||
- msbuild
|
||||
- MSRC
|
||||
- multis
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@ The following is a high level overview of the contents of a TypeSpec package. Th
|
|||
- **src/lib.ts** - the TypeSpec library definition file
|
||||
- **package.json** - metadata about your TypeSpec package
|
||||
|
||||
## Initial setup
|
||||
## 1 - Initial setup
|
||||
|
||||
### 1. Initialize your package directory & package.json
|
||||
### a. Initialize your package directory & package.json
|
||||
|
||||
Run the following commands:
|
||||
|
||||
|
|
@ -37,13 +37,13 @@ Run the following commands:
|
|||
|
||||
After filling out the wizard, you will have a package.json file that defines your typespec library.
|
||||
|
||||
Unlike node libraries which support CommonJS (cjs), TypeSpec libraries must be Ecmascript Modules. So open your `package.json` and add the following top-level configuration key:
|
||||
Unlike node libraries which support CommonJS (cjs), TypeSpec libraries must be Ecmascript Modules. Open your `package.json` and add the following top-level configuration key:
|
||||
|
||||
```json
|
||||
```jsonc
|
||||
"type": "module"
|
||||
```
|
||||
|
||||
### 2. Install TypeSpec dependencies
|
||||
### b. Install TypeSpec dependencies
|
||||
|
||||
Run the following command:
|
||||
|
||||
|
|
@ -51,20 +51,20 @@ Run the following command:
|
|||
npm install --save-peer @typespec/compiler
|
||||
```
|
||||
|
||||
You may have need of other dependencies in the TypeSpec standard library depending on what you are doing. E.g. if you want to use the metadata found in `@typespec/openapi` you will need to install that as well.
|
||||
You may have need of other dependencies in the TypeSpec standard library depending on what you are doing (e.g. if you want to use the metadata found in `@typespec/openapi` you will need to install that as well).
|
||||
|
||||
See [dependency section](#defining-dependencies) for information on how to define your dependencies.
|
||||
|
||||
### 2. Define your main files
|
||||
### c. Define your main files
|
||||
|
||||
Your package.json needs to refer to two main files: your node module main file, and your TypeSpec main. The node module main file is the `"main"` key in your package.json file, and defines the entrypoint for your library when consumed as a node library, and must reference a js file. The TypeSpec main defines the entrypoint for your library when consumed from a TypeSpec program, and may reference either a js file (when your library doesn't contain any typespec types) or a TypeSpec file.
|
||||
|
||||
```json
|
||||
"main": "dist/index.js",
|
||||
```jsonc
|
||||
"main": "dist/src/index.js",
|
||||
"tspMain": "lib/main.tsp"
|
||||
```
|
||||
|
||||
### 3. Install and initialize TypeScript
|
||||
### d. Install and initialize TypeScript
|
||||
|
||||
Run the following commands:
|
||||
|
||||
|
|
@ -75,15 +75,16 @@ npx tsc --init --strict
|
|||
|
||||
This will create `tsconfig.json`. But we need to make a couple changes to this. Open `tsconfig.json` and set the following settings:
|
||||
|
||||
```json
|
||||
"module": "Node16", // This and next setting tells TypeScript to use the new ESM import system to resolve types.
|
||||
"moduleResolution": "Node16",
|
||||
"target": "es2019",
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist",
|
||||
```jsonc
|
||||
"module": "Node16", // This and next setting tells TypeScript to use the new ESM import system to resolve types.
|
||||
"moduleResolution": "Node16",
|
||||
"target": "es2019",
|
||||
"rootDir": ".",
|
||||
"outDir": "./dist",
|
||||
"sourceMap": true,
|
||||
```
|
||||
|
||||
### 4. Create `lib.ts`
|
||||
### e. Create `lib.ts`
|
||||
|
||||
Open `./src/lib.ts` and create your library definition that registers your library with the TypeSpec compiler and defines any diagnostics your library will emit. Make sure to export the library definition as `$lib`.
|
||||
|
||||
|
|
@ -107,7 +108,7 @@ export const { reportDiagnostic, createDiagnostic, createStateSymbol } = $lib;
|
|||
|
||||
Diagnostics are used for linters and decorators which are covered in subsequent topics.
|
||||
|
||||
### 5. Create `index.ts`
|
||||
### f. Create `index.ts`
|
||||
|
||||
Open `./src/index.ts` and import your library definition:
|
||||
|
||||
|
|
@ -116,11 +117,24 @@ Open `./src/index.ts` and import your library definition:
|
|||
export { $lib } from "./lib.js";
|
||||
```
|
||||
|
||||
### 6. Build TypeScript
|
||||
### g. Build TypeScript
|
||||
|
||||
TypeSpec can only import JavaScript files, so any time changes are made to TypeScript sources, they need to be compiled before they are visible to TypeSpec. To do so, run `npx tsc -p .` in your library's root directory. You can also run `npx tsc -p --watch` if you would like to re-run the TypeScript compiler whenever files are changed.
|
||||
TypeSpec can only import JavaScript files, so any time changes are made to TypeScript sources, they need to be compiled before they are visible to TypeSpec. To do so, run `npx tsc -p .` in your library's root directory. You can also run `npx tsc -p . --watch` if you would like to re-run the TypeScript compiler whenever files are changed.
|
||||
|
||||
### 7. Add your main TypeSpec file
|
||||
Alternatively, you can add these as scripts in your `package.json` to make them easier to invoke. Consider adding the following:
|
||||
|
||||
```jsonc
|
||||
"scripts": {
|
||||
"clean": "rimraf ./dist ./temp",
|
||||
"build": "tsc -p .",
|
||||
"watch": "tsc -p . --watch",
|
||||
"test": "mocha"
|
||||
}
|
||||
```
|
||||
|
||||
You can then run `npm run build` or `npm run watch` to build or watch your library.
|
||||
|
||||
### h. Add your main TypeSpec file
|
||||
|
||||
Open `./lib/main.tsp` and import your JS entrypoint. This ensures that when typespec imports your library, the code to define the library is run. In later topics when we add decorators, this import will ensure those get exposed as well.
|
||||
|
||||
|
|
@ -128,7 +142,7 @@ Open `./lib/main.tsp` and import your JS entrypoint. This ensures that when type
|
|||
import "../dist/index.js";
|
||||
```
|
||||
|
||||
## Adding TypeSpec types to your library
|
||||
## 2. Adding TypeSpec types to your library
|
||||
|
||||
Open `./lib/main.tsp` and add any types you want to be available when users import this library. It is also strongly recommended you put these types in a namespace that corresponds with the library name. For example, your `./lib/main.tsp` file might look like:
|
||||
|
||||
|
|
@ -142,7 +156,7 @@ model Person {
|
|||
}
|
||||
```
|
||||
|
||||
## Defining Dependencies
|
||||
## 3. Defining Dependencies
|
||||
|
||||
Defining dependencies in a TypeSpec library should be following these rules:
|
||||
|
||||
|
|
@ -174,11 +188,154 @@ TypeSpec libraries are defined using `peerDependencies` so we don't end-up with
|
|||
}
|
||||
```
|
||||
|
||||
## Publishing your TypeSpec library
|
||||
## 4. Testing your TypeSpec library
|
||||
|
||||
TypeSpec provides a testing framework to help testing libraries. Examples here are shown using `mocha` but any other JS test framework can be used.
|
||||
|
||||
### a. Add devDependencies
|
||||
|
||||
Verify that you have the following in your `package.json`:
|
||||
|
||||
```
|
||||
"devDependencies": {
|
||||
"@types/node": "~18.11.9",
|
||||
"@types/mocha": "~10.0.1",
|
||||
"mocha": "~10.2.0",
|
||||
"source-map-support": "^0.5.21"
|
||||
}
|
||||
```
|
||||
|
||||
Also add a `.mocharc.yaml` file at the root of your project.
|
||||
|
||||
```yaml
|
||||
timeout: 5000
|
||||
require: source-map-support/register
|
||||
spec: "dist/test/**/*.test.js"
|
||||
```
|
||||
|
||||
### b. Define the testing library
|
||||
|
||||
The first step is to define how your library can be loaded from the test framework. This will let your library to be reused by other library test.
|
||||
|
||||
1. Create a new file `./src/testing/index.ts` with the following content
|
||||
|
||||
```ts
|
||||
import { resolvePath } from "@typespec/compiler";
|
||||
import { createTestLibrary } from "@typespec/compiler/testing";
|
||||
import { fileURLToPath } from "url";
|
||||
|
||||
export const MyTestLibrary = createTestLibrary({
|
||||
name: "<name-of-npm-pkg>",
|
||||
// Set this to the absolute path to the root of the package. (e.g. in this case this file would be compiled to ./dist/src/testing/index.js)
|
||||
packageRoot: resolvePath(fileURLToPath(import.meta.url), "../../../../"),
|
||||
});
|
||||
```
|
||||
|
||||
2. Add an `exports` for the `testing` endpoint to `package.json` (update with correct paths)
|
||||
|
||||
```jsonc
|
||||
{
|
||||
// ...
|
||||
"main": "dist/src/index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./dist/src/index.js",
|
||||
"types": "./dist/src/index.d.ts"
|
||||
},
|
||||
"./testing": {
|
||||
"default": "./dist/src/testing/index.js",
|
||||
"types": "./dist/src/testing/index.d.ts"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### c. Define the test host and test runner for your library
|
||||
|
||||
Define some of the test framework base pieces that will be used in the tests. There are 2 functions:
|
||||
|
||||
- `createTestHost`: This is a lower level API that provides a virtual file system.
|
||||
- `createTestRunner`: This is a wrapper on top of the test host that will automatically add a `main.tsp` file and automatically import libraries.
|
||||
|
||||
Create a new file `test/test-host.js` (change `test` to be your test folder)
|
||||
|
||||
```ts
|
||||
import { createTestHost, createTestWrapper } from "@typespec/compiler/testing";
|
||||
import { RestTestLibrary } from "@typespec/rest/testing";
|
||||
import { MyTestLibrary } from "../src/testing/index.js";
|
||||
|
||||
export async function createMyTestHost() {
|
||||
return createTestHost({
|
||||
libraries: [RestTestLibrary, MyTestLibrary], // Add other libraries you depend on in your tests
|
||||
});
|
||||
}
|
||||
export async function createMyTestRunner() {
|
||||
const host = await createMyTestHost();
|
||||
return createTestWrapper(host, { autoUsings: ["My"] });
|
||||
}
|
||||
```
|
||||
|
||||
### d. Write tests
|
||||
|
||||
After setting up that infrastructure you can start writing tests. For tests to be recognized by mocha the file names must follow the following format: `<name>.test.ts`
|
||||
|
||||
```ts
|
||||
import { createMyTestRunner } from "./test-host.js";
|
||||
|
||||
describe("my library", () => {
|
||||
let runner: BasicTestRunner;
|
||||
|
||||
beforeEach(async () => {
|
||||
runner = await createMyTestRunner();
|
||||
});
|
||||
|
||||
// Check everything works fine
|
||||
it("does this", async () => {
|
||||
const { Foo } = await runner.compile(`
|
||||
@test model Foo {}
|
||||
`);
|
||||
strictEqual(Foo.kind, "Model");
|
||||
});
|
||||
|
||||
// Check diagnostics are emitted
|
||||
it("errors", async () => {
|
||||
const diagnostics = await runner.diagnose(`
|
||||
model Bar {}
|
||||
`);
|
||||
expectDiagnostics(diagnostics, { code: "...", message: "..." });
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
#### e. `@test` decorator
|
||||
|
||||
The `@test` decorator is a decorator loaded in the test environment. It can be used to collect any decorable type.
|
||||
When using the `compile` method it will return a `Record<string, Type>` which is a map of all the types annoted with the `@test` decorator.
|
||||
|
||||
```ts
|
||||
const { Foo, CustomName } = await runner.compile(`
|
||||
@test model Foo {}
|
||||
|
||||
model Bar {
|
||||
@test("CustomName") name: string
|
||||
}
|
||||
`);
|
||||
|
||||
Foo; // type of: model Foo {}
|
||||
CustomName; // type of : Bar.name
|
||||
```
|
||||
|
||||
#### f. Install the mocha test explorer for VSCode (optional)
|
||||
|
||||
If you are using VSCode, you can install the [mocha test explorer](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter) to run your tests from the editor. This will also allow you easily debug into your tests.
|
||||
|
||||
You should now be able to discover, run and debug into your tests from the test explorer.
|
||||
|
||||
## 5. Publishing your TypeSpec library
|
||||
|
||||
To publish to the public npm registry, follow [their documentation](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages).
|
||||
|
||||
## Importing your TypeSpec library
|
||||
## 6. Importing your TypeSpec library
|
||||
|
||||
Once your TypeSpec library is published, your users can install and use it just like any of the TypeSpec standard libraries. First, they have to install it:
|
||||
|
||||
|
|
@ -197,118 +354,6 @@ model Employee extends Person {
|
|||
}
|
||||
```
|
||||
|
||||
## Next steps
|
||||
## 7. Next steps
|
||||
|
||||
TypeSpec libraries can contain more than just types. Read the subsequent topics for more details on how to write [decorators](./create-decorators.md), [emitters](./emitters-basics.md) and [linters](./linters.md).
|
||||
|
||||
## Testing
|
||||
|
||||
TypeSpec provides a testing framework to help testing libraries. Examples here are shown using `mocha` but any other JS test framework can be used.
|
||||
|
||||
### Define the testing library
|
||||
|
||||
First step is to define how your library can be loaded from the test framework. This will let your library to be reused by other library test.
|
||||
|
||||
1. Create a new file `./src/testing/index.ts` with the following content
|
||||
|
||||
```ts
|
||||
export const MyTestLibrary = createTestLibrary({
|
||||
name: "<name-of-npm-pkg>",
|
||||
// Set this to the absolute path to the root of the package. (e.g. in this case this file would be compiled to ./dist/src/testing/index.js)
|
||||
packageRoot: resolvePath(fileURLToPath(import.meta.url), "../../../../"),
|
||||
});
|
||||
```
|
||||
|
||||
2. Add an `exports` for the `testing` endpoint to `package.json` (update with correct paths)
|
||||
|
||||
```json
|
||||
{
|
||||
// ...
|
||||
"main": "dist/src/index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./dist/src/index.js",
|
||||
"types": "./dist/src/index.d.ts"
|
||||
},
|
||||
"./testing": {
|
||||
"default": "./dist/src/testing/index.js",
|
||||
"types": "./dist/src/testing/index.d.ts"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Define the test host and test runner for your library
|
||||
|
||||
Define some of the test framework base pieces that will be used in the tests. There is 2 functions:
|
||||
|
||||
- `createTestHost`: This is a lower level api that provide a virtual file system.
|
||||
- `createTestRunner`: This is a wrapper on top of the test host that will automatically add a `main.tsp` file and automatically import libraries.
|
||||
|
||||
Create a new file `test/test-host.js` (change `test` to be your test folder)
|
||||
|
||||
```ts
|
||||
import { createTestHost, createTestWrapper } from "@typespec/compiler/testing";
|
||||
import { RestTestLibrary } from "@typespec/rest/testing";
|
||||
import { MyTestLibrary } from "../src/testing/index.js";
|
||||
|
||||
export async function createMyTestHost() {
|
||||
return createTestHost({
|
||||
libraries: [RestTestLibrary, MyTestLibrary], // Add other libraries you depend on in your tests
|
||||
});
|
||||
}
|
||||
export async function createMyTestRunner() {
|
||||
const host = await createOpenAPITestHost();
|
||||
return createTestWrapper(host, { autoUsings: ["My"] });
|
||||
}
|
||||
```
|
||||
|
||||
### Write tests
|
||||
|
||||
After setting up that infrastructure you can start writing tests.
|
||||
|
||||
```ts
|
||||
import { createMyTestRunner } from "./test-host.js";
|
||||
|
||||
describe("my library", () => {
|
||||
let runner: BasicTestRunner;
|
||||
|
||||
beforeEach(async () => {
|
||||
runner = await createMyTestRunner();
|
||||
});
|
||||
|
||||
// Check everything works fine
|
||||
it("does this", () => {
|
||||
const { Foo } = runner.compile(`
|
||||
@test model Foo {}
|
||||
`);
|
||||
strictEqual(Foo.kind, "Model");
|
||||
});
|
||||
|
||||
// Check diagnostics are emitted
|
||||
it("errors", () => {
|
||||
const diagnostics = runner.diagnose(`
|
||||
model Bar {}
|
||||
`);
|
||||
expectDiagnostics(diagnostics, { code: "...", message: "..." });
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
#### `@test` decorator
|
||||
|
||||
The `@test` decorator is a decorator loaded in the test environment. It can be used to collect any decorable type.
|
||||
When using the `compile` method it will return a `Record<string, Type>` which is a map of all the types annoted with the `@test` decorator.
|
||||
|
||||
```ts
|
||||
const { Foo, CustomName } = runner.compile(`
|
||||
@test model Foo {}
|
||||
|
||||
model Bar {
|
||||
@test("CustomName") name: string
|
||||
}
|
||||
`);
|
||||
|
||||
Foo; // type of: model Foo {}
|
||||
CustomName; // type of : Bar.name
|
||||
```
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@ Let's walk through each of these types in turn.
|
|||
|
||||
The asset emitter is responsible for driving the emit process. It has methods for taking TypeSpec types to emit, and maintains the state of your current emit process including the declarations you've accumulated, current emit context, and converting your emitted content into files on disk.
|
||||
|
||||
To create your asset emitter, call `createAssetEmitter` on your emit context in `$onEmit`. It takes the TypeEmitter which is covered in the next section. Once created, you can call `emitProgram()` to emit every type in the TypeSpec graph. Otherwise, you can call `emitType(someType)` to emit specific types instead.
|
||||
To create your asset emitter, call `getAssetEmitter` on your emit context in `$onEmit`. It takes the TypeEmitter which is covered in the next section. Once created, you can call `emitProgram()` to emit every type in the TypeSpec graph. Otherwise, you can call `emitType(someType)` to emit specific types instead.
|
||||
|
||||
```typescript
|
||||
export async function $onEmit(context: EmitContext) {
|
||||
const assetEmitter = context.createAssetEmitter(MyTypeEmitter);
|
||||
const assetEmitter = context.getAssetEmitter(MyTypeEmitter);
|
||||
|
||||
// emit my entire typespec program
|
||||
assetEmitter.emitProgram();
|
||||
|
|
@ -59,7 +59,7 @@ class MyCodeEmitter extends CodeTypeEmitter {
|
|||
}
|
||||
```
|
||||
|
||||
Passing this to `createAssetEmitter` and calling `assetEmitter.emitProgram()` will console.log all the models in the program.
|
||||
Passing this to `getAssetEmitter` and calling `assetEmitter.emitProgram()` will console.log all the models in the program.
|
||||
|
||||
#### EmitterOutput
|
||||
|
||||
|
|
|
|||
|
|
@ -21,12 +21,15 @@ A TypeSpec emitter exports a function named `$onEmit` from its main entrypoint.
|
|||
For example, the following will write a text file to the output directory:
|
||||
|
||||
```typescript
|
||||
import { EmitContext } from "@typespec/compiler";
|
||||
import Path from "path";
|
||||
import { EmitContext, emitFile, resolvePath } from "@typespec/compiler";
|
||||
|
||||
export async function $onEmit(context: EmitContext) {
|
||||
const outputDir = Path.join(context.emitterOutputDir, "hello.txt");
|
||||
await context.program.host.writeFile(outputDir, "hello world!");
|
||||
if (!context.program.compilerOptions.noEmit) {
|
||||
await emitFile(context.program, {
|
||||
path: resolvePath(context.emitterOutputDir, "hello.txt"),
|
||||
content: "Hello world\n",
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче