https://github.com/idrinth-api-bench/react-file-based-routes

file based routing with default react routers
https://github.com/idrinth-api-bench/react-file-based-routes

generator library react routing

Last synced: 9 days ago
JSON representation

file based routing with default react routers

• Host: GitHub
• URL: https://github.com/idrinth-api-bench/react-file-based-routes
• Owner: idrinth-api-bench
• License: mit
• Created: 2024-01-21T19:44:44.000Z (11 months ago)
• Default Branch: the-one
• Last Pushed: 2024-05-23T05:35:10.000Z (7 months ago)
• Last Synced: 2024-05-23T06:33:37.942Z (7 months ago)
• Topics: generator, library, react, routing
• Language: TypeScript
• Homepage:
• Size: 85.9 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @idrinth/react-file-based-routes

This is a small library used to teach the default react routers file based routing and optimise the output as far as that is possible without server side rendering. It is meant for mostly static pages, where the overhead of nextjs of vike is not required.

## Defining a page

A page is by default any `ìndex.tsx` within the `src/pages` folder. The folder name will be taken as the page url, with two exceptions by default:

- home will be the root

- not-found will be the 404 page

## Configuration

All rules can be configured in an .idrinth-react-file-based-routes.json file, options are currently:

```ts

interface Configuration {

  sitemap?: {

    domain?: string,

    build?: boolean,

  },

  runtime?: {

    reloadWaitMs: number

  },

  routes?: {

    build?: boolean,

    type?: 'tsx'|'jsx',

    overridePathMappings?: {

      [filesystemPath: string]: string,

    },

  },

  htmlMinify?: {

    collapseBooleanAttributes?: boolean,

    conservativeCollapse?: boolean,

    collapseWhitespace?: boolean,

    removeAttributeQuotes?: boolean,

    removeComments?: boolean,

  },

  fileBuilder?: {

    buildIndex?: boolean,

    minifyPages?: boolean,

    appendPageChunk?: boolean,

    preLoadCSS?: boolean,

    preloadStartDelay?: number,

  },

  fileFinder?: {

    fileName?: string,

    pagesRoot?: string,

    distJSRoot?: string,

  },

}

```

If you prefer using a cli format, `--{group}.{setting}=abc` will set string settings to abc, while booleans can be flipped by just using `--{group}.{setting}`. For example for api-bench, that uses the defaults, you can set the domain by using `--sitemap.domain=idrinth-api-ben.ch`. The setting `fileFinder.overridePathMappings` can not be configured via the cli.

Default options are overwritten first by the file based settings and then by the command line settings.

# Setup

You will need to do three things for the complete package:

- Define a call to generate-routes(`irfbrgr` or `react-file-based-routes-generate-routes`) in you package.json as afterInstall and early in your build process to generate the routes.tsx and the sitemap

- Optionally define a call to generate-folders(`ìrfbrgf` or `react-file-based-routes-generate-folders`) in your package.json as a late build step to optimise the index.html files

- Default import the generated `src/routes.tsx`, so that you can use createBrowserRouter or similar functions to create your router. It requires getting a `Loader` element passed to it - any react element will do