# 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
  },
})
```