jingrow-ui/vite/README.md

Jingrow UI Vite Plugins

A collection of Vite plugins for Jingrow applications that handle common development tasks when building modern frontends for Jingrow.

Installation

npm install jingrow-ui

Usage

In your vite.config.js file:

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

jingrowui({
  jingrowProxy: {
    port: 8080, // Frontend dev server port
    source: '^/(app|login|api|assets|files|private)', // Routes to proxy
  },
})

Lucide Icons Plugin

Integrates Lucide icons 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

<template>
  <LucideArrowRight class="size-4" />
</template>

Explicit import

<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

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

jingrowui({
  jinjaBootData: true,
})

Usage

In your Python/Jinja template:

def get_context(context):
    context.boot = {
        "csrf_token": "...",
        "user": jingrow.session.user,
        "user_info": jingrow.session.user_info,
    }
    return context

In your JavaScript code:

// 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

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