@zachacious/protoc-gen-connect-vue 1.0.20 → 1.0.21

package/README.md

@@ -16,6 +16,17 @@ Protoc-gen-connect-vue attempts to create the full SDK - The client and API Wrap
 - **Message Initializers:** A createEmpty utility to generate default objects for any Protobuf message type.
 - **Query Key Factory:** Centralized query keys to simplify manual cache invalidation.
 
+## **Compatibility**
+
+| Dependency | Supported versions |
+| --- | --- |
+| `@connectrpc/connect` / `@connectrpc/connect-web` | v1.6+ and v2 |
+| `@bufbuild/protobuf` / `protoc-gen-es` codegen | v2 |
+| `@tanstack/vue-query` | v5 |
+| Vue | 3 |
+
+The generated client configures credentials through a `fetch` override rather than the version-specific `credentials` transport option, so the same generated code type-checks against both connect-web v1.6+ and v2. See the [CHANGELOG](CHANGELOG.md) for the 1.0.21 upgrade notes.
+
 ## **Installation**
 
 ```bash
@@ -93,6 +104,22 @@ setSDKErrorCallback((err, url) => {
 });
 ```
 
+### **3. Credentials / Cookies**
+
+The generated transport sends cookies cross-origin by default (`credentials: "include"`), applied through a `fetch` override so it works with both `@connectrpc/connect-web` v1 (>= 1.6) and v2 — v2 removed the `credentials` transport option, and the `fetch` override is the recommended replacement.
+
+If your backend's CORS configuration doesn't allow credentials, change the mode at runtime:
+
+```TypeScript
+
+import { setFetchCredentials } from '@/api/generated';
+
+// "include" (default) | "same-origin" | "omit"
+setFetchCredentials('same-origin');
+```
+
+> **Upgrading from 1.0.20 or earlier:** previous releases passed a `fetchOptions` option that connect-web silently ignored, so credentials were never actually applied. From 1.0.21 the `"include"` default genuinely takes effect — if a cross-origin backend's CORS isn't configured for credentials, set `"same-origin"` at startup to keep the old behavior. Details in the [CHANGELOG](CHANGELOG.md).
+
 ## **Usage**
 
 ### **Using Hooks and Manual Wrappers**

package/dist/generator.js

@@ -77276,7 +77276,7 @@ ${lanes.join(`
             if (!links2.hasReportedStatementInAmbientContext) {
               return links2.hasReportedStatementInAmbientContext = grammarErrorOnFirstToken(node, Diagnostics.Statements_are_not_allowed_in_ambient_contexts);
             }
-          } else {}
+          }
         }
         return false;
       }
@@ -86926,7 +86926,7 @@ ${lanes.join(`
               ], 2));
               setParentRecursive(requireStatement, false);
               statements = insertStatementAfterCustomPrologue(statements.slice(), requireStatement);
-            } else {}
+            }
           }
         }
         if (statements !== visited.statements) {
@@ -246201,7 +246201,7 @@ ${lanes.join(`
             if (!links2.hasReportedStatementInAmbientContext) {
               return links2.hasReportedStatementInAmbientContext = grammarErrorOnFirstToken(node, Diagnostics.Statements_are_not_allowed_in_ambient_contexts);
             }
-          } else {}
+          }
         }
         return false;
       }
@@ -255665,7 +255665,7 @@ ${lanes.join(`
               ], 2));
               setParentRecursive(requireStatement, false);
               statements = insertStatementAfterCustomPrologue(statements.slice(), requireStatement);
-            } else {}
+            }
           }
         }
         if (statements !== visited.statements) {
@@ -336813,6 +336813,7 @@ var KNOWN_WKT = [
 ];
 var currentDir = new URL(".", import.meta.url).pathname;
 var templateDir = path.join(currentDir, "..", "templates");
+var pkg = JSON.parse(fs.readFileSync(path.join(currentDir, "..", "package.json"), "utf-8"));
 var templates = {
   client: fs.readFileSync(path.join(templateDir, "client.ts.mustache"), "utf-8"),
   api: fs.readFileSync(path.join(templateDir, "api.ts.mustache"), "utf-8"),
@@ -336922,7 +336923,7 @@ function processService(service) {
 }
 var plugin = createEcmaScriptPlugin({
   name: "protoc-gen-connect-vue",
-  version: "v1.10.0",
+  version: `v${pkg.version}`,
   generateTs: (schema) => {
     const service = schema.files.flatMap((f) => f.services)[0];
     if (!service)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zachacious/protoc-gen-connect-vue",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "Smart TanStack Query & ConnectRPC SDK generator for Vue.js",
   "type": "module",
   "license": "MIT",

package/templates/client.ts.mustache

@@ -32,6 +32,23 @@ export type ErrorCallback = (error: ConnectError, url: string) => void;
 let onError: ErrorCallback = () => {};
 export const setSDKErrorCallback = (cb: ErrorCallback) => { onError = cb; };
 
+// --- FETCH CREDENTIALS ---
+// connect-web v1 exposed a `credentials` option on the transport; v2 removed it
+// in favor of overriding `fetch`. Wrapping fetch works on both major versions.
+const credentialsMode = ref<RequestCredentials>("include");
+
+/**
+ * Set the fetch credentials mode ("include" | "same-origin" | "omit").
+ * Defaults to "include" so cookie-based auth works cross-origin.
+ * Takes effect on the next request; no transport rebuild required.
+ */
+export const setFetchCredentials = (mode: RequestCredentials) => {
+  credentialsMode.value = mode;
+};
+
+const fetchWithCredentials: typeof globalThis.fetch = (input, init) =>
+  globalThis.fetch(input, { ...init, credentials: credentialsMode.value });
+
 const transportInterceptor: Interceptor = (next) => async (req) => {
   const token = await resolveToken();
   if (token) req.header.set("x-api-key", token);
@@ -54,7 +71,7 @@ export const useGrpcClient = () => {
   const transport = computed(() => createConnectTransport({
     baseUrl: baseUrl.value,
     interceptors: [transportInterceptor],
-    fetchOptions: { credentials: "include" },
+    fetch: fetchWithCredentials,
   }));
 
   const client = computed(() => createClient({{serviceName}}, transport.value));
@@ -103,6 +120,11 @@ async function handleUpdate() {
   <p>{{ manualResult }}</p>
 </template>
 
+// Cookies are sent cross-origin by default (credentials: "include").
+// If your backend's CORS config doesn't allow credentials, opt out with:
+// import { setFetchCredentials } from '@/api';
+// setFetchCredentials("same-origin");
+
 // 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';