@granite-js/react-native 1.0.28 → 1.0.30

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @granite-js/react-native
 
+## 1.0.30
+
+### Patch Changes
+
+- Updated dependencies [4b2e737]
+  - @granite-js/video@1.0.30
+  - @granite-js/native@1.0.30
+  - @granite-js/blur-view@1.0.30
+  - @granite-js/jest@1.0.30
+  - @granite-js/style-utils@1.0.30
+  - @granite-js/brownfield-module@1.0.30
+  - @granite-js/cli@1.0.30
+  - @granite-js/mpack@1.0.30
+  - @granite-js/plugin-core@1.0.30
+
+## 1.0.29
+
+### Patch Changes
+
+- 1b504a1: feat(router): Route.useSetParams
+  - @granite-js/blur-view@1.0.29
+  - @granite-js/brownfield-module@1.0.29
+  - @granite-js/cli@1.0.29
+  - @granite-js/jest@1.0.29
+  - @granite-js/mpack@1.0.29
+  - @granite-js/native@1.0.29
+  - @granite-js/plugin-core@1.0.29
+  - @granite-js/style-utils@1.0.29
+  - @granite-js/video@1.0.29
+
 ## 1.0.28
 
 ### Patch Changes

package/dist/router/createRoute.d.ts

@@ -18,10 +18,10 @@ export interface RegisterScreenInput {
 export interface RegisterScreen {
 }
 type RegisteredParamList = keyof RegisterScreenInput extends never ? ParamListBase : RegisterScreenInput;
-type NavigationParamsHelpers = Pick<NativeStackNavigationProp<RegisteredParamList, keyof RegisteredParamList>, 'replaceParams' | 'setParams'>;
-export type NavigationProps = Omit<NativeStackNavigationProp<ParamListBase>, keyof NavigationParamsHelpers> & NavigationParamsHelpers;
+export type NavigationProps = NativeStackNavigationProp<RegisteredParamList>;
 export declare function useNavigation(): NavigationProps;
-export type RouteHooksOptions<TScreen extends keyof RegisterScreen> = {
+type RouteHookScreen = keyof RegisterScreenInput | keyof RegisterScreen;
+export type RouteHooksOptions<TScreen extends RouteHookScreen> = {
     from: TScreen;
     strict?: true;
 } | {
@@ -36,7 +36,7 @@ export declare const routeMap: Map<keyof RegisterScreenInput, {
         params: any;
     }) => NativeStackNavigationOptions);
 }>;
-export declare function useMatchOptions<TScreen extends keyof RegisterScreen>(options: RouteHooksOptions<TScreen>): {
+export declare function useMatchOptions<TScreen extends RouteHookScreen>(options: RouteHooksOptions<TScreen>): {
     parserParams: ((params: Record<string, unknown>) => Record<string, unknown>) | typeof defaultParserParams;
     validateParams?: StandardSchemaV1<any, any> | ((params: Readonly<object | undefined>) => any) | undefined;
 } | null;
@@ -47,20 +47,33 @@ export declare function useParams<TScreen extends keyof RegisterScreen>(options:
 export declare function useParams(options: {
     strict: false;
 }): Readonly<object | undefined>;
-export declare function createRoute<TSchema extends StandardSchemaV1<any, any>>(path: keyof RegisterScreenInput, options: Omit<RouteOptions<any>, 'validateParams'> & {
-    validateParams: TSchema;
-}): {
+type SetParamsFunction<TParams> = (params: TParams extends undefined ? undefined : Partial<TParams>) => void;
+type ReplaceParamsFunction<TParams> = (params: TParams extends undefined ? undefined : TParams) => void;
+type CreatedRoute<TInput, TOutput> = {
     _path: keyof RegisterScreenInput;
     useNavigation: typeof useNavigation;
-    useParams: () => InferOutput<TSchema>;
-    _inputType: InferInput<TSchema>;
-    _outputType: InferOutput<TSchema>;
-};
-export declare function createRoute<T extends Readonly<object | undefined>>(path: keyof RegisterScreenInput, options: RouteOptions<T>): {
-    _path: keyof RegisterScreenInput;
-    useNavigation: typeof useNavigation;
-    useParams: () => T;
-    _inputType: T;
-    _outputType: T;
+    useParams: () => TOutput;
+    useSetParams: () => SetParamsFunction<TInput>;
+    useReplaceParams: () => ReplaceParamsFunction<TInput>;
+    _inputType: TInput;
+    _outputType: TOutput;
 };
+export declare function useSetParams<TScreen extends keyof RegisterScreenInput>(options: {
+    from: TScreen;
+    strict?: true;
+}): SetParamsFunction<RegisterScreenInput[TScreen]>;
+export declare function useSetParams(options: {
+    strict: false;
+}): SetParamsFunction<Readonly<object | undefined>>;
+export declare function useReplaceParams<TScreen extends keyof RegisterScreenInput>(options: {
+    from: TScreen;
+    strict?: true;
+}): ReplaceParamsFunction<RegisterScreenInput[TScreen]>;
+export declare function useReplaceParams(options: {
+    strict: false;
+}): ReplaceParamsFunction<Readonly<object | undefined>>;
+export declare function createRoute<TSchema extends StandardSchemaV1<any, any>>(path: keyof RegisterScreenInput, options: Omit<RouteOptions<any>, 'validateParams'> & {
+    validateParams: TSchema;
+}): CreatedRoute<InferInput<TSchema>, InferOutput<TSchema>>;
+export declare function createRoute<T extends Readonly<object | undefined>>(path: keyof RegisterScreenInput, options: RouteOptions<T>): CreatedRoute<T, T>;
 export {};

package/dist/router/createRoute.test-d.d.ts

@@ -14,6 +14,9 @@ declare module './createRoute' {
         '/test-with-defaults': {
             animation?: boolean;
         };
+        '/test-optional': {
+            uri?: string;
+        };
     }
     interface RegisterScreen {
         '/test': {
@@ -30,6 +33,9 @@ declare module './createRoute' {
         '/test-with-defaults': {
             animation: boolean;
         };
+        '/test-optional': {
+            uri?: string;
+        };
     }
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -91,7 +91,7 @@
     "@babel/core": "7.28.5",
     "@babel/preset-env": "7.28.5",
     "@babel/preset-typescript": "7.28.5",
-    "@granite-js/native": "1.0.28",
+    "@granite-js/native": "1.0.30",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -113,21 +113,21 @@
     "zod": "^4.1.12"
   },
   "peerDependencies": {
-    "@granite-js/native": "1.0.28",
+    "@granite-js/native": "1.0.30",
     "@types/react": "*",
     "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/blur-view": "1.0.28",
-    "@granite-js/brownfield-module": "1.0.28",
-    "@granite-js/cli": "1.0.28",
-    "@granite-js/jest": "1.0.28",
-    "@granite-js/mpack": "1.0.28",
-    "@granite-js/plugin-core": "1.0.28",
-    "@granite-js/style-utils": "1.0.28",
-    "@granite-js/video": "1.0.28",
+    "@granite-js/blur-view": "1.0.30",
+    "@granite-js/brownfield-module": "1.0.30",
+    "@granite-js/cli": "1.0.30",
+    "@granite-js/jest": "1.0.30",
+    "@granite-js/mpack": "1.0.30",
+    "@granite-js/plugin-core": "1.0.30",
+    "@granite-js/style-utils": "1.0.30",
+    "@granite-js/video": "1.0.30",
     "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"

package/src/router/createRoute.test-d.ts

@@ -1,6 +1,12 @@
 import { assertType, describe, it } from 'vitest';
 import { z } from 'zod';
-import { createRoute, useNavigation, useParams } from './createRoute';
+import {
+  createRoute,
+  useNavigation,
+  useParams,
+  useReplaceParams,
+  useSetParams,
+} from './createRoute';
 
 declare module './createRoute' {
   interface RegisterScreenInput {
@@ -18,6 +24,9 @@ declare module './createRoute' {
     '/test-with-defaults': {
       animation?: boolean;
     };
+    '/test-optional': {
+      uri?: string;
+    };
   }
 
   interface RegisterScreen {
@@ -35,6 +44,9 @@ declare module './createRoute' {
     '/test-with-defaults': {
       animation: boolean;
     };
+    '/test-optional': {
+      uri?: string;
+    };
   }
 }
 
@@ -78,6 +90,52 @@ describe('createRoute', () => {
     assertType(useParams({ from: '/test', strict: false }));
   });
 
+  it('useSetParams and useReplaceParams', () => {
+    const setRouteParams = Route.useSetParams();
+
+    assertType<(params: Partial<{ id: string; name: string }>) => void>(setRouteParams);
+    setRouteParams({ id: 'test-id' });
+    setRouteParams({ name: 'test-name' });
+
+    // @ts-expect-error Type error should occur when param type is invalid
+    setRouteParams({ id: 123 });
+
+    // @ts-expect-error Type error should occur when param key is invalid
+    setRouteParams({ count: 123 });
+
+    const setParams = useSetParams({ from: '/test' });
+    setParams({ id: 'test-id' });
+
+    // @ts-expect-error Type error should occur when path is not registered
+    assertType(useSetParams({ from: '/abcdefg' }));
+
+    // @ts-expect-error Type error should occur since 'from' and 'strict: false' are conflicting options
+    assertType(useSetParams({ from: '/test', strict: false }));
+
+    const replaceRouteParams = Route.useReplaceParams();
+
+    assertType<(params: { id: string; name: string }) => void>(replaceRouteParams);
+    replaceRouteParams({ id: 'test-id', name: 'test-name' });
+
+    // @ts-expect-error Type error should occur when required params are missing
+    replaceRouteParams({ id: 'test-id' });
+
+    // @ts-expect-error Type error should occur when param type is invalid
+    replaceRouteParams({ id: 123, name: 'test-name' });
+
+    // @ts-expect-error Type error should occur when param key is invalid
+    replaceRouteParams({ id: 'test-id', name: 'test-name', count: 123 });
+
+    const replaceParams = useReplaceParams({ from: '/test' });
+    replaceParams({ id: 'test-id', name: 'test-name' });
+
+    // @ts-expect-error Type error should occur when path is not registered
+    assertType(useReplaceParams({ from: '/abcdefg' }));
+
+    // @ts-expect-error Type error should occur since 'from' and 'strict: false' are conflicting options
+    assertType(useReplaceParams({ from: '/test', strict: false }));
+  });
+
   it('should infer _inputType and _outputType without undefined for function pattern', () => {
     type InputType = (typeof Route)['_inputType'];
     type OutputType = (typeof Route)['_outputType'];
@@ -165,10 +223,48 @@ describe('createRoute with StandardSchema', () => {
 
     // Should accept exact input type
     navigation.navigate('/test-schema', { id: 'test', count: 123 });
+
+    // @ts-expect-error Type error should occur when a required params object is missing
+    navigation.navigate('/test-schema');
+
+    // @ts-expect-error Type error should occur when navigate param type is invalid
+    navigation.navigate('/test-schema', { id: 'test', count: 'invalid' });
+
+    // @ts-expect-error Type error should occur when navigating to an unregistered path
+    navigation.navigate('/abcdefg');
+
+    navigation.navigate('/test-optional', {});
+    navigation.navigate('/test-optional', { uri: 'test-uri' });
+
+    // @ts-expect-error Type error should occur when navigate params include an unknown key
+    navigation.navigate('/test-optional', { name: '123' });
+
+    navigation.popTo('/test-optional', { uri: 'test-uri' });
+
+    // @ts-expect-error popTo should already reject unknown param keys
+    navigation.popTo('/test-optional', { name: '123' });
+
+    navigation.push('/test-optional', { uri: 'test-uri' });
+
+    // @ts-expect-error push should reject unknown param keys
+    navigation.push('/test-optional', { name: '123' });
+
+    navigation.replace('/test-optional', { uri: 'test-uri' });
+
+    // @ts-expect-error replace should reject unknown param keys
+    navigation.replace('/test-optional', { name: '123' });
+
+    // @ts-expect-error push should require params for required route params
+    navigation.push('/test-schema');
+
+    // @ts-expect-error replace should require params for required route params
+    navigation.replace('/test-schema');
+
+    // @ts-expect-error popTo should require params for required route params
+    navigation.popTo('/test-schema');
   });
 
   it('should infer output type from transformation', () => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const RouteWithTransform = createRoute('/test-transform', {
       component: () => null,
       validateParams: z.object({
@@ -199,6 +295,24 @@ describe('createRoute with StandardSchema', () => {
     const navigation = useNavigation();
     navigation.navigate('/test-transform', { id: 'test-id' });
 
+    const setParams = RouteWithTransform.useSetParams();
+    setParams({ id: 'test-id' });
+
+    // @ts-expect-error setParams should accept input type, not output type
+    setParams({ id: 123 });
+
+    const setParamsFromHook = useSetParams({ from: '/test-transform' });
+    setParamsFromHook({ id: 'test-id' });
+
+    // @ts-expect-error useSetParams should accept input type, not output type
+    setParamsFromHook({ id: 123 });
+
+    const replaceParams = RouteWithTransform.useReplaceParams();
+    replaceParams({ id: 'test-id' });
+
+    // @ts-expect-error useReplaceParams should accept input type, not output type
+    replaceParams({ id: 123 });
+
     // Verify that input and output types are different
     type InputIsString = InputType extends { id: string } ? true : false;
     type OutputIsNumber = OutputType extends { id: number } ? true : false;
@@ -241,5 +355,13 @@ describe('createRoute with StandardSchema', () => {
 
     // Should accept without animation parameter (default will be used)
     navigation.navigate('/test-with-defaults', {});
+
+    const setParams = RouteWithDefaults.useSetParams();
+    setParams({});
+    setParams({ animation: false });
+
+    const replaceParams = RouteWithDefaults.useReplaceParams();
+    replaceParams({});
+    replaceParams({ animation: false });
   });
 });

package/src/router/createRoute.ts

@@ -8,7 +8,7 @@ import {
   NativeStackNavigationProp,
 } from '@granite-js/native/@react-navigation/native-stack';
 import type { StandardSchemaV1 } from '@standard-schema/spec';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { RESERVED_PATHS } from './constants';
 import type { ErrorComponent } from './types';
 import { defaultParserParams } from './utils/defaultParserParams';
@@ -31,20 +31,18 @@ export interface RegisterScreen {}
 
 type RegisteredParamList = keyof RegisterScreenInput extends never ? ParamListBase : RegisterScreenInput;
 
-type NavigationParamsHelpers = Pick<
+export type NavigationProps = NativeStackNavigationProp<
   // @ts-expect-error - override type
-  NativeStackNavigationProp<RegisteredParamList, keyof RegisteredParamList>,
-  'replaceParams' | 'setParams'
+  RegisteredParamList
 >;
 
-export type NavigationProps = Omit<NativeStackNavigationProp<ParamListBase>, keyof NavigationParamsHelpers> &
-  NavigationParamsHelpers;
-
 export function useNavigation() {
   return useNavigationNative<NavigationProps>();
 }
 
-export type RouteHooksOptions<TScreen extends keyof RegisterScreen> =
+type RouteHookScreen = keyof RegisterScreenInput | keyof RegisterScreen;
+
+export type RouteHooksOptions<TScreen extends RouteHookScreen> =
   | {
       from: TScreen;
       strict?: true;
@@ -64,7 +62,7 @@ export const routeMap = new Map<
   }
 >();
 
-export function useMatchOptions<TScreen extends keyof RegisterScreen>(options: RouteHooksOptions<TScreen>) {
+export function useMatchOptions<TScreen extends RouteHookScreen>(options: RouteHooksOptions<TScreen>) {
   const route = useRoute();
   const from = 'from' in options ? options.from : (route.name as TScreen);
   const strict = 'from' in options ? true : options.strict;
@@ -78,11 +76,11 @@ export function useMatchOptions<TScreen extends keyof RegisterScreen>(options: R
       return null;
     }
 
-    if (!(routeMap.has(from) || RESERVED_PATHS.includes(from))) {
+    if (!(routeMap.has(from as keyof RegisterScreenInput) || RESERVED_PATHS.includes(from as string))) {
       throw new Error(`Route '${from}' is not registered`);
     }
 
-    const routeOptions = routeMap.get(from);
+    const routeOptions = routeMap.get(from as keyof RegisterScreenInput);
     return {
       ...routeOptions?.options,
       parserParams: routeOptions?.options.parserParams ?? defaultParserParams,
@@ -174,34 +172,69 @@ export function useParams<TScreen extends keyof RegisterScreen>(
   return params;
 }
 
+type SetParamsFunction<TParams> = (params: TParams extends undefined ? undefined : Partial<TParams>) => void;
+type ReplaceParamsFunction<TParams> = (params: TParams extends undefined ? undefined : TParams) => void;
+
+type CreatedRoute<TInput, TOutput> = {
+  _path: keyof RegisterScreenInput;
+  useNavigation: typeof useNavigation;
+  useParams: () => TOutput;
+  useSetParams: () => SetParamsFunction<TInput>;
+  useReplaceParams: () => ReplaceParamsFunction<TInput>;
+  _inputType: TInput;
+  _outputType: TOutput;
+};
+
+export function useSetParams<TScreen extends keyof RegisterScreenInput>(options: {
+  from: TScreen;
+  strict?: true;
+}): SetParamsFunction<RegisterScreenInput[TScreen]>;
+export function useSetParams(options: { strict: false }): SetParamsFunction<Readonly<object | undefined>>;
+
+export function useSetParams<TScreen extends keyof RegisterScreenInput>(
+  options: RouteHooksOptions<TScreen>
+): SetParamsFunction<RegisterScreenInput[TScreen]> | SetParamsFunction<Readonly<object | undefined>> {
+  useMatchOptions(options);
+  const navigation = useNavigationNative<NativeStackNavigationProp<ParamListBase>>();
+
+  return useCallback((params: never) => navigation.setParams(params), [navigation]) as
+    | SetParamsFunction<RegisterScreenInput[TScreen]>
+    | SetParamsFunction<Readonly<object | undefined>>;
+}
+
+export function useReplaceParams<TScreen extends keyof RegisterScreenInput>(options: {
+  from: TScreen;
+  strict?: true;
+}): ReplaceParamsFunction<RegisterScreenInput[TScreen]>;
+export function useReplaceParams(options: { strict: false }): ReplaceParamsFunction<Readonly<object | undefined>>;
+
+export function useReplaceParams<TScreen extends keyof RegisterScreenInput>(
+  options: RouteHooksOptions<TScreen>
+): ReplaceParamsFunction<RegisterScreenInput[TScreen]> | ReplaceParamsFunction<Readonly<object | undefined>> {
+  useMatchOptions(options);
+  const navigation = useNavigationNative<NativeStackNavigationProp<ParamListBase>>();
+
+  return useCallback((params: never) => navigation.replaceParams(params), [navigation]) as
+    | ReplaceParamsFunction<RegisterScreenInput[TScreen]>
+    | ReplaceParamsFunction<Readonly<object | undefined>>;
+}
+
 // Overload 1: StandardSchema pattern
 export function createRoute<TSchema extends StandardSchemaV1<any, any>>(
   path: keyof RegisterScreenInput,
   options: Omit<RouteOptions<any>, 'validateParams'> & {
     validateParams: TSchema;
   }
-): {
-  _path: keyof RegisterScreenInput;
-  useNavigation: typeof useNavigation;
-  useParams: () => InferOutput<TSchema>;
-  _inputType: InferInput<TSchema>;
-  _outputType: InferOutput<TSchema>;
-};
+): CreatedRoute<InferInput<TSchema>, InferOutput<TSchema>>;
 
 // Overload 2: Function pattern
 export function createRoute<T extends Readonly<object | undefined>>(
   path: keyof RegisterScreenInput,
   options: RouteOptions<T>
-): {
-  _path: keyof RegisterScreenInput;
-  useNavigation: typeof useNavigation;
-  useParams: () => T;
-  _inputType: T;
-  _outputType: T;
-};
+): CreatedRoute<T, T>;
 
 // Implementation
-export function createRoute(path: keyof RegisterScreenInput, options: RouteOptions<any>) {
+export function createRoute(path: keyof RegisterScreenInput, options: RouteOptions<any>): CreatedRoute<any, any> {
   const { component, screenOptions, errorComponent, ...restOptions } = options;
   routeMap.set(path, {
     options: restOptions,
@@ -215,6 +248,8 @@ export function createRoute(path: keyof RegisterScreenInput, options: RouteOptio
     _path,
     useNavigation,
     useParams: () => useParams({ from: _path as keyof RegisterScreen, strict: true }),
+    useSetParams: () => useSetParams({ from: _path, strict: true }),
+    useReplaceParams: () => useReplaceParams({ from: _path, strict: true }),
 
     // These properties are only used for type inference in the generated router files
     // The actual values are never accessed at runtime