@tanstack/vue-start-client 0.0.1 → 1.141.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/esm/StartClient.d.ts

@@ -0,0 +1,21 @@
+import { AnyRouter } from '@tanstack/router-core';
+import * as Vue from 'vue';
+declare global {
+    interface Window {
+        $_TSR?: {
+            cleanup?: () => void;
+            [key: string]: unknown;
+        };
+    }
+}
+export declare const StartClient: Vue.DefineComponent<Vue.ExtractPropTypes<{
+    router: {
+        type: () => AnyRouter;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+    router: {
+        type: () => AnyRouter;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;

package/dist/esm/StartClient.js

@@ -0,0 +1,26 @@
+import * as Vue from "vue";
+import { createVNode } from "vue";
+import { RouterProvider } from "@tanstack/vue-router";
+const StartClient = Vue.defineComponent({
+  name: "StartClient",
+  props: {
+    router: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    Vue.onMounted(() => {
+      Vue.nextTick(() => {
+        window.$_TSR?.cleanup?.();
+      });
+    });
+    return () => createVNode(RouterProvider, {
+      "router": props.router
+    }, null);
+  }
+});
+export {
+  StartClient
+};
+//# sourceMappingURL=StartClient.js.map

package/dist/esm/StartClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartClient.js","sources":["../../src/StartClient.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport { RouterProvider } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/router-core'\n\ndeclare global {\n  interface Window {\n    $_TSR?: {\n      cleanup?: () => void\n      [key: string]: unknown\n    }\n  }\n}\n\nexport const StartClient = Vue.defineComponent({\n  name: 'StartClient',\n  props: {\n    router: {\n      type: Object as () => AnyRouter,\n      required: true,\n    },\n  },\n  setup(props) {\n    // After Vue hydration is complete, trigger cleanup of $tsr scripts\n    // Use nextTick to ensure all child component onMounted hooks have completed\n    // This prevents removing scripts before components have finished transitioning\n    Vue.onMounted(() => {\n      Vue.nextTick(() => {\n        window.$_TSR?.cleanup?.()\n      })\n    })\n\n    return () => <RouterProvider router={props.router} />\n  },\n})\n"],"names":["StartClient","Vue","defineComponent","name","props","router","type","Object","required","setup","onMounted","nextTick","window","$_TSR","cleanup","_createVNode","RouterProvider"],"mappings":";;;MAaaA,cAAcC,IAAIC,gBAAgB;AAAA,EAC7CC,MAAM;AAAA,EACNC,OAAO;AAAA,IACLC,QAAQ;AAAA,MACNC,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACZ;AAAA;EAEFC,MAAML,OAAO;AAIXH,QAAIS,UAAU,MAAM;AAClBT,UAAIU,SAAS,MAAM;AACjBC,eAAOC,OAAOC,UAAO;AAAA,MACvB,CAAC;AAAA,IACH,CAAC;AAED,WAAO,MAAAC,YAAAC,gBAAA;AAAA,MAAA,UAA8BZ,MAAMC;AAAAA,OAAM,IAAA;AAAA,EACnD;AACF,CAAC;"}

package/dist/esm/hydrateStart.d.ts

@@ -0,0 +1,19 @@
+import { AnyRouter } from '@tanstack/router-core';
+import { App } from 'vue';
+/**
+ * Configure a Vue app to suppress expected hydration mismatch warnings
+ * for routes with ssr: false or ssr: 'data-only'
+ * Call this after createSSRApp and before app.mount()
+ *
+ * Note: We always suppress hydration warnings in Vue Start apps because:
+ * 1. Routes with ssr: 'data-only' or ssr: false cause expected mismatches
+ * 2. The ssr option is not reliably accessible from route.options for file-based routes
+ * 3. DevTools components also cause expected mismatches in development
+ * 4. In production builds, Vue strips these warnings anyway
+ */
+export declare function configureHydrationSuppressions(app: App, _router: AnyRouter): void;
+/**
+ * Vue-specific wrapper for hydrateStart that installs hydration mismatch
+ * suppression for routes with ssr: false or ssr: 'data-only' before returning
+ */
+export declare function hydrateStart(): Promise<AnyRouter>;

package/dist/esm/hydrateStart.js

@@ -0,0 +1,44 @@
+import { hydrateStart as hydrateStart$1 } from "@tanstack/start-client-core/client";
+function suppressSsrHydrationMismatches(_router) {
+  const originalWarn = console.warn;
+  const originalError = console.error;
+  const isHydrationMismatchMessage = (args) => {
+    for (const arg of args) {
+      if (typeof arg !== "string") continue;
+      if (arg.includes("Hydration completed but contains mismatches") || arg.includes("Hydration node mismatch") || arg.includes("Hydration text mismatch") || arg.includes("Hydration children mismatch") || arg.includes("Hydration class mismatch") || arg.includes("Hydration style mismatch") || arg.includes("Hydration attribute mismatch")) {
+        return true;
+      }
+    }
+    return false;
+  };
+  console.warn = (...args) => {
+    if (isHydrationMismatchMessage(args)) {
+      return;
+    }
+    originalWarn.apply(console, args);
+  };
+  console.error = (...args) => {
+    if (isHydrationMismatchMessage(args)) {
+      return;
+    }
+    originalError.apply(console, args);
+  };
+}
+function configureHydrationSuppressions(app, _router) {
+  app.config.warnHandler = (msg, _instance, _trace) => {
+    if (msg.includes("Hydration node mismatch") || msg.includes("Hydration text mismatch") || msg.includes("Hydration children mismatch") || msg.includes("Hydration class mismatch") || msg.includes("Hydration style mismatch") || msg.includes("Hydration attribute mismatch")) {
+      return;
+    }
+    console.warn(`[Vue warn]: ${msg}`);
+  };
+}
+async function hydrateStart() {
+  const router = await hydrateStart$1();
+  suppressSsrHydrationMismatches();
+  return router;
+}
+export {
+  configureHydrationSuppressions,
+  hydrateStart
+};
+//# sourceMappingURL=hydrateStart.js.map

package/dist/esm/hydrateStart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydrateStart.js","sources":["../../src/hydrateStart.ts"],"sourcesContent":["import { hydrateStart as coreHydrateStart } from '@tanstack/start-client-core/client'\nimport type { AnyRouter } from '@tanstack/router-core'\nimport type { App } from 'vue'\n\n/**\n * Suppress expected hydration mismatch warnings for routes with ssr: 'data-only' or ssr: false\n * These routes intentionally render different content on server vs client.\n *\n * Note: We always suppress hydration warnings in Vue Start apps because:\n * 1. Routes with ssr: 'data-only' or ssr: false cause expected mismatches\n * 2. The ssr option is not reliably accessible from route.options for file-based routes\n * 3. DevTools components also cause expected mismatches in development\n * 4. In production builds, Vue strips these warnings anyway\n */\nfunction suppressSsrHydrationMismatches(_router: AnyRouter): void {\n  const originalWarn = console.warn\n  const originalError = console.error\n\n  const isHydrationMismatchMessage = (args: Array<unknown>): boolean => {\n    // Check all args since Vue may pass message in different positions\n    for (const arg of args) {\n      if (typeof arg !== 'string') continue\n      if (\n        arg.includes('Hydration completed but contains mismatches') ||\n        arg.includes('Hydration node mismatch') ||\n        arg.includes('Hydration text mismatch') ||\n        arg.includes('Hydration children mismatch') ||\n        arg.includes('Hydration class mismatch') ||\n        arg.includes('Hydration style mismatch') ||\n        arg.includes('Hydration attribute mismatch')\n      ) {\n        return true\n      }\n    }\n    return false\n  }\n\n  console.warn = (...args) => {\n    if (isHydrationMismatchMessage(args)) {\n      return // Suppress hydration warnings\n    }\n    originalWarn.apply(console, args)\n  }\n\n  console.error = (...args) => {\n    if (isHydrationMismatchMessage(args)) {\n      return // Suppress hydration warnings\n    }\n    originalError.apply(console, args)\n  }\n}\n\n/**\n * Configure a Vue app to suppress expected hydration mismatch warnings\n * for routes with ssr: false or ssr: 'data-only'\n * Call this after createSSRApp and before app.mount()\n *\n * Note: We always suppress hydration warnings in Vue Start apps because:\n * 1. Routes with ssr: 'data-only' or ssr: false cause expected mismatches\n * 2. The ssr option is not reliably accessible from route.options for file-based routes\n * 3. DevTools components also cause expected mismatches in development\n * 4. In production builds, Vue strips these warnings anyway\n */\nexport function configureHydrationSuppressions(\n  app: App,\n  _router: AnyRouter,\n): void {\n  // Always install the warnHandler to suppress hydration warnings\n  // Vue's app.config.warnHandler intercepts dev warnings BEFORE console.warn\n  app.config.warnHandler = (msg, _instance, _trace) => {\n    // Suppress hydration mismatch warnings\n    if (\n      msg.includes('Hydration node mismatch') ||\n      msg.includes('Hydration text mismatch') ||\n      msg.includes('Hydration children mismatch') ||\n      msg.includes('Hydration class mismatch') ||\n      msg.includes('Hydration style mismatch') ||\n      msg.includes('Hydration attribute mismatch')\n    ) {\n      return // Suppress the warning\n    }\n    // Let other warnings through to console\n    console.warn(`[Vue warn]: ${msg}`)\n  }\n}\n\n/**\n * Vue-specific wrapper for hydrateStart that installs hydration mismatch\n * suppression for routes with ssr: false or ssr: 'data-only' before returning\n */\nexport async function hydrateStart(): Promise<AnyRouter> {\n  const router = await coreHydrateStart()\n  // Install console suppression before app.mount() is called\n  // This catches the \"Hydration completed but contains mismatches\" error\n  suppressSsrHydrationMismatches(router)\n  return router\n}\n"],"names":["coreHydrateStart"],"mappings":";AAcA,SAAS,+BAA+B,SAA0B;AAChE,QAAM,eAAe,QAAQ;AAC7B,QAAM,gBAAgB,QAAQ;AAE9B,QAAM,6BAA6B,CAAC,SAAkC;AAEpE,eAAW,OAAO,MAAM;AACtB,UAAI,OAAO,QAAQ,SAAU;AAC7B,UACE,IAAI,SAAS,6CAA6C,KAC1D,IAAI,SAAS,yBAAyB,KACtC,IAAI,SAAS,yBAAyB,KACtC,IAAI,SAAS,6BAA6B,KAC1C,IAAI,SAAS,0BAA0B,KACvC,IAAI,SAAS,0BAA0B,KACvC,IAAI,SAAS,8BAA8B,GAC3C;AACA,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,UAAQ,OAAO,IAAI,SAAS;AAC1B,QAAI,2BAA2B,IAAI,GAAG;AACpC;AAAA,IACF;AACA,iBAAa,MAAM,SAAS,IAAI;AAAA,EAClC;AAEA,UAAQ,QAAQ,IAAI,SAAS;AAC3B,QAAI,2BAA2B,IAAI,GAAG;AACpC;AAAA,IACF;AACA,kBAAc,MAAM,SAAS,IAAI;AAAA,EACnC;AACF;AAaO,SAAS,+BACd,KACA,SACM;AAGN,MAAI,OAAO,cAAc,CAAC,KAAK,WAAW,WAAW;AAEnD,QACE,IAAI,SAAS,yBAAyB,KACtC,IAAI,SAAS,yBAAyB,KACtC,IAAI,SAAS,6BAA6B,KAC1C,IAAI,SAAS,0BAA0B,KACvC,IAAI,SAAS,0BAA0B,KACvC,IAAI,SAAS,8BAA8B,GAC3C;AACA;AAAA,IACF;AAEA,YAAQ,KAAK,eAAe,GAAG,EAAE;AAAA,EACnC;AACF;AAMA,eAAsB,eAAmC;AACvD,QAAM,SAAS,MAAMA,eAAA;AAGrB,iCAAqC;AACrC,SAAO;AACT;"}

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export { StartClient } from './StartClient.js';
+export { hydrateStart, configureHydrationSuppressions } from './hydrateStart.js';

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+import { StartClient } from "./StartClient.js";
+import { configureHydrationSuppressions, hydrateStart } from "./hydrateStart.js";
+export {
+  StartClient,
+  configureHydrationSuppressions,
+  hydrateStart
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -1,10 +1,77 @@
 {
   "name": "@tanstack/vue-start-client",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @tanstack/vue-start-client",
+  "version": "1.141.0",
+  "description": "Modern and scalable routing for Vue applications",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/router.git",
+    "directory": "packages/vue-start-client"
+  },
+  "homepage": "https://tanstack.com/start",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
-}
+    "vue",
+    "location",
+    "router",
+    "routing",
+    "async",
+    "async router",
+    "typescript"
+  ],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "dependencies": {
+    "tiny-invariant": "^1.3.3",
+    "tiny-warning": "^1.0.3",
+    "@tanstack/start-client-core": "1.141.0",
+    "@tanstack/router-core": "1.141.0",
+    "@tanstack/vue-router": "1.141.0"
+  },
+  "devDependencies": {
+    "@testing-library/vue": "^8.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "vue": "^3.5.25"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test": "pnpm test:eslint && pnpm test:types && pnpm test:build && pnpm test:unit",
+    "test:unit": "exit 0; vitest",
+    "test:unit:dev": "vitest --watch",
+    "test:eslint": "eslint ./src",
+    "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+    "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
+    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js",
+    "test:types:ts59": "tsc",
+    "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+    "build": "vite build"
+  }
+}

package/src/StartClient.tsx

@@ -0,0 +1,34 @@
+import * as Vue from 'vue'
+import { RouterProvider } from '@tanstack/vue-router'
+import type { AnyRouter } from '@tanstack/router-core'
+
+declare global {
+  interface Window {
+    $_TSR?: {
+      cleanup?: () => void
+      [key: string]: unknown
+    }
+  }
+}
+
+export const StartClient = Vue.defineComponent({
+  name: 'StartClient',
+  props: {
+    router: {
+      type: Object as () => AnyRouter,
+      required: true,
+    },
+  },
+  setup(props) {
+    // After Vue hydration is complete, trigger cleanup of $tsr scripts
+    // Use nextTick to ensure all child component onMounted hooks have completed
+    // This prevents removing scripts before components have finished transitioning
+    Vue.onMounted(() => {
+      Vue.nextTick(() => {
+        window.$_TSR?.cleanup?.()
+      })
+    })
+
+    return () => <RouterProvider router={props.router} />
+  },
+})

package/src/hydrateStart.ts

@@ -0,0 +1,97 @@
+import { hydrateStart as coreHydrateStart } from '@tanstack/start-client-core/client'
+import type { AnyRouter } from '@tanstack/router-core'
+import type { App } from 'vue'
+
+/**
+ * Suppress expected hydration mismatch warnings for routes with ssr: 'data-only' or ssr: false
+ * These routes intentionally render different content on server vs client.
+ *
+ * Note: We always suppress hydration warnings in Vue Start apps because:
+ * 1. Routes with ssr: 'data-only' or ssr: false cause expected mismatches
+ * 2. The ssr option is not reliably accessible from route.options for file-based routes
+ * 3. DevTools components also cause expected mismatches in development
+ * 4. In production builds, Vue strips these warnings anyway
+ */
+function suppressSsrHydrationMismatches(_router: AnyRouter): void {
+  const originalWarn = console.warn
+  const originalError = console.error
+
+  const isHydrationMismatchMessage = (args: Array<unknown>): boolean => {
+    // Check all args since Vue may pass message in different positions
+    for (const arg of args) {
+      if (typeof arg !== 'string') continue
+      if (
+        arg.includes('Hydration completed but contains mismatches') ||
+        arg.includes('Hydration node mismatch') ||
+        arg.includes('Hydration text mismatch') ||
+        arg.includes('Hydration children mismatch') ||
+        arg.includes('Hydration class mismatch') ||
+        arg.includes('Hydration style mismatch') ||
+        arg.includes('Hydration attribute mismatch')
+      ) {
+        return true
+      }
+    }
+    return false
+  }
+
+  console.warn = (...args) => {
+    if (isHydrationMismatchMessage(args)) {
+      return // Suppress hydration warnings
+    }
+    originalWarn.apply(console, args)
+  }
+
+  console.error = (...args) => {
+    if (isHydrationMismatchMessage(args)) {
+      return // Suppress hydration warnings
+    }
+    originalError.apply(console, args)
+  }
+}
+
+/**
+ * Configure a Vue app to suppress expected hydration mismatch warnings
+ * for routes with ssr: false or ssr: 'data-only'
+ * Call this after createSSRApp and before app.mount()
+ *
+ * Note: We always suppress hydration warnings in Vue Start apps because:
+ * 1. Routes with ssr: 'data-only' or ssr: false cause expected mismatches
+ * 2. The ssr option is not reliably accessible from route.options for file-based routes
+ * 3. DevTools components also cause expected mismatches in development
+ * 4. In production builds, Vue strips these warnings anyway
+ */
+export function configureHydrationSuppressions(
+  app: App,
+  _router: AnyRouter,
+): void {
+  // Always install the warnHandler to suppress hydration warnings
+  // Vue's app.config.warnHandler intercepts dev warnings BEFORE console.warn
+  app.config.warnHandler = (msg, _instance, _trace) => {
+    // Suppress hydration mismatch warnings
+    if (
+      msg.includes('Hydration node mismatch') ||
+      msg.includes('Hydration text mismatch') ||
+      msg.includes('Hydration children mismatch') ||
+      msg.includes('Hydration class mismatch') ||
+      msg.includes('Hydration style mismatch') ||
+      msg.includes('Hydration attribute mismatch')
+    ) {
+      return // Suppress the warning
+    }
+    // Let other warnings through to console
+    console.warn(`[Vue warn]: ${msg}`)
+  }
+}
+
+/**
+ * Vue-specific wrapper for hydrateStart that installs hydration mismatch
+ * suppression for routes with ssr: false or ssr: 'data-only' before returning
+ */
+export async function hydrateStart(): Promise<AnyRouter> {
+  const router = await coreHydrateStart()
+  // Install console suppression before app.mount() is called
+  // This catches the "Hydration completed but contains mismatches" error
+  suppressSsrHydrationMismatches(router)
+  return router
+}

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { StartClient } from './StartClient'
+export { hydrateStart, configureHydrationSuppressions } from './hydrateStart'

package/README.md

@@ -1,45 +0,0 @@
-# @tanstack/vue-start-client
-
-## ⚠️ IMPORTANT NOTICE ⚠️
-
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@tanstack/vue-start-client`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**