Skip to content

Commit

Permalink
Remove Angular support (#522)
Browse files Browse the repository at this point in the history
  • Loading branch information
timostamm authored Apr 24, 2023
1 parent 1349fe9 commit 79c19c6
Show file tree
Hide file tree
Showing 90 changed files with 8,461 additions and 64,055 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yaml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
name: ci
on:
pull_request:
branches: [master]
branches: [main]
workflow_dispatch:
# Prevent writing to the repository using the CI token.
# Ref: https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#permissions
Expand Down
104 changes: 1 addition & 103 deletions MANUAL.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ protobuf-ts manual
- [Native gRPC server](#native-grpc-server)
- [Native gRPC client](#native-grpc-client)
- [Generic RPC servers](#generic-rpc-servers)
- [Angular support](#angular-support)



Expand Down Expand Up @@ -219,12 +218,6 @@ Available plugin options:
- "force_client_none"
Do not generate rpc clients, ignore options in proto files.
- "enable_angular_annotations"
If set, the generated rpc client will have an angular @Injectable()
annotation and the `RpcTransport` constructor argument is annotated with a
@Inject annotation. For this feature, you will need the npm package
'@protobuf-ts/runtime-angular'.
- "server_none"
Do not generate rpc servers.
This is the default behaviour, but only applies to services that do
Expand Down Expand Up @@ -903,9 +896,6 @@ Any.toJson(any, {
Converts a JavaScript Date to a `Timestamp`.
> **Note:** `Timestamp` is also supported by the `PbDatePipe` provided by
> `@protobuf-ts/runtime-angular`.
#### google.protobuf.Struct
Expand Down Expand Up @@ -954,8 +944,6 @@ let struct = Struct.fromJson({
Both types provide methods to convert to and from JavaScript Dates, similar
to `google.protobuf.Timestamp`.
> **Note:** `DateTime` is also supported by the `PbDatePipe` provided by
> `@protobuf-ts/runtime-angular`.
Expand Down Expand Up @@ -1432,9 +1420,6 @@ can be polyfilled quite easily:
- `Symbol.asyncIterator` [polyfill](https://stackoverflow.com/questions/43694281 )
- `globalThis` - [polyfill](https://mathiasbynens.be/notes/globalthis#robust-polyfill)
The Angular example app `packages/example-angular-app` is using these polyfills
and works with Edge 44.
For the Web Browser, it is recommended to use the `CODE_SIZE` optimization for
all messages by setting plugin option `--ts_opt optimize_code_size`. Then set the
file option `optimize_for = SPEED` for files where you can measure a noticeable
Expand Down Expand Up @@ -1543,10 +1528,6 @@ messsage and returns exactly one output message. It is one of the four
class `HaberdasherClient`. It takes a `RpcTransport` and a `RpcOptions`
argument.
If you set the `enable_angular_annotations` option, `protobuf-ts` adds
annotations to the client that enable Angular dependency injection.
See [Angular support](#angular-support) to learn more.
To learn about `RpcOptions` and the `RpcTransport` implementations, please
continue reading.
Expand Down Expand Up @@ -1872,8 +1853,7 @@ as a single constructor argument. It extends the standard `RpcOptions`
This will make requests include cookies for cross-origin calls.
`protobuf-ts` includes an example gRPC web server in `packages/example-dotnet-grpcweb-server`
and exemplary client usage in `packages/example-angular-app`.
`protobuf-ts` includes an example gRPC web server in `packages/example-dotnet-grpcweb-server`.
To learn more about the inner workings of the transport, make sure
to read the introduction to [RPC support](#rpc-support). To learn about the features
Expand All @@ -1896,9 +1876,6 @@ To use the Twirp transport, install the package `@protobuf-ts/twirp-transport`.
> `globalThis.fetch`, `globalThis.Headers` and `globalThis.AbortController` are expected.
> For Node.js, use the polyfills [node-fetch](https://github.com/node-fetch/node-fetch) and [abort-controller](https://github.com/mysticatea/abort-controller).
> **Note:** If you use Angular, consider using the Twirp transport based on
> Angular's HttpClient. See [Angular support](#angular-support).
> **Note:** For requests across domains, your server must allow request
> headers you intend to send and expose response headers you intend to read.
> See [Access-Control-Expose-Headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers)
Expand Down Expand Up @@ -2103,82 +2080,3 @@ Note that this feature is experimental and may change with minor releases.
For usage, see [/packages/example-chat-system/](./packages/example-chat-system/).
## Angular support
`protobuf-ts` has built-in support for [Angular](https://angular.io/), including:
- a Twirp transport that uses the Angular `HttpClient`
- a date pipe that supports `google.protobuf.Timestamp` and `google.type.DateTime`
- annotations for dependency injection
To enable Angular support,
1. set the `enable_angular_annotations` [plugin option](#the-protoc-plugin)
2. install all related packages with `npm i @protobuf-ts/runtime @protobuf-ts/runtime-rpc @protobuf-ts/runtime-angular @protobuf-ts/twirp-transport`
Update your `app.module.ts` with the following:
```typescript
// app.module.ts
@NgModule({
imports: [
// ...
// Registers the `PbDatePipe`.
// This pipe overrides the standard "date" pipe and adds support
// for `google.protobuf.Timestamp` and `google.type.DateTime`.
PbDatePipeModule,
// Registers the `TwirpTransport` with the given options
// and sets up dependency injection.
TwirpModule.forRoot({
// don't forget the "twirp" prefix if your server requires it
baseUrl: "http://localhost:8080/twirp/",
})
],
providers: [
// Make a service available for dependency injection.
// Now you can use it as a constructor argument of your component.
HaberdasherClient,
// ...
],
// ...
})
export class AppModule {
}
```
If you want to use a different RPC transport, you can wire it up using the
`RPC_TRANSPORT` injection token. The following example uses the `GrpcWebFetchTransport`
from @protobuf-ts/grpcweb-transport:
```typescript
// app.module.ts
@NgModule({
// ...
providers: [
// Make this service available for injection in all components:
MyServerStreamingServiceClient,
// Configure gRPC web as transport for all services.
{provide: RPC_TRANSPORT, useValue: new GrpcWebFetchTransport({
baseUrl: "http://localhost:4200"
})},
],
// ...
})
export class AppModule {
}
```
For more information, have a look at the example angular app in [packages/example-angular-app](./packages/example-angular-app).
It shows how the pipe is used, how Twirp is setup and can be run against an
example gRPC-web or Twirp server (also included in the examples).
1 change: 0 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ official [language guide](https://developers.google.com/protocol-buffers/docs/ov
- [x] generates [native gRPC servers](MANUAL.md#native-grpc-server) and
[clients](MANUAL.md#native-grpc-client) for usage with `@grpc/grpc-js`
- [x] supported by [Twirp-TS](https://github.com/hopin-team/twirp-ts) for Twirp servers running on Node.js
- [x] supports [Angular](MANUAL.md#angular-support) dependency injection and pipes
- [x] automatically [installs protoc](./packages/protoc/README.md) (with Yarn berry, please use [node-protoc](https://www.npmjs.com/package/node-protoc))
- [x] can optimize for [speed or code size](MANUAL.md#code-size-vs-speed)
- [x] supports [proto3 optionals](MANUAL.md#proto3-optionals)
Expand Down
Loading

0 comments on commit 79c19c6

Please sign in to comment.