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,13 @@
+interface RequireContext {
+  keys(): string[];
+  <T = unknown>(id: string): T;
+  resolve(id: string): string;
+}
+
+interface NodeRequire {
+  context(
+    directory: string,
+    useSubdirectories?: boolean,
+    regExp?: RegExp
+  ): RequireContext;
+}