@granite-js/react-native 0.0.1

package/src/router/utils/createParentRouteScreenMap.ts

@@ -0,0 +1,136 @@
+import { getFileNameFromPath } from './path';
+import type { RouteScreen } from '../types/RouteScreen';
+
+/**
+ * Extracts only the directory path from a given file path
+ * Example) './about/test' -> './about'
+ * Example) './about'     -> '.' (default logic)
+ *  but... For testing, if the path is included in 'layoutDirs', return as is
+ */
+function getDirectoryPath(filePath: string, layoutDirs: Set<string>): string {
+  // If included in layoutDirs, this path itself is a directory-based route
+  if (layoutDirs.has(filePath)) {
+    return filePath;
+  }
+
+  const lastSlashIndex = filePath.lastIndexOf('/');
+  if (lastSlashIndex === -1) {
+    // If there's no slash, treat as '.'
+    return '.';
+  }
+  const dirPath = filePath.substring(0, lastSlashIndex);
+  return dirPath === '' ? '.' : dirPath;
+}
+
+/**
+ * Get parent directory path
+ * Example) './nested/deep' -> './nested'
+ * Example) './nested' -> '.'
+ * Example) '.' -> '' (no more parent)
+ */
+function getParentDirectory(dirPath: string): string {
+  if (dirPath === '.' || dirPath === '') {
+    return '';
+  }
+  const idx = dirPath.lastIndexOf('/');
+  if (idx === -1) {
+    return '.';
+  }
+  const parent = dirPath.substring(0, idx);
+  return parent === '' ? '.' : parent;
+}
+
+/**
+ * @name createParentRouteScreenMap
+ * @description
+ *   Finds a specific keyword in a given list of files and
+ *   maps each page/layout to use its "nearest parent layout"
+ */
+export function createParentRouteScreenMap(routeScreens: RouteScreen[], keyword: string): Map<string, RouteScreen> {
+  // 1) Find keyword files and record their directories in layoutDirs set
+  //    Example) "./about/[keyword]" -> layoutDirs.add("./about")
+  const layoutDirs = new Set<string>();
+  const layoutScreens = new Map<string, RouteScreen>();
+
+  for (const screen of routeScreens) {
+    const fileName = getFileNameFromPath(screen.path, { withExtension: false });
+    if (fileName === keyword) {
+      const dirPath = screen.path.substring(0, screen.path.lastIndexOf('/'));
+      layoutDirs.add(dirPath || '.'); // Store directory path like './about'
+    }
+  }
+
+  // 2) Create layoutScreens (directory->keyword file) mapping
+  for (const screen of routeScreens) {
+    const fileName = getFileNameFromPath(screen.path, { withExtension: false });
+    if (fileName === keyword) {
+      // The directory this keyword file belongs to is already in layoutDirs
+      // dirPath: './about', './nested', etc.
+      const dirPath = getDirectoryPath(screen.path, layoutDirs);
+      layoutScreens.set(dirPath, screen);
+    }
+  }
+
+  /**
+   * 3) Function to find the nearest layout by traversing up parent directories
+   *    - skipSameDir: whether to check from own directory or from parent
+   *
+   *    memo: (dirPath + '|' + skipSameDir) -> RouteScreen | undefined
+   */
+  const memo = new Map<string, RouteScreen | undefined>();
+
+  function findNearestLayout(dir: string, skipSameDir = false): RouteScreen | undefined {
+    const cacheKey = dir + '|' + skipSameDir;
+    if (memo.has(cacheKey)) {
+      return memo.get(cacheKey);
+    }
+
+    let current = dir;
+
+    if (skipSameDir) {
+      current = getParentDirectory(current);
+    }
+
+    while (current) {
+      if (layoutScreens.has(current)) {
+        const foundLayout = layoutScreens.get(current);
+        memo.set(cacheKey, foundLayout);
+        return foundLayout;
+      }
+      if (current === '.' || current === '') {
+        break;
+      }
+      current = getParentDirectory(current);
+    }
+
+    memo.set(cacheKey, undefined);
+    return undefined;
+  }
+
+  // 4) Finally create "path -> parent layout" mapping
+  const parentRouteScreenMap = new Map<string, RouteScreen>();
+
+  for (const screen of routeScreens) {
+    const fileName = getFileNameFromPath(screen.path, { withExtension: false });
+
+    // Get the "directory" this file (or directory) belongs to
+    const dirPath = getDirectoryPath(screen.path, layoutDirs);
+
+    if (fileName === keyword) {
+      // (1) If this is a keyword file, search for layout in "parent directory"
+      //     => must skip self (skipSameDir=true)
+      const parentLayout = findNearestLayout(dirPath, true);
+      if (parentLayout) {
+        parentRouteScreenMap.set(screen.path, parentLayout);
+      }
+    } else {
+      // (2) If it's a regular page (or regular file), search for layout from own directory up
+      const nearestLayout = findNearestLayout(dirPath, false);
+      if (nearestLayout) {
+        parentRouteScreenMap.set(screen.path, nearestLayout);
+      }
+    }
+  }
+
+  return parentRouteScreenMap;
+}

package/src/router/utils/defaultParserParams.spec.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { defaultParserParams } from './defaultParserParams';
+
+describe('defaultParserParams', () => {
+  it('Parses numeric and boolean values from strings', () => {
+    const result = defaultParserParams({ foo: '123', bar: 'true' });
+    expect(result).toEqual({
+      foo: 123,
+      bar: true,
+    });
+  });
+
+  it('Parses parameters in query string format', () => {
+    const result = defaultParserParams({ foo: '123', bar: 'true' });
+    expect(result).toEqual({
+      foo: 123,
+      bar: true,
+    });
+  });
+
+  it('Maintains original value for unparseable strings', () => {
+    const result = defaultParserParams({ name: 'john', age: 'invalid' });
+    expect(result).toEqual({
+      name: 'john',
+      age: 'invalid',
+    });
+  });
+
+  it('Parses JSON format arrays', () => {
+    const result = defaultParserParams({ numbers: '[1,2,3]', strings: '["a","b"]' });
+    expect(result).toEqual({
+      numbers: [1, 2, 3],
+      strings: ['a', 'b'],
+    });
+  });
+
+  it('Parses JSON format objects', () => {
+    const result = defaultParserParams({ user: '{"name":"john","age":30}' });
+    expect(result).toEqual({
+      user: {
+        name: 'john',
+        age: 30,
+      },
+    });
+  });
+});

package/src/router/utils/defaultParserParams.ts

@@ -0,0 +1,19 @@
+/**
+ * Parses URL query string and converts it to an object.
+ * @param params - Query string to parse
+ * @returns Parsed query object
+ * @example
+ * // Input: { foo: '123', bar: 'true' }
+ * // Output: { foo: 123, bar: true }
+ */
+export function defaultParserParams(params?: Record<string, string>): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(params ?? {}).map(([key, value]) => {
+      try {
+        return [key, JSON.parse(value)];
+      } catch {
+        return [key, value];
+      }
+    })
+  );
+}

package/src/router/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './screen';
+export * from './defaultParserParams';

package/src/router/utils/matchers.ts

@@ -0,0 +1,5 @@
+/** `[page]` -> `page` */
+export function matchDynamicName(name: string): string | undefined {
+  // eslint-disable-next-line no-useless-escape
+  return name.match(/^\[([^[\](?:\.\.\.)]+?)\]$/)?.[1];
+}

package/src/router/utils/mergeParentLayoutScreen.spec.tsx

@@ -0,0 +1,112 @@
+import { render } from '@testing-library/react';
+import { ReactNode } from 'react';
+import { it, describe, expect } from 'vitest';
+import { Screen } from '..';
+import { mergeParentLayoutScreen } from './mergeParentLayoutScreen';
+import { RouteScreen } from '../types/RouteScreen';
+
+declare global {
+  interface HTMLElement {
+    innerHTML: string;
+  }
+}
+
+function ItemLayout({ children }: { children: ReactNode }) {
+  return <div id="item-layout">{children}</div>;
+}
+
+function RootLayout({ children }: { children: ReactNode }) {
+  return <div id="root-layout">{children}</div>;
+}
+
+function SubItemLayout({ children }: { children: ReactNode }) {
+  return <div id="sub-item-layout">{children}</div>;
+}
+
+describe('mergeParentLayoutScreen', () => {
+  it('Parent layout and child layout should be nested in the correct order', () => {
+    const map = new Map<string, RouteScreen>();
+
+    map.set('./item/detail', {
+      component: ItemLayout as Screen,
+      path: './item/_layout',
+    });
+
+    map.set('./item/_layout', {
+      component: RootLayout as Screen,
+      path: './_layout',
+    });
+
+    const MergedLayout = mergeParentLayoutScreen(map, './item/detail');
+
+    const { container } = render(<MergedLayout>item detail</MergedLayout>);
+
+    // Should be nested in order: RootLayout > ItemLayout > content
+    expect(container.innerHTML).toBe(
+      render(
+        <div id="root-layout">
+          <div id="item-layout">item detail</div>
+        </div>
+      ).container.innerHTML
+    );
+  });
+
+  it('Triple nested layout should render in the correct order', () => {
+    const map = new Map<string, RouteScreen>();
+
+    map.set('./item/detail/sub', {
+      component: SubItemLayout as Screen,
+      path: './item/detail/_layout',
+    });
+
+    map.set('./item/detail/_layout', {
+      component: ItemLayout as Screen,
+      path: './item/_layout',
+    });
+
+    map.set('./item/_layout', {
+      component: RootLayout as Screen,
+      path: './_layout',
+    });
+
+    const MergedLayout = mergeParentLayoutScreen(map, './item/detail/sub');
+
+    const { container } = render(<MergedLayout>sub item detail</MergedLayout>);
+
+    // Should be nested in order: RootLayout > ItemLayout > SubItemLayout > content
+    expect(container.innerHTML).toBe(
+      render(
+        <div id="root-layout">
+          <div id="item-layout">
+            <div id="sub-item-layout">sub item detail</div>
+          </div>
+        </div>
+      ).container.innerHTML
+    );
+  });
+
+  it('Single layout should render correctly', () => {
+    const map = new Map<string, RouteScreen>();
+
+    map.set('./item/detail', {
+      component: RootLayout as Screen,
+      path: './_layout',
+    });
+
+    const MergedLayout = mergeParentLayoutScreen(map, './item/detail');
+
+    const { container } = render(<MergedLayout>item detail</MergedLayout>);
+
+    expect(container.innerHTML).toBe(render(<div id="root-layout">item detail</div>).container.innerHTML);
+  });
+
+  it('Should render only content when no layout is defined', () => {
+    const map = new Map<string, RouteScreen>();
+
+    const MergedLayout = mergeParentLayoutScreen(map, './item/detail');
+
+    const { container } = render(<MergedLayout>item detail</MergedLayout>);
+
+    expect(container.innerHTML).toBe(render(<>item detail</>).container.innerHTML);
+  });
+});

package/src/router/utils/mergeParentLayoutScreen.tsx

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from 'react';
+import { RouteScreen } from '../types/RouteScreen';
+
+export type LayoutScreen = FC<{ children: ReactNode }>;
+
+/**
+ * Starting from the layout mapped to a specific path, traverses up to parent layouts,
+ * creates an array in the order of "innermost → outermost",
+ * then builds up the final wrapper component using reduce.
+ *
+ * Example) map:
+ *   './item/detail' => { component: ItemLayout, path: './item/_layout' }
+ *   './item/_layout' => { component: RootLayout, path: './_layout' }
+ *
+ * => layoutChain = [ItemLayout, RootLayout]
+ * => Final rendering result: <RootLayout><ItemLayout>children</ItemLayout></RootLayout>
+ */
+export function mergeParentLayoutScreen(screens: Map<string, RouteScreen>, path: string): LayoutScreen {
+  // Final wrapper component
+  let MergedLayout: FC<{ children?: ReactNode }> = ({ children }) => <>{children}</>;
+
+  let currentPath: string | undefined = path;
+  while (currentPath) {
+    const routeScreen = screens.get(currentPath);
+    if (!routeScreen) {
+      break;
+    }
+
+    // Wrap with immediate parent wrapper
+    const LayoutScreen = routeScreen.component as LayoutScreen;
+    const ChildLayout = MergedLayout;
+    MergedLayout = ({ children }) => (
+      <LayoutScreen>
+        <ChildLayout>{children}</ChildLayout>
+      </LayoutScreen>
+    );
+
+    // Move to parent path
+    currentPath = routeScreen.path;
+  }
+
+  return MergedLayout;
+}

package/src/router/utils/path.spec.ts

@@ -0,0 +1,135 @@
+import { describe, expect, it } from 'vitest';
+import {
+  excludeDynamicNamePattern,
+  excludeFileExtension,
+  excludeRelativePath,
+  getFileNameFromPath,
+  getRoutePath,
+} from './path';
+
+describe('excludeFileExtension', () => {
+  it('"./index.ts" is changed to "./index"', () => {
+    expect(excludeFileExtension('./index.ts')).toEqual('./index');
+  });
+
+  it('"./index.js" is changed to "./index"', () => {
+    expect(excludeFileExtension('./index.js')).toEqual('./index');
+  });
+
+  it('"./list/detail.tsx" is changed to "./list/detail"', () => {
+    expect(excludeFileExtension('./list/detail.tsx')).toEqual('./list/detail');
+  });
+
+  it('"./list/detail.jsx" is changed to "./list/detail"', () => {
+    expect(excludeFileExtension('./list/detail.jsx')).toEqual('./list/detail');
+  });
+
+  it('"./detail.foo" remains as "./detail.foo"', () => {
+    expect(excludeFileExtension('./detail.foo')).toEqual('./detail.foo');
+  });
+});
+
+describe('excludeRelativePath', () => {
+  it('"./index.tsx" is changed to "index.tsx"', () => {
+    expect(excludeRelativePath('./index.tsx')).toEqual('index.tsx');
+  });
+
+  it('"./../index.tsx" is changed to "index.tsx"', () => {
+    expect(excludeRelativePath('./../index.tsx')).toEqual('index.tsx');
+  });
+
+  it('"../../index.tsx" is changed to "index.tsx"', () => {
+    expect(excludeRelativePath('../../index.tsx')).toEqual('index.tsx');
+  });
+});
+
+describe('excludeDynamicNamePattern', () => {
+  it('"[id]" is changed to "id"', () => {
+    expect(excludeDynamicNamePattern('[id]')).toEqual('id');
+  });
+
+  it('"[id]/[name]" is changed to "id/name"', () => {
+    expect(excludeDynamicNamePattern('[id]/[name]')).toEqual('id/name');
+  });
+});
+
+describe('getRoutePath', () => {
+  describe('posix', () => {
+    it('"/index.tsx" is converted to "/"', () => {
+      expect(getRoutePath('/index.tsx')).toEqual('/');
+    });
+
+    it('"/index.ts" is converted to "/"', () => {
+      expect(getRoutePath('/index.tsx')).toEqual('/');
+    });
+
+    it('"/list/index.tsx" is converted to "/list"', () => {
+      expect(getRoutePath('/list/index.tsx')).toEqual('/list');
+    });
+
+    it('"/list/detail.tsx" is converted to "/list"', () => {
+      expect(getRoutePath('/list/detail.tsx')).toEqual('/list/detail');
+    });
+
+    it('"/list/[id].tsx" is converted to "/:id"', () => {
+      expect(getRoutePath('/list/[id].tsx')).toEqual('/list/:id');
+    });
+
+    it('"/list/[id].js" is converted to "/:id"', () => {
+      expect(getRoutePath('/list/[id].js')).toEqual('/list/:id');
+    });
+  });
+
+  describe('window', () => {
+    it('"\\index.tsx" is converted to "/"', () => {
+      expect(getRoutePath('\\index.tsx')).toEqual('/');
+    });
+
+    it('"\\index.ts" is converted to "/"', () => {
+      expect(getRoutePath('\\index.tsx')).toEqual('/');
+    });
+
+    it('"\\list\\index.tsx" is converted to "/list"', () => {
+      expect(getRoutePath('\\list\\index.tsx')).toEqual('/list');
+    });
+
+    it('"\\list\\detail.tsx" is converted to "/list"', () => {
+      expect(getRoutePath('\\list\\detail.tsx')).toEqual('/list/detail');
+    });
+
+    it('"\\list\\[id].tsx" is converted to "/:id"', () => {
+      expect(getRoutePath('\\list\\[id].tsx')).toEqual('/list/:id');
+    });
+
+    it('"\\list\\[id].js" is converted to "/:id"', () => {
+      expect(getRoutePath('\\list\\[id].js')).toEqual('/list/:id');
+    });
+  });
+});
+
+describe('getFileNameFromPath', () => {
+  it('extracts filename from file path', () => {
+    const result = getFileNameFromPath('/path/to/file.txt');
+    expect(result).toBe('file.txt');
+  });
+
+  it('returns the filename when path is just a filename', () => {
+    const result = getFileNameFromPath('file.txt');
+    expect(result).toBe('file.txt');
+  });
+
+  it('returns empty string when path is empty', () => {
+    const result = getFileNameFromPath('');
+    expect(result).toBe('');
+  });
+
+  it('returns empty string when path ends with slash', () => {
+    const result = getFileNameFromPath('/path/to/directory/');
+    expect(result).toBe('');
+  });
+
+  it('extracts filename without extension using withExtension option', () => {
+    const result = getFileNameFromPath('/path/to/file.txt', { withExtension: false });
+    expect(result).toBe('file');
+  });
+});

package/src/router/utils/path.ts

@@ -0,0 +1,105 @@
+import { matchDynamicName } from './matchers';
+
+/**
+ * Converts Windows-style paths to Posix-based paths.
+ *
+ * @example
+ * ```ts
+ * toPosixBasedPath(".\\index.tsx") // "./index.tsx"
+ * toPosixBasedPath("..\\..\\index.tsx") // "../../index.tsx"
+ * ```
+ */
+function toPosixBasedPath(filePath: string): string {
+  return filePath.replace(/\\/g, '/');
+}
+
+/**
+ * @name excludeFileExtension
+ * @description Removes file extension.
+ */
+export function excludeFileExtension(name: string): string {
+  return name.replace(/\.(tsx|jsx|ts|js)$/g, '');
+}
+
+/**
+ * @name excludeRelativePath
+ * @description Removes relative path from path.
+ * @example
+ * ```ts
+ * excludeRelativePath("./index.tsx") // "index.tsx"
+ * excludeRelativePath("./list/detail.tsx") // "list/detail.tsx"
+ * excludeRelativePath("../../index.tsx") // "index.tsx"
+ * ```
+ */
+export function excludeRelativePath(filePath: string): string {
+  return filePath.replace(/^(?:\.\.?\/)+/g, '');
+}
+
+/**
+ * @name excludeDynamicNamePattern
+ * @description Removes `[` `]` from dynamic route pattern.
+ * @example
+ * ```ts
+ * excludeDynamicNamePattern("[id]") // "id"
+ * excludeDynamicNamePattern("[id]/[name]") // "id/name"
+ * ```
+ */
+export function excludeDynamicNamePattern(filePath: string): string {
+  return filePath.replace(/\[|\]/g, '');
+}
+
+/**
+ * @name getRoutePath
+ * @description Converts to route path.
+ * @example
+ * ```ts
+ * getRoutePath('./index.tsx') // "/"
+ * getRoutePath('./list/index.tsx') // "/list"
+ * getRoutePath('./list/detail.tsx') // "/list/detail"
+ * getRoutePath('./list/[id].js') // "/list/:id"
+ * ```
+ */
+export function getRoutePath(filePath: string): string {
+  const posixBasedPath = toPosixBasedPath(filePath);
+  const normalPath = excludeRelativePath(excludeFileExtension(posixBasedPath));
+
+  const routePath = normalPath
+    .split('/')
+    .map((segment) => {
+      if (segment === 'index') {
+        return '';
+      }
+
+      if (matchDynamicName(segment)) {
+        return `:${excludeDynamicNamePattern(segment)}`;
+      }
+
+      return segment;
+    })
+    .filter((segment) => segment.length > 0)
+    .join('/');
+
+  return '/' + routePath;
+}
+
+/**
+ * @name getFileNameFromPath
+ * @description Extracts filename from file path.
+ * @example
+ * ```ts
+ * getFileNameFromPath('/path/to/file.txt') // "file.txt"
+ * getFileNameFromPath('file.txt') // "file.txt"
+ * getFileNameFromPath('') // ""
+ * getFileNameFromPath('/path/to/directory/') // ""
+ * getFileNameFromPath('/path/to/file.txt', { withExtension: false }) // "file"
+ * ```
+ */
+export function getFileNameFromPath(
+  filePath: string,
+  options: { withExtension?: boolean } = {
+    withExtension: true,
+  }
+): string {
+  const fileName = filePath.split('/').pop() || '';
+  return options.withExtension ? fileName : fileName.replace(/\.[^.]+$/g, '');
+}