@granite-js/react-native 0.0.1

package/dist/visibility/useVisibilityChanged.d.ts

@@ -0,0 +1,41 @@
+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.
+ *
+ * @param {ReactNode | undefined} children - Child components that check screen visibility.
+ * @param {boolean} isVisible - A boolean value indicating whether the screen is visible.
+ * @returns {ReactElement} - A React Provider component wrapped with `VisibilityChangedContext.Provider`.
+ * @example
+ * ```typescript
+ * export function VisibilityProvider({ isVisible, children }: Props) {
+ *   return (
+ *     <VisibilityChangedProvider isVisible={isVisible}>
+ *       {children}
+ *     </VisibilityChangedProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function VisibilityChangedProvider({ children, isVisible, }: PropsWithChildren<{
+    isVisible: boolean;
+}>): ReactElement;
+/**
+ * @name useVisibilityChanged
+ * @category Hooks
+ * @kind function
+ * @description
+ * A Hook that returns whether a React Native screen is visible.
+ * @returns {boolean} - Returns whether the screen is visible.
+ * @throws {Error} Throws an error when not used within a `VisibilityChangedProvider`.
+ * @example
+ * ```typescript
+ * const isVisible = useVisibilityChanged();
+ * console.log(isVisible);
+ * // true or false
+ * ```
+ */
+export declare function useVisibilityChanged(): boolean;

package/dist/visibility/utils/usePrevious.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @name usePrevious
+ * @category Hooks
+ * @kind function
+ * @description
+ * A Hook that returns the previous value.
+ * @param {T} value - The value to return the previous value of.
+ * @returns {T} - Returns the previous value.
+ * @example
+ * ```typescript
+ *  const isVisible = useVisibility();
+ *  const prevValue = usePrevious<boolean>(isVisible) ?? false;
+ * ```
+ */
+export declare function usePrevious<T>(value: T): T;

package/jest.d.ts

@@ -0,0 +1 @@
+export * from './dist/jest';

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@granite-js/react-native",
+  "version": "0.0.1",
+  "description": "The Granite Framework",
+  "bin": {
+    "granite": "./bin/cli.js"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest --no-watch",
+    "lint": "eslint .",
+    "build": "tsup && tsc -p tsconfig.build.json",
+    "prepack": "yarn build"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./src/index.ts"
+    },
+    "./async-bridges": {
+      "types": "./src/async-bridges.ts",
+      "default": "./src/async-bridges.ts"
+    },
+    "./constant-bridges": {
+      "types": "./src/constant-bridges.ts",
+      "default": "./src/constant-bridges.ts"
+    },
+    "./jest": {
+      "types": "./dist/jest/index.d.ts",
+      "default": "./dist/jest/index.js"
+    },
+    "./cli": {
+      "types": "./cli.d.ts",
+      "default": "./cli.js"
+    },
+    "./config": {
+      "types": "./config.d.ts",
+      "default": "./config.js"
+    },
+    "./types": {
+      "types": "./dist/types/global.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "dist",
+    "bin",
+    "config.js",
+    "cli.js",
+    "*.d.ts"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-typescript": "^7.24.7",
+    "@granite-js/native": "0.0.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
+    "@types/babel__core": "^7",
+    "@types/babel__preset-env": "^7",
+    "@types/node": "^22.10.2",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "^18",
+    "esbuild": "^0.25.4",
+    "eslint": "^9.7.0",
+    "jsdom": "^25.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.6",
+    "tsup": "^8.5.0",
+    "typescript": "5.8.3",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {
+    "@granite-js/native": "*",
+    "@types/react": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "dependencies": {
+    "@granite-js/cli": "0.0.1",
+    "@granite-js/image": "0.0.1",
+    "@granite-js/jest": "0.0.1",
+    "@granite-js/mpack": "0.0.1",
+    "@granite-js/style-utils": "0.0.1",
+    "es-toolkit": "^1.34.1",
+    "react-native-url-polyfill": "1.3.0"
+  }
+}

package/presets.d.ts

@@ -0,0 +1 @@
+export * from './dist/presets';

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

@@ -0,0 +1,6 @@
+import { VisibilityProvider } from '../../visibility';
+import { Props } from '.';
+
+export function App({ children }: Props) {
+  return <VisibilityProvider isVisible={true}>{children}</VisibilityProvider>;
+}

package/src/app/App/index.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { InitialProps } from '../../initial-props';
+
+export type Props = PropsWithChildren<InitialProps>;
+
+export declare function App(props: Props): JSX.Element;

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

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

package/src/app/Granite.tsx

@@ -0,0 +1,130 @@
+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 type { InitialProps } from '../initial-props';
+import { Router, type RouterProps, type RequireContext } from '../router';
+import { BackEventProvider, useBackEventState } from '../use-back-event';
+
+export interface GraniteProps {
+  /**
+   * @description
+   * The name of the app.
+   */
+  appName: string;
+  /**
+   * @description
+   * The context of the app.
+   *
+   * @TODO Hide context
+   */
+  context: RequireContext;
+  /**
+   * @description
+   * Configuration object to be passed to the router.
+   */
+  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;
+
+  return {
+    registerApp(
+      AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
+      { appName, context, router }: GraniteProps
+    ): (initialProps: InitialProps) => JSX.Element {
+      function Root(initialProps: InitialProps) {
+        return (
+          <AppRoot
+            container={AppContainer}
+            initialProps={initialProps}
+            appName={appName}
+            context={context}
+            router={router}
+          />
+        );
+      }
+
+      registerPage(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.');
+      }
+      return _appName;
+    },
+  };
+};
+
+/**
+ * @public
+ * @category Core
+ * @name Granite
+ * @description
+ *
+ * @property {RegisterService} registerApp - This function sets up the basic environment for your service and helps you start service development quickly without needing complex configuration. By just passing `appName`, you can immediately use various features such as file-based routing, query parameter handling, and back navigation control.
+ *
+ * The features provided by the `Granite.registerApp` function are as follows:
+ * - Routing: URLs are automatically mapped according to file paths. It works similarly to Next.js's file-based routing. For example, the `/my-service/pages/index.ts` file can be accessed at `scheme://my-service`, and the `/my-service/pages/home.ts` file can be accessed at `scheme://my-service/home`.
+ * - Query Parameters: You can easily use query parameters received through URL schemes. For example, you can receive a `referrer` parameter and log it.
+ * - Back Navigation Control: You can control back navigation events. For example, when a user presses back on a screen, you can show a dialog or close the screen.
+ * - Screen Visibility: You can determine whether a screen is visible or hidden from the user. For example, you can use this value to handle specific actions when a user leaves for the home screen.
+ *
+ * @example
+ *
+ * ### Example of creating with the `Granite` component
+ *
+ * ```tsx
+ * import { PropsWithChildren } from 'react';
+ * import { Granite, InitialProps } from '@granite-js/react-native';
+ * import { context } from '../require.context';
+ *
+ * function AppContainer({ children }: PropsWithChildren<InitialProps>) {
+ *  return <>{children}</>;
+ * }
+ *
+ * export default Granite.registerApp(AppContainer, {
+ *  appName: 'my-app',
+ *  context,
+ * });
+ *
+ * ```
+ */
+export const Granite = createApp();

package/src/app/index.ts

@@ -0,0 +1,2 @@
+export { Granite } from './Granite';
+export type { GraniteProps } from './Granite';

package/src/app/registerPage.ts

@@ -0,0 +1,29 @@
+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;
+}

package/src/async-bridges.ts

@@ -0,0 +1,2 @@
+export * from './native-modules/natives/closeView';
+export * from './native-modules/natives/openURL';

package/src/constant-bridges.ts

@@ -0,0 +1 @@
+export * from './native-modules/natives/getSchemeUri';

package/src/dev-entrypoint/index.tsx

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

package/src/event/abstract.ts

@@ -0,0 +1,130 @@
+export abstract class GraniteEventDefinition<O = undefined, R = void> {
+  // Event name (literal type recommended)
+  abstract name: string;
+
+  /**
+   * Method to implement event logic.
+   * @param options - Event options (undefined if not used)
+   * @param onEvent - Callback called when the event is triggered.
+   * @param onError - Callback called on error (error type: unknown)
+   */
+  abstract listener(options: O, onEvent: (response: R) => void, onError: (error: unknown) => void): void;
+
+  /**
+   * Additional logic to execute when removing the event listener.
+   * If needed in the plugin, override this method and it will be called
+   * when the listener is removed.
+   */
+  abstract remove(): void;
+}
+
+/**
+ * GraniteEvent class registers event definition instances passed to the constructor.
+ * The addEventListener method only allows registered event names, and the types of passed
+ * options/callbacks are automatically inferred.
+ *
+ * Each subscription is uniquely identified by (event name + options).
+ */
+export class GraniteEvent<Defs extends GraniteEventDefinition<unknown, unknown>> {
+  private definitions = new Map<Defs['name'], Defs>();
+  private subscriptionGroups = new Map<
+    string,
+    {
+      eventName: Defs['name'];
+      options: Extract<Defs, { name: Defs['name'] }> extends GraniteEventDefinition<infer O, any> ? O : never;
+      callbacks: Array<{
+        onEvent: (response: any) => void;
+        onError?: (error: unknown) => void;
+      }>;
+    }
+  >();
+
+  constructor(defs: Defs[]) {
+    for (const def of defs) {
+      this.definitions.set(def.name, def);
+    }
+  }
+
+  addEventListener<E extends Defs['name']>(
+    eventName: E,
+    listener: Extract<Defs, { name: E }> extends GraniteEventDefinition<infer O, infer R>
+      ? [O] extends [undefined]
+        ? { onEvent: (response: R) => void; onError?: (error: unknown) => void }
+        : { options: O; onEvent: (response: R) => void; onError?: (error: unknown) => void }
+      : never
+  ): () => void {
+    const def = this.definitions.get(eventName);
+    if (!def) {
+      throw new Error(`Event "${String(eventName)}" is not registered.`);
+    }
+    const opts = (listener as any).options;
+    const key = this._getKey(String(eventName), opts);
+    let group = this.subscriptionGroups.get(key);
+
+    if (!group) {
+      group = {
+        eventName,
+        options: opts,
+        callbacks: [],
+      };
+      this.subscriptionGroups.set(key, group);
+
+      const aggregatedOnEvent = (response: any) => {
+        for (const cb of group!.callbacks) {
+          cb.onEvent(response);
+        }
+      };
+      const aggregatedOnError = (error: unknown) => {
+        for (const cb of group!.callbacks) {
+          if (cb.onError) {
+            cb.onError(error);
+          }
+        }
+      };
+
+      def.listener(group.options, aggregatedOnEvent, aggregatedOnError);
+    }
+
+    group.callbacks.push({ onEvent: listener.onEvent, onError: listener.onError });
+
+    return () => {
+      const grp = this.subscriptionGroups.get(key);
+      if (!grp) {
+        return;
+      }
+      grp.callbacks = grp.callbacks.filter((cb) => cb.onEvent !== listener.onEvent);
+      if (grp.callbacks.length === 0) {
+        def.remove();
+        this.subscriptionGroups.delete(key);
+      }
+    };
+  }
+
+  emit<E extends Defs['name']>(
+    eventName: E,
+    data: Extract<Defs, { name: E }> extends GraniteEventDefinition<unknown, infer R> ? R : never
+  ) {
+    const def = this.definitions.get(eventName);
+    if (!def) {
+      throw new Error(`Event "${String(eventName)}" is not registered.`);
+    }
+
+    for (const group of this.subscriptionGroups.values()) {
+      if (group.eventName === eventName) {
+        for (const callback of group.callbacks) {
+          try {
+            callback.onEvent(data);
+          } catch (error) {
+            if (callback.onError) {
+              callback.onError(error);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  private _getKey(eventName: string, options: unknown): string {
+    return `${eventName}:${options ? JSON.stringify(options) : ''}`;
+  }
+}

package/src/event/index.ts

@@ -0,0 +1,2 @@
+export * from './abstract';
+export * from './useGraniteEvent';

package/src/event/useGraniteEvent.ts

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { GraniteEvent, GraniteEventDefinition } from './abstract';
+import { BackEventControls, useBackEvent } from '../use-back-event/useBackEvent';
+
+class BackEvent extends GraniteEventDefinition<void, void> {
+  name = 'backEvent' as const;
+
+  ref = {
+    remove: () => {},
+  };
+
+  constructor(private backEventControls: BackEventControls) {
+    super();
+  }
+
+  remove() {
+    this.ref.remove();
+  }
+
+  listener(_: void, onEvent: (response: void) => void): void {
+    this.backEventControls.addEventListener(onEvent);
+    this.ref.remove = () => this.backEventControls.removeEventListener(onEvent);
+  }
+}
+
+export function useGraniteEvent() {
+  const backEvent = useBackEvent();
+
+  const event = useMemo(() => {
+    return new GraniteEvent([new BackEvent(backEvent)]);
+  }, [backEvent]);
+
+  return event;
+}