185 lines
4.0 KiB
Markdown
185 lines
4.0 KiB
Markdown
# Jingrow UI Vite Plugins
|
|
|
|
A collection of Vite plugins for Jingrow applications that handle common
|
|
development tasks when building modern frontends for Jingrow.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install jingrow-ui
|
|
```
|
|
|
|
## Usage
|
|
|
|
In your `vite.config.js` file:
|
|
|
|
```javascript
|
|
import { defineConfig } from 'vite'
|
|
import vue from '@vitejs/plugin-vue'
|
|
import path from 'path'
|
|
import jingrowui from 'jingrow-ui/vite'
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
jingrowui({
|
|
jingrowProxy: true, // Setup proxy to Jingrow backend
|
|
lucideIcons: true, // Configure Lucide icons
|
|
jinjaBootData: true, // Inject server-side boot data
|
|
// Generate TypeScript interfaces from PageTypes
|
|
jingrowTypes: {
|
|
input: {
|
|
app_name: ['pagetype_1', 'pagetype_2'],
|
|
},
|
|
},
|
|
// Production build config for asset paths and HTML output
|
|
buildConfig: {
|
|
indexHtmlPath: '../your_app/www/frontend.html',
|
|
},
|
|
}),
|
|
vue(),
|
|
],
|
|
})
|
|
```
|
|
|
|
## Plugins
|
|
|
|
### Jingrow Proxy Plugin
|
|
|
|
Automatically configures a development server that proxies requests to your
|
|
Jingrow backend.
|
|
|
|
#### Features
|
|
|
|
- Sets up a proxy for backend routes (`/api`, `/app`, etc.)
|
|
- Automatically detects Jingrow port from `common_site_config.json`
|
|
|
|
#### Configuration
|
|
|
|
```javascript
|
|
jingrowui({
|
|
jingrowProxy: {
|
|
port: 8080, // Frontend dev server port
|
|
source: '^/(app|login|api|assets|files|private)', // Routes to proxy
|
|
},
|
|
})
|
|
```
|
|
|
|
### Lucide Icons Plugin
|
|
|
|
Integrates [Lucide icons](https://lucide.dev/) with your app, providing access
|
|
to all Lucide icons with some customization.
|
|
|
|
#### Features
|
|
|
|
- Automatically registers all Lucide icons for use in Vue components
|
|
- Configures icons with standardized stroke-width 1.5 according to our design
|
|
system
|
|
- Support auto-import
|
|
|
|
#### Implicit import
|
|
|
|
```vue
|
|
<template>
|
|
<LucideArrowRight class="size-4" />
|
|
</template>
|
|
```
|
|
|
|
#### Explicit import
|
|
|
|
```vue
|
|
<template>
|
|
<LucideArrowRight class="size-4" />
|
|
<LucideBarChart class="size-4" />
|
|
</template>
|
|
<script setup lang="ts">
|
|
import LucideArrowRight from '~icons/lucide/arrow-right'
|
|
import LucideBarChart from '~icons/lucide/bar-chart'
|
|
</script>
|
|
```
|
|
|
|
### Jingrow Types Plugin
|
|
|
|
Generates TypeScript interfaces for your Jingrow PageTypes, providing type safety
|
|
when working with Jingrow data.
|
|
|
|
#### Features
|
|
|
|
- Automatically generates TypeScript interfaces from PageType JSON files
|
|
- Creates and updates interfaces only when PageTypes change
|
|
|
|
#### Configuration
|
|
|
|
```javascript
|
|
jingrowui({
|
|
jingrowTypes: {
|
|
input: {
|
|
your_app_name: ['pagetype1', 'pagetype2'],
|
|
},
|
|
output: 'src/types/pagetypes.ts', // (optional)
|
|
},
|
|
})
|
|
```
|
|
|
|
### Jinja Boot Data Plugin
|
|
|
|
Injects jinja block that reads keys from `boot` context object and sets in
|
|
`window`. Useful to set global values like `csrf_token`, `site_name`, etc.
|
|
|
|
#### Configuration
|
|
|
|
```javascript
|
|
jingrowui({
|
|
jinjaBootData: true,
|
|
})
|
|
```
|
|
|
|
#### Usage
|
|
|
|
In your Python/Jinja template:
|
|
|
|
```python
|
|
|
|
def get_context(context):
|
|
context.boot = {
|
|
"csrf_token": "...",
|
|
"user": jingrow.session.user,
|
|
"user_info": jingrow.session.user_info,
|
|
}
|
|
return context
|
|
```
|
|
|
|
In your JavaScript code:
|
|
|
|
```javascript
|
|
// Access injected data
|
|
console.log(window.user)
|
|
console.log(window.user_info)
|
|
```
|
|
|
|
### Build Configuration Plugin
|
|
|
|
Handles production builds with proper asset paths and HTML output.
|
|
|
|
#### Features
|
|
|
|
- Configures output directories for build assets
|
|
- Sets up correct asset paths for Jingrow's standard directory structure
|
|
- Copies the built index.html to a specified location (typically in www)
|
|
|
|
#### Configuration
|
|
|
|
```javascript
|
|
jingrowui({
|
|
buildConfig: {
|
|
// default: '../app_name/public/frontend', auto-detected if not specified
|
|
outDir: '../app_name/public/frontend',
|
|
// Base URL for assets (auto-detected from outDir if not specified)
|
|
baseUrl: '/assets/app_name/frontend/',
|
|
// required, typically "../app_name/www/app_name.html"
|
|
indexHtmlPath: '../app_name/www/app_name.html',
|
|
emptyOutDir: true, // Clear output directory before build
|
|
sourcemap: true, // Generate sourcemaps
|
|
},
|
|
})
|
|
```
|