@zachacious/protoc-gen-connect-vue 1.0.4 → 1.0.6

package/README.md

@@ -59,7 +59,7 @@ plugins:
  out: gen
  opt: target=ts
  # 3. Smart SDK Generator
- - local: connect-vue
+ - local: protoc-gen-connect-vue
  out: src/api
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zachacious/protoc-gen-connect-vue",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Smart TanStack Query & ConnectRPC SDK generator for Vue.js",
   "type": "module",
   "license": "MIT",
@@ -20,7 +20,9 @@
   "files": [
     "dist",
     "bin",
-    "templates"
+    "templates",
+    "README.md",
+    "LICENSE"
   ],
   "publishConfig": {
     "access": "public"

package/templates/api.ts.mustache

@@ -1,14 +1,15 @@
-import { computed } from "vue";
-import { useQuery, useMutation, useInfiniteQuery, useQueryClient, useIsFetching, useIsMutating } from "@tanstack/vue-query";
+import { computed, unref } from "vue";
+import { 
+  useQuery, 
+  useMutation, 
+  useInfiniteQuery, 
+  useQueryClient, 
+  useIsFetching, 
+  useIsMutating 
+} from "@tanstack/vue-query";
 import { ConnectError } from "@connectrpc/connect";
 import { useGrpcClient } from "./client";
 
-import {
-  {{#rpcs}}
-  {{queryDefinitionName}} as {{queryDefinitionName}}Def,
-  {{/rpcs}}
-} from "./gen/{{{connectQueryFile}}}";
-
 {{#wktImports}}import type { {{.}} } from "@bufbuild/protobuf";{{/wktImports}}
 {{#localImports}}import type { {{.}} } from "./gen/{{{protoPbFile}}}";{{/localImports}}
 {{#externalImports}}

package/templates/client.ts.mustache

@@ -1,14 +1,16 @@
+import { ref, computed } from "vue";
 import { {{serviceName}} } from './gen/{{{protoPbFile}}}';
 import { createClient, ConnectError, type Interceptor } from "@connectrpc/connect";
 import { createConnectTransport } from "@connectrpc/connect-web"; 
 
-let baseUrl = 'http://localhost:3000';
+// --- REACTIVE STATE ---
+const baseUrl = ref('http://localhost:3000');
 
 /**
  * Configure the API endpoint at runtime.
  */
 export const setBaseUrl = (url: string) => {
-  baseUrl = url;
+  baseUrl.value = url;
 };
 
 // --- AUTH RESOLVER ---
@@ -35,12 +37,20 @@ const transportInterceptor: Interceptor = (next) => async (req) => {
   }
 };
 
-export const transport = createConnectTransport({
-  baseUrl,
-  interceptors: [transportInterceptor],
-});
+/**
+ * useGrpcClient provides a reactive client.
+ * If baseUrl.value changes, the computed client updates automatically.
+ */
+export const useGrpcClient = () => {
+  const transport = computed(() => createConnectTransport({
+    baseUrl: baseUrl.value,
+    interceptors: [transportInterceptor],
+  }));
 
-export const client = createClient({{serviceName}}, transport);
+  const client = computed(() => createClient({{serviceName}}, transport.value));
+
+  return { client };
+};
 
 export const globalQueryConfig = {
   defaultOptions: {
@@ -52,8 +62,6 @@ export const globalQueryConfig = {
   },
 };
 
-export const useGrpcClient = () => ({ client });
-
 /*
 
 // the following is an example of how to use the hybrid api 

package/templates/rpc.ts.mustache

@@ -1,50 +1,59 @@
 /**
-   * Standard Async: {{functionName}}
-   */
-  const {{functionName}} = async (req: {{inputType}}): Promise<APIResponse<{{outputType}}>> => {
-    const res = await callConnect(client.{{functionName}}, req, (res) => res);
-    if (!res.error) queryClient.invalidateQueries({ queryKey: ["{{resource}}"] });
-    return res;
-  };
+ * Standard Async: {{functionName}}
+ * Used for manual actions. Invalidates the cache for this resource on success.
+ */
+const {{functionName}} = async (req: {{inputType}}): Promise<APIResponse<{{outputType}}>> => {
+  const res = await callConnect(client.value.{{functionName}}.bind(client.value), req, (res) => res);
+  if (!res.error) {
+    queryClient.invalidateQueries({ queryKey: ["{{resource}}"] });
+  }
+  return res;
+};
 
-  /**
-   * TanStack Hook: {{hookName}}
-   */
-  const {{hookName}} = (
-    {{#isQuery}}
-    input: {{inputType}}, 
-    options: any = {}
-    {{/isQuery}}
-    {{^isQuery}}
-    options: any = {}
-    {{/isQuery}}
-  ) => {
-    {{#isPaginated}}
-    return useInfiniteQuery({
-      ...{{queryDefinitionName}}Def,
-      ...options,
-      queryKey: ["{{resource}}", "{{functionName}}", input],
-      initialPageParam: 1,
-      getNextPageParam: options.getNextPageParam || ((lastPage: any) => lastPage.nextPage ?? undefined),
-    });
-    {{/isPaginated}}
-    {{^isPaginated}}
-    {{#isQuery}}
-    return useQuery({
-      ...{{queryDefinitionName}}Def,
-      ...options,
-      queryKey: ["{{resource}}", "{{functionName}}", input],
-    });
-    {{/isQuery}}
-    {{^isQuery}}
-    return useMutation({
-      ...{{queryDefinitionName}}Def,
-      ...options,
-      onSuccess: async (data, variables, context) => {
-        await queryClient.invalidateQueries({ queryKey: ["{{resource}}"] });
-        if (options.onSuccess) return options.onSuccess(data, variables, context);
-      },
-    });
-    {{/isQuery}}
-    {{/isPaginated}}
-  };
+/**
+ * TanStack Hook: {{hookName}}
+ * Provides reactive data binding with caching.
+ */
+const {{hookName}} = (
+  {{#isQuery}}
+  input: any, // Accepts Ref<{{inputType}}> or {{inputType}}
+  options: any = {}
+  {{/isQuery}}
+  {{^isQuery}}
+  options: any = {}
+  {{/isQuery}}
+) => {
+  {{#isPaginated}}
+  return useInfiniteQuery({
+    queryKey: ["{{resource}}", "{{functionName}}", input],
+    queryFn: async ({ pageParam }) => {
+      const req = { ...unref(input), page: pageParam }; 
+      return client.value.{{functionName}}(req);
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage: any) => lastPage.nextPage ?? undefined,
+    ...options,
+  });
+  {{/isPaginated}}
+  
+  {{^isPaginated}}
+  {{#isQuery}}
+  return useQuery({
+    queryKey: ["{{resource}}", "{{functionName}}", input],
+    queryFn: () => client.value.{{functionName}}(unref(input)),
+    ...options,
+  });
+  {{/isQuery}}
+  
+  {{^isQuery}}
+  return useMutation({
+    mutationFn: (req: {{inputType}}) => client.value.{{functionName}}(req),
+    onSuccess: async (data, variables, context) => {
+      await queryClient.invalidateQueries({ queryKey: ["{{resource}}"] });
+      if (options.onSuccess) return options.onSuccess(data, variables, context);
+    },
+    ...options,
+  });
+  {{/isQuery}}
+  {{/isPaginated}}
+};