@granite-js/react-native 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @granite-js/react-native
 
+## 0.1.7
+
+### Patch Changes
+
+- Updated dependencies [208c053]
+  - @granite-js/mpack@0.1.7
+  - @granite-js/cli@0.1.7
+  - @granite-js/image@0.1.7
+  - @granite-js/jest@0.1.7
+  - @granite-js/lottie@0.1.7
+  - @granite-js/native@0.1.7
+  - @granite-js/style-utils@0.1.7
+
 ## 0.1.6
 
 ### Patch Changes

package/dist/app/AppRoot.d.ts

@@ -0,0 +1 @@
+export declare function AppRoot({ appName, context, container: Container, initialProps, router }: AppRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/app/Granite.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType, PropsWithChildren } from 'react';
 import type { InitialProps } from '../initial-props';
-import { type RouterProps, type RequireContext } from '../router';
+import type { RouterProps, RequireContext } from '../router';
 export interface GraniteProps {
     /**
      * @description
@@ -56,5 +56,6 @@ export interface GraniteProps {
  */
 export declare const Granite: {
     registerApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName, context, router }: GraniteProps): (initialProps: InitialProps) => JSX.Element;
+    registerHostApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName }: Pick<GraniteProps, "appName">): (initialProps: InitialProps) => JSX.Element;
     readonly appName: string;
 };

package/dist/app/HostAppRoot.d.ts

@@ -0,0 +1 @@
+export declare function HostAppRoot({ container: Container, initialProps }: HostAppRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const ENTRY_BUNDLE_NAME = "shared";

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

@@ -23,22 +23,6 @@ export declare function getRouteScreens(context: RequireContext): RouteScreen[];
  * @description Maps paths of screens.
  *
  * @param {RouteScreen[]} routeScreens - List of screens that can be navigated to
- *
- * @example
- * ```tsx
- * import { registerPage, getRouteScreens, getScreenPathMapConfig, Router } from '@granite-js/react-native';
- * import { context } from '../require.context';
- *
- * function App() {
- *   return <Router context={context} prefix={'scheme://minibench'} />;
- * }
- *
- * export default registerPage(
- *   App,
- *   'minibench',
- *   getScreenPathMapConfig(getRouteScreens(context))
- * );
- * ```
  */
 export declare function getScreenPathMapConfig(routeScreens: RouteScreen[]): ScreenPath;
 /**

package/dist/types/global.d.ts

@@ -1,11 +1,7 @@
 export interface GraniteGlobal {
-    shared: {
-        buildNumber: string;
-    };
     app: {
         name: string;
         scheme: string;
-        buildNumber: string;
     };
 }
 declare global {

package/package.json

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

package/src/app/AppRoot.tsx

@@ -0,0 +1,39 @@
+import { SafeAreaProvider } from '@granite-js/native/react-native-safe-area-context';
+import type { ComponentType, PropsWithChildren } from 'react';
+import type { GraniteProps } from './Granite';
+import type { InitialProps } from '../initial-props';
+import { BackEventProvider, useBackEventState } from '../use-back-event';
+import { App } from './App';
+import { Router } from '../router';
+
+/**
+ * @internal
+ */
+interface AppRootProps extends GraniteProps {
+  container: ComponentType<PropsWithChildren<InitialProps>>;
+  initialProps: InitialProps;
+}
+
+export function AppRoot({ appName, context, container: Container, initialProps, router }: AppRootProps) {
+  const backEventState = useBackEventState();
+  const scheme = global.__granite.app.scheme;
+  const baseScheme = `${scheme}://${appName}`;
+
+  return (
+    <App {...initialProps}>
+      <SafeAreaProvider>
+        <BackEventProvider backEvent={backEventState}>
+          <Router
+            context={context}
+            initialProps={initialProps}
+            container={Container}
+            canGoBack={!backEventState.hasBackEvent}
+            onBack={backEventState.onBack}
+            prefix={baseScheme}
+            {...router}
+          />
+        </BackEventProvider>
+      </SafeAreaProvider>
+    </App>
+  );
+}

package/src/app/Granite.tsx

@@ -1,10 +1,10 @@
-import { SafeAreaProvider } from '@granite-js/native/react-native-safe-area-context';
 import { ComponentType, PropsWithChildren } from 'react';
-import { App } from './App';
-import { registerPage } from './registerPage';
+import { AppRegistry } from 'react-native';
+import { ENTRY_BUNDLE_NAME } from '../constants';
 import type { InitialProps } from '../initial-props';
-import { Router, type RouterProps, type RequireContext } from '../router';
-import { BackEventProvider, useBackEventState } from '../use-back-event';
+import type { RouterProps, RequireContext } from '../router';
+import { AppRoot } from './AppRoot';
+import { HostAppRoot } from './HostAppRoot';
 
 export interface GraniteProps {
   /**
@@ -26,47 +26,26 @@ export interface GraniteProps {
   router?: RouterProps;
 }
 
-/**
- * @internal
- */
-interface AppRootProps extends GraniteProps {
-  container: ComponentType<PropsWithChildren<InitialProps>>;
-  initialProps: InitialProps;
-}
-
-const scheme = global.__granite.app.scheme;
-
-function AppRoot({ appName, context, container, initialProps, router }: AppRootProps) {
-  const backEventState = useBackEventState();
-  const baseScheme = `${scheme}://${appName}`;
-
-  return (
-    <App {...initialProps}>
-      <SafeAreaProvider>
-        <BackEventProvider backEvent={backEventState}>
-          <Router
-            context={context}
-            initialProps={initialProps}
-            container={container}
-            canGoBack={!backEventState.hasBackEvent}
-            onBack={backEventState.onBack}
-            prefix={baseScheme}
-            {...router}
-          />
-        </BackEventProvider>
-      </SafeAreaProvider>
-    </App>
-  );
-}
-
 const createApp = () => {
   let _appName: string | null = null;
 
+  function registerComponent(appKey: string, component: React.ComponentType<any>): string {
+    if (AppRegistry.getAppKeys().includes(appKey)) {
+      throw new Error(`App with key '${appKey}' already registered`);
+    }
+
+    return AppRegistry.registerComponent(appKey, () => component);
+  }
+
   return {
     registerApp(
       AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
       { appName, context, router }: GraniteProps
     ): (initialProps: InitialProps) => JSX.Element {
+      if (appName === ENTRY_BUNDLE_NAME) {
+        throw new Error(`Reserved app name 'shared' cannot be used`);
+      }
+
       function Root(initialProps: InitialProps) {
         return (
           <AppRoot
@@ -79,14 +58,33 @@ const createApp = () => {
         );
       }
 
-      registerPage(Root);
+      registerComponent(appName, Root);
+      _appName = appName;
+
+      return Root;
+    },
+
+    registerHostApp(
+      AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
+      { appName }: Pick<GraniteProps, 'appName'>
+    ): (initialProps: InitialProps) => JSX.Element {
+      if (appName !== ENTRY_BUNDLE_NAME) {
+        throw new Error(`Host appName must be 'shared'`);
+      }
+
+      function Root(initialProps: InitialProps) {
+        return <HostAppRoot container={AppContainer} initialProps={initialProps} />;
+      }
+
+      registerComponent(appName, Root);
       _appName = appName;
+
       return Root;
     },
 
     get appName(): string {
       if (_appName === null) {
-        throw new Error('Granite.appName can only be used after registerApp has been called.');
+        throw new Error('Granite.appName can only be used after registerApp or registerHostApp has been called.');
       }
       return _appName;
     },

package/src/app/HostAppRoot.tsx

@@ -0,0 +1,19 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import type { InitialProps } from '../initial-props';
+import { App } from './App';
+
+/**
+ * @internal
+ */
+interface HostAppRootProps {
+  container: ComponentType<PropsWithChildren<InitialProps>>;
+  initialProps: InitialProps;
+}
+
+export function HostAppRoot({ container: Container, initialProps }: HostAppRootProps) {
+  return (
+    <App {...initialProps}>
+      <Container {...initialProps} />
+    </App>
+  );
+}

package/src/blur/ReactNativeBlurModule.ts

@@ -7,7 +7,6 @@ const ReactNativeBlurModule = (() => {
   }
 
   try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
     return require('@granite-js/native/@react-native-community/blur') as {
       BlurView: typeof BlurView;
       VibrancyView: typeof VibrancyView;

package/src/constants.ts

@@ -0,0 +1 @@
+export const ENTRY_BUNDLE_NAME = 'shared';

package/src/dev-entrypoint/index.tsx

@@ -1,21 +1,17 @@
-'use strict';
-
 import type { ComponentType } from 'react';
 import { AppRegistry } from 'react-native';
+import { ENTRY_BUNDLE_NAME } from '../constants';
 import { setup } from '../rn-polyfills';
 
 setup();
 
-let registered = false;
-
 export function register(Component: ComponentType<any>) {
-  if (registered) {
-    throw new Error('둘 이상의 Page를 register할 수 없습니다. entrypoint에서 1회에 한해 호출해주세요.');
+  if (AppRegistry.getAppKeys().includes(ENTRY_BUNDLE_NAME)) {
+    console.warn('Granite entrypoint is already registered');
+    return;
   }
-  registered = true;
 
   const component = (props: any) => <Component {...props} />;
 
-  AppRegistry.registerComponent('Page', () => component);
-  AppRegistry.registerComponent('shared', () => component);
+  AppRegistry.registerComponent(ENTRY_BUNDLE_NAME, () => component);
 }

package/src/router/utils/screen.tsx

@@ -48,22 +48,6 @@ export function getRouteScreens(context: RequireContext): RouteScreen[] {
  * @description Maps paths of screens.
  *
  * @param {RouteScreen[]} routeScreens - List of screens that can be navigated to
- *
- * @example
- * ```tsx
- * import { registerPage, getRouteScreens, getScreenPathMapConfig, Router } from '@granite-js/react-native';
- * import { context } from '../require.context';
- *
- * function App() {
- *   return <Router context={context} prefix={'scheme://minibench'} />;
- * }
- *
- * export default registerPage(
- *   App,
- *   'minibench',
- *   getScreenPathMapConfig(getRouteScreens(context))
- * );
- * ```
  */
 export function getScreenPathMapConfig(routeScreens: RouteScreen[]) {
   const screensConfig: ScreenPath = {};

package/src/types/global.ts

@@ -3,23 +3,13 @@
 import type { ComponentType } from 'react';
 
 export interface GraniteGlobal {
-  shared: {
-    buildNumber: string;
-  };
   app: {
     name: string;
     scheme: string;
-    buildNumber: string;
   };
 }
 
 declare global {
-  // @internal
-  var __SPLIT_CHUNK_ENABLED__: boolean;
-
-  // @internal
-  var __granite_require__: (id: string) => any;
-
   // @internal
   var __granite: GraniteGlobal;
 

package/dist/app/registerPage.d.ts

@@ -1,20 +0,0 @@
-import type { ComponentType } from 'react';
-/**
- * @kind function
- * @name registerPage
- * @description
- * Function to register a page component.
- *
- * @param {ComponentType<any>} Page - The page component to register
- * @returns {ComponentType<any>} Returns the registered page component
- *
- * @example
- * ```typescript
- * import { registerPage } from './path/to/module';
- *
- * const MyPage: React.FC = () => <div>My Page</div>;
- *
- * registerPage(MyPage);
- * ```
- */
-export declare function registerPage(Page: ComponentType<any>): ComponentType<any>;

package/src/app/registerPage.ts

@@ -1,29 +0,0 @@
-import type { ComponentType } from 'react';
-
-const globalThis = new Function('return this')();
-
-/**
- * @kind function
- * @name registerPage
- * @description
- * Function to register a page component.
- *
- * @param {ComponentType<any>} Page - The page component to register
- * @returns {ComponentType<any>} Returns the registered page component
- *
- * @example
- * ```typescript
- * import { registerPage } from './path/to/module';
- *
- * const MyPage: React.FC = () => <div>My Page</div>;
- *
- * registerPage(MyPage);
- * ```
- */
-export function registerPage(Page: ComponentType<any>): ComponentType<any> {
-  if (globalThis.__SPLIT_CHUNK_ENABLED__) {
-    globalThis.Page = Page;
-  }
-
-  return Page;
-}