mirrors/axum-connect
1
0
Fork 0
mirror of https://github.com/AThilenius/axum-connect.git synced 2024-11-24 06:19:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add an example React client that points to buf Eliza service

Browse source
This commit is contained in:
Alec Thilenius 2023-04-03 18:52:47 -07:00
parent ec1a3249f0
commit 7bc2b9f6f4
13 changed files with 1517 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
.vscode/settings.json vendored
View file

@ -1,3 +1,12 @@
{ {
"cSpell.words": ["codegen", "proto", "protobuf", "serde", "typecheck"] "cSpell.words": [
"bufbuild",
"codegen",
"proto",
"protobuf",
"protoc",
"serde",
"Thilenius",
"typecheck"
]
} }

123
axum-connect-examples/client/.gitignore vendored Normal file
View file

@ -0,0 +1,123 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
firebase-debug.log*
# Firebase cache
.firebase/
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# Build and dist directories
build
dist
dist_tmp
# Parcel caches
.cache
# Rust Stuff
target
# OSX Crap
.DS_Store
.parcel-cache
.next
# Test coverage output
/coverage/
# Docusaurus
.docusaurus
.cache-loader
/web/build
### C++ ###
# Prerequisites
*.d
# Compiled Object files
*.slo
*.lo
*.o
*.obj
# Precompiled Headers
*.gch
*.pch
# Compiled Dynamic libraries
*.so
*.dylib
*.dll
# Fortran module files
*.mod
*.smod
# Compiled Static libraries
*.lai
*.la
*.a
*.lib
# Executables
*.exe
*.out
*.app
# Yarn 2+
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

1
axum-connect-examples/client/.npmrc Normal file
View file

@ -0,0 +1 @@
@buf:registry=https://buf.build/gen/npm/v1

3
axum-connect-examples/client/.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}

8
axum-connect-examples/client/buf.gen.yaml Normal file
View file

@ -0,0 +1,8 @@
version: v1
plugins:
- plugin: es
out: gen
opt: target=ts
- plugin: connect-es
out: gen
opt: target=ts

27
axum-connect-examples/client/index.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="theme-color" content="#001529" />
<title>Axum Connect Example Client</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
background: #1e1e1e;
color: #ffffff;
margin: 0;
}
</style>
</head>
<body>
<span id="root">
<div>Loading</div>
</span>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

1174
axum-connect-examples/client/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

34
axum-connect-examples/client/package.json Normal file
View file

@ -0,0 +1,34 @@
{
"name": "axum-connect-examples-client",
"version": "1.0.0",
"description": "An example React client to demo end-to-end RPC calls",
"main": "index.js",
"repository": "https://github.com/AThilenius/axum-connect",
"author": "Alec Thilenius",
"license": "MIT",
"scripts": {
"dev": "vite",
"build": "tsc --noEmit && yarn vite build",
"preview": "vite preview"
},
"dependencies": {
"@buf/bufbuild_eliza.bufbuild_connect-es": "^0.8.4-20221224180530-f3801d450ef9.1",
"@bufbuild/connect": "^0.8.4",
"@bufbuild/connect-web": "^0.8.4",
"@bufbuild/protobuf": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@bufbuild/buf": "^1.15.0-1",
"@bufbuild/protoc-gen-connect-es": "^0.8.4",
"@bufbuild/protoc-gen-es": "^1.2.0",
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^3.1.0",
"prettier": "^2.8.7",
"tslib": "^2.5.0",
"typescript": "^5.0.2",
"vite": "^4.2.1"
}
}

71
axum-connect-examples/client/src/app.tsx Normal file
View file

@ -0,0 +1,71 @@
import React, { useEffect, useState } from "react";
import { createPromiseClient } from "@bufbuild/connect";
import { createConnectTransport } from "@bufbuild/connect-web";
import { ElizaService } from "@buf/bufbuild_eliza.bufbuild_connect-es/buf/connect/demo/eliza/v1/eliza_connect";
const transport = createConnectTransport({
baseUrl: "https://demo.connect.build",
});
const client = createPromiseClient(ElizaService, transport);
export const App: React.FC = () => {
useEffect(() => {
(async () => {
for await (const message of client.introduce({})) {
console.log(message);
}
})();
}, []);
const [inputValue, setInputValue] = useState("");
const [messages, setMessages] = useState<
{
fromMe: boolean;
message: string;
}[]
>([]);
return (
<>
<ol>
{messages.map((msg, index) => (
<li key={index}>
{`${msg.fromMe ? "ME:" : "ELIZA:"} ${msg.message}`}
</li>
))}
</ol>
<form
onSubmit={async (e) => {
e.preventDefault();
// Clear inputValue since the user has submitted.
setInputValue("");
// Store the inputValue in the chain of messages and
// mark this message as coming from "me"
setMessages((prev) => [
...prev,
{
fromMe: true,
message: inputValue,
},
]);
const response = await client.say({
sentence: inputValue,
});
setMessages((prev) => [
...prev,
{
fromMe: false,
message: response.sentence,
},
]);
}}
>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button type="submit">Send</button>
</form>
</>
);
};

9
axum-connect-examples/client/src/main.tsx Normal file
View file

@ -0,0 +1,9 @@
import { createRoot } from "react-dom/client";
import { App } from "~/app";
async function main() {
const root = createRoot(document.getElementById("root")!);
root.render(<App />);
}
main();

36
axum-connect-examples/client/tsconfig.json Normal file
View file

@ -0,0 +1,36 @@
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"alwaysStrict": true,
"baseUrl": ".",
"declaration": true,
"downlevelIteration": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": true,
"isolatedModules": true,
"jsx": "react-jsx",
"lib": ["dom", "dom.iterable", "esnext", "webworker"],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"paths": { "~/*": ["src/*"] },
"removeComments": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"strictFunctionTypes": true,
"strictNullChecks": true,
"target": "es6",
"useDefineForClassFields": true
},
"include": ["src/**/*"],
"exclude": ["node_modules/**/*"]
}

13
axum-connect-examples/client/vite.config.ts Normal file
View file

@ -0,0 +1,13 @@
import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"~": resolve(__dirname, "./src"),
},
},
});

8
buf.yaml Normal file
View file

@ -0,0 +1,8 @@
version: v1
name: buf.build/woodriver-energy/blink
breaking:
use:
- FILE
lint:
use:
- DEFAULT