@zachacious/protoc-gen-connect-vue 1.0.2

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@zachacious/protoc-gen-connect-vue",
+  "version": "1.0.2",
+  "description": "Smart TanStack Query & ConnectRPC SDK generator for Vue.js",
+  "type": "module",
+  "main": "dist/generator.js",
+  "bin": {
+    "protoc-gen-connect-vue": "bin/protoc-gen-connect-vue"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "templates"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "bun build ./src/generator.ts --outdir ./dist --target node --bundle",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@bufbuild/protobuf": "^2.10.2",
+    "@bufbuild/protoplugin": "^2.10.2",
+    "mustache": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/mustache": "^4.2.6",
+    "@types/node": "^25.0.3",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
+  }
+}

package/templates/api.ts.mustache

@@ -0,0 +1,56 @@
+import { computed } 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}}
+import type { {{#types}}{{.}}, {{/types}} } from "{{{path}}}";
+{{/externalImports}}
+
+export type APIResponse<T> = { error: string | null; data: T | null; };
+
+async function callConnect<ReqT, ResT, DataT>(
+  connectMethod: (req: ReqT) => Promise<ResT>,
+  request: ReqT,
+  dataExtractor: (res: ResT) => DataT
+): Promise<APIResponse<DataT>> {
+  try {
+    const res = await connectMethod(request);
+    return { error: null, data: dataExtractor(res) };
+  } catch (err) {
+    return { 
+      error: err instanceof ConnectError ? err.message : "Unknown error", 
+      data: null 
+    };
+  }
+}
+
+export const useApi = () => {
+  const { client } = useGrpcClient();
+  const queryClient = useQueryClient();
+
+  // Global background activity tracking
+  const isFetching = useIsFetching();
+  const isMutating = useIsMutating();
+  const isGlobalLoading = computed(() => isFetching.value > 0 || isMutating.value > 0);
+
+  {{#rpcs}}
+  {{> rpc}}
+  {{/rpcs}}
+
+  return {
+    {{#rpcs}}
+    {{functionName}},
+    {{hookName}},
+    {{/rpcs}}
+    isGlobalLoading,
+  };
+};

package/templates/client.ts.mustache

@@ -0,0 +1,128 @@
+import { {{serviceName}} } from './gen/{{{protoPbFile}}}';
+import { createClient, ConnectError, type Interceptor } from "@connectrpc/connect";
+import { createConnectTransport } from "@connectrpc/connect-web"; 
+
+let baseUrl = 'http://localhost:3000';
+
+/**
+ * Configure the API endpoint at runtime.
+ */
+export const setBaseUrl = (url: string) => {
+  baseUrl = url;
+};
+
+// --- AUTH RESOLVER ---
+export type AuthResolver = () => string | null | Promise<string | null>;
+let resolveToken: AuthResolver = () => null;
+export const setAuthResolver = (resolver: AuthResolver) => { resolveToken = resolver; };
+
+// --- ERROR CALLBACK ---
+export type ErrorCallback = (error: ConnectError, url: string) => void;
+let onError: ErrorCallback = () => {};
+export const setSDKErrorCallback = (cb: ErrorCallback) => { onError = cb; };
+
+const transportInterceptor: Interceptor = (next) => async (req) => {
+  const token = await resolveToken();
+  if (token) req.header.set("x-api-key", token);
+
+  try {
+    return await next(req);
+  } catch (err) {
+    if (err instanceof ConnectError) {
+      onError(err, req.url);
+    }
+    throw err;
+  }
+};
+
+export const transport = createConnectTransport({
+  baseUrl,
+  interceptors: [transportInterceptor],
+});
+
+export const client = createClient({{serviceName}}, transport);
+
+export const globalQueryConfig = {
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+      gcTime: 1000 * 60 * 30,
+      networkMode: 'offlineFirst',
+    },
+  },
+};
+
+export const useGrpcClient = () => ({ client });
+
+/*
+
+// the following is an example of how to use the hybrid api 
+
+// this generated sdk uses both raw wrappers and tanstack query
+
+<script setup lang="ts">
+import { useApi } from "@/api";
+import { ref } from "vue";
+
+const api = useApi();
+
+// 1. Using the TanStack Hook (Auto-refetches)
+const { data, isLoading } = api.useGetProfileQuery({ userId: "1" });
+
+// 2. Using the Manual Wrapper (For actions/buttons)
+const manualResult = ref("");
+async function handleUpdate() {
+  const { data, error } = await api.updateProfile({ name: "New User" });
+  manualResult.value = error ? error : "Success!";
+}
+</script>
+
+<template>
+  <div v-if="isLoading">Loading...</div>
+  <div v-else>{{ data?.name }}</div>
+  
+  <button @click="handleUpdate">Update Manually</button>
+  <p>{{ manualResult }}</p>
+</template>
+
+// use this to set the error interceptor - for instance to log to sentry or something
+import { setAuthResolver, setSDKErrorCallback } from '@/api';
+import { useAuthStore } from '@/stores/auth';
+
+const auth = useAuthStore();
+
+// Dynamic Auth: Returns current token from Pinia
+setAuthResolver(() => auth.token);
+
+// Flexible Error Handling:
+setSDKErrorCallback((err, url) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.error(`SDK Error at ${url}:`, err.message);
+  }
+  
+  // Custom Production Logic
+  if (err.code === 16) { // Unauthenticated
+    auth.logout();
+    window.location.href = '/login';
+  }
+});
+
+
+// how to setup the auth interceptors
+// to make sure the endpoints get the token
+
+// src/stores/auth.ts
+import { defineStore } from 'pinia';
+import { setAuthResolver } from '@/api/client';
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref(null);
+
+  // Register with the SDK
+  setAuthResolver(() => token.value);
+
+  return { token };
+});
+
+
+*/

package/templates/index.ts.mustache

@@ -0,0 +1,5 @@
+// @generated
+// DO NOT EDIT
+
+export * from "./api";
+export * from "./client";

package/templates/rpc.ts.mustache

@@ -0,0 +1,50 @@
+/**
+   * 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;
+  };
+
+  /**
+   * 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}}
+  };