@tanstack/react-router 1.92.1 → 1.92.6

package/dist/esm/transformer.d.ts

@@ -1,6 +1,8 @@
 export interface RouterTransformer {
     stringify: (obj: unknown) => string;
     parse: (str: string) => unknown;
+    encode: <T>(value: T) => T;
+    decode: <T>(value: T) => T;
 }
 export declare const defaultTransformer: RouterTransformer;
 export type TransformerStringify<T, TSerializable> = T extends TSerializable ? T : T extends (...args: Array<any>) => any ? 'Function is not serializable' : {

package/dist/esm/transformer.js

@@ -1,37 +1,100 @@
 import { isPlainObject } from "./utils.js";
 const defaultTransformer = {
-  stringify: (value) => JSON.stringify(value, function replacer(key, value2) {
-    const keyVal = this[key];
-    const transformer = transformers.find((t) => t.stringifyCondition(keyVal));
+  stringify: (value) => JSON.stringify(value, function replacer(key, val) {
+    const ogVal = this[key];
+    const transformer = transformers.find((t) => t.stringifyCondition(ogVal));
     if (transformer) {
-      return transformer.stringify(keyVal);
+      return transformer.stringify(ogVal);
     }
-    return value2;
+    return val;
   }),
-  parse: (value) => JSON.parse(value, function parser(key, value2) {
-    const keyVal = this[key];
-    const transformer = transformers.find((t) => t.parseCondition(keyVal));
+  parse: (value) => JSON.parse(value, function parser(key, val) {
+    const ogVal = this[key];
+    if (isPlainObject(ogVal)) {
+      const transformer = transformers.find((t) => t.parseCondition(ogVal));
+      if (transformer) {
+        return transformer.parse(ogVal);
+      }
+    }
+    return val;
+  }),
+  encode: (value) => {
+    if (Array.isArray(value)) {
+      return value.map((v) => defaultTransformer.encode(v));
+    }
+    if (isPlainObject(value)) {
+      return Object.fromEntries(
+        Object.entries(value).map(([key, v]) => [
+          key,
+          defaultTransformer.encode(v)
+        ])
+      );
+    }
+    const transformer = transformers.find((t) => t.stringifyCondition(value));
     if (transformer) {
-      return transformer.parse(keyVal);
+      return transformer.stringify(value);
     }
-    return value2;
-  })
-};
-const transformers = [
-  {
-    // Dates
-    stringifyCondition: (value) => value instanceof Date,
-    stringify: (value) => ({ $date: value.toISOString() }),
-    parseCondition: (value) => isPlainObject(value) && value.$date,
-    parse: (value) => new Date(value.$date)
+    return value;
   },
-  {
-    // undefined
-    stringifyCondition: (value) => value === void 0,
-    stringify: () => ({ $undefined: "" }),
-    parseCondition: (value) => isPlainObject(value) && value.$undefined === "",
-    parse: () => void 0
+  decode: (value) => {
+    if (isPlainObject(value)) {
+      const transformer = transformers.find((t) => t.parseCondition(value));
+      if (transformer) {
+        return transformer.parse(value);
+      }
+    }
+    if (Array.isArray(value)) {
+      return value.map((v) => defaultTransformer.decode(v));
+    }
+    if (isPlainObject(value)) {
+      return Object.fromEntries(
+        Object.entries(value).map(([key, v]) => [
+          key,
+          defaultTransformer.decode(v)
+        ])
+      );
+    }
+    return value;
   }
+};
+const createTransformer = (key, check, toValue = (v) => v, fromValue = (v) => v) => ({
+  key,
+  stringifyCondition: check,
+  stringify: (value) => ({ [`$${key}`]: toValue(value) }),
+  parseCondition: (value) => Object.hasOwn(value, `$${key}`),
+  parse: (value) => fromValue(value[`$${key}`])
+});
+const transformers = [
+  createTransformer(
+    // Key
+    "undefined",
+    // Check
+    (v) => v === void 0,
+    // To
+    () => 0,
+    // From
+    () => void 0
+  ),
+  createTransformer(
+    // Key
+    "date",
+    // Check
+    (v) => v instanceof Date,
+    // To
+    (v) => v.toISOString(),
+    // From
+    (v) => new Date(v)
+  ),
+  createTransformer(
+    // Key
+    "error",
+    // Check
+    (v) => v instanceof Error,
+    // To
+    (v) => ({ ...v, message: v.message, stack: v.stack, cause: v.cause }),
+    // From
+    (v) => Object.assign(new Error(v.message), v)
+  )
 ];
 export {
   defaultTransformer

package/dist/esm/transformer.js.map

@@ -1 +1 @@
-{"version":3,"file":"transformer.js","sources":["../../src/transformer.ts"],"sourcesContent":["import { isPlainObject } from './utils'\n\nexport interface RouterTransformer {\n  stringify: (obj: unknown) => string\n  parse: (str: string) => unknown\n}\n\nexport const defaultTransformer: RouterTransformer = {\n  stringify: (value: any) =>\n    JSON.stringify(value, function replacer(key, value) {\n      const keyVal = this[key]\n      const transformer = transformers.find((t) => t.stringifyCondition(keyVal))\n\n      if (transformer) {\n        return transformer.stringify(keyVal)\n      }\n\n      return value\n    }),\n  parse: (value: string) =>\n    JSON.parse(value, function parser(key, value) {\n      const keyVal = this[key]\n      const transformer = transformers.find((t) => t.parseCondition(keyVal))\n\n      if (transformer) {\n        return transformer.parse(keyVal)\n      }\n\n      return value\n    }),\n}\n\nconst transformers = [\n  {\n    // Dates\n    stringifyCondition: (value: any) => value instanceof Date,\n    stringify: (value: any) => ({ $date: value.toISOString() }),\n    parseCondition: (value: any) => isPlainObject(value) && value.$date,\n    parse: (value: any) => new Date(value.$date),\n  },\n  {\n    // undefined\n    stringifyCondition: (value: any) => value === undefined,\n    stringify: () => ({ $undefined: '' }),\n    parseCondition: (value: any) =>\n      isPlainObject(value) && value.$undefined === '',\n    parse: () => undefined,\n  },\n] as const\n\nexport type TransformerStringify<T, TSerializable> = T extends TSerializable\n  ? T\n  : T extends (...args: Array<any>) => any\n    ? 'Function is not serializable'\n    : { [K in keyof T]: TransformerStringify<T[K], TSerializable> }\n\nexport type TransformerParse<T, TSerializable> = T extends TSerializable\n  ? T\n  : T extends React.JSX.Element\n    ? ReadableStream\n    : { [K in keyof T]: TransformerParse<T[K], TSerializable> }\n\nexport type DefaultTransformerStringify<T> = TransformerStringify<\n  T,\n  Date | undefined\n>\n\nexport type DefaultTransformerParse<T> = TransformerParse<T, Date | undefined>\n"],"names":["value"],"mappings":";AAOO,MAAM,qBAAwC;AAAA,EACnD,WAAW,CAAC,UACV,KAAK,UAAU,OAAO,SAAS,SAAS,KAAKA,QAAO;AAC5C,UAAA,SAAS,KAAK,GAAG;AACjB,UAAA,cAAc,aAAa,KAAK,CAAC,MAAM,EAAE,mBAAmB,MAAM,CAAC;AAEzE,QAAI,aAAa;AACR,aAAA,YAAY,UAAU,MAAM;AAAA,IAAA;AAG9BA,WAAAA;AAAAA,EAAA,CACR;AAAA,EACH,OAAO,CAAC,UACN,KAAK,MAAM,OAAO,SAAS,OAAO,KAAKA,QAAO;AACtC,UAAA,SAAS,KAAK,GAAG;AACjB,UAAA,cAAc,aAAa,KAAK,CAAC,MAAM,EAAE,eAAe,MAAM,CAAC;AAErE,QAAI,aAAa;AACR,aAAA,YAAY,MAAM,MAAM;AAAA,IAAA;AAG1BA,WAAAA;AAAAA,EACR,CAAA;AACL;AAEA,MAAM,eAAe;AAAA,EACnB;AAAA;AAAA,IAEE,oBAAoB,CAAC,UAAe,iBAAiB;AAAA,IACrD,WAAW,CAAC,WAAgB,EAAE,OAAO,MAAM;IAC3C,gBAAgB,CAAC,UAAe,cAAc,KAAK,KAAK,MAAM;AAAA,IAC9D,OAAO,CAAC,UAAe,IAAI,KAAK,MAAM,KAAK;AAAA,EAC7C;AAAA,EACA;AAAA;AAAA,IAEE,oBAAoB,CAAC,UAAe,UAAU;AAAA,IAC9C,WAAW,OAAO,EAAE,YAAY;IAChC,gBAAgB,CAAC,UACf,cAAc,KAAK,KAAK,MAAM,eAAe;AAAA,IAC/C,OAAO,MAAM;AAAA,EAAA;AAEjB;"}
+{"version":3,"file":"transformer.js","sources":["../../src/transformer.ts"],"sourcesContent":["import { isPlainObject } from './utils'\n\nexport interface RouterTransformer {\n  stringify: (obj: unknown) => string\n  parse: (str: string) => unknown\n  encode: <T>(value: T) => T\n  decode: <T>(value: T) => T\n}\n\nexport const defaultTransformer: RouterTransformer = {\n  stringify: (value: any) =>\n    JSON.stringify(value, function replacer(key, val) {\n      const ogVal = this[key]\n      const transformer = transformers.find((t) => t.stringifyCondition(ogVal))\n\n      if (transformer) {\n        return transformer.stringify(ogVal)\n      }\n\n      return val\n    }),\n  parse: (value: string) =>\n    JSON.parse(value, function parser(key, val) {\n      const ogVal = this[key]\n      if (isPlainObject(ogVal)) {\n        const transformer = transformers.find((t) => t.parseCondition(ogVal))\n\n        if (transformer) {\n          return transformer.parse(ogVal)\n        }\n      }\n\n      return val\n    }),\n  encode: (value: any) => {\n    // When encodign, dive first\n    if (Array.isArray(value)) {\n      return value.map((v) => defaultTransformer.encode(v))\n    }\n\n    if (isPlainObject(value)) {\n      return Object.fromEntries(\n        Object.entries(value).map(([key, v]) => [\n          key,\n          defaultTransformer.encode(v),\n        ]),\n      )\n    }\n\n    const transformer = transformers.find((t) => t.stringifyCondition(value))\n    if (transformer) {\n      return transformer.stringify(value)\n    }\n\n    return value\n  },\n  decode: (value: any) => {\n    // Attempt transform first\n    if (isPlainObject(value)) {\n      const transformer = transformers.find((t) => t.parseCondition(value))\n      if (transformer) {\n        return transformer.parse(value)\n      }\n    }\n\n    if (Array.isArray(value)) {\n      return value.map((v) => defaultTransformer.decode(v))\n    }\n\n    if (isPlainObject(value)) {\n      return Object.fromEntries(\n        Object.entries(value).map(([key, v]) => [\n          key,\n          defaultTransformer.decode(v),\n        ]),\n      )\n    }\n\n    return value\n  },\n}\n\nconst createTransformer = <T extends string>(\n  key: T,\n  check: (value: any) => boolean,\n  toValue: (value: any) => any = (v) => v,\n  fromValue: (value: any) => any = (v) => v,\n) => ({\n  key,\n  stringifyCondition: check,\n  stringify: (value: any) => ({ [`$${key}`]: toValue(value) }),\n  parseCondition: (value: any) => Object.hasOwn(value, `$${key}`),\n  parse: (value: any) => fromValue(value[`$${key}`]),\n})\n\n// Keep these ordered by predicted frequency\nconst transformers = [\n  createTransformer(\n    // Key\n    'undefined',\n    // Check\n    (v) => v === undefined,\n    // To\n    () => 0,\n    // From\n    () => undefined,\n  ),\n  createTransformer(\n    // Key\n    'date',\n    // Check\n    (v) => v instanceof Date,\n    // To\n    (v) => v.toISOString(),\n    // From\n    (v) => new Date(v),\n  ),\n  createTransformer(\n    // Key\n    'error',\n    // Check\n    (v) => v instanceof Error,\n    // To\n    (v) => ({ ...v, message: v.message, stack: v.stack, cause: v.cause }),\n    // From\n    (v) => Object.assign(new Error(v.message), v),\n  ),\n] as const\n\nexport type TransformerStringify<T, TSerializable> = T extends TSerializable\n  ? T\n  : T extends (...args: Array<any>) => any\n    ? 'Function is not serializable'\n    : { [K in keyof T]: TransformerStringify<T[K], TSerializable> }\n\nexport type TransformerParse<T, TSerializable> = T extends TSerializable\n  ? T\n  : T extends React.JSX.Element\n    ? ReadableStream\n    : { [K in keyof T]: TransformerParse<T[K], TSerializable> }\n\nexport type DefaultTransformerStringify<T> = TransformerStringify<\n  T,\n  Date | undefined\n>\n\nexport type DefaultTransformerParse<T> = TransformerParse<T, Date | undefined>\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.92.1",
+  "version": "1.92.6",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -49,7 +49,7 @@
     "node": ">=12"
   },
   "dependencies": {
-    "@tanstack/react-store": "^0.6.1",
+    "@tanstack/react-store": "^0.7.0",
     "jsesc": "^3.0.2",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",

package/src/router.ts

@@ -3,7 +3,7 @@ import {
   createMemoryHistory,
   parseHref,
 } from '@tanstack/history'
-import { Store } from '@tanstack/react-store'
+import { Store, batch } from '@tanstack/react-store'
 import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
 import { rootRouteId } from './root'
@@ -1959,7 +1959,7 @@ export class Router<
 
           let pendingMatches!: Array<AnyRouteMatch>
 
-          this.__store.batch(() => {
+          batch(() => {
             // this call breaks a route context of destination route after a redirect
             // we should be fine not eagerly calling this since we call it later
             // this.clearExpiredCache()
@@ -2014,7 +2014,7 @@ export class Router<
                 let enteringMatches!: Array<AnyRouteMatch>
                 let stayingMatches!: Array<AnyRouteMatch>
 
-                this.__store.batch(() => {
+                batch(() => {
                   this.__store.setState((s) => {
                     const previousMatches = s.matches
                     const newMatches = s.pendingMatches || s.matches
@@ -2877,7 +2877,7 @@ export class Router<
     ])
 
     // If the matches are already loaded, we need to add them to the cachedMatches
-    this.__store.batch(() => {
+    batch(() => {
       matches.forEach((match) => {
         if (!loadedMatchIds.has(match.id)) {
           this.__store.setState((s) => ({

package/src/transformer.ts

@@ -3,49 +3,128 @@ import { isPlainObject } from './utils'
 export interface RouterTransformer {
   stringify: (obj: unknown) => string
   parse: (str: string) => unknown
+  encode: <T>(value: T) => T
+  decode: <T>(value: T) => T
 }
 
 export const defaultTransformer: RouterTransformer = {
   stringify: (value: any) =>
-    JSON.stringify(value, function replacer(key, value) {
-      const keyVal = this[key]
-      const transformer = transformers.find((t) => t.stringifyCondition(keyVal))
+    JSON.stringify(value, function replacer(key, val) {
+      const ogVal = this[key]
+      const transformer = transformers.find((t) => t.stringifyCondition(ogVal))
 
       if (transformer) {
-        return transformer.stringify(keyVal)
+        return transformer.stringify(ogVal)
       }
 
-      return value
+      return val
     }),
   parse: (value: string) =>
-    JSON.parse(value, function parser(key, value) {
-      const keyVal = this[key]
-      const transformer = transformers.find((t) => t.parseCondition(keyVal))
+    JSON.parse(value, function parser(key, val) {
+      const ogVal = this[key]
+      if (isPlainObject(ogVal)) {
+        const transformer = transformers.find((t) => t.parseCondition(ogVal))
 
-      if (transformer) {
-        return transformer.parse(keyVal)
+        if (transformer) {
+          return transformer.parse(ogVal)
+        }
       }
 
-      return value
+      return val
     }),
-}
+  encode: (value: any) => {
+    // When encodign, dive first
+    if (Array.isArray(value)) {
+      return value.map((v) => defaultTransformer.encode(v))
+    }
 
-const transformers = [
-  {
-    // Dates
-    stringifyCondition: (value: any) => value instanceof Date,
-    stringify: (value: any) => ({ $date: value.toISOString() }),
-    parseCondition: (value: any) => isPlainObject(value) && value.$date,
-    parse: (value: any) => new Date(value.$date),
+    if (isPlainObject(value)) {
+      return Object.fromEntries(
+        Object.entries(value).map(([key, v]) => [
+          key,
+          defaultTransformer.encode(v),
+        ]),
+      )
+    }
+
+    const transformer = transformers.find((t) => t.stringifyCondition(value))
+    if (transformer) {
+      return transformer.stringify(value)
+    }
+
+    return value
   },
-  {
-    // undefined
-    stringifyCondition: (value: any) => value === undefined,
-    stringify: () => ({ $undefined: '' }),
-    parseCondition: (value: any) =>
-      isPlainObject(value) && value.$undefined === '',
-    parse: () => undefined,
+  decode: (value: any) => {
+    // Attempt transform first
+    if (isPlainObject(value)) {
+      const transformer = transformers.find((t) => t.parseCondition(value))
+      if (transformer) {
+        return transformer.parse(value)
+      }
+    }
+
+    if (Array.isArray(value)) {
+      return value.map((v) => defaultTransformer.decode(v))
+    }
+
+    if (isPlainObject(value)) {
+      return Object.fromEntries(
+        Object.entries(value).map(([key, v]) => [
+          key,
+          defaultTransformer.decode(v),
+        ]),
+      )
+    }
+
+    return value
   },
+}
+
+const createTransformer = <T extends string>(
+  key: T,
+  check: (value: any) => boolean,
+  toValue: (value: any) => any = (v) => v,
+  fromValue: (value: any) => any = (v) => v,
+) => ({
+  key,
+  stringifyCondition: check,
+  stringify: (value: any) => ({ [`$${key}`]: toValue(value) }),
+  parseCondition: (value: any) => Object.hasOwn(value, `$${key}`),
+  parse: (value: any) => fromValue(value[`$${key}`]),
+})
+
+// Keep these ordered by predicted frequency
+const transformers = [
+  createTransformer(
+    // Key
+    'undefined',
+    // Check
+    (v) => v === undefined,
+    // To
+    () => 0,
+    // From
+    () => undefined,
+  ),
+  createTransformer(
+    // Key
+    'date',
+    // Check
+    (v) => v instanceof Date,
+    // To
+    (v) => v.toISOString(),
+    // From
+    (v) => new Date(v),
+  ),
+  createTransformer(
+    // Key
+    'error',
+    // Check
+    (v) => v instanceof Error,
+    // To
+    (v) => ({ ...v, message: v.message, stack: v.stack, cause: v.cause }),
+    // From
+    (v) => Object.assign(new Error(v.message), v),
+  ),
 ] as const
 
 export type TransformerStringify<T, TSerializable> = T extends TSerializable