chore: use require.context for auto-discovering example pages

Author: mfazekas

example/metro.config.js

@@ -6,6 +6,7 @@ const root = path.resolve(__dirname, '..');
 
 const config = getDefaultConfig(__dirname);
 config.resolver.assetExts = [...config.resolver.assetExts, 'riv'];
+config.transformer.unstable_allowRequireContext = true;
 /**
  * Metro configuration
  * https://facebook.github.io/metro/docs/configuration

example/src/PagesList.ts

@@ -1,23 +1,25 @@
 import type { Metadata } from './helpers/metadata';
-import * as Pages from './pages';
 
-type PageIds = keyof typeof Pages;
 type PageType = React.ComponentType & { metadata?: Metadata };
 
-const PageEntries = Object.entries(Pages) as [PageIds, PageType][];
-
 export type PageItem = {
-  id: PageIds;
+  id: string;
   name: string;
   description: string;
   component: React.ComponentType;
 };
 
-const PagesList: PageItem[] = PageEntries.map(([key, Component]) => ({
-  id: key,
-  name: Component.metadata?.name ?? key,
-  description: Component.metadata?.description ?? '',
-  component: Component,
-}));
+const pagesContext = require.context('./pages', false, /\.tsx$/);
+
+export const PagesList: PageItem[] = pagesContext.keys().map((key) => {
+  const module = pagesContext(key) as { default: PageType };
+  const Component = module.default;
+  const id = key.replace(/^\.\//, '').replace(/\.tsx$/, '');
 
-export { PagesList };
+  return {
+    id,
+    name: Component.metadata?.name ?? id,
+    description: Component.metadata?.description ?? '',
+    component: Component,
+  };
+});

example/src/pages/index.ts

@@ -0,0 +1,27 @@
+// Based on https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/webpack-env/index.d.ts
+// Adds support for the runtime `require.context` method.
+// https://github.com/facebook/metro/pull/822/
+
+declare namespace __MetroModuleApi {
+  interface RequireContext {
+    keys(): string[];
+    (id: string): any;
+    <T>(id: string): T;
+    resolve(id: string): string;
+  }
+
+  interface RequireFunction {
+    (path: string): any;
+    <T>(path: string): T;
+    context(
+      path: string,
+      recursive?: boolean,
+      filter?: RegExp,
+      mode?: 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once'
+    ): RequireContext;
+  }
+}
+
+declare namespace NodeJS {
+  interface Require extends __MetroModuleApi.RequireFunction {}
+}