@omni-door/tpl-spa-react/lib/templates/source/routes.js

The React single-page-application project template

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.tpl_src_routes = void 0;
var utils_1 = require("@omni-door/utils");
var tpl = "`import { lazy, Suspense } from 'react';\nimport { Navigate, useRoutes } from 'react-router-dom';\nimport Home from './pages/home';\n${ts ? `/* import types */\nimport type {\n  ReactNode,\n  LazyExoticComponent,\n  ComponentType,\n  NamedExoticComponent,\n  PropsWithChildren\n} from 'react';\nimport type { RouteObject } from 'react-router-dom';\n` : ''}\n${ts ? `\nexport interface IRoute {\n  // Whether this is the default child route.\n  index?: boolean;\n  // Route path.\n  path: string;\n  // Component rendered for the route.\n  element: LazyExoticComponent<ComponentType<any>> | NamedExoticComponent<any>;\n  // Fallback component for lazy loading.\n  fallback?: NonNullable<ReactNode> | null;\n  // Nested routes.\n  children?: IRoute[];\n  // Redirect path.\n  redirect?: string;\n}\n` : ''}\nexport const _Element = (route${ts ? ': IRoute)' : ')'} => {\n  const _Suspense = ({ children }${ts ? ': PropsWithChildren<{}>)' : ')'} => route.fallback\n    ? <Suspense fallback={route.fallback}>\n      {children}\n    </Suspense>\n    : <>{children}</>;\n  return <_Suspense>\n    {\n      route.redirect\n        ? <Navigate to={route.redirect} replace />\n        : <route.element routes={route.children} />\n    }\n  </_Suspense>;\n};\n\nconst routes${ts ? ': IRoute[]' : ''} = [\n  {\n    path: '/',\n    element: Home\n  },\n  {\n    path: '/detail',\n    element: lazy(() => import('@pages/detail')),\n    fallback: <div> Loading Detail Page... </div>,\n    children: [\n      {\n        path: '/detail/:id',\n        element: lazy(() => import('@components/Detail')),\n        fallback: <div> Loading Detail Component... </div>\n      }\n    ]\n  }\n];\n\nexport const Routes = () => {\n  const getRoutes = (_routes${ts ? ': IRoute[]): RouteObject[]' : ')'} => {\n    return _routes.map(route => {\n      const { path, children } = route;\n      const element = <_Element {...route} />;\n      return {\n        path,\n        element,\n        children: getRoutes(children || [])\n      };\n    });\n  };\n  return useRoutes(getRoutes(routes));\n};\n\nexport default Routes;\n`";
exports.tpl_src_routes = {
    tpl: tpl
};
exports.default = utils_1.tplEngineInit(exports.tpl_src_routes, 'tpl');