@tanstack/react-router 1.120.17 → 1.120.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"ClientOnly.cjs","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface ClientOnlyProps {\n /**\n * The children to render if the JS is loaded.\n */\n children: React.ReactNode\n /**\n * The fallback component to render if the JS is not yet loaded.\n */\n fallback?: React.ReactNode\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n * <ClientOnly fallback={<FakeChart />}>\n * <Chart />\n * </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps) {\n return useHydrated() ? (\n <React.Fragment>{children}</React.Fragment>\n ) : (\n <React.Fragment>{fallback}</React.Fragment>\n )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * let hydrated = useHydrated()\n * return (\n * <button type=\"button\" disabled={!hydrated} onClick={doSomethingCustom}>\n * Click me\n * </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nfunction useHydrated(): boolean {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n )\n}\n\nfunction subscribe() {\n return () => {}\n}\n"],"names":["jsx"],"mappings":";;;;AA8BO,SAAS,WAAW,EAAE,UAAU,WAAW,QAAyB;AACzE,SAAO,YAAY,IAChBA,2BAAAA,IAAA,MAAM,UAAN,EAAgB,SAAS,CAAA,IAEzBA,2BAAAA,IAAA,MAAM,UAAN,EAAgB,UAAS,SAAA,CAAA;AAE9B;AAqBA,SAAS,cAAuB;AAC9B,SAAO,MAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;;"}
1
+ {"version":3,"file":"ClientOnly.cjs","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface ClientOnlyProps {\n /**\n * The children to render when the JS is loaded.\n */\n children: React.ReactNode\n /**\n * The fallback component to render if the JS is not yet loaded.\n */\n fallback?: React.ReactNode\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n * <ClientOnly fallback={<FakeChart />}>\n * <Chart />\n * </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps) {\n return useHydrated() ? (\n <React.Fragment>{children}</React.Fragment>\n ) : (\n <React.Fragment>{fallback}</React.Fragment>\n )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * let hydrated = useHydrated()\n * return (\n * <button type=\"button\" disabled={!hydrated} onClick={doSomethingCustom}>\n * Click me\n * </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nfunction useHydrated(): boolean {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n )\n}\n\nfunction subscribe() {\n return () => {}\n}\n"],"names":["jsx"],"mappings":";;;;AA8BO,SAAS,WAAW,EAAE,UAAU,WAAW,QAAyB;AACzE,SAAO,YAAY,IAChBA,2BAAAA,IAAA,MAAM,UAAN,EAAgB,SAAS,CAAA,IAEzBA,2BAAAA,IAAA,MAAM,UAAN,EAAgB,UAAS,SAAA,CAAA;AAE9B;AAqBA,SAAS,cAAuB;AAC9B,SAAO,MAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;;"}
@@ -1,7 +1,7 @@
1
1
  import { default as React } from 'react';
2
2
  export interface ClientOnlyProps {
3
3
  /**
4
- * The children to render if the JS is loaded.
4
+ * The children to render when the JS is loaded.
5
5
  */
6
6
  children: React.ReactNode;
7
7
  /**
@@ -1,7 +1,7 @@
1
1
  import { default as React } from 'react';
2
2
  export interface ClientOnlyProps {
3
3
  /**
4
- * The children to render if the JS is loaded.
4
+ * The children to render when the JS is loaded.
5
5
  */
6
6
  children: React.ReactNode;
7
7
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"ClientOnly.js","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface ClientOnlyProps {\n /**\n * The children to render if the JS is loaded.\n */\n children: React.ReactNode\n /**\n * The fallback component to render if the JS is not yet loaded.\n */\n fallback?: React.ReactNode\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n * <ClientOnly fallback={<FakeChart />}>\n * <Chart />\n * </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps) {\n return useHydrated() ? (\n <React.Fragment>{children}</React.Fragment>\n ) : (\n <React.Fragment>{fallback}</React.Fragment>\n )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * let hydrated = useHydrated()\n * return (\n * <button type=\"button\" disabled={!hydrated} onClick={doSomethingCustom}>\n * Click me\n * </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nfunction useHydrated(): boolean {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n )\n}\n\nfunction subscribe() {\n return () => {}\n}\n"],"names":["React"],"mappings":";;AA8BO,SAAS,WAAW,EAAE,UAAU,WAAW,QAAyB;AACzE,SAAO,YAAY,IAChB,oBAAAA,eAAM,UAAN,EAAgB,SAAS,CAAA,IAEzB,oBAAAA,eAAM,UAAN,EAAgB,UAAS,SAAA,CAAA;AAE9B;AAqBA,SAAS,cAAuB;AAC9B,SAAOA,eAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;"}
1
+ {"version":3,"file":"ClientOnly.js","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface ClientOnlyProps {\n /**\n * The children to render when the JS is loaded.\n */\n children: React.ReactNode\n /**\n * The fallback component to render if the JS is not yet loaded.\n */\n fallback?: React.ReactNode\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n * <ClientOnly fallback={<FakeChart />}>\n * <Chart />\n * </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps) {\n return useHydrated() ? (\n <React.Fragment>{children}</React.Fragment>\n ) : (\n <React.Fragment>{fallback}</React.Fragment>\n )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * let hydrated = useHydrated()\n * return (\n * <button type=\"button\" disabled={!hydrated} onClick={doSomethingCustom}>\n * Click me\n * </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nfunction useHydrated(): boolean {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n )\n}\n\nfunction subscribe() {\n return () => {}\n}\n"],"names":["React"],"mappings":";;AA8BO,SAAS,WAAW,EAAE,UAAU,WAAW,QAAyB;AACzE,SAAO,YAAY,IAChB,oBAAAA,eAAM,UAAN,EAAgB,SAAS,CAAA,IAEzB,oBAAAA,eAAM,UAAN,EAAgB,UAAS,SAAA,CAAA;AAE9B;AAqBA,SAAS,cAAuB;AAC9B,SAAOA,eAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;"}
@@ -1,37 +1,37 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const api_js_1 = require("./rules/api.js");
4
- const guide_js_1 = require("./rules/guide.js");
5
- const routing_js_1 = require("./rules/routing.js");
6
- const setup_and_architecture_js_1 = require("./rules/setup-and-architecture.js");
1
+ const api = require('./rules/api.cjs')
2
+ const guide = require('./rules/guide.cjs')
3
+ const routing = require('./rules/routing.cjs')
4
+ const setupAndArchitecture = require('./rules/setup-and-architecture.cjs')
5
+
7
6
  const rules = [
8
- {
9
- name: 'api',
10
- description: 'TanStack Router: API',
11
- rule: api_js_1.default,
12
- alwaysApply: false,
13
- globs: ['src/**/*.ts', 'src/**/*.tsx'],
14
- },
15
- {
16
- name: 'guide',
17
- description: 'TanStack Router: Guide',
18
- rule: guide_js_1.default,
19
- alwaysApply: false,
20
- globs: ['src/**/*.ts', 'src/**/*.tsx'],
21
- },
22
- {
23
- name: 'routing',
24
- description: 'TanStack Router: Routing',
25
- rule: routing_js_1.default,
26
- alwaysApply: false,
27
- globs: ['src/**/*.ts', 'src/**/*.tsx'],
28
- },
29
- {
30
- name: 'setup-and-architecture',
31
- description: 'TanStack Router: Setup and Architecture',
32
- rule: setup_and_architecture_js_1.default,
33
- alwaysApply: false,
34
- globs: ['package.json', 'vite.config.ts', 'tsconfig.json', 'src/**/*.ts', 'src/**/*.tsx'],
35
- }
36
- ];
37
- exports.default = rules;
7
+ {
8
+ name: 'api',
9
+ description: 'TanStack Router: API',
10
+ rule: api,
11
+ alwaysApply: false,
12
+ globs: ['src/**/*.ts', 'src/**/*.tsx'],
13
+ },
14
+ {
15
+ name: 'guide',
16
+ description: 'TanStack Router: Guide',
17
+ rule: guide,
18
+ alwaysApply: false,
19
+ globs: ['src/**/*.ts', 'src/**/*.tsx'],
20
+ },
21
+ {
22
+ name: 'routing',
23
+ description: 'TanStack Router: Routing',
24
+ rule: routing,
25
+ alwaysApply: false,
26
+ globs: ['src/**/*.ts', 'src/**/*.tsx'],
27
+ },
28
+ {
29
+ name: 'setup-and-architecture',
30
+ description: 'TanStack Router: Setup and Architecture',
31
+ rule: setupAndArchitecture,
32
+ alwaysApply: false,
33
+ globs: ['package.json', 'vite.config.ts', 'tsconfig.json', 'src/**/*.ts', 'src/**/*.tsx'],
34
+ }
35
+ ]
36
+
37
+ module.exports = rules
@@ -1,3 +1 @@
1
- import type { PackageRuleItem } from 'vibe-rules';
2
- declare const rules: Array<PackageRuleItem>;
3
- export default rules;
1
+ {}
@@ -1,6 +1,4 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const content = `# ActiveLinkOptions type
1
+ module.exports = `# ActiveLinkOptions type
4
2
 
5
3
  The \`ActiveLinkOptions\` type extends the [\`LinkOptions\`](../LinkOptionsType.md) type and contains additional options that can be used to describe how a link should be styled when it is active.
6
4
 
@@ -4240,5 +4238,4 @@ function Component() {
4240
4238
  }
4241
4239
  \`\`\`
4242
4240
 
4243
- `;
4244
- exports.default = content;
4241
+ `;
File without changes
@@ -1,6 +1,4 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const content = `# Authenticated Routes
1
+ module.exports = `# Authenticated Routes
4
2
 
5
3
  Authentication is an extremely common requirement for web applications. In this guide, we'll walk through how to use TanStack Router to build protected routes, and how to redirect users to login if they try to access them.
6
4
 
@@ -6274,5 +6272,4 @@ const { enable, disable, navigate } = useConditionalNavigate({
6274
6272
  })
6275
6273
  \`\`\`
6276
6274
 
6277
- `;
6278
- exports.default = content;
6275
+ `;
File without changes
@@ -1,6 +1,4 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const content = `# Code-Based Routing
1
+ module.exports = `# Code-Based Routing
4
2
 
5
3
  > [!TIP]
6
4
  > Code-based routing is not recommended for most applications. It is recommended to use [File-Based Routing](../file-based-routing.md) instead.
@@ -1933,5 +1931,4 @@ Or you can define the virtual routes directly in the configuration, while much l
1933
1931
  }
1934
1932
  \`\`\`
1935
1933
 
1936
- `;
1937
- exports.default = content;
1934
+ `;
File without changes
@@ -1,6 +1,4 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const content = `# Overview
1
+ module.exports = `# Overview
4
2
 
5
3
  **TanStack Router is a router for building React and Solid applications**. Some of its features include:
6
4
 
@@ -928,5 +926,4 @@ function PathlessLayoutRouteComponent() {
928
926
 
929
927
  </details>
930
928
 
931
- `;
932
- exports.default = content;
929
+ `;
@@ -1,3 +1,3 @@
1
1
  import type { PackageRuleItem } from 'vibe-rules';
2
2
  declare const rules: Array<PackageRuleItem>;
3
- export default rules;
3
+ export default rules;
@@ -1,35 +1,37 @@
1
- import api from './rules/api.js';
2
- import guide from './rules/guide.js';
3
- import routing from './rules/routing.js';
4
- import setupAndArchitecture from './rules/setup-and-architecture.js';
1
+ import api from './rules/api.js'
2
+ import guide from './rules/guide.js'
3
+ import routing from './rules/routing.js'
4
+ import setupAndArchitecture from './rules/setup-and-architecture.js'
5
+
5
6
  const rules = [
6
- {
7
- name: 'api',
8
- description: 'TanStack Router: API',
9
- rule: api,
10
- alwaysApply: false,
11
- globs: ['src/**/*.ts', 'src/**/*.tsx'],
12
- },
13
- {
14
- name: 'guide',
15
- description: 'TanStack Router: Guide',
16
- rule: guide,
17
- alwaysApply: false,
18
- globs: ['src/**/*.ts', 'src/**/*.tsx'],
19
- },
20
- {
21
- name: 'routing',
22
- description: 'TanStack Router: Routing',
23
- rule: routing,
24
- alwaysApply: false,
25
- globs: ['src/**/*.ts', 'src/**/*.tsx'],
26
- },
27
- {
28
- name: 'setup-and-architecture',
29
- description: 'TanStack Router: Setup and Architecture',
30
- rule: setupAndArchitecture,
31
- alwaysApply: false,
32
- globs: ['package.json', 'vite.config.ts', 'tsconfig.json', 'src/**/*.ts', 'src/**/*.tsx'],
33
- }
34
- ];
35
- export default rules;
7
+ {
8
+ name: 'api',
9
+ description: 'TanStack Router: API',
10
+ rule: api,
11
+ alwaysApply: false,
12
+ globs: ['src/**/*.ts', 'src/**/*.tsx'],
13
+ },
14
+ {
15
+ name: 'guide',
16
+ description: 'TanStack Router: Guide',
17
+ rule: guide,
18
+ alwaysApply: false,
19
+ globs: ['src/**/*.ts', 'src/**/*.tsx'],
20
+ },
21
+ {
22
+ name: 'routing',
23
+ description: 'TanStack Router: Routing',
24
+ rule: routing,
25
+ alwaysApply: false,
26
+ globs: ['src/**/*.ts', 'src/**/*.tsx'],
27
+ },
28
+ {
29
+ name: 'setup-and-architecture',
30
+ description: 'TanStack Router: Setup and Architecture',
31
+ rule: setupAndArchitecture,
32
+ alwaysApply: false,
33
+ globs: ['package.json', 'vite.config.ts', 'tsconfig.json', 'src/**/*.ts', 'src/**/*.tsx'],
34
+ }
35
+ ]
36
+
37
+ export default rules
@@ -1,4 +1,4 @@
1
- const content = `# ActiveLinkOptions type
1
+ export default `# ActiveLinkOptions type
2
2
 
3
3
  The \`ActiveLinkOptions\` type extends the [\`LinkOptions\`](../LinkOptionsType.md) type and contains additional options that can be used to describe how a link should be styled when it is active.
4
4
 
@@ -4238,5 +4238,4 @@ function Component() {
4238
4238
  }
4239
4239
  \`\`\`
4240
4240
 
4241
- `;
4242
- export default content;
4241
+ `;
@@ -1,4 +1,4 @@
1
- const content = `# Authenticated Routes
1
+ export default `# Authenticated Routes
2
2
 
3
3
  Authentication is an extremely common requirement for web applications. In this guide, we'll walk through how to use TanStack Router to build protected routes, and how to redirect users to login if they try to access them.
4
4
 
@@ -6272,5 +6272,4 @@ const { enable, disable, navigate } = useConditionalNavigate({
6272
6272
  })
6273
6273
  \`\`\`
6274
6274
 
6275
- `;
6276
- export default content;
6275
+ `;
@@ -1,4 +1,4 @@
1
- const content = `# Code-Based Routing
1
+ export default `# Code-Based Routing
2
2
 
3
3
  > [!TIP]
4
4
  > Code-based routing is not recommended for most applications. It is recommended to use [File-Based Routing](../file-based-routing.md) instead.
@@ -1931,5 +1931,4 @@ Or you can define the virtual routes directly in the configuration, while much l
1931
1931
  }
1932
1932
  \`\`\`
1933
1933
 
1934
- `;
1935
- export default content;
1934
+ `;
@@ -1,4 +1,4 @@
1
- const content = `# Overview
1
+ export default `# Overview
2
2
 
3
3
  **TanStack Router is a router for building React and Solid applications**. Some of its features include:
4
4
 
@@ -926,5 +926,4 @@ function PathlessLayoutRouteComponent() {
926
926
 
927
927
  </details>
928
928
 
929
- `;
930
- export default content;
929
+ `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/react-router",
3
- "version": "1.120.17",
3
+ "version": "1.120.19",
4
4
  "description": "Modern and scalable routing for React applications",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -64,7 +64,7 @@
64
64
  "tiny-invariant": "^1.3.3",
65
65
  "tiny-warning": "^1.0.3",
66
66
  "@tanstack/history": "1.120.17",
67
- "@tanstack/router-core": "1.120.17"
67
+ "@tanstack/router-core": "1.120.19"
68
68
  },
69
69
  "devDependencies": {
70
70
  "@testing-library/jest-dom": "^6.6.3",
@@ -2,7 +2,7 @@ import React from 'react'
2
2
 
3
3
  export interface ClientOnlyProps {
4
4
  /**
5
- * The children to render if the JS is loaded.
5
+ * The children to render when the JS is loaded.
6
6
  */
7
7
  children: React.ReactNode
8
8
  /**