add reload on import failure if desired

Author: Idrinth

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idrinth/react-file-based-routes",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "repository": "https://github.com/idrinth/react-file-based-routes",
   "description": "A simple file based routing library, that does not force itself on you.",
   "license": "MIT",

src/configuration.ts

@@ -31,7 +31,11 @@ interface FileFinder {
   pagesRoot: string,
   distJSRoot: string,
 }
+interface Runtime {
+  reloadWaitMs: number,
+}
 export interface Configuration {
+  runtime: Runtime,
   sitemap: Sitemap,
   routes: Routes,
   htmlMinify: HTMLMinify,
@@ -45,6 +49,9 @@ export default (cwd: string, cliArguments: string[]): Configuration => {
       build: true,
       domain: '',
     },
+    runtime: {
+      reloadWaitMs: 0,
+    },
     routes: {
       build: true,
       type: 'tsx',
@@ -89,7 +96,7 @@ export default (cwd: string, cliArguments: string[]): Configuration => {
   for (const param of cliArguments) {
     if (param.startsWith('--')) {
       const [setting, value,] = param.substring(2).split('=') as [string, undefined|string];
-      const [group, detail,] = setting.split('.') as [keyof Configuration, keyof Sitemap|keyof Routes|keyof FileFinder|keyof FileBuilder|keyof HTMLMinify];
+      const [group, detail,] = setting.split('.') as [keyof Configuration, keyof Runtime|keyof Sitemap|keyof Routes|keyof FileFinder|keyof FileBuilder|keyof HTMLMinify];
       if (group && typeof config[group] === 'object' && detail) {
         // @ts-ignore TS7053
         if (typeof config[group][detail] === 'boolean') {
@@ -117,5 +124,8 @@ export default (cwd: string, cliArguments: string[]): Configuration => {
   if (config.routes.type !== 'tsx' && config.routes.type !== 'jsx') {
     throw new Error('config.routes.type must be set to either tsx or jsx.');
   }
+  if (config.runtime.reloadWaitMs < 0) {
+    throw new Error('config.runtime.reloadWaitMs must be set to at least 0.');
+  }
   return config;
 }

src/generate-routes.ts

@@ -9,10 +9,10 @@ import Writer from './writer.js';
 export default (cwd: string, configuration: Configuration) => {
   const writers: Writer[] = [];
   if (configuration.routes.build && configuration.routes.type === 'tsx') {
-    writers.push(new TsxWriter())
+    writers.push(new TsxWriter(configuration.runtime.reloadWaitMs,))
   }
   if (configuration.routes.build && configuration.routes.type === 'jsx') {
-    writers.push(new JsxWriter())
+    writers.push(new JsxWriter(configuration.runtime.reloadWaitMs,))
   }
   if (configuration.sitemap.build) {
     writers.push(new SitemapWriter(configuration.sitemap.domain));

src/jsx-writer.ts

@@ -4,16 +4,31 @@ export default class JsxWriter implements Writer {
   fileName(): string {
     return 'src/routes.jsx';
   }
-  private items: string[] = [];
+  protected items: string[] = [];
+  constructor(private readonly waitReloadMS: number) {
+  }
   // @ts-ignore TS6133
   add(path: string, url: string, changed: string): void
   {
     this.items.push(`  (() => {
-      const LazyElement = lazy(() => import(
-        \'./pages/${path}/index.tsx\',
-      ),);
+      const LazyElement = lazy(async() => {
+        try {
+          return await import(
+            './pages/${path}/index.tsx',
+          );
+        } catch (e) {
+          if (OfflineLoader && ! window.navigator.onLine) {
+            return {default: OfflineLoader};
+          }
+          if (RefreshLoader) {
+            window.setTimeout(() => window.location.reload(), ${this.waitReloadMS},);
+            return {default: RefreshLoader};
+          }
+          throw e;
+        }
+      },);
       return {
-        path: \'${url}\',
+        path: '${url}',
         exact: true,
         element: <Suspense fallback={<Loader/>}><LazyElement/></Suspense>,
       };
@@ -24,9 +39,13 @@ export default class JsxWriter implements Writer {
     return 'import React, {\n' +
       '  lazy,\n' +
       '  Suspense,\n' +
-      '} from \'react\';\n' +
-      'export default (Loader) => [\n  '
+      '} from \'react\';\n\n' +
+      'export default (' +
+      '  Loader,' +
+      '  RefreshLoader = undefined,' +
+      '  OfflineLoader = undefined,' +
+      ') => [\n  '
       + this.items.join('\n  ')
-      + '\n];'
+      + '\n];\n'
   }
 }

src/tsx-writer.ts

@@ -4,31 +4,50 @@ export default class TsxWriter implements Writer {
   fileName(): string {
       return 'src/routes.tsx';
   }
-  private items: string[] = [];
+  protected items: string[] = [];
+  constructor(private readonly waitReloadMS: number) {
+  }
   // @ts-ignore TS6133
   add(path: string, url: string, changed: string): void
   {
     this.items.push(`  (() => {
-      const LazyElement = lazy(() => import(
-        \'./pages/${path}/index.tsx\',
-      ),);
+      const LazyElement = lazy(async(): Promise\<{default: ComponentType<any>;}\> => {
+        try {
+          return await import(
+            './pages/${path}/index.tsx',
+          );
+        } catch (e) {
+          if (OfflineLoader && ! window.navigator.onLine) {
+            return {default: OfflineLoader};
+          }
+          if (RefreshLoader) {
+            window.setTimeout(() => window.location.reload(), ${this.waitReloadMS},);
+            return {default: RefreshLoader};
+          }
+          throw e;
+        }
+      },);
       return {
-        path: \'${url}\',
+        path: '${url}',
         exact: true,
         element: <Suspense fallback={<Loader/>}><LazyElement/></Suspense>,
       };
-      })(),`,
+      })(),`
     );
   }
   toString(): string {
     return 'import React, {\n' +
       '  lazy,\n' +
       '  Suspense,\n' +
       '  ElementType,\n' +
-      '} from \'react\';\n' +
-      'export default (Loader: ElementType) => [\n  '
+      '  ComponentType,\n' +
+      '} from \'react\';\n\n' +
+      'export default (\n' +
+      '  Loader: ElementType,\n' +
+      '  RefreshLoader: ComponentType|undefined = undefined,\n' +
+      '  OfflineLoader: ComponentType|undefined = undefined,\n' +
+      ') => [\n  '
       + this.items.join('\n  ')
-      + '\n];'
-
+      + '\n];\n'
   }
 }