https://github.com/starlanestudios/sceptre
A CLI tool for compiling React Router page structures into generated imports
https://github.com/starlanestudios/sceptre
codegen nextjs nodejs react react-router routing
Last synced: 3 months ago
JSON representation
A CLI tool for compiling React Router page structures into generated imports
- Host: GitHub
- URL: https://github.com/starlanestudios/sceptre
- Owner: StarlaneStudios
- License: mit
- Created: 2018-10-21T12:08:15.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2023-04-20T15:00:51.000Z (about 3 years ago)
- Last Synced: 2025-08-31T17:18:16.268Z (10 months ago)
- Topics: codegen, nextjs, nodejs, react, react-router, routing
- Language: TypeScript
- Homepage:
- Size: 53.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Sceptre
Implement Next.js style page directories in your single page application by generating routing definitions from a page directory.
## Installation
Install the CLI
```
npm install -g sceptre
```
## Page folder structure
Pages are defined using a folder structure in your application. Subfolders denote path segments, while pages map to `index.tsx` or `index.jsx` files. When using sceptre, each page is given it's own directory in which assets and styles can be placed, allowing for a clean and structured page setup.
## Exporting pages
Each page is expected to contain a default export of it's `RouteObject`. The `path` property will automatically be populated when parsing the tree, so it may be omitted.
```tsx
const IndexPage = () => {
return (
Page content
)
};
IndexPage.info = {
title: 'Index Page'
}
export default IndexPage;
```
### URL Parameters
Parameters can be defined by using `[name]` as folder name. This will automatically translate into `:name` when building routes.
We also support a other parameter type: `...` which will match any path segment.
### Index mapping
Folders named `@` will map to the index page of the parent directory.
### Parent pages
You can add a parent pages by making a folder named `_` anywhere in your file tree. Parent pages are responsible for placing an `` where child routes will be rendered. Routes can be parented any number of times, each rendering in its closest parent outlet.
Visual example:
```
/example/_ - Responsible for rendering outlet 1
/example/@ - Rendered inside outlet 1
/example/page/_ - Rendered inside outlet 1 and responsible for rendering outlet 2
/example/page/@ - Rendered inside outlet 2
/example/page/child - Rendered inside outlet 2
```
### Example folder structure
```
pages/
@/
index.tsx
styles.tsx
help/
index.tsx
style.scss
settings/
_/
index.tsx
overview/
index.tsx
[param]/
index.tsx
folder/
_/
index.tsx
[...]/
index.tsx
style.scss
```
The above example translates to the given routes
```
/
/help
/settings/overview
/settings/:param
/folder/*
```
## Usage
```bash
sceptre ./src/pages/**/index.tsx ./src/generated/routes.ts --base ./src/pages
```
This command will compile all index components placed recursively within the pages directory and generates a routes.ts.
### Base directory
The `--base` flag should point to the directory containing all pages. By default it is set to the current execution directory.
### Identing
You can optionally pass `--indent none | tab | ` to control the indentation of the generated routing configuration. By default indentation is disabled.
### Forced js extensions
Certain environments may require all script file imports to end with `.js` regardless of their actual extension. In this case you can pass the `--force-js` flag.
## Vindigo
This package was originally developed for use in [Vindigo](https://github.com/StarlaneStudios/vindigo), a free and open source task planner.
## License
sceptre is licensed under [MIT](https://github.com/StarlaneStudios/sceptre/blob/main/LICENSE)
Copyright (c) 2022-present, [Starlane Studios](https://starlane.studio/)