@granite-js/react-native 1.0.42 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @granite-js/react-native
 
+## 2.0.1
+
+### Patch Changes
+
+- @granite-js/blur-view@2.0.1
+- @granite-js/brownfield-module@2.0.1
+- @granite-js/cli@2.0.1
+- @granite-js/jest@2.0.1
+- @granite-js/mpack@2.0.1
+- @granite-js/native@2.0.1
+- @granite-js/plugin-core@2.0.1
+- @granite-js/style-utils@2.0.1
+- @granite-js/video@2.0.1
+
+## 2.0.0
+
+### Major Changes
+
+- 864fa2a: Start the Granite v2 release line.
+
+### Patch Changes
+
+- 864fa2a: Route session visibility through Granite's existing visibility provider and expose native session lifecycle as React state so remote apps can continue using `useVisibility()`.
+- Updated dependencies [864fa2a]
+  - @granite-js/mpack@2.0.0
+  - @granite-js/cli@2.0.0
+  - @granite-js/blur-view@2.0.0
+  - @granite-js/brownfield-module@2.0.0
+  - @granite-js/jest@2.0.0
+  - @granite-js/native@2.0.0
+  - @granite-js/plugin-core@2.0.0
+  - @granite-js/style-utils@2.0.0
+  - @granite-js/video@2.0.0
+
 ## 1.0.42
 
 ### Patch Changes

package/dist/app/App/index.ios.d.ts

@@ -1,6 +1,6 @@
 import { Props } from '.';
 type IOSInitialProps = Props & {
-    isVisible: boolean;
+    isVisible?: boolean;
 };
 export declare function App({ children, ...props }: IOSInitialProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/app/Granite.d.ts

@@ -1,6 +1,10 @@
 import { ComponentType, type JSX, PropsWithChildren } from 'react';
 import type { InitialProps } from '../initial-props';
 import type { RouterProps, RequireContext, SetIOSBackPressHandler } from '../router';
+interface GraniteAppRuntimeProps {
+    readonly presentationVisibility?: boolean;
+}
+type RegisteredAppProps = InitialProps & GraniteAppRuntimeProps;
 export interface GraniteProps {
     /**
      * @description
@@ -82,7 +86,8 @@ export interface GraniteProps {
  * ```
  */
 export declare const Granite: {
-    registerApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName, context, router, initialScheme, setIosSwipeGestureEnabled, setiOSBackPressHandler, getInitialUrl }: GraniteProps): (initialProps: InitialProps) => JSX.Element;
+    registerApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName, context, router, initialScheme, setIosSwipeGestureEnabled, setiOSBackPressHandler, getInitialUrl }: GraniteProps): (initialProps: RegisteredAppProps) => JSX.Element;
     registerHostApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName }: Pick<GraniteProps, "appName">): (initialProps: InitialProps) => React.JSX.Element;
     readonly appName: string;
 };
+export {};

package/package.json

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

package/src/app/App/index.ios.tsx

@@ -3,11 +3,11 @@ import { VisibilityProvider } from '../../visibility';
 import { Props } from '.';
 
 type IOSInitialProps = Props & {
-  isVisible: boolean;
+  isVisible?: boolean;
 };
 
 export function App({ children, ...props }: IOSInitialProps) {
-  const { isVisible } = useMemo(() => props, [props]);
+  const { isVisible = true } = useMemo(() => props, [props]);
 
   return <VisibilityProvider isVisible={isVisible}>{children}</VisibilityProvider>;
 }

package/src/app/Granite.spec.tsx

@@ -0,0 +1,75 @@
+import { render } from '@testing-library/react';
+import type { PropsWithChildren } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { InitialProps } from '../initial-props';
+import type { RequireContext } from '../router';
+import { Granite } from './Granite';
+
+const visibilityState = vi.hoisted<{ value: boolean | null }>(() => ({ value: null }));
+
+vi.mock('./AppRoot', async () => {
+  const { VisibilityChangedProvider, useVisibilityChanged } = await import('../visibility/useVisibilityChanged');
+
+  function Consumer() {
+    visibilityState.value = useVisibilityChanged();
+    return null;
+  }
+
+  return {
+    AppRoot: () => (
+      <VisibilityChangedProvider isVisible={true}>
+        <Consumer />
+      </VisibilityChangedProvider>
+    ),
+  };
+});
+
+vi.mock('./HostAppRoot', () => ({
+  HostAppRoot: () => null,
+}));
+
+vi.mock('@granite-js/brownfield-module', () => ({
+  GraniteBrownfieldModule: {
+    onVisibilityChanged: () => ({ remove: () => undefined }),
+  },
+}));
+
+vi.mock('../constant-bridges', () => ({
+  getSchemeUri: () => 'granite://visibility-runtime-test',
+}));
+
+vi.mock('../polyfills', () => ({
+  setupPolyfills: () => undefined,
+}));
+
+const context: RequireContext = Object.assign(
+  <T,>(id: string): T => {
+    throw new Error(`The route context is not used by this test: ${id}`);
+  },
+  {
+    id: 'visibility-runtime-test',
+    keys: () => [],
+    resolve: (id: string) => id,
+  }
+);
+
+describe('Granite.registerApp', () => {
+  it('installs presentation visibility inside the registered remote app root', () => {
+    // Given
+    function AppContainer({ children }: PropsWithChildren<InitialProps>) {
+      return children;
+    }
+    const Root = Granite.registerApp(AppContainer, {
+      appName: 'visibility-runtime-test',
+      context,
+    });
+
+    // When
+    render(
+      <Root platform="android" initialColorPreference="light" presentationVisibility={false} />
+    );
+
+    // Then
+    expect(visibilityState.value).toBe(false);
+  });
+});

package/src/app/Granite.tsx

@@ -7,6 +7,13 @@ import { AppRoot } from './AppRoot';
 import { HostAppRoot } from './HostAppRoot';
 import { getSchemeUri } from '../constant-bridges';
 import { setupPolyfills } from '../polyfills';
+import { VisibilityChangedProvider } from '../visibility/useVisibilityChanged';
+
+interface GraniteAppRuntimeProps {
+  readonly presentationVisibility?: boolean;
+}
+
+type RegisteredAppProps = InitialProps & GraniteAppRuntimeProps;
 
 export interface GraniteProps {
   /**
@@ -75,26 +82,28 @@ const createApp = () => {
     registerApp( 
       AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
       { appName, context, router, initialScheme, setIosSwipeGestureEnabled, setiOSBackPressHandler, getInitialUrl }: GraniteProps
-    ): (initialProps: InitialProps) => JSX.Element {
+    ): (initialProps: RegisteredAppProps) => JSX.Element {
       if (appName === ENTRY_BUNDLE_NAME) {
         throw new Error(`Reserved app name 'shared' cannot be used`);
       }
 
-      function Root(initialProps: InitialProps) {
+      function Root({ presentationVisibility = true, ...initialProps }: RegisteredAppProps) {
         const initialSchemeValue = (typeof initialScheme === 'function' ? initialScheme() : initialScheme) ?? getSchemeUri();
 
         return (
-          <AppRoot
-            container={AppContainer}
-            initialProps={initialProps}
-            initialScheme={initialSchemeValue}
-            setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}
-            setiOSBackPressHandler={setiOSBackPressHandler}
-            getInitialUrl={getInitialUrl}
-            appName={appName}
-            context={context}
-            router={router}
-          />
+          <VisibilityChangedProvider isVisible={presentationVisibility}>
+            <AppRoot
+              container={AppContainer}
+              initialProps={initialProps}
+              initialScheme={initialSchemeValue}
+              setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}
+              setiOSBackPressHandler={setiOSBackPressHandler}
+              getInitialUrl={getInitialUrl}
+              appName={appName}
+              context={context}
+              router={router}
+            />
+          </VisibilityChangedProvider>
         );
       }
 

package/src/visibility/useVisibilityChanged.spec.tsx

@@ -0,0 +1,49 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { VisibilityChangedProvider, useVisibilityChanged } from './useVisibilityChanged';
+
+describe('VisibilityChangedProvider', () => {
+  it('keeps a child visible when every visibility boundary is visible', () => {
+    // Given
+    let receivedVisibility: boolean | null = null;
+
+    function Consumer() {
+      receivedVisibility = useVisibilityChanged();
+      return null;
+    }
+
+    // When
+    render(
+      <VisibilityChangedProvider isVisible={true}>
+        <VisibilityChangedProvider isVisible={true}>
+          <Consumer />
+        </VisibilityChangedProvider>
+      </VisibilityChangedProvider>
+    );
+
+    // Then
+    expect(receivedVisibility).toBe(true);
+  });
+
+  it('keeps a child hidden when an outer visibility boundary is hidden', () => {
+    // Given
+    let receivedVisibility: boolean | null = null;
+
+    function Consumer() {
+      receivedVisibility = useVisibilityChanged();
+      return null;
+    }
+
+    // When
+    render(
+      <VisibilityChangedProvider isVisible={false}>
+        <VisibilityChangedProvider isVisible={true}>
+          <Consumer />
+        </VisibilityChangedProvider>
+      </VisibilityChangedProvider>
+    );
+
+    // Then
+    expect(receivedVisibility).toBe(false);
+  });
+});

package/src/visibility/useVisibilityChanged.tsx

@@ -26,7 +26,10 @@ export function VisibilityChangedProvider({
   children,
   isVisible,
 }: PropsWithChildren<{ isVisible: boolean }>): ReactElement {
-  return <VisibilityChangedContext.Provider value={isVisible}>{children}</VisibilityChangedContext.Provider>;
+  const parentVisibility = useContext(VisibilityChangedContext);
+  const visibility = (parentVisibility ?? true) && isVisible;
+
+  return <VisibilityChangedContext.Provider value={visibility}>{children}</VisibilityChangedContext.Provider>;
 }
 
 /**