Update gRPCweb example

.gitignore

@@ -9,3 +9,4 @@ cmd/sni/sni
 cmd/sni/sni.exe
 cmd/sni/rsrc_windows_386.syso
 cmd/sni/rsrc_windows_amd64.syso
+!**/.keep

examples/grpcweb/.gitignore

@@ -0,0 +1,37 @@
+lib/*.ts
+lib/*.js
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/grpcweb/README.md

@@ -0,0 +1,24 @@
+# SNI gRPC for Web
+
+## Requirements
+* Node 18+
+
+## Setup
+First, you will need to install the Node.js dependencies.
+```sh
+npm install
+```
+
+Once that is done installing, you can run the page locally by using the `dev` command.
+```sh
+npm run dev
+```
+You can now visit the project at [`localhost:3000`](http://localhost:3000) and list your connected devices.
+
+## Generating Client Files
+You can generate the client files independently with the `compile` command. This is done automatically in `dev` and `build`.
+```sh
+npm run compile
+```
+
+This will populate the `lib` folder with Javascript and Typescript definitions to use in your project.

examples/grpcweb/app/devices.module.css

@@ -0,0 +1,71 @@
+.container {
+  min-width: 420px;
+}
+
+@media (max-width: 600px) {
+  .container {
+    min-width: 100%;
+  }
+}
+
+.actionContainer {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  margin: 1rem 0;
+}
+
+.btn {
+  background-color: rgb(var(--foreground-rgb));
+  border: 1px solid rgb(var(--foreground-rgb));
+  border-radius: 4px;
+  color: rgb(var(--background-rgb));
+  cursor: pointer;
+  display: inline-block;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.42857;
+  margin-bottom: 0;
+  padding: 6px 12px;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+}
+
+.btn.secondary {
+  background-color: transparent;
+  border-color: rgb(var(--accent-rgb));
+  color: rgb(var(--accent-rgb));
+  font-size: 12px;
+  padding: 3px 6px;
+}
+
+.btn.secondary:hover {
+  color: rgb(var(--foreground-rgb));
+  border-color: rgb(var(--foreground-rgb));
+}
+
+.list {
+  margin-top: 2rem;
+  border-top: 1px solid rgb(var(--foreground-rgb));
+  padding-top: 2rem;
+}
+
+.device_name {
+  margin-bottom: 0.5rem;
+}
+
+.device_label {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  padding: 4px;
+}
+
+.json {
+  font-size: 12px;
+  margin: 1rem 0;
+  padding: 1rem;
+  border: 1px solid rgb(var(--accent-muted-rgb));
+  border-radius: var(--border-radius);
+}

examples/grpcweb/app/devices.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import * as SNI from '@/lib/sni'
+import * as SNIClient from '@/lib/sni.client'
+import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport'
+import { DevicesResponse_Device } from '@/lib/sni'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import styles from './devices.module.css'
+
+let transport = new GrpcWebFetchTransport({
+  baseUrl: 'http://localhost:8190'
+})
+
+const listDevices = async () => {
+  try {
+    const DevicesClient = new SNIClient.DevicesClient(transport)
+    const req = SNI.DevicesRequest.create()
+    const devices = await DevicesClient.listDevices(req)
+    return devices.response.devices
+  } catch (err: unknown) {
+    const error = err as Error
+    console.error(error.message)
+    let msg = error.message
+    if (error.message.includes('Failed to fetch')) {
+      msg = 'Could not connect to SNI'
+    }
+    toast.error(msg)
+  }
+}
+
+const DeviceButton = ({ onUpdate }: { onUpdate: (devices: any) => void }) => {
+  return (
+    <button
+      className={styles.btn}
+      onClick={async (evt) => {
+      evt.preventDefault()
+      const devices = await listDevices()
+      onUpdate(devices)
+    }}>
+      List Devices
+    </button>
+  )
+}
+
+const Device = ({ displayName = '', ...props }: DevicesResponse_Device) => {
+  const [expanded, setExpanded] = useState(false)
+  return (
+    <li>
+      <div className={styles.device_name}>
+        <span className={styles.device_label}>{displayName}</span>
+      </div>
+      <button
+        className={`${styles.btn} ${styles.secondary}`}
+        onClick={(evt) => {
+          evt.preventDefault()
+          setExpanded(!expanded)
+        }}
+      >
+        {expanded ? 'Hide full data' : 'View full data'}
+      </button>
+      {expanded && (
+        <div className={styles.json}>
+          <pre>
+            {JSON.stringify(props, null, 2)}
+          </pre>
+        </div>
+      )}
+    </li>
+  )
+}
+
+const DeviceList = ({ devices }: { devices: DevicesResponse_Device[]|null }) => {
+  if (!devices) {
+    return null
+  }
+
+  if (devices.length === 0) {
+    return (
+      <div style={{ textAlign: 'center' }}>
+        No devices found
+      </div>
+    )
+  }
+  return (
+    <ol className={styles.list}>
+      {devices.map((device) => (
+        <Device key={device.uri} {...device} />
+      ))}
+    </ol>
+  )
+}
+
+const Devices = () => {
+  const [devices, setDevices] = useState(null)
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.actionContainer}>
+        <DeviceButton onUpdate={setDevices} />
+      </div>
+      {devices && (
+        <div>
+          <DeviceList devices={devices} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Devices

examples/grpcweb/app/globals.css

@@ -0,0 +1,49 @@
+:root {
+  --max-width: 1100px;
+  --border-radius: 4px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-rgb: 255, 255, 255;
+  --accent-rgb: 54, 54, 54;
+  --accent-muted-rgb: 204, 204, 204;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --accent-rgb: 204, 204, 204;
+    --accent-muted-rgb: 54, 54, 54;
+    --background-rgb: 0, 0, 0;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: rgb(var(--background-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

examples/grpcweb/app/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { Toaster } from 'sonner'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'SNI gRPC Web Example',
+  description: 'An example of SNI being used in the web browser',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        {children}
+        <Toaster
+          theme="system"
+        />
+      </body>
+    </html>
+  )
+}

examples/grpcweb/app/page.module.css

@@ -0,0 +1,18 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
+.main h1 {
+  margin-bottom: 2rem;
+}
+
+@media (max-width: 600px) {
+  .main {
+    padding: 2rem;
+  }
+}

examples/grpcweb/app/page.tsx

@@ -0,0 +1,13 @@
+import Devices from './devices'
+import styles from './page.module.css'
+
+export default function Home() {
+  return (
+    <main className={styles.main}>
+      <h1>SNI gRPC Web</h1>
+      <div>
+        <Devices />
+      </div>
+    </main>
+  )
+}