Add additional testing with bundle sizes for TypeScript

bundle-size/README.md

@@ -17,12 +17,16 @@ The results are:
 <!--- RESULTS-START -->
 | Name | Size | Artifact |
 |------|-----:|----------|
-| esbuild | 82,796 bytes | dist/index.js |
-| parcel | 72,685 bytes | dist/index.1756241d.js |
-| rollup | 145,459 bytes | dist/index.js |
-| vite | 54,732 bytes | dist/consumer-vite.js |
-| webpack | 33,817 bytes | dist/main.js |
-| webpack-ts | 33,817 bytes | dist/bundle.js |
+| esbuild (js) | 83,741 bytes | dist/js/index.js |
+| esbuild (ts) | 88,697 bytes | dist/ts/index.js |
+| parcel (js) | 73,323 bytes | dist/js/index.cf4251ac.js |
+| parcel (ts) | 76,825 bytes | dist/ts/index.dc635180.js |
+| rollup (js) | 145,627 bytes | dist/js/index.js |
+| rollup (ts) | 155,601 bytes | dist/ts/index.js |
+| vite (js) | 55,512 bytes | dist/js/consumer-vite.js |
+| vite (ts) | 58,166 bytes | dist/ts/consumer-vite.js |
+| webpack (js) | 34,474 bytes | dist/js/main.js |
+| webpack (ts) | 37,435 bytes | dist/ts/main.js |
 <!--- RESULTS-END -->
 
 To run all tests, and update the table above:

bundle-size/README.mjs

@@ -12,11 +12,13 @@ function getResultsTable() {
   const fmt = new Intl.NumberFormat("en-US", {});
   for (const workspace of workspaces) {
     const pkgPath = readFileSync(join(workspace, "package.json"), "utf-8");
-    const { testOutputPath, name } = JSON.parse(pkgPath);
-    const testPath = join(workspace, testOutputPath);
-    const {size} = statSync(testPath);
-    console.log(`${name}: ${fmt.format(size)} bytes in ${testOutputPath}`);
-    rows.push(`| ${name.replace(/^consumer-/, "")} | ${fmt.format(size)} bytes | ${testOutputPath} |`)
+    const { testOutputPaths, name } = JSON.parse(pkgPath);
+    for (const [type, path] of Object.entries(testOutputPaths)) {
+      const testPath = join(workspace, path);
+      const {size} = statSync(testPath);
+      console.log(`${name} (${type}): ${fmt.format(size)} bytes in ${path}`);
+      rows.push(`| ${name.replace(/^consumer-/, "")} (${type}) | ${fmt.format(size)} bytes | ${path} |`)
+    }
   }
   return ["", ...rows, ""].join("\n");
 }
@@ -31,4 +33,4 @@ function injectResults(filePath, content) {
   const head = fileContent.substring(0, iStart + cStart.length);
   const foot = fileContent.substring(iEnd);
   writeFileSync(filePath, head + content + foot);
-}
+}

bundle-size/buf.gen.yaml

@@ -0,0 +1,14 @@
+version: v1
+plugins:
+  - name: es
+    out: src/js/gen
+    opt: target=js
+  - name: connect-es
+    out: src/js/gen
+    opt: target=js
+  - name: es
+    out: src/ts/gen
+    opt: target=ts+dts
+  - name: connect-es
+    out: src/ts/gen
+    opt: target=ts+dts

bundle-size/esbuild/package.json

@@ -2,10 +2,18 @@
   "name": "consumer-esbuild",
   "scripts": {
     "pregenerate": "rm -rf dist",
-    "generate": "npx buf generate buf.build/connectrpc/eliza",
-    "build": "esbuild --log-level=error ./src/index.js --bundle --outfile=dist/index.js"
+    "generate": "npx buf generate ../proto --template ../buf.gen.yaml",
+    "build": "npm run build:js && npm run build:ts",
+    "build:js": "esbuild --log-level=error ./src/js/index.js --bundle --outfile=dist/js/index.js",
+    "build:ts": "esbuild --log-level=error ./src/ts/index.ts --bundle --outfile=dist/ts/index.js",
+    "test": "npm run test:js && npm run test:ts",
+    "test:js": "node dist/js/index.js",
+    "test:ts": "node dist/ts/index.js"
+  },
+  "testOutputPaths": {
+    "js": "dist/js/index.js",
+    "ts": "dist/ts/index.js"
   },
-  "testOutputPath": "dist/index.js",
   "type": "module",
   "dependencies": {
     "@connectrpc/connect": "^1.3.0",

bundle-size/parcel/src/gen/connectrpc/eliza/v1/eliza_pb.js → bundle-size/esbuild/src/js/gen/connectrpc/eliza/v1/eliza_pb.js

@@ -19,6 +19,30 @@
 
 import { proto3 } from "@bufbuild/protobuf";
 
+/**
+ * @generated from enum connectrpc.eliza.v1.SayVolume
+ */
+export const SayVolume = proto3.makeEnum(
+  "connectrpc.eliza.v1.SayVolume",
+  [
+    {no: 0, name: "SAY_VOLUME_UNSPECIFIED", localName: "UNSPECIFIED"},
+    {no: 1, name: "SAY_VOLUME_LOUD", localName: "LOUD"},
+    {no: 2, name: "SAY_VOLUME_SOFT", localName: "SOFT"},
+  ],
+);
+
+/**
+ * @generated from enum connectrpc.eliza.v1.ConverseVolume
+ */
+export const ConverseVolume = proto3.makeEnum(
+  "connectrpc.eliza.v1.ConverseVolume",
+  [
+    {no: 0, name: "CONVERSE_VOLUME_UNSPECIFIED", localName: "UNSPECIFIED"},
+    {no: 1, name: "CONVERSE_VOLUME_LOUD", localName: "LOUD"},
+    {no: 2, name: "CONVERSE_VOLUME_SOFT", localName: "SOFT"},
+  ],
+);
+
 /**
  * SayRequest is a single-sentence request.
  *
@@ -28,6 +52,7 @@ export const SayRequest = proto3.makeMessageType(
   "connectrpc.eliza.v1.SayRequest",
   () => [
     { no: 1, name: "sentence", kind: "scalar", T: 9 /* ScalarType.STRING */ },
+    { no: 2, name: "volume", kind: "enum", T: proto3.getEnumType(SayVolume) },
   ],
 );
 
@@ -53,6 +78,7 @@ export const ConverseRequest = proto3.makeMessageType(
   "connectrpc.eliza.v1.ConverseRequest",
   () => [
     { no: 1, name: "sentence", kind: "scalar", T: 9 /* ScalarType.STRING */ },
+    { no: 2, name: "volume", kind: "enum", T: proto3.getEnumType(ConverseVolume) },
   ],
 );
 

bundle-size/esbuild/src/js/index.js

@@ -0,0 +1,13 @@
+import { compressedFlag } from "@connectrpc/connect/protocol";
+import { SayRequest, SayVolume } from "./gen/connectrpc/eliza/v1/eliza_pb.js";
+import { proto3 } from "@bufbuild/protobuf";
+
+const testEnum = proto3.getEnumType(SayVolume);
+
+if (
+  compressedFlag === 1 &&
+  SayRequest.typeName === "connectrpc.eliza.v1.SayRequest" &&
+  testEnum.typeName === "connectrpc.eliza.v1.SayVolume"
+) {
+  console.log("esbuild (js) OK");
+}

bundle-size/esbuild/src/ts/gen/connectrpc/eliza/v1/eliza_connect.d.ts

@@ -0,0 +1,75 @@
+// Copyright 2022-2023 The Connect Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// @generated by protoc-gen-connect-es v1.3.0 with parameter "target=ts+dts"
+// @generated from file connectrpc/eliza/v1/eliza.proto (package connectrpc.eliza.v1, syntax proto3)
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConverseRequest, ConverseResponse, IntroduceRequest, IntroduceResponse, SayRequest, SayResponse } from "./eliza_pb.js";
+import { MethodIdempotency, MethodKind } from "@bufbuild/protobuf";
+
+/**
+ * ElizaService provides a way to talk to Eliza, a port of the DOCTOR script
+ * for Joseph Weizenbaum's original ELIZA program. Created in the mid-1960s at
+ * the MIT Artificial Intelligence Laboratory, ELIZA demonstrates the
+ * superficiality of human-computer communication. DOCTOR simulates a
+ * psychotherapist, and is commonly found as an Easter egg in emacs
+ * distributions.
+ *
+ * @generated from service connectrpc.eliza.v1.ElizaService
+ */
+export declare const ElizaService: {
+  readonly typeName: "connectrpc.eliza.v1.ElizaService",
+  readonly methods: {
+    /**
+     * Say is a unary RPC. Eliza responds to the prompt with a single sentence.
+     *
+     * @generated from rpc connectrpc.eliza.v1.ElizaService.Say
+     */
+    readonly say: {
+      readonly name: "Say",
+      readonly I: typeof SayRequest,
+      readonly O: typeof SayResponse,
+      readonly kind: MethodKind.Unary,
+      readonly idempotency: MethodIdempotency.NoSideEffects,
+    },
+    /**
+     * Converse is a bidirectional RPC. The caller may exchange multiple
+     * back-and-forth messages with Eliza over a long-lived connection. Eliza
+     * responds to each ConverseRequest with a ConverseResponse.
+     *
+     * @generated from rpc connectrpc.eliza.v1.ElizaService.Converse
+     */
+    readonly converse: {
+      readonly name: "Converse",
+      readonly I: typeof ConverseRequest,
+      readonly O: typeof ConverseResponse,
+      readonly kind: MethodKind.BiDiStreaming,
+    },
+    /**
+     * Introduce is a server streaming RPC. Given the caller's name, Eliza
+     * returns a stream of sentences to introduce itself.
+     *
+     * @generated from rpc connectrpc.eliza.v1.ElizaService.Introduce
+     */
+    readonly introduce: {
+      readonly name: "Introduce",
+      readonly I: typeof IntroduceRequest,
+      readonly O: typeof IntroduceResponse,
+      readonly kind: MethodKind.ServerStreaming,
+    },
+  }
+};
+

bundle-size/webpack/src/gen/connectrpc/eliza/v1/eliza_connect.js → bundle-size/esbuild/src/ts/gen/connectrpc/eliza/v1/eliza_connect.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-// @generated by protoc-gen-connect-es v1.3.0 with parameter "target=js"
+// @generated by protoc-gen-connect-es v1.3.0 with parameter "target=ts+dts"
 // @generated from file connectrpc/eliza/v1/eliza.proto (package connectrpc.eliza.v1, syntax proto3)
 /* eslint-disable */
 // @ts-nocheck
@@ -71,5 +71,5 @@ export const ElizaService = {
       kind: MethodKind.ServerStreaming,
     },
   }
-};
+} as const;