146 lines
4.4 KiB
Markdown
146 lines
4.4 KiB
Markdown
# Vite Plugin: File-based Routing
|
|
|
|
The `sigproRouter` plugin for Vite automates route generation by scanning your `pages` directory. It creates a **virtual module** that you can import directly into your code, eliminating the need to maintain a manual routes array.
|
|
|
|
## 1. Project Structure
|
|
|
|
To use the plugin, organize your files within the `src/pages` directory. The folder hierarchy directly determines your application's URL structure. SigPro uses brackets `[param]` for dynamic segments.
|
|
|
|
<div class="mockup-code bg-base-300 text-base-content shadow-xl my-8">
|
|
<pre><code>my-sigpro-app/
|
|
├── src/
|
|
│ ├── pages/
|
|
│ │ ├── index.js → #/
|
|
│ │ ├── about.js → #/about
|
|
│ │ ├── users/
|
|
│ │ │ └── [id].js → #/users/:id
|
|
│ │ └── blog/
|
|
│ │ ├── index.js → #/blog
|
|
│ │ └── [slug].js → #/blog/:slug
|
|
│ ├── App.js (Main Layout)
|
|
│ └── main.js (Entry Point)
|
|
├── vite.config.js
|
|
└── package.json</code></pre>
|
|
</div>
|
|
|
|
---
|
|
|
|
## 2. Setup & Configuration
|
|
|
|
Add the plugin to your `vite.config.js`. It works out of the box with zero configuration.
|
|
|
|
```javascript
|
|
// vite.config.js
|
|
import { defineConfig } from 'vite';
|
|
import { sigproRouter } from 'sigpro/vite';
|
|
|
|
export default defineConfig({
|
|
plugins: [sigproRouter()]
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## 3. Implementation
|
|
|
|
Thanks to **SigPro's synchronous initialization**, you no longer need to wrap your mounting logic in `.then()` blocks.
|
|
|
|
<div class="tabs tabs-box w-full mt-8 mb-12 bg-base-200/50 p-2 border border-base-300">
|
|
<input type="radio" name="route_impl" class="tab" aria-label="Option A: Direct in main.js" checked />
|
|
<div class="tab-content bg-base-100 border-base-300 rounded-lg p-6 mt-2">
|
|
|
|
```javascript
|
|
// src/main.js
|
|
import SigPro from 'sigpro';
|
|
import { routes } from 'virtual:sigpro-routes';
|
|
|
|
// The Core already has Router ready
|
|
Mount(Router(routes), '#app');
|
|
```
|
|
|
|
</div>
|
|
|
|
<input type="radio" name="route_impl" class="tab" aria-label="Option B: Inside App.js (Persistent Layout)" />
|
|
<div class="tab-content bg-base-100 border-base-300 rounded-lg p-6 mt-2">
|
|
|
|
```javascript
|
|
// src/App.js
|
|
import { routes } from 'virtual:sigpro-routes';
|
|
|
|
export default () => div({ class: 'layout' }, [
|
|
header([
|
|
h1("SigPro App"),
|
|
nav([
|
|
button({ onclick: () => Router.go('/') }, "Home"),
|
|
button({ onclick: () => Router.go('/blog') }, "Blog")
|
|
])
|
|
]),
|
|
// Only the content inside <main> will be swapped reactively
|
|
main(Router(routes))
|
|
]);
|
|
```
|
|
|
|
</div>
|
|
</div>
|
|
|
|
---
|
|
|
|
## 4. Route Mapping Reference
|
|
|
|
The plugin follows a simple convention to transform your file system into a routing map.
|
|
|
|
<div class="overflow-x-auto my-8">
|
|
<table class="table table-zebra w-full">
|
|
<thead class="bg-base-200">
|
|
<tr>
|
|
<th>File Path</th>
|
|
<th>Generated Path</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>index.js</code></td>
|
|
<td class="font-mono text-primary font-bold">/</td>
|
|
<td>The application root.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>about.js</code></td>
|
|
<td class="font-mono text-primary font-bold">/about</td>
|
|
<td>A static page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>[id].js</code></td>
|
|
<td class="font-mono text-primary font-bold">/:id</td>
|
|
<td>Dynamic parameter (passed to the component).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>blog/index.js</code></td>
|
|
<td class="font-mono text-primary font-bold">/blog</td>
|
|
<td>Folder index page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>_utils.js</code></td>
|
|
<td class="italic opacity-50 text-error">Ignored</td>
|
|
<td>Files starting with <code>_</code> are excluded from routing.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
---
|
|
|
|
## 5. How it Works (Vite Virtual Module)
|
|
|
|
The plugin generates a virtual module named `virtual:sigpro-routes`. This module exports an array of objects compatible with `Router()`:
|
|
|
|
```javascript
|
|
// Internal representation generated by the plugin
|
|
export const routes = [
|
|
{ path: '/', component: () => import('/src/pages/index.js') },
|
|
{ path: '/users/:id', component: () => import('/src/pages/users/[id].js') },
|
|
// ...
|
|
];
|
|
```
|
|
|
|
Because it uses dynamic `import()`, Vite automatically performs **Code Splitting**, meaning each page is its own small JS file that only loads when the user navigates to it. |