@granite-js/react-native 0.1.31 → 0.1.33

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @granite-js/react-native
 
+## 0.1.33
+
+### Patch Changes
+
+- fdf55a6: fix(router): type infer incorrect undefined
+- Updated dependencies [fdf55a6]
+  - @granite-js/native@0.1.33
+  - @granite-js/image@0.1.33
+  - @granite-js/jest@0.1.33
+  - @granite-js/lottie@0.1.33
+  - @granite-js/style-utils@0.1.33
+  - @granite-js/cli@0.1.33
+  - @granite-js/mpack@0.1.33
+  - @granite-js/plugin-core@0.1.33
+
+## 0.1.32
+
+### Patch Changes
+
+- 74b2223: fix(react-native): VisibilityChangedProvider only provider
+- 7572713: bump version up babel
+- Updated dependencies [74b2223]
+- Updated dependencies [7572713]
+  - @granite-js/native@0.1.32
+  - @granite-js/plugin-core@0.1.32
+  - @granite-js/style-utils@0.1.32
+  - @granite-js/image@0.1.32
+  - @granite-js/mpack@0.1.32
+  - @granite-js/cli@0.1.32
+  - @granite-js/jest@0.1.32
+  - @granite-js/lottie@0.1.32
+
 ## 0.1.31
 
 ### Patch Changes

package/dist/router/createRoute.d.ts

@@ -48,13 +48,13 @@ export declare function createRoute<TSchema extends StandardSchemaV1<any, any>>(
     _path: keyof RegisterScreenInput;
     useNavigation: typeof useNavigation;
     useParams: () => InferOutput<TSchema>;
-    _inputType?: InferInput<TSchema>;
-    _outputType?: 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;
+    _inputType: T;
+    _outputType: T;
 };

package/dist/visibility/VisibilityProvider.d.ts

@@ -7,8 +7,9 @@ interface Props {
  * @name VisibilityProvider
  * @description
  * A Provider that manages whether a ReactNative view is currently in the foreground state.
+ * It subscribes to the app's `visibilityChanged` event to detect and manage screen visibility.
  * @param {boolean} isVisible - Whether the app is in the foreground state.
- * @param {ReactNode | undefined} children - Child components that observe `AppState`.
+ * @param {ReactNode | undefined} children - Child components that observe `visibilityChanged` and `AppState` event.
  * @returns {ReactElement} - A React Provider component wrapped with `VisibilityChangedProvider`.
  * @example
  * ```typescript

package/dist/visibility/useVisibilityChanged.d.ts

@@ -3,8 +3,7 @@ import { PropsWithChildren, ReactElement } from 'react';
  * @name VisibilityChangedProvider
  * @kind function
  * @description
- * A Provider that manages whether a React Native screen is visible.
- * It subscribes to the app's `visibilityChanged` event to detect and manage screen visibility.
+ * A Provider that manages whether a React Native screen is visible provider.
  *
  * @param {ReactNode | undefined} children - Child components that check screen visibility.
  * @param {boolean} isVisible - A boolean value indicating whether the screen is visible.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -88,10 +88,10 @@
     "*.d.ts"
   ],
   "devDependencies": {
-    "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.8",
-    "@babel/preset-typescript": "^7.24.7",
-    "@granite-js/native": "0.1.31",
+    "@babel/core": "7.28.5",
+    "@babel/preset-env": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@granite-js/native": "0.1.33",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -99,7 +99,7 @@
     "@types/node": "^22.10.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "^18",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/coverage-v8": "^4.0.12",
     "esbuild": "0.25.8",
     "eslint": "^9.7.0",
     "jsdom": "^25.0.1",
@@ -108,7 +108,7 @@
     "react-native": "0.72.6",
     "tsup": "^8.5.0",
     "typescript": "5.8.3",
-    "vitest": "^2.1.8",
+    "vitest": "^4.0.12",
     "zod": "^4.1.12"
   },
   "peerDependencies": {
@@ -118,13 +118,13 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/cli": "0.1.31",
-    "@granite-js/image": "0.1.31",
-    "@granite-js/jest": "0.1.31",
-    "@granite-js/lottie": "0.1.31",
-    "@granite-js/mpack": "0.1.31",
-    "@granite-js/plugin-core": "0.1.31",
-    "@granite-js/style-utils": "0.1.31",
+    "@granite-js/cli": "0.1.33",
+    "@granite-js/image": "0.1.33",
+    "@granite-js/jest": "0.1.33",
+    "@granite-js/lottie": "0.1.33",
+    "@granite-js/mpack": "0.1.33",
+    "@granite-js/plugin-core": "0.1.33",
+    "@granite-js/style-utils": "0.1.33",
     "@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

@@ -77,6 +77,30 @@ describe('createRoute', () => {
     // @ts-expect-error Type error should occur since 'from' and 'strict: false' are conflicting options
     assertType(useParams({ 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'];
+
+    // _inputType should be inferred as the exact type, not a union with undefined
+    assertType<{
+      id: string;
+      name: string;
+    }>({} as InputType);
+
+    // _outputType should be inferred as the exact type, not a union with undefined
+    assertType<{
+      id: string;
+      name: string;
+    }>({} as OutputType);
+
+    // Verify that undefined is not part of the union
+    type InputHasUndefined = undefined extends InputType ? true : false;
+    type OutputHasUndefined = undefined extends OutputType ? true : false;
+
+    assertType<false>({} as InputHasUndefined);
+    assertType<false>({} as OutputHasUndefined);
+  });
 });
 
 describe('createRoute with StandardSchema', () => {
@@ -95,7 +119,56 @@ describe('createRoute with StandardSchema', () => {
     }>(RouteWithSchema.useParams());
   });
 
+  it('should infer _inputType and _outputType without undefined', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const RouteWithSchema = createRoute('/test-schema', {
+      component: () => null,
+      validateParams: z.object({
+        id: z.string(),
+        count: z.number(),
+      }),
+    });
+
+    type InputType = (typeof RouteWithSchema)['_inputType'];
+    type OutputType = (typeof RouteWithSchema)['_outputType'];
+    type UseParamsReturnType = ReturnType<(typeof RouteWithSchema)['useParams']>;
+
+    // _inputType should be inferred as the exact type, not a union with undefined
+    assertType<{
+      id: string;
+      count: number;
+    }>({} as InputType);
+
+    // _outputType should be inferred as the exact type, not a union with undefined
+    assertType<{
+      id: string;
+      count: number;
+    }>({} as OutputType);
+
+    // useParams should return the exact type, not a union with undefined
+    assertType<{
+      id: string;
+      count: number;
+    }>({} as UseParamsReturnType);
+
+    // Verify that undefined is not part of the union for all types
+    type InputHasUndefined = undefined extends InputType ? true : false;
+    type OutputHasUndefined = undefined extends OutputType ? true : false;
+    type UseParamsHasUndefined = undefined extends UseParamsReturnType ? true : false;
+
+    assertType<false>({} as InputHasUndefined);
+    assertType<false>({} as OutputHasUndefined);
+    assertType<false>({} as UseParamsHasUndefined);
+
+    // useNavigation should accept input type for navigate parameters
+    const navigation = useNavigation();
+
+    // Should accept exact input type
+    navigation.navigate('/test-schema', { id: 'test', count: 123 });
+  });
+
   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({
@@ -103,10 +176,35 @@ describe('createRoute with StandardSchema', () => {
       }),
     });
 
-    // Should be number (output), not string (input)
+    type InputType = (typeof RouteWithTransform)['_inputType'];
+    type OutputType = (typeof RouteWithTransform)['_outputType'];
+    type UseParamsReturnType = ReturnType<(typeof RouteWithTransform)['useParams']>;
+
+    // _inputType should be string (before transformation)
+    assertType<{
+      id: string;
+    }>({} as InputType);
+
+    // _outputType should be number (after transformation)
+    assertType<{
+      id: number;
+    }>({} as OutputType);
+
+    // useParams should return output type (number)
     assertType<{
       id: number;
-    }>(RouteWithTransform.useParams());
+    }>({} as UseParamsReturnType);
+
+    // useNavigation should accept input type (string)
+    const navigation = useNavigation();
+    navigation.navigate('/test-transform', { id: 'test-id' });
+
+    // Verify that input and output types are different
+    type InputIsString = InputType extends { id: string } ? true : false;
+    type OutputIsNumber = OutputType extends { id: number } ? true : false;
+
+    assertType<true>({} as InputIsString);
+    assertType<true>({} as OutputIsNumber);
   });
 
   it('should work with useParams hook', () => {

package/src/router/createRoute.ts

@@ -175,8 +175,8 @@ export function createRoute<TSchema extends StandardSchemaV1<any, any>>(
   _path: keyof RegisterScreenInput;
   useNavigation: typeof useNavigation;
   useParams: () => InferOutput<TSchema>;
-  _inputType?: InferInput<TSchema>;
-  _outputType?: InferOutput<TSchema>;
+  _inputType: InferInput<TSchema>;
+  _outputType: InferOutput<TSchema>;
 };
 
 // Overload 2: Function pattern
@@ -187,8 +187,8 @@ export function createRoute<T extends Readonly<object | undefined>>(
   _path: keyof RegisterScreenInput;
   useNavigation: typeof useNavigation;
   useParams: () => T;
-  _inputType?: T;
-  _outputType?: T;
+  _inputType: T;
+  _outputType: T;
 };
 
 // Implementation
@@ -205,5 +205,10 @@ export function createRoute(path: keyof RegisterScreenInput, options: RouteOptio
     _path,
     useNavigation,
     useParams: () => useParams({ from: _path as keyof RegisterScreen, strict: true }),
+
+    // These properties are only used for type inference in the generated router files
+    // The actual values are never accessed at runtime
+    _inputType: {},
+    _outputType: {},
   };
 }

package/src/visibility/VisibilityProvider.tsx

@@ -1,6 +1,7 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, useEffect, useState } from 'react';
 import { AppStateProvider } from './useIsAppForeground';
 import { VisibilityChangedProvider } from './useVisibilityChanged';
+import { nativeEventEmitter } from '../native-event-emitter/nativeEventEmitter';
 
 interface Props {
   isVisible: boolean;
@@ -11,8 +12,9 @@ interface Props {
  * @name VisibilityProvider
  * @description
  * A Provider that manages whether a ReactNative view is currently in the foreground state.
+ * It subscribes to the app's `visibilityChanged` event to detect and manage screen visibility.
  * @param {boolean} isVisible - Whether the app is in the foreground state.
- * @param {ReactNode | undefined} children - Child components that observe `AppState`.
+ * @param {ReactNode | undefined} children - Child components that observe `visibilityChanged` and `AppState` event.
  * @returns {ReactElement} - A React Provider component wrapped with `VisibilityChangedProvider`.
  * @example
  * ```typescript
@@ -28,8 +30,20 @@ interface Props {
  * ```
  */
 export function VisibilityProvider({ isVisible, children }: Props): ReactElement {
+  const [visible, setVisible] = useState(isVisible);
+
+  useEffect(() => {
+    const subscription = nativeEventEmitter.addListener('visibilityChanged', (nextVisible) => {
+      setVisible(nextVisible);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
   return (
-    <VisibilityChangedProvider isVisible={isVisible}>
+    <VisibilityChangedProvider isVisible={visible}>
       <AppStateProvider>{children}</AppStateProvider>
     </VisibilityChangedProvider>
   );

package/src/visibility/useVisibilityChanged.tsx

@@ -1,5 +1,4 @@
-import { createContext, PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
-import { nativeEventEmitter } from '../native-event-emitter';
+import { createContext, PropsWithChildren, ReactElement, useContext } from 'react';
 
 const VisibilityChangedContext = createContext<boolean | undefined>(undefined);
 
@@ -7,8 +6,7 @@ const VisibilityChangedContext = createContext<boolean | undefined>(undefined);
  * @name VisibilityChangedProvider
  * @kind function
  * @description
- * A Provider that manages whether a React Native screen is visible.
- * It subscribes to the app's `visibilityChanged` event to detect and manage screen visibility.
+ * A Provider that manages whether a React Native screen is visible provider.
  *
  * @param {ReactNode | undefined} children - Child components that check screen visibility.
  * @param {boolean} isVisible - A boolean value indicating whether the screen is visible.
@@ -28,19 +26,7 @@ export function VisibilityChangedProvider({
   children,
   isVisible,
 }: PropsWithChildren<{ isVisible: boolean }>): ReactElement {
-  const [visible, setVisible] = useState(isVisible);
-
-  useEffect(() => {
-    const subscription = nativeEventEmitter.addListener('visibilityChanged', (nextVisible) => {
-      setVisible(nextVisible);
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return <VisibilityChangedContext.Provider value={visible}>{children}</VisibilityChangedContext.Provider>;
+  return <VisibilityChangedContext.Provider value={isVisible}>{children}</VisibilityChangedContext.Provider>;
 }
 
 /**