Skip to content

Commit f199ca2

Browse files
mattforsmattfors
committed
feature: add an example and testing module
1 parent fa0c090 commit f199ca2

12 files changed

+241
-73
lines changed

‎README.md

+52
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,55 @@ Angular Web Serial is an angular module for connecting to serial devices with th
1111
```shell
1212
npm i angular-web-serial
1313
```
14+
15+
## Usage
16+
Below is the basic usage of the module. A pipe is used to accumulate the raw data from the serial port.
17+
```typescript
18+
import { Component } from '@angular/core';
19+
import { AngularSerialService, provideAngularSerial } from '../../../angular-serial/src';
20+
import { Observable, scan } from 'rxjs';
21+
import { AsyncPipe } from '@angular/common';
22+
23+
@Component({
24+
selector: 'app-root',
25+
standalone: true,
26+
imports: [AsyncPipe],
27+
providers: [provideAngularSerial()],
28+
template: `
29+
<button (click)="open()">Open</button>
30+
<input #inputField
31+
type="text"
32+
(keydown.enter)="write(inputField.value); inputField.value=''"
33+
placeholder="Type and press Enter">
34+
<div>
35+
<textarea [value]="data$ | async" readonly></textarea>
36+
</div>
37+
`
38+
})
39+
export class AppComponent {
40+
41+
data$: Observable<string>;
42+
43+
constructor(private serial: AngularSerialService) {
44+
this.data$ = this.serial.read().pipe(
45+
scan((acc, value) => acc + value, '')
46+
);
47+
}
48+
49+
open(): void {
50+
this.serial.open().subscribe()
51+
}
52+
53+
write(value: string): void {
54+
this.serial.write(value + '\r').subscribe();
55+
}
56+
57+
}
58+
59+
```
60+
61+
## Mock serial device
62+
The module can be used with a mock serial device for testing or if you do not have a real serial device. Provide a function which takes and returns a string. In this example, the text transmitted to the serial device will be echoed back with 'Hello'.
63+
```typescript
64+
providers: [provideAngularSerialTest(i => `Hello ${i}!\n`)]
65+
```

‎angular.json

+94
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,100 @@
3636
}
3737
}
3838
}
39+
},
40+
"terminal": {
41+
"projectType": "application",
42+
"schematics": {
43+
"@schematics/angular:component": {
44+
"style": "scss"
45+
}
46+
},
47+
"root": "projects/terminal",
48+
"sourceRoot": "projects/terminal/src",
49+
"prefix": "app",
50+
"architect": {
51+
"build": {
52+
"builder": "@angular-devkit/build-angular:application",
53+
"options": {
54+
"outputPath": "dist/terminal",
55+
"index": "projects/terminal/src/index.html",
56+
"browser": "projects/terminal/src/main.ts",
57+
"polyfills": [
58+
"zone.js"
59+
],
60+
"tsConfig": "projects/terminal/tsconfig.app.json",
61+
"inlineStyleLanguage": "scss",
62+
"assets": [
63+
"projects/terminal/src/favicon.ico",
64+
"projects/terminal/src/assets"
65+
],
66+
"styles": [
67+
"projects/terminal/src/styles.scss"
68+
],
69+
"scripts": []
70+
},
71+
"configurations": {
72+
"production": {
73+
"budgets": [
74+
{
75+
"type": "initial",
76+
"maximumWarning": "500kb",
77+
"maximumError": "1mb"
78+
},
79+
{
80+
"type": "anyComponentStyle",
81+
"maximumWarning": "2kb",
82+
"maximumError": "4kb"
83+
}
84+
],
85+
"outputHashing": "all"
86+
},
87+
"development": {
88+
"optimization": false,
89+
"extractLicenses": false,
90+
"sourceMap": true
91+
}
92+
},
93+
"defaultConfiguration": "production"
94+
},
95+
"serve": {
96+
"builder": "@angular-devkit/build-angular:dev-server",
97+
"configurations": {
98+
"production": {
99+
"buildTarget": "terminal:build:production"
100+
},
101+
"development": {
102+
"buildTarget": "terminal:build:development"
103+
}
104+
},
105+
"defaultConfiguration": "development"
106+
},
107+
"extract-i18n": {
108+
"builder": "@angular-devkit/build-angular:extract-i18n",
109+
"options": {
110+
"buildTarget": "terminal:build"
111+
}
112+
},
113+
"test": {
114+
"builder": "@angular-devkit/build-angular:karma",
115+
"options": {
116+
"polyfills": [
117+
"zone.js",
118+
"zone.js/testing"
119+
],
120+
"tsConfig": "projects/terminal/tsconfig.spec.json",
121+
"inlineStyleLanguage": "scss",
122+
"assets": [
123+
"projects/terminal/src/favicon.ico",
124+
"projects/terminal/src/assets"
125+
],
126+
"styles": [
127+
"projects/terminal/src/styles.scss"
128+
],
129+
"scripts": []
130+
}
131+
}
132+
}
39133
}
40134
}
41135
}

‎package-lock.json

+5-40
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-web-serial",
3-
"version": "0.0.7",
3+
"version": "0.0.8",
44
"description": "Angular library for Web Serial API with RxJS",
55
"repository": {
66
"type": "git",
@@ -38,14 +38,14 @@
3838
"@angular/cli": "^17.3.2",
3939
"@angular/compiler-cli": "^17.3.0",
4040
"@types/jasmine": "~5.1.0",
41+
"@types/w3c-web-serial": "^1.0.7",
4142
"jasmine-core": "~5.1.0",
4243
"karma": "~6.4.0",
4344
"karma-chrome-launcher": "~3.2.0",
4445
"karma-coverage": "~2.2.0",
4546
"karma-jasmine": "~5.1.0",
4647
"karma-jasmine-html-reporter": "~2.1.0",
4748
"ng-packagr": "^17.3.0",
48-
"typescript": "~5.4.2",
49-
"@types/w3c-web-serial": "^1.0.7"
49+
"typescript": "~5.4.2"
5050
}
5151
}

‎projects/angular-serial/README.md

+54-13
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,65 @@
1-
# AngularSerial
1+
[![npm version](https://badge.fury.io/js/angular-web-serial.svg?icon=si%3Anpm)](https://badge.fury.io/js/angular-web-serial)
2+
[![Publish to GitHub Packages](https://github.com/mattfors/angular-serial/actions/workflows/build.yml/badge.svg)](https://github.com/mattfors/angular-serial/actions/workflows/build.yml)
3+
[![codecov](https://codecov.io/github/mattfors/angular-serial/graph/badge.svg?token=GRL2B8OCW5)](https://codecov.io/github/mattfors/angular-serial)
24

3-
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
5+
# Angular Web Serial
46

5-
## Code scaffolding
7+
Angular Web Serial is an angular module for connecting to serial devices with the Web Serial API.
68

7-
Run `ng generate component component-name --project angular-serial` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-serial`.
8-
> Note: Don't forget to add `--project angular-serial` or else it will be added to the default project in your `angular.json` file.
9+
## Installation
910

10-
## Build
11+
```shell
12+
npm i angular-web-serial
13+
```
1114

12-
Run `ng build angular-serial` to build the project. The build artifacts will be stored in the `dist/` directory.
15+
## Usage
16+
Below is the basic usage of the module. A pipe is used to accumulate the raw data from the serial port.
17+
```typescript
18+
import { Component } from '@angular/core';
19+
import { AngularSerialService, provideAngularSerial } from '../../../angular-serial/src';
20+
import { Observable, scan } from 'rxjs';
21+
import { AsyncPipe } from '@angular/common';
1322

14-
## Publishing
23+
@Component({
24+
selector: 'app-root',
25+
standalone: true,
26+
imports: [AsyncPipe],
27+
providers: [provideAngularSerial()],
28+
template: `
29+
<button (click)="open()">Open</button>
30+
<input #inputField
31+
type="text"
32+
(keydown.enter)="write(inputField.value); inputField.value=''"
33+
placeholder="Type and press Enter">
34+
<div>
35+
<textarea [value]="data$ | async" readonly></textarea>
36+
</div>
37+
`
38+
})
39+
export class AppComponent {
1540

16-
After building your library with `ng build angular-serial`, go to the dist folder `cd dist/angular-serial` and run `npm publish`.
41+
data$: Observable<string>;
1742

18-
## Running unit tests
43+
constructor(private serial: AngularSerialService) {
44+
this.data$ = this.serial.read().pipe(
45+
scan((acc, value) => acc + value, '')
46+
);
47+
}
1948

20-
Run `ng test angular-serial` to execute the unit tests via [Karma](https://karma-runner.github.io).
49+
open(): void {
50+
this.serial.open().subscribe()
51+
}
2152

22-
## Further help
53+
write(value: string): void {
54+
this.serial.write(value + '\r').subscribe();
55+
}
2356

24-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
57+
}
58+
59+
```
60+
61+
## Mock serial device
62+
The module can be used with a mock serial device for testing or if you do not have a real serial device. Provide a function which takes and returns a string. In this example, the text transmitted to the serial device will be echoed back with 'Hello'.
63+
```typescript
64+
providers: [provideAngularSerialTest(i => `Hello ${i}!\n`)]
65+
```

‎projects/angular-serial/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-web-serial",
3-
"version": "0.0.7",
3+
"version": "0.0.8",
44
"peerDependencies": {
55
"@angular/common": "^17.3.0",
66
"@angular/core": "^17.3.0"

‎projects/angular-serial/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './public-api';

‎projects/angular-serial/src/lib/angular-serial-testing.module.ts

+14-7
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
1-
import { FactoryProvider, InjectionToken, NgModule } from '@angular/core';
1+
import { FactoryProvider, InjectionToken, NgModule, Provider } from '@angular/core';
22
import { CommonModule, DOCUMENT } from '@angular/common';
33
import { AngularSerialService } from './angular-serial.service';
44
import { MockSerial } from './mock-serial';
55

66

77
export const RESPONSE_FUNCTION = new InjectionToken<(input: string) => string>('RESPONSE_FUNCTION');
88

9+
export function provideAngularSerialTest(responseFunction?: (input: string) => string): Provider[] {
10+
return [
11+
AngularSerialService,
12+
{
13+
provide: 'Serial',
14+
useFactory: (responseFunction: (input: string) => string) => new MockSerial(responseFunction || ((input: string) => input)),
15+
deps: [RESPONSE_FUNCTION]
16+
} as FactoryProvider,
17+
{ provide: RESPONSE_FUNCTION, useValue: responseFunction || ((input: string) => input) }
18+
];
19+
}
20+
921
@NgModule({
1022
declarations: [],
1123
imports: [
1224
CommonModule
1325
],
1426
providers: [
15-
AngularSerialService,
16-
{
17-
provide: 'Serial',
18-
useFactory: (responseFunction: (input: string) => string) => new MockSerial(responseFunction || ((input: string) => input)),
19-
deps: [RESPONSE_FUNCTION]
20-
} as FactoryProvider
27+
provideAngularSerialTest()
2128
]
2229
})
2330
export class AngularSerialTestingModule {

0 commit comments

Comments
 (0)