Delete sigproPlugin.md
This commit is contained in:
139
sigproPlugin.md
139
sigproPlugin.md
@@ -1,139 +0,0 @@
|
|||||||
# SigPro Router Plugin for Vite
|
|
||||||
|
|
||||||
A Vite plugin that automatically generates routes from your file structure in `src/pages/`, similar to Next.js file-based routing but for any JavaScript project.
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
- 📁 **File-based routing**: Automatically creates routes from your `src/pages` directory
|
|
||||||
- 🔗 **Dynamic routes**: Supports parameterized routes using `[param]` syntax
|
|
||||||
- 🧭 **Path-to-regexp conversion**: Dynamic routes are converted to RegExp with named capture groups
|
|
||||||
- 📊 **Route map generation**: Console output shows all detected routes at build time
|
|
||||||
- 🎯 **Virtual module**: Access your routes via `virtual:sigpro-routes`
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
1. Save the plugin code in your project, for example as `plugins/sigpro-router.js`
|
|
||||||
|
|
||||||
2. Add it to your Vite configuration:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// vite.config.js
|
|
||||||
import { defineConfig } from 'vite';
|
|
||||||
import sigproRouter from './plugins/sigpro-router';
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [sigproRouter()]
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### 1. Create Pages
|
|
||||||
|
|
||||||
Create `.js` files in your `src/pages` directory. Each file becomes a route:
|
|
||||||
|
|
||||||
```
|
|
||||||
src/pages/
|
|
||||||
├── index.js -> /
|
|
||||||
├── about.js -> /about
|
|
||||||
├── blog/
|
|
||||||
│ ├── index.js -> /blog
|
|
||||||
│ └── [id].js -> /blog/:id (dynamic)
|
|
||||||
└── users/
|
|
||||||
└── [userId].js -> /users/:userId (dynamic)
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. Access Routes in Your Application
|
|
||||||
|
|
||||||
The plugin exposes a virtual module `virtual:sigpro-routes` that exports a `routes` array:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// In your router or main application file
|
|
||||||
import { routes } from 'virtual:sigpro-routes';
|
|
||||||
|
|
||||||
// The routes array structure:
|
|
||||||
// [
|
|
||||||
// { path: '/', component: PageComponent, isDynamic: false, paramName: null },
|
|
||||||
// { path: /^\/blog\/(?<id>[^/]+)$/, component: PageComponent, isDynamic: true, paramName: 'id' },
|
|
||||||
// { path: /^\/users\/(?<userId>[^/]+)$/, component: PageComponent, isDynamic: true, paramName: 'userId' },
|
|
||||||
// ]
|
|
||||||
|
|
||||||
// Example usage with a simple router
|
|
||||||
function renderRoute(path) {
|
|
||||||
for (const route of routes) {
|
|
||||||
if (!route.isDynamic && route.path === path) {
|
|
||||||
return route.component();
|
|
||||||
} else if (route.isDynamic) {
|
|
||||||
const match = path.match(route.path);
|
|
||||||
if (match) {
|
|
||||||
// Access params via match.groups
|
|
||||||
const params = match.groups;
|
|
||||||
return route.component(params);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return '<h1>404 Not Found</h1>';
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. Build Time Output
|
|
||||||
|
|
||||||
When you run your Vite dev server or build, you'll see a route map in the console:
|
|
||||||
|
|
||||||
```
|
|
||||||
🚀 [SigPro Router] Mapa de rutas generado:
|
|
||||||
📄 / -> index.js
|
|
||||||
📄 /about -> about.js
|
|
||||||
📄 /blog -> blog/index.js
|
|
||||||
🔗 /blog/[id] -> blog/[id].js
|
|
||||||
🔗 /users/[userId] -> users/[userId].js
|
|
||||||
```
|
|
||||||
|
|
||||||
## Route Priority
|
|
||||||
|
|
||||||
Routes are automatically prioritized:
|
|
||||||
|
|
||||||
1. Static routes (non-dynamic) are matched before dynamic routes
|
|
||||||
2. Routes are sorted by path length (shorter paths first)
|
|
||||||
|
|
||||||
## Route Object Properties
|
|
||||||
|
|
||||||
Each route in the `routes` array contains:
|
|
||||||
|
|
||||||
| Property | Type | Description |
|
|
||||||
|----------|------|-------------|
|
|
||||||
| `path` | `string \| RegExp` | Static path string or RegExp for dynamic routes |
|
|
||||||
| `component` | `Function` | The imported page component/module |
|
|
||||||
| `isDynamic` | `boolean` | Whether the route has parameters |
|
|
||||||
| `paramName` | `string \| null` | The parameter name for dynamic routes |
|
|
||||||
|
|
||||||
## Dynamic Route Parameters
|
|
||||||
|
|
||||||
For dynamic routes like `blog/[id].js`:
|
|
||||||
|
|
||||||
- The route path becomes: `new RegExp("^\\/blog\\/(?<id>[^/]+)$")`
|
|
||||||
- Parameters can be accessed via `match.groups` when matching the route
|
|
||||||
|
|
||||||
Example:
|
|
||||||
```javascript
|
|
||||||
const match = '/blog/123'.match(/^\/blog\/(?<id>[^/]+)$/);
|
|
||||||
console.log(match.groups.id); // '123'
|
|
||||||
```
|
|
||||||
|
|
||||||
## Limitations
|
|
||||||
|
|
||||||
- Only scans `.js` files (no JSX/TS support by default - modify the plugin if needed)
|
|
||||||
- Requires a `src/pages` directory in your project root
|
|
||||||
- Dynamic parameters are matched as single path segments (no catch-all routes)
|
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
You can modify the plugin to:
|
|
||||||
- Support other file extensions (.jsx, .ts, .tsx)
|
|
||||||
- Change the pages directory location
|
|
||||||
- Add custom route sorting logic
|
|
||||||
- Implement nested dynamic routes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Built for SigPro applications with Vite.
|
|
||||||
Reference in New Issue
Block a user