@granite-js/react-native 2.5.5 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @granite-js/react-native
 
+## 3.0.0
+
+### Patch Changes
+
+- 586459d: feat(react-native): export InitialPropsProvider
+  - @granite-js/blur-view@3.0.0
+  - @granite-js/brownfield-module@3.0.0
+  - @granite-js/cli@3.0.0
+  - @granite-js/config@3.0.0
+  - @granite-js/jest@3.0.0
+  - @granite-js/mpack@3.0.0
+  - @granite-js/style-utils@3.0.0
+  - @granite-js/video@3.0.0
+
 ## 2.5.5
 
 ### Patch Changes
@@ -228,6 +242,57 @@
   - @granite-js/style-utils@2.0.0
   - @granite-js/video@2.0.0
 
+## 1.0.45
+
+### Patch Changes
+
+- @granite-js/blur-view@1.0.45
+- @granite-js/brownfield-module@1.0.45
+- @granite-js/cli@1.0.45
+- @granite-js/jest@1.0.45
+- @granite-js/mpack@1.0.45
+- @granite-js/plugin-core@1.0.45
+- @granite-js/style-utils@1.0.45
+- @granite-js/video@1.0.45
+
+## 1.0.44
+
+### Patch Changes
+
+- e97fe95: Use an unrestricted native peer range instead of an exact workspace constraint, preventing compatible updates from causing an unintended major release.
+- 23a710f: Read navigation focus through `useSyncExternalStore` so focus changes between rendering and subscription are not missed by `useIsFocusedSafely`, `useVisibility`, or visibility effects. Preserve the focused fallback when no navigation context is available.
+
+  Visibility effects follow committed visibility snapshots with React's effect setup and cleanup lifecycle.
+
+- 92a23a8: Add `useVisibilityEffect` to run an effect while a screen is visible and clean it up when visibility is lost, the callback changes, or the component unmounts.
+
+  Deprecate `useVisibilityChange` without changing its behavior. Use `useVisibilityEffect` for effects with cleanup, or `useVisibility` with React's `useEffect` for explicit visibility change handling.
+
+- Updated dependencies [e97fe95]
+  - @granite-js/blur-view@1.0.44
+  - @granite-js/jest@1.0.44
+  - @granite-js/brownfield-module@1.0.44
+  - @granite-js/cli@1.0.44
+  - @granite-js/mpack@1.0.44
+  - @granite-js/plugin-core@1.0.44
+  - @granite-js/style-utils@1.0.44
+  - @granite-js/video@1.0.44
+
+## 1.0.43
+
+### Patch Changes
+
+- afd4e50: feat(react-native): export InitialPropsProvider
+  - @granite-js/blur-view@1.0.43
+  - @granite-js/brownfield-module@1.0.43
+  - @granite-js/cli@1.0.43
+  - @granite-js/jest@1.0.43
+  - @granite-js/mpack@1.0.43
+  - @granite-js/native@1.0.43
+  - @granite-js/plugin-core@1.0.43
+  - @granite-js/style-utils@1.0.43
+  - @granite-js/video@1.0.43
+
 ## 1.0.42
 
 ### Patch Changes

package/bin/cli.mjs

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { initialize } from '@granite-js/cli';
+
+initialize();

package/dist/app/Granite.d.ts

@@ -86,7 +86,7 @@ export interface GraniteProps {
  * ```
  */
 export declare const Granite: {
-    registerApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName, context, router, initialScheme, setIosSwipeGestureEnabled, setiOSBackPressHandler, getInitialUrl }: GraniteProps): (initialProps: RegisteredAppProps) => 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;
 };

package/dist/app/context/InitialPropsContext.d.ts

@@ -1,6 +1,33 @@
 import { type PropsWithChildren } from 'react';
 import { InitialProps } from '../../initial-props';
 export declare const InitialPropsContext: import("react").Context<InitialProps | null>;
+/**
+ * @public
+ * @name InitialPropsProvider
+ * @category Core
+ * @description Provides the initial data passed from the native platform (Android or iOS) to `useInitialProps` and `useInitialSearchParams`. `Granite.registerApp` already renders this provider, so you only need it when you register the root component yourself instead of going through the router.
+ * @param {InitialProps} initialProps - Initial data the native platform passed to the root component.
+ * @param {ReactNode | undefined} children - Child components that read the initial data.
+ * @returns {ReactElement} A React Provider component.
+ * @example
+ *
+ * ### Registering a root component without the router
+ *
+ * ```tsx
+ * import { AppRegistry } from 'react-native';
+ * import { InitialPropsProvider, type InitialProps } from '@granite-js/react-native';
+ *
+ * function App(initialProps: InitialProps) {
+ *   return (
+ *     <InitialPropsProvider initialProps={initialProps}>
+ *       <MyApp />
+ *     </InitialPropsProvider>
+ *   );
+ * }
+ *
+ * AppRegistry.registerComponent('my-app', () => App);
+ * ```
+ */
 export declare function InitialPropsProvider({ children, initialProps }: PropsWithChildren<{
     initialProps: InitialProps;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/app/index.d.ts

@@ -1,4 +1,4 @@
-export { useInitialProps } from './context/InitialPropsContext';
+export { InitialPropsProvider, useInitialProps } from './context/InitialPropsContext';
 export { useInitialSearchParams } from './context/useInitialSearchParams';
 export { Granite } from './Granite';
 export type { GraniteProps } from './Granite';

package/dist/cli.d.mts

@@ -1,3 +1,3 @@
 export { initialize } from '@granite-js/cli';
-import '@granite-js/plugin-core';
+import '@granite-js/config';
 import '@granite-js/jest';

package/dist/config.d.mts

@@ -1 +1 @@
-export { defineConfig } from '@granite-js/plugin-core';
+export { BuildPlatform, BundlerAdapter, BundlerAdapterContext, BundlerBuildOption, BundlerServerOptions, GraniteConfig, GraniteContext, defineConfig } from '@granite-js/config';

package/dist/config.d.ts

@@ -1 +1,2 @@
-export { defineConfig } from '@granite-js/plugin-core';
+export { defineConfig } from '@granite-js/config';
+export type { BundlerAdapter, BundlerAdapterContext, BundlerBuildOption, BundlerServerOptions, BuildPlatform, GraniteContext, GraniteConfig, } from '@granite-js/config';

package/dist/config.js

@@ -20,10 +20,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/config.ts
 var config_exports = {};
 __export(config_exports, {
-  defineConfig: () => import_plugin_core.defineConfig
+  defineConfig: () => import_config.defineConfig
 });
 module.exports = __toCommonJS(config_exports);
-var import_plugin_core = require("@granite-js/plugin-core");
+var import_config = require("@granite-js/config");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   defineConfig

package/dist/config.mjs

@@ -1,5 +1,5 @@
 // src/config.ts
-import { defineConfig } from "@granite-js/plugin-core";
+import { defineConfig } from "@granite-js/config";
 export {
   defineConfig
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import './types/global';
-export { Granite, useInitialSearchParams, useInitialProps } from './app';
+export { Granite, InitialPropsProvider, useInitialSearchParams, useInitialProps } from './app';
 export * from '@granite-js/style-utils';
 export { type GraniteImageSource, type GraniteImageStatic, type ResizeMode, type CachePolicy, type Priority, type OnLoadEvent, type OnProgressEvent, } from '@granite-js/native/react-native-fast-image';
 export * from './image';

package/dist/router/utils/screen.d.ts

@@ -12,7 +12,11 @@ import { RequireContext, RouteScreen } from '../types';
  * ```tsx
  * import { getRouteScreens } from '@granite-js/react-native';
  *
- * const context = require.context('../pages');
+ * const pageModules = import.meta.glob('./**' + '/*.{js,jsx,ts,tsx}', { base: './pages', eager: true });
+ * const context = ((key: string) => pageModules[key]) as Parameters<typeof getRouteScreens>[0];
+ * context.keys = () => Object.keys(pageModules);
+ * context.resolve = (key: string) => key;
+ * context.id = 'import.meta.glob';
  * const screens = getRouteScreens(context);
  * ```
  */

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@granite-js/react-native",
-  "version": "2.5.5",
+  "version": "3.0.0",
   "description": "The Granite Framework",
   "bin": {
-    "granite": "./bin/cli.js"
+    "granite": "./bin/cli.mjs"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -91,8 +91,8 @@
     "@babel/core": "7.28.5",
     "@babel/preset-env": "7.28.5",
     "@babel/preset-typescript": "7.28.5",
-    "@granite-js/native": "2.5.5",
-    "@granite-js/vitest": "2.5.5",
+    "@granite-js/native": "3.0.0",
+    "@granite-js/vitest": "3.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -121,14 +121,14 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/blur-view": "2.5.5",
-    "@granite-js/brownfield-module": "2.5.5",
-    "@granite-js/cli": "2.5.5",
-    "@granite-js/jest": "2.5.5",
-    "@granite-js/mpack": "2.5.5",
-    "@granite-js/plugin-core": "2.5.5",
-    "@granite-js/style-utils": "2.5.5",
-    "@granite-js/video": "2.5.5",
+    "@granite-js/blur-view": "3.0.0",
+    "@granite-js/brownfield-module": "3.0.0",
+    "@granite-js/cli": "3.0.0",
+    "@granite-js/config": "3.0.0",
+    "@granite-js/jest": "3.0.0",
+    "@granite-js/mpack": "3.0.0",
+    "@granite-js/style-utils": "3.0.0",
+    "@granite-js/video": "3.0.0",
     "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"

package/src/app/Granite.spec.tsx

@@ -65,9 +65,7 @@ describe('Granite.registerApp', () => {
     });
 
     // When
-    render(
-      <Root platform="android" initialColorPreference="light" presentationVisibility={false} />
-    );
+    render(<Root platform="android" initialColorPreference="light" presentationVisibility={false} />);
 
     // Then
     expect(visibilityState.value).toBe(false);

package/src/app/Granite.tsx

@@ -79,16 +79,25 @@ const createApp = () => {
   }
 
   return {
-    registerApp( 
+    registerApp(
       AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
-      { appName, context, router, initialScheme, setIosSwipeGestureEnabled, setiOSBackPressHandler, getInitialUrl }: GraniteProps
+      {
+        appName,
+        context,
+        router,
+        initialScheme,
+        setIosSwipeGestureEnabled,
+        setiOSBackPressHandler,
+        getInitialUrl,
+      }: GraniteProps
     ): (initialProps: RegisteredAppProps) => JSX.Element {
       if (appName === ENTRY_BUNDLE_NAME) {
         throw new Error(`Reserved app name 'shared' cannot be used`);
       }
 
       function Root({ presentationVisibility = true, ...initialProps }: RegisteredAppProps) {
-        const initialSchemeValue = (typeof initialScheme === 'function' ? initialScheme() : initialScheme) ?? getSchemeUri();
+        const initialSchemeValue =
+          (typeof initialScheme === 'function' ? initialScheme() : initialScheme) ?? getSchemeUri();
 
         return (
           <VisibilityChangedProvider isVisible={presentationVisibility}>

package/src/app/context/InitialPropsContext.tsx

@@ -3,6 +3,33 @@ import { InitialProps } from '../../initial-props';
 
 export const InitialPropsContext = createContext<InitialProps | null>(null);
 
+/**
+ * @public
+ * @name InitialPropsProvider
+ * @category Core
+ * @description Provides the initial data passed from the native platform (Android or iOS) to `useInitialProps` and `useInitialSearchParams`. `Granite.registerApp` already renders this provider, so you only need it when you register the root component yourself instead of going through the router.
+ * @param {InitialProps} initialProps - Initial data the native platform passed to the root component.
+ * @param {ReactNode | undefined} children - Child components that read the initial data.
+ * @returns {ReactElement} A React Provider component.
+ * @example
+ *
+ * ### Registering a root component without the router
+ *
+ * ```tsx
+ * import { AppRegistry } from 'react-native';
+ * import { InitialPropsProvider, type InitialProps } from '@granite-js/react-native';
+ *
+ * function App(initialProps: InitialProps) {
+ *   return (
+ *     <InitialPropsProvider initialProps={initialProps}>
+ *       <MyApp />
+ *     </InitialPropsProvider>
+ *   );
+ * }
+ *
+ * AppRegistry.registerComponent('my-app', () => App);
+ * ```
+ */
 export function InitialPropsProvider({ children, initialProps }: PropsWithChildren<{ initialProps: InitialProps }>) {
   return <InitialPropsContext.Provider value={initialProps}>{children}</InitialPropsContext.Provider>;
 }

package/src/app/index.ts

@@ -1,4 +1,4 @@
-export { useInitialProps } from './context/InitialPropsContext';
+export { InitialPropsProvider, useInitialProps } from './context/InitialPropsContext';
 export { useInitialSearchParams } from './context/useInitialSearchParams';
 export { Granite } from './Granite';
 export type { GraniteProps } from './Granite';

package/src/config.ts

@@ -1 +1,10 @@
-export { defineConfig } from '@granite-js/plugin-core';
+export { defineConfig } from '@granite-js/config';
+export type {
+  BundlerAdapter,
+  BundlerAdapterContext,
+  BundlerBuildOption,
+  BundlerServerOptions,
+  BuildPlatform,
+  GraniteContext,
+  GraniteConfig,
+} from '@granite-js/config';

package/src/index.ts

@@ -1,6 +1,6 @@
 import './types/global';
 
-export { Granite, useInitialSearchParams, useInitialProps } from './app';
+export { Granite, InitialPropsProvider, useInitialSearchParams, useInitialProps } from './app';
 export * from '@granite-js/style-utils';
 export {
   type GraniteImageSource,

package/src/router/utils/screen.tsx

@@ -16,7 +16,11 @@ import { validateRouteParams } from './validateRouteParams';
  * ```tsx
  * import { getRouteScreens } from '@granite-js/react-native';
  *
- * const context = require.context('../pages');
+ * const pageModules = import.meta.glob('./**' + '/*.{js,jsx,ts,tsx}', { base: './pages', eager: true });
+ * const context = ((key: string) => pageModules[key]) as Parameters<typeof getRouteScreens>[0];
+ * context.keys = () => Object.keys(pageModules);
+ * context.resolve = (key: string) => key;
+ * context.id = 'import.meta.glob';
  * const screens = getRouteScreens(context);
  * ```
  */

package/src/utils/getSchemePrefix.spec.ts

@@ -16,10 +16,10 @@ describe('getSchemePrefix', () => {
     const result = getSchemePrefix({
       scheme: 'myapp',
       appName: 'testapp',
-      host: 'super',
+      host: 'example',
     });
 
-    expect(result).toBe('myapp://super/testapp');
+    expect(result).toBe('myapp://example/testapp');
   });
 
   it('should handle different schemes', () => {

package/bin/cli.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require('@granite-js/cli').initialize();