-
-
Notifications
You must be signed in to change notification settings - Fork 55
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
36a5655
commit ae5a34f
Showing
41 changed files
with
2,265 additions
and
1,198 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,160 @@ | ||
| /** @jsxImportSource solid-js */ | ||
|
|
||
| // import { createClient, FetchTransport } from "@rspc/client"; | ||
| // import { createSolidQueryHooks } from "@rspc/solid"; | ||
| import { | ||
| QueryClient, | ||
| QueryClientProvider, | ||
| createQuery, | ||
| } from "@tanstack/solid-query"; | ||
| import { initRspc, httpLink, wsLink } from "@rspc/client"; | ||
| import { tauriLink } from "@rspc/tauri"; | ||
| import { createSolidQueryHooks } from "@rspc/solid-query"; | ||
| import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"; | ||
| import { createSignal } from "solid-js"; | ||
|
|
||
| // Export from Rust. Run `cargo run -p example-axum` to start server and export it! | ||
| // import { Procedures } from "../../../bindings"; | ||
| import type { Procedures } from "../../../bindings"; | ||
|
|
||
| const fetchQueryClient = new QueryClient(); | ||
| // const fetchClient = createClient<Procedures>({ | ||
| // transport: new FetchTransport("http://localhost:4000/rspc"), | ||
| // }); | ||
|
|
||
| // const rspc = createSolidQueryHooks<Procedures>(); | ||
|
|
||
| // function Example() { | ||
| // const echo = rspc.createQuery(() => ["echo", "somevalue"]); | ||
| // const sendMsg = rspc.createMutation("sendMsg"); | ||
|
|
||
| // sendMsg.mutate("Sending"); | ||
|
|
||
| // return ( | ||
| // <div style="background-color: rgba(255, 105, 97, .5);"> | ||
| // <h1>SolidJS</h1> | ||
| // <p>{echo.data}</p> | ||
| // {/* TODO: Finish SolidJS example */} | ||
| // </div> | ||
| // ); | ||
| // } | ||
|
|
||
| function App() { | ||
| return null; | ||
| // {/* <rspc.Provider client={fetchClient} queryClient={fetchQueryClient}> */} | ||
| // {/* <Example /> */} | ||
| // {/* </rspc.Provider> */} | ||
| const fetchClient = initRspc<Procedures>({ | ||
| links: [ | ||
| // loggerLink(), | ||
|
|
||
| httpLink({ | ||
| url: "http://localhost:4000/rspc", | ||
|
|
||
| // You can enable batching -> This is generally a good idea unless your doing HTTP caching | ||
| // batch: true, | ||
|
|
||
| // You can override the fetch function if required | ||
| // fetch: (input, init) => fetch(input, { ...init, credentials: "include" }), // Include Cookies for cross-origin requests | ||
|
|
||
| // Provide static custom headers | ||
| // headers: { | ||
| // "x-demo": "abc", | ||
| // }, | ||
|
|
||
| // Provide dynamic custom headers | ||
| // headers: ({ op }) => ({ | ||
| // "x-procedure-path": op.path, | ||
| // }), | ||
| }), | ||
| ], | ||
| }); | ||
|
|
||
| const wsQueryClient = new QueryClient(); | ||
| const wsClient = initRspc<Procedures>({ | ||
| links: [ | ||
| // loggerLink(), | ||
|
|
||
| wsLink({ | ||
| url: "ws://localhost:4000/rspc/ws", | ||
| }), | ||
| ], | ||
| }); | ||
|
|
||
| const tauriQueryClient = new QueryClient(); | ||
| const tauriClient = initRspc<Procedures>({ | ||
| links: [ | ||
| // loggerLink(), | ||
|
|
||
| tauriLink(), | ||
| ], | ||
| }); | ||
|
|
||
| // TODO: Allowing one of these to be used for multiple clients! -> Issue is with key mapper thing | ||
| // TODO: Right now we are abusing it not working so plz don't do use one of these with multiple clients in your own apps. | ||
| export const rspc = createSolidQueryHooks<Procedures>(); | ||
| // export const rspc2 = createReactQueryHooks<Procedures>(wsClient); | ||
|
|
||
| function Example({ name }: { name: string }) { | ||
| const [rerenderProp, setRendererProp] = createSignal(Date.now().toString()); | ||
| const version = rspc.createQuery(() => ["version"]); | ||
| const transformMe = rspc.createQuery(() => ["transformMe"]); | ||
| const echo = rspc.createQuery(() => ["echo", "Hello From Frontend!"]); | ||
| const sendMsg = rspc.createMutation("sendMsg"); | ||
| const error = rspc.createQuery(() => ["error"], { | ||
| retry: false, | ||
| }); | ||
|
|
||
| const [subId, setSubId] = createSignal<number | null>(null); | ||
| const [enabled, setEnabled] = createSignal(true); | ||
|
|
||
| rspc.createSubscription( | ||
| () => ["testSubscriptionShutdown"], | ||
| () => ({ | ||
| enabled: enabled(), | ||
| onData(msg) { | ||
| setSubId(msg); | ||
| }, | ||
| }) | ||
| ); | ||
|
|
||
| return ( | ||
| <div | ||
| style={{ | ||
| border: "black 1px solid", | ||
| }} | ||
| > | ||
| <h1>{name}</h1> | ||
| <p>Using rspc version: {version.data}</p> | ||
| <p>Echo response: {echo.data}</p> | ||
| <p>Error returned: {JSON.stringify(error.error)} </p> | ||
| <p>Transformed Query: {transformMe.data}</p> | ||
| <ExampleSubscription rerenderProp={rerenderProp()} /> | ||
| <button onClick={() => setRendererProp(Date.now().toString())}> | ||
| Rerender subscription | ||
| </button> | ||
| <button | ||
| onClick={() => sendMsg.mutate("Hello!")} | ||
| disabled={sendMsg.isLoading} | ||
| > | ||
| Send Msg! | ||
| </button> | ||
| <br /> | ||
| <input | ||
| type="checkbox" | ||
| onClick={(e) => setEnabled((e.currentTarget as any).checked)} | ||
| value="false" | ||
| disabled={subId() === null} | ||
| /> | ||
| {`${enabled() ? "Enabled" : "Disabled"} ${subId()}`} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default App; | ||
| function ExampleSubscription({ rerenderProp }: { rerenderProp: string }) { | ||
| const [i, setI] = createSignal(0); | ||
| rspc.createSubscription( | ||
| () => ["pings"], | ||
| () => ({ | ||
| onData(_) { | ||
| setI((i) => i + 1); | ||
| }, | ||
| }) | ||
| ); | ||
|
|
||
| return ( | ||
| <p> | ||
| Pings received: {i()} {rerenderProp} | ||
| </p> | ||
| ); | ||
| } | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <div style="backgroundColor: 'rgba(50, 205, 50, .5)'"> | ||
| <h1>Solid</h1> | ||
| {/* TODO: rspc.Provider implies fetchClient??? */} | ||
| <rspc.Provider client={fetchClient} queryClient={fetchQueryClient}> | ||
| <QueryClientProvider client={fetchQueryClient}> | ||
| <Example name="Fetch Transport" /> | ||
| </QueryClientProvider> | ||
| </rspc.Provider> | ||
| <rspc.Provider client={wsClient} queryClient={wsQueryClient}> | ||
| <QueryClientProvider client={wsQueryClient}> | ||
| <Example name="Websocket Transport" /> | ||
| </QueryClientProvider> | ||
| </rspc.Provider> | ||
| <rspc.Provider client={tauriClient} queryClient={tauriQueryClient}> | ||
| <QueryClientProvider client={tauriQueryClient}> | ||
| <Example name="Tauri Transport" /> | ||
| </QueryClientProvider> | ||
| </rspc.Provider> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <script lang="ts"> | ||
| import { createSvelteQueryHooks } from "@rspc/svelte-query"; | ||
| import type { Procedures } from "../../bindings.ts"; | ||
| import ExampleSubscription from "./ExampleSubscription.svelte"; | ||
| export let name: string; | ||
| const rspc = createSvelteQueryHooks<Procedures>(); | ||
| let rerenderProp = Date.now().toString(); | ||
| const version = rspc.createQuery(["version"]); | ||
| const transformMe = rspc.createQuery(["transformMe"]); | ||
| const echo = rspc.createQuery(["echo", "Hello From Frontend!"]); | ||
| const sendMsg = rspc.createMutation("sendMsg"); | ||
| const error = rspc.createQuery(["error"], { | ||
| retry: false, | ||
| }); | ||
| let subId: number | null = null; | ||
| let enabled = true; | ||
| rspc.createSubscription(["testSubscriptionShutdown"], { | ||
| enabled, | ||
| onData(msg) { | ||
| subId = msg; | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <div style="border: 'black 1px solid'"> | ||
| <h1>{name}</h1> | ||
| <p>Using rspc version: {$version.data}</p> | ||
| <p>Echo response: {$echo.data}</p> | ||
| <p>Error returned: {JSON.stringify($error.error)}</p> | ||
| <p>Transformed Query: {$transformMe.data}</p> | ||
| <ExampleSubscription {rerenderProp} /> | ||
| <button on:click={() => (rerenderProp = Date.now().toString())}> | ||
| Rerender subscription | ||
| </button> | ||
| <button | ||
| on:click={() => $sendMsg.mutate("Hello!")} | ||
| disabled={$sendMsg.isLoading} | ||
| > | ||
| Send Msg! | ||
| </button> | ||
| <br /> | ||
| <input | ||
| type="checkbox" | ||
| on:click={(e) => (enabled = e.currentTarget.checked)} | ||
| value="false" | ||
| disabled={subId === null} | ||
| /> | ||
| {`${enabled ? "Enabled" : "Disabled"} ${subId}`} | ||
| </div> |
20 changes: 20 additions & 0 deletions
20
examples/astro/src/components/svelte/ExampleSubscription.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <script lang="ts"> | ||
| import { createSvelteQueryHooks } from "@rspc/svelte-query"; | ||
| import type { Procedures } from "../../bindings.ts"; | ||
| const rspc = createSvelteQueryHooks<Procedures>(); | ||
| export let rerenderProp: string; | ||
| let i = 0; | ||
| rspc.createSubscription(["pings"], { | ||
| onData(_) { | ||
| i = i + 1; | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <p> | ||
| Pings received: {i} | ||
| {rerenderProp} | ||
| </p> |
Oops, something went wrong.