@granite-js/react-native 0.1.12 → 0.1.14

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @granite-js/react-native
 
+## 0.1.14
+
+### Patch Changes
+
+- 0520d19: Fix type error
+- a06bb7d: Remove useWaitForReturnNavigator
+- 6d38bc5: Clarify error message for missing \_404 Page
+  - @granite-js/cli@0.1.14
+  - @granite-js/image@0.1.14
+  - @granite-js/jest@0.1.14
+  - @granite-js/lottie@0.1.14
+  - @granite-js/mpack@0.1.14
+  - @granite-js/native@0.1.14
+  - @granite-js/plugin-core@0.1.14
+  - @granite-js/style-utils@0.1.14
+
+## 0.1.13
+
+### Patch Changes
+
+- 6838797: Make backEventState a singleton
+  - @granite-js/cli@0.1.13
+  - @granite-js/image@0.1.13
+  - @granite-js/jest@0.1.13
+  - @granite-js/lottie@0.1.13
+  - @granite-js/mpack@0.1.13
+  - @granite-js/native@0.1.13
+  - @granite-js/plugin-core@0.1.13
+  - @granite-js/style-utils@0.1.13
+
 ## 0.1.12
 
 ### Patch Changes

package/dist/index.d.ts

@@ -11,7 +11,6 @@ export * from './keyboard';
 export * from './intersection-observer';
 export * from './impression-area';
 export * from './scroll-view-inertial-background';
-export * from './react';
 export * from './router/createRoute';
 export * from './event';
 export * from './video';

package/dist/use-back-event/useBackEvent.d.ts

@@ -32,9 +32,8 @@ interface PrivateBackEventControls extends BackEventControls {
  * </BackEventProvider>
  * ```
  */
-export declare function BackEventProvider({ children, backEvent, }: {
+export declare function BackEventProvider({ children }: {
     children: ReactNode;
-    backEvent: PrivateBackEventControls;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * @name useBackEventState
@@ -128,8 +127,5 @@ export declare function useBackEventState(): PrivateBackEventControls;
  * ```
  */
 export declare function useBackEvent(): BackEventControls;
-export declare function useBackEventContext(): {
-    onGoBack: () => void;
-    hasBackEvent: boolean;
-};
+export declare function useBackEventContext(): PrivateBackEventControls;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -74,7 +74,7 @@
     "@babel/core": "^7.24.9",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
-    "@granite-js/native": "0.1.12",
+    "@granite-js/native": "0.1.14",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -100,13 +100,13 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/cli": "0.1.12",
-    "@granite-js/image": "0.1.12",
-    "@granite-js/jest": "0.1.12",
-    "@granite-js/lottie": "0.1.12",
-    "@granite-js/mpack": "0.1.12",
-    "@granite-js/plugin-core": "0.1.12",
-    "@granite-js/style-utils": "0.1.12",
+    "@granite-js/cli": "0.1.14",
+    "@granite-js/image": "0.1.14",
+    "@granite-js/jest": "0.1.14",
+    "@granite-js/lottie": "0.1.14",
+    "@granite-js/mpack": "0.1.14",
+    "@granite-js/plugin-core": "0.1.14",
+    "@granite-js/style-utils": "0.1.14",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "1.3.0"
   }

package/src/app/AppRoot.tsx

@@ -2,7 +2,7 @@ import { SafeAreaProvider } from '@granite-js/native/react-native-safe-area-cont
 import type { ComponentType, PropsWithChildren } from 'react';
 import type { InitialProps } from '../initial-props';
 import { Router } from '../router';
-import { BackEventProvider, useBackEventState } from '../use-back-event';
+import { BackEventProvider } from '../use-back-event';
 import { App } from './App';
 import type { GraniteProps } from './Granite';
 import { getSchemePrefix } from '../utils/getSchemePrefix';
@@ -17,8 +17,6 @@ interface AppRootProps extends GraniteProps {
 }
 
 export function AppRoot({ appName, context, container: Container, initialProps, initialScheme, router }: AppRootProps) {
-  const backEventState = useBackEventState();
-
   const prefix = getSchemePrefix({
     appName,
     scheme: global.__granite.app.scheme,
@@ -28,7 +26,7 @@ export function AppRoot({ appName, context, container: Container, initialProps,
   return (
     <App {...initialProps}>
       <SafeAreaProvider>
-        <BackEventProvider backEvent={backEventState}>
+        <BackEventProvider>
           <Router
             context={context}
             initialProps={initialProps}

package/src/index.ts

@@ -13,7 +13,6 @@ export * from './keyboard';
 export * from './intersection-observer';
 export * from './impression-area';
 export * from './scroll-view-inertial-background';
-export * from './react';
 export * from './router/createRoute';
 export * from './event';
 export * from './video';

package/src/router/components/useRouterBackHandler.tsx

@@ -1,6 +1,6 @@
 import { NavigationContainerRefWithCurrent } from '@granite-js/native/@react-navigation/native';
 import { useCallback, useMemo } from 'react';
-import { useBackEventState } from '../../use-back-event';
+import { useBackEventContext } from '../../use-back-event';
 
 /**
  * @public
@@ -63,7 +63,7 @@ export function useInternalRouterBackHandler({
   navigationContainerRef: NavigationContainerRefWithCurrent<any>;
   onClose?: () => void;
 }) {
-  const { onBack, hasBackEvent } = useBackEventState();
+  const { hasBackEvent, onBack } = useBackEventContext();
   const canGoBack = !hasBackEvent;
 
   const handler = useCallback(() => {

package/src/router/utils/screen.tsx

@@ -72,6 +72,12 @@ export function getScreenPathMapConfig(routeScreens: RouteScreen[]) {
     path: '',
   };
 
+  const notFoundPage = routeScreens.find((screen) => screen.path === '/_404');
+
+  if (notFoundPage == null) {
+    throw new Error('404 page not found. Please create a `_404.ts` or `_404.tsx` file in the `pages/*` folder.');
+  }
+
   // https://reactnavigation.org/docs/configuring-links/#handling-unmatched-routes-or-404
   screensConfig['/_404'] = {
     path: '*',

package/src/use-back-event/useBackEvent.tsx

@@ -38,14 +38,10 @@ const BackEventContext = createContext<PrivateBackEventControls | null>(null);
  * </BackEventProvider>
  * ```
  */
-export function BackEventProvider({
-  children,
-  backEvent,
-}: {
-  children: ReactNode;
-  backEvent: PrivateBackEventControls;
-}) {
-  return <BackEventContext.Provider value={backEvent}>{children}</BackEventContext.Provider>;
+export function BackEventProvider({ children }: { children: ReactNode }) {
+  const backEventState = useBackEventState();
+
+  return <BackEventContext.Provider value={backEventState}>{children}</BackEventContext.Provider>;
 }
 
 /**
@@ -253,8 +249,5 @@ export function useBackEventContext() {
     throw new Error('useBackEvent must be used within a BackEventProvider');
   }
 
-  return {
-    onGoBack: context.onBack,
-    hasBackEvent: context.hasBackEvent,
-  };
+  return context;
 }

package/dist/react/index.d.ts

@@ -1 +0,0 @@
-export { useWaitForReturnNavigator } from './useWaitForReturnNavigator';

package/dist/react/useWaitForReturnNavigator.d.ts

@@ -1,39 +0,0 @@
-/**
- * @public
- * @category Screen Control
- * @name useWaitForReturnNavigator
- * @description
- * A Hook that helps execute the next code synchronously when returning from a screen transition.
- * Screen navigation uses [@react-navigation/native `useNavigation`'s `navigate`](https://reactnavigation.org/docs/6.x/navigation-prop#navigate).
- *
- * For example, it can be used when you want to log that a user has navigated to another screen and returned.
- *
- * @example
- * ### Example of code execution when returning from screen navigation
- *
- * When the **"Navigate"** button is pressed, it navigates to another screen, and logs are created when returning.
- *
- * ```tsx
- * import { Button } from 'react-native';
- * import { useWaitForReturnNavigator } from '@granite-js/react-native';
- *
- * export function UseWaitForReturnNavigator() {
- *   const navigate = useWaitForReturnNavigator();
- *
- *   return (
- *     <>
- *       <Button
- *         title="Navigate"
- *         onPress={async () => {
- *           console.log(1);
- *           await navigate('/examples/use-visibility');
- *           // This code executes when returning to the screen
- *           console.log(2);
- *         }}
- *       />
- *     </>
- *   );
- * }
- * ```
- */
-export declare function useWaitForReturnNavigator<T extends Record<string, object | undefined>>(): <RouteName extends keyof T>(route: RouteName, params?: T[RouteName]) => Promise<void>;

package/src/react/index.ts

@@ -1 +0,0 @@
-export { useWaitForReturnNavigator } from './useWaitForReturnNavigator';

package/src/react/useWaitForReturnNavigator.ts

@@ -1,75 +0,0 @@
-import { useNavigation } from '@granite-js/native/@react-navigation/native';
-import { NativeStackNavigationProp } from '@granite-js/native/@react-navigation/native-stack';
-import { useCallback, useRef } from 'react';
-import { useVisibilityChange, type VisibilityState } from '../visibility';
-
-/**
- * @public
- * @category Screen Control
- * @name useWaitForReturnNavigator
- * @description
- * A Hook that helps execute the next code synchronously when returning from a screen transition.
- * Screen navigation uses [@react-navigation/native `useNavigation`'s `navigate`](https://reactnavigation.org/docs/6.x/navigation-prop#navigate).
- *
- * For example, it can be used when you want to log that a user has navigated to another screen and returned.
- *
- * @example
- * ### Example of code execution when returning from screen navigation
- *
- * When the **"Navigate"** button is pressed, it navigates to another screen, and logs are created when returning.
- *
- * ```tsx
- * import { Button } from 'react-native';
- * import { useWaitForReturnNavigator } from '@granite-js/react-native';
- *
- * export function UseWaitForReturnNavigator() {
- *   const navigate = useWaitForReturnNavigator();
- *
- *   return (
- *     <>
- *       <Button
- *         title="Navigate"
- *         onPress={async () => {
- *           console.log(1);
- *           await navigate('/examples/use-visibility');
- *           // This code executes when returning to the screen
- *           console.log(2);
- *         }}
- *       />
- *     </>
- *   );
- * }
- * ```
- */
-
-export function useWaitForReturnNavigator<T extends Record<string, object | undefined>>() {
-  const callbacks = useRef<Array<() => void>>([]).current;
-  const navigation = useNavigation<NativeStackNavigationProp<T>>();
-
-  const startNavigating = useCallback(
-    <RouteName extends keyof T>(route: RouteName, params?: T[RouteName]): Promise<void> => {
-      return new Promise<void>((resolve) => {
-        callbacks.push(resolve);
-        navigation.navigate(route as any, params as any);
-      });
-    },
-    [callbacks, navigation]
-  );
-
-  const handleVisibilityChange = useCallback(
-    (state: VisibilityState) => {
-      if (state === 'visible' && callbacks.length > 0) {
-        for (const callback of callbacks) {
-          callback();
-        }
-
-        callbacks.splice(0, callbacks.length);
-      }
-    },
-    [callbacks]
-  );
-
-  useVisibilityChange(handleVisibilityChange);
-
-  return startNavigating;
-}