frappe-ui 0.1.113 → 0.1.115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.113",
+  "version": "0.1.115",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   "files": [
     "src",
     "scripts",
-    "vite.js"
+    "vite"
   ],
   "repository": {
     "type": "git",
@@ -53,13 +53,17 @@
     "feather-icons": "^4.28.0",
     "idb-keyval": "^6.2.0",
     "lowlight": "^3.3.0",
+    "lucide-static": "^0.479.0",
     "ora": "5.4.1",
     "prettier": "^3.3.2",
     "radix-vue": "^1.5.3",
+    "reka-ui": "^2.0.2",
     "showdown": "^2.1.0",
     "socket.io-client": "^4.5.1",
     "tippy.js": "^6.3.7",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.2",
+    "unplugin-icons": "^22.1.0",
+    "unplugin-vue-components": "^28.4.1"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",

package/src/components/Autocomplete.vue

@@ -5,10 +5,28 @@
     nullable
     v-slot="{ open: isComboboxOpen }"
   >
-    <Popover class="w-full" v-model:show="showOptions" ref="rootRef">
-      <template #target="{ open: openPopover, togglePopover }">
-        <slot name="target" v-bind="{ open: openPopover, togglePopover }">
-          <div class="w-full">
+    <Popover
+      class="w-full"
+      v-model:show="showOptions"
+      ref="rootRef"
+      :placement="placement"
+    >
+      <template
+        #target="{ open: openPopover, togglePopover, close: closePopover }"
+      >
+        <slot
+          name="target"
+          v-bind="{
+            open: openPopover,
+            close: closePopover,
+            togglePopover,
+            isOpen: isComboboxOpen,
+          }"
+        >
+          <div class="w-full space-y-1.5">
+            <label v-if="props.label" class="block text-xs text-ink-gray-5">
+              {{ props.label }}
+            </label>
             <button
               class="flex h-7 w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 border border-transparent focus:border-outline-gray-4 focus:outline-none focus:ring-2 focus:ring-outline-gray-3"
               :class="{ 'bg-surface-gray-3': isComboboxOpen }"
@@ -25,6 +43,7 @@
                 <span class="text-base leading-5 text-ink-gray-4" v-else>
                   {{ placeholder || '' }}
                 </span>
+                <slot name="suffix" />
               </div>
               <FeatherIcon
                 name="chevron-down"
@@ -60,12 +79,17 @@
                     autocomplete="off"
                     placeholder="Search"
                   />
-                  <button
+                  <div
                     class="absolute right-0 inline-flex h-7 w-7 items-center justify-center"
-                    @click="clearAll"
                   >
-                    <FeatherIcon name="x" class="w-4 text-ink-gray-8" />
-                  </button>
+                    <LoadingIndicator
+                      v-if="!props.loading"
+                      class="h-4 w-4 text-ink-gray-5"
+                    />
+                    <button v-else @click="clearAll">
+                      <FeatherIcon name="x" class="w-4 text-ink-gray-8" />
+                    </button>
+                  </div>
                 </div>
               </div>
               <div
@@ -84,17 +108,21 @@
                   v-for="(option, idx) in group.items.slice(0, 50)"
                   :key="idx"
                   :value="option"
+                  :disabled="option.disabled"
                   v-slot="{ active, selected }"
                 >
                   <li
                     :class="[
                       'flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base',
-                      { 'bg-surface-gray-3': active },
+                      {
+                        'bg-surface-gray-3': active,
+                        'opacity-50': option.disabled,
+                      },
                     ]"
                   >
                     <div class="flex flex-1 gap-2 overflow-hidden items-center">
                       <div
-                        v-if="$slots['item-prefix'] || $props.multiple"
+                        v-if="$slots['item-prefix'] || props.multiple"
                         class="flex flex-shrink-0"
                       >
                         <slot
@@ -141,7 +169,10 @@
               </li>
             </ComboboxOptions>
 
-            <div v-if="$slots.footer || multiple" class="border-t p-1">
+            <div
+              v-if="$slots.footer || props.showFooter || multiple"
+              class="border-t p-1"
+            >
               <slot name="footer" v-bind="{ togglePopover }">
                 <div v-if="multiple" class="flex items-center justify-end">
                   <Button
@@ -153,8 +184,12 @@
                     v-if="areAllOptionsSelected"
                     label="Clear All"
                     @click.stop="clearAll"
-                  /></div
-              ></slot>
+                  />
+                </div>
+                <div v-else class="flex items-center justify-end">
+                  <Button label="Clear" @click.stop="clearAll" />
+                </div>
+              </slot>
             </div>
           </div>
         </div>
@@ -174,6 +209,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import Popover from './Popover.vue'
 import { Button } from './Button'
 import FeatherIcon from './FeatherIcon.vue'
+import LoadingIndicator from './LoadingIndicator.vue'
 
 type Option = {
   label: string
@@ -195,10 +231,14 @@ type AutocompleteOptionGroup = {
 type AutocompleteOptions = AutocompleteOption[] | AutocompleteOptionGroup[]
 
 type AutocompleteProps = {
+  label?: string
   options: AutocompleteOptions
   hideSearch?: boolean
   placeholder?: string
   bodyClasses?: string | string[]
+  loading?: boolean
+  placement?: string
+  showFooter?: boolean
 } & (
   | {
       multiple: true
@@ -278,13 +318,19 @@ const filterOptions = (options: Option[]) => {
 const selectedValue = computed({
   get() {
     if (!props.multiple) {
-      return findOption(props.modelValue as AutocompleteOption)
+      return (
+        findOption(props.modelValue as AutocompleteOption) ||
+        // if the modelValue is not found in the option list
+        // return the modelValue as is
+        makeOption(props.modelValue as AutocompleteOption)
+      )
     }
     // in case of `multiple`, modelValue is an array of values
     // if the modelValue is a list of values, convert them to options
-    let values = props.modelValue as AutocompleteOption[]
-    if (!values) return []
-    return isOption(values[0]) ? values : values.map((v) => findOption(v))
+    const values = (props.modelValue || []) as AutocompleteOption[]
+    return isOption(values[0])
+      ? values
+      : values.map((v) => findOption(v) || makeOption(v))
   },
   set(val) {
     query.value = ''
@@ -303,6 +349,10 @@ const findOption = (option: AutocompleteOption) => {
   return allOptions.value.find((o) => o.value === value)
 }
 
+const makeOption = (option: AutocompleteOption) => {
+  return isOption(option) ? option : { label: option, value: option }
+}
+
 const getLabel = (option: AutocompleteOption) => {
   if (isOption(option)) {
     return option?.label || option?.value || 'No label'

package/src/components/Rating/Rating.vue

@@ -12,7 +12,7 @@
       >
         <FeatherIcon
           name="star"
-          class="fill-gray-400 text-ink-gray-1 stroke-1 mr-1"
+          class="fill-gray-300 text-transparent mr-0.5"
           :class="iconClasses(index)"
           @click="markRating(index)"
         />
@@ -55,9 +55,9 @@ const iconClasses = (index: number) => {
   ]
 
   if (index <= hoveredRating.value && index > rating.value) {
-    classes.push('fill-yellow-200')
+    classes.push('!fill-yellow-200')
   } else if (index <= rating.value) {
-    classes.push('fill-yellow-500')
+    classes.push('!fill-yellow-500')
   }
 
   if (!props.readonly) {

package/src/components/TextEditor/CodeBlockComponent.vue

@@ -2,7 +2,7 @@
   <node-view-wrapper>
     <div class="code-block-container">
       <select
-        class="language-selector form-select"
+        class="language-selector form-select py-0"
         contenteditable="false"
         v-model="selectedLanguage"
       >

package/src/components/Tooltip/Tooltip.vue

@@ -8,7 +8,7 @@ import {
   TooltipContent,
   TooltipArrow,
   type TooltipContentProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 defineOptions({

package/vite/README.md

@@ -0,0 +1,184 @@
+# Frappe UI Vite Plugins
+
+A collection of Vite plugins for Frappe applications that handle common
+development tasks when building modern frontends for Frappe.
+
+## Installation
+
+```bash
+npm install frappe-ui
+```
+
+## Usage
+
+In your `vite.config.js` file:
+
+```javascript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import frappeui from 'frappe-ui/vite'
+
+export default defineConfig({
+  plugins: [
+    frappeui({
+      frappeProxy: true, // Setup proxy to Frappe backend
+      lucideIcons: true, // Configure Lucide icons
+      jinjaBootData: true, // Inject server-side boot data
+      // Generate TypeScript interfaces from DocTypes
+      frappeTypes: {
+        input: {
+          app_name: ['doctype_1', 'doctype_2'],
+        },
+      },
+      // Production build config for asset paths and HTML output
+      buildConfig: {
+        indexHtmlPath: '../your_app/www/frontend.html',
+      },
+    }),
+    vue(),
+  ],
+})
+```
+
+## Plugins
+
+### Frappe Proxy Plugin
+
+Automatically configures a development server that proxies requests to your
+Frappe backend.
+
+#### Features
+
+- Sets up a proxy for backend routes (`/api`, `/app`, etc.)
+- Automatically detects Frappe port from `common_site_config.json`
+
+#### Configuration
+
+```javascript
+frappeui({
+  frappeProxy: {
+    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>
+```
+
+### Frappe Types Plugin
+
+Generates TypeScript interfaces for your Frappe DocTypes, providing type safety
+when working with Frappe data.
+
+#### Features
+
+- Automatically generates TypeScript interfaces from DocType JSON files
+- Creates and updates interfaces only when DocTypes change
+
+#### Configuration
+
+```javascript
+frappeui({
+  frappeTypes: {
+    input: {
+      your_app_name: ['doctype1', 'doctype2'],
+    },
+    output: 'src/types/doctypes.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
+frappeui({
+  jinjaBootData: true,
+})
+```
+
+#### Usage
+
+In your Python/Jinja template:
+
+```python
+
+def get_context(context):
+    context.boot = {
+        "csrf_token": "...",
+        "user": frappe.session.user,
+        "user_info": frappe.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 Frappe's standard directory structure
+- Copies the built index.html to a specified location (typically in www)
+
+#### Configuration
+
+```javascript
+frappeui({
+  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
+  },
+})
+```

package/vite/buildConfig.js

@@ -0,0 +1,169 @@
+const path = require('path')
+const fs = require('fs')
+
+function buildConfig(options = {}) {
+  let outDir = options.outDir || findOutputDir()
+  if (!outDir) {
+    console.error(
+      '[frappeui-build-config-plugin] Could not find build output directory automatically. Please specify it manually.',
+    )
+    return
+  }
+
+  const defaultOptions = {
+    outDir,
+    emptyOutDir: true,
+    sourcemap: true,
+    indexHtmlPath: null,
+    baseUrl: options.baseUrl || getBaseUrl(outDir),
+  }
+
+  const mergedOptions = { ...defaultOptions, ...options }
+
+  return {
+    name: 'frappeui-build-config-plugin',
+    config(config, { command, mode }) {
+      const buildConfig = {
+        build: {
+          outDir: mergedOptions.outDir,
+          emptyOutDir: mergedOptions.emptyOutDir,
+          commonjsOptions: {
+            include: [/tailwind.config.js/, /node_modules/],
+          },
+          sourcemap: mergedOptions.sourcemap,
+        },
+      }
+
+      if (mode === 'production') {
+        // Apply baseUrl only in production mode
+        buildConfig.base = mergedOptions.baseUrl
+
+        if (!mergedOptions.indexHtmlPath) {
+          throw new Error(
+            '[frappeui-build-config-plugin] indexHtmlPath is required in buildConfig options',
+          )
+        }
+      }
+
+      return buildConfig
+    },
+    writeBundle(options, bundle) {
+      if (mergedOptions.indexHtmlPath) {
+        try {
+          const sourceHtml = path.join(mergedOptions.outDir, 'index.html')
+          if (fs.existsSync(sourceHtml)) {
+            // Ensure destination directory exists
+            const destDir = path.dirname(mergedOptions.indexHtmlPath)
+            if (!fs.existsSync(destDir)) {
+              fs.mkdirSync(destDir, { recursive: true })
+            }
+
+            fs.copyFileSync(sourceHtml, mergedOptions.indexHtmlPath)
+            console.log(
+              `[frappeui-build-config-plugin] Successfully copied index.html to ${mergedOptions.indexHtmlPath}`,
+            )
+          } else {
+            console.error(
+              `[frappeui-build-config-plugin] Source index.html not found at ${sourceHtml}`,
+            )
+          }
+        } catch (error) {
+          console.error(
+            '[frappeui-build-config-plugin] Error copying index.html:',
+            error,
+          )
+        }
+      }
+    },
+  }
+}
+
+function findOutputDir() {
+  let appDir = findAppDir()
+  if (appDir) {
+    return path.join(appDir, 'public', 'frontend')
+  }
+  return null
+}
+
+function getBaseUrl(outputDir) {
+  try {
+    // Parse the output directory path to extract app name
+    // Expected pattern: /path/to/apps/app_name/app_name/public/frontend
+    if (!outputDir) return '/'
+
+    const parts = outputDir.split(path.sep)
+    const publicIndex = parts.indexOf('public')
+
+    if (publicIndex > 0) {
+      const appName = parts[publicIndex - 1] // Get the app name from path
+
+      // Check if the app name appears twice in sequence (common in Frappe apps)
+      const appsIndex = parts.indexOf('apps')
+      if (appsIndex >= 0 && publicIndex > appsIndex + 2) {
+        // If in standard Frappe app structure, use the app name from apps/app_name path
+        const possibleAppName = parts[appsIndex + 1]
+        if (possibleAppName === appName) {
+          // Determine the part after public (typically 'frontend')
+          const subdir = parts[publicIndex + 1] || ''
+          return `/assets/${appName}/${subdir}/`
+        }
+      }
+
+      // Fallback: just use the detected app name with standard structure
+      const subdir = parts[publicIndex + 1] || ''
+      return `/assets/${appName}/${subdir}/`
+    }
+    // fallback
+    return '/'
+  } catch (error) {
+    console.error(
+      '[frappeui-build-config-plugin] Error calculating base URL:',
+      error,
+    )
+    // fallback on error
+    return '/'
+  }
+}
+
+function findAppDir() {
+  // currentDir is the vue app directory
+  let currentDir = process.cwd()
+  // appDir is the frappe app directory
+  let appDir = path.resolve(currentDir, '..')
+
+  try {
+    // Read directories in the app directory
+    const directories = fs
+      .readdirSync(appDir)
+      .filter((item) => fs.statSync(path.join(appDir, item)).isDirectory())
+
+    // Find the first directory that contains folders typical of a Frappe app
+    for (const dir of directories) {
+      const dirPath = path.join(appDir, dir)
+      try {
+        const contents = fs.readdirSync(dirPath)
+        if (
+          contents.includes('public') &&
+          contents.includes('patches') &&
+          contents.includes('www') &&
+          contents.includes('hooks.py')
+        ) {
+          return dirPath
+        }
+      } catch (error) {
+        // Skip directories that can't be read
+        continue
+      }
+    }
+  } catch (error) {
+    console.error(
+      '[frappeui-build-config-plugin] Error finding app directory:',
+      error,
+    )
+  }
+
+  return null
+}
+
+module.exports = { buildConfig }

package/{scripts/generateInterface.js → vite/doctypeInterfaceGenerator.js}

@@ -1,8 +1,7 @@
 const fs = require('fs').promises
 const path = require('path')
-const ora = require('ora')
 
-module.exports = class DocTypeInterfaceGenerator {
+class DocTypeInterfaceGenerator {
   constructor(appsPath, appDoctypeMap, outputPath) {
     this.appsPath = appsPath
     this.appDoctypeMap = appDoctypeMap
@@ -10,8 +9,14 @@ module.exports = class DocTypeInterfaceGenerator {
     this.processedDoctypes = new Set()
     this.existingInterfaces = {}
     this.updatedInterfaces = 0
-    this.spinner = ora('Generating doctype interfaces...').start()
     this.jsonFileCache = new Map()
+    this.summary = {
+      processed: 0,
+      updated: 0,
+      skipped: 0,
+      notFound: 0,
+      details: [],
+    }
   }
 
   async generate() {
@@ -25,6 +30,8 @@ module.exports = class DocTypeInterfaceGenerator {
     }
     await Promise.all(promises)
 
+    this.printSummary()
+
     if (this.updatedInterfaces > 0) {
       const baseInterfaces = this.generateBaseInterfaces()
       const interfacesString = [
@@ -34,11 +41,24 @@ module.exports = class DocTypeInterfaceGenerator {
 
       await fs.mkdir(path.dirname(this.outputPath), { recursive: true })
       await fs.writeFile(this.outputPath, interfacesString)
-      this.spinner.succeed(
-        `Updated ${this.updatedInterfaces} interface${this.updatedInterfaces === 1 ? '' : 's'}. Output file updated.`,
+    }
+  }
+
+  printSummary() {
+    console.log('\nFrappe Type Generation Summary:')
+    console.log(`- Total processed: ${this.summary.processed} doctypes`)
+    console.log(`- Updated: ${this.summary.updated} interfaces`)
+    console.log(`- Skipped: ${this.summary.skipped} (no changes)`)
+    if (this.summary.notFound > 0) {
+      console.log(`- Not found: ${this.summary.notFound}`)
+    }
+
+    if (this.updatedInterfaces > 0) {
+      console.log(
+        `\nOutput file updated with ${this.updatedInterfaces} interface${this.updatedInterfaces === 1 ? '' : 's'}.`,
       )
     } else {
-      this.spinner.info('No new schema changes.')
+      console.log('\nNo new schema changes.')
     }
   }
 
@@ -69,10 +89,12 @@ module.exports = class DocTypeInterfaceGenerator {
       return
     }
     this.processedDoctypes.add(doctypeName)
+    this.summary.processed++
 
     const jsonFilePath = await this.findJsonFile(appName, doctypeName)
     if (!jsonFilePath) {
-      this.spinner.text = `Processing: ${doctypeName} [not found]`
+      this.summary.notFound++
+      this.summary.details.push(`${doctypeName}: not found`)
       return
     }
     const jsonData = JSON.parse(await fs.readFile(jsonFilePath, 'utf8'))
@@ -84,7 +106,8 @@ module.exports = class DocTypeInterfaceGenerator {
       existingInterface &&
       existingInterface.includes(`// Last updated: ${lastModified}`)
     ) {
-      this.spinner.text = `Processing: ${doctypeName} [skipped]`
+      this.summary.skipped++
+      this.summary.details.push(`${doctypeName}: skipped (no changes)`)
       return
     }
 
@@ -166,7 +189,8 @@ module.exports = class DocTypeInterfaceGenerator {
     interfaceString += `}\n`
     this.updatedInterfaces++
     this.existingInterfaces[interfaceName] = interfaceString
-    this.spinner.text = `Processing: ${doctypeName} [updated]`
+    this.summary.updated++
+    this.summary.details.push(`${doctypeName}: updated`)
   }
 
   async findJsonFile(appName, doctypeName) {
@@ -204,19 +228,21 @@ module.exports = class DocTypeInterfaceGenerator {
 
   generateBaseInterfaces() {
     return `interface DocType {
-  name: string;
-  creation: string;
-  modified: string;
-  owner: string;
-  modified_by: string;
-}
+    name: string;
+    creation: string;
+    modified: string;
+    owner: string;
+    modified_by: string;
+  }
 
-interface ChildDocType extends DocType {
-  parent?: string;
-  parentfield?: string;
-  parenttype?: string;
-  idx?: number;
-}
-`
+  interface ChildDocType extends DocType {
+    parent?: string;
+    parentfield?: string;
+    parenttype?: string;
+    idx?: number;
+  }
+  `
   }
 }
+
+exports.DocTypeInterfaceGenerator = DocTypeInterfaceGenerator

package/vite/frappeProxy.js

@@ -0,0 +1,36 @@
+const { getCommonSiteConfig } = require('./utils')
+
+function frappeProxy({
+  port = 8080,
+  source = '^/(app|login|api|assets|files|private)',
+} = {}) {
+  const commonSiteConfig = getCommonSiteConfig()
+  const webserver_port = commonSiteConfig
+    ? commonSiteConfig.webserver_port
+    : 8000
+  if (!commonSiteConfig) {
+    console.log('No common_site_config.json found, using default port 8000')
+  }
+
+  let proxy = {}
+  proxy[source] = {
+    target: `http://127.0.0.1:${webserver_port}`,
+    ws: true,
+    router: function (req) {
+      const site_name = req.headers.host.split(':')[0]
+      return `http://${site_name}:${webserver_port}`
+    },
+  }
+
+  return {
+    name: 'frappeui-proxy-plugin',
+    config: () => ({
+      server: {
+        port: port,
+        proxy: proxy,
+      },
+    }),
+  }
+}
+
+exports.frappeProxy = frappeProxy

package/vite/frappeTypes.js

@@ -0,0 +1,67 @@
+const path = require('path')
+const { spawn } = require('child_process')
+
+function frappeTypes(options = {}) {
+  let childProcess = null
+
+  return {
+    name: 'frappeui-types-plugin',
+    config: (config, { command, mode }) => {
+      if (mode === 'development') {
+        // Run the type generation in a separate process
+        const scriptPath = path.join(__dirname, 'generateTypes.js')
+
+        // Serialize options as a JSON string to pass to the child process
+        const optionsArg = JSON.stringify(options)
+
+        childProcess = spawn('node', [scriptPath, optionsArg], {
+          stdio: ['ignore', 'pipe', 'pipe'], // Ignore stdin, pipe stdout/stderr
+          detached: false,
+        })
+
+        // Pipe stdout and stderr
+        childProcess.stdout.pipe(process.stdout)
+        childProcess.stderr.pipe(process.stderr)
+
+        // Handle child process errors
+        childProcess.on('error', (err) => {
+          console.error('Error in type generation process:', err)
+        })
+
+        const cleanup = () => {
+          if (childProcess && !childProcess.killed) {
+            try {
+              // Send SIGTERM signal
+              childProcess.kill('SIGTERM')
+
+              // Force kill if needed after a timeout
+              setTimeout(() => {
+                if (childProcess && !childProcess.killed) {
+                  childProcess.kill('SIGKILL')
+                }
+              }, 500)
+            } catch (e) {
+              // Ignore errors during cleanup
+            }
+          }
+        }
+
+        // Register cleanup on exit signals and process exit
+        ;['SIGINT', 'SIGTERM', 'exit'].forEach((signal) => {
+          process.once(signal, cleanup)
+        })
+
+        // Handle child process exit
+        childProcess.on('exit', (code, signal) => {
+          childProcess = null
+          if (code !== 0 && !signal) {
+            console.log(`Type generation process exited with code ${code}`)
+          }
+        })
+      }
+      return {}
+    },
+  }
+}
+
+exports.frappeTypes = frappeTypes

package/vite/generateTypes.js

@@ -0,0 +1,59 @@
+const path = require('path')
+const { findAppsFolder } = require('./utils')
+const { DocTypeInterfaceGenerator } = require('./doctypeInterfaceGenerator')
+
+// Handle termination signals to exit cleanly
+process.on('SIGINT', () => process.exit(0))
+process.on('SIGTERM', () => process.exit(0))
+
+async function main() {
+  try {
+    // Parse options passed from the plugin
+    let options = {}
+    if (process.argv[2]) {
+      try {
+        options = JSON.parse(process.argv[2])
+      } catch (err) {
+        console.error('Error parsing plugin options:', err)
+      }
+    }
+
+    // Use only the plugin options for configuration
+    if (!(options && options.input)) {
+      console.log('No type generation input specified in options')
+      return
+    }
+
+    const frontendFolder = process.cwd()
+    let outputPath = options.output || 'src/types/doctypes.ts'
+    if (!path.isAbsolute(outputPath)) {
+      outputPath = path.join(frontendFolder, outputPath)
+    }
+
+    const appsFolder = findAppsFolder()
+    if (!appsFolder) {
+      console.error('Could not find frappe-bench/apps folder')
+      return
+    }
+
+    const generator = new DocTypeInterfaceGenerator(
+      appsFolder,
+      options.input,
+      outputPath,
+    )
+    await generator.generate()
+  } catch (error) {
+    console.error('Error generating DocType interfaces:', error)
+    process.exit(1)
+  }
+}
+
+// Execute if run directly
+if (require.main === module) {
+  main()
+    .then(() => process.exit(0))
+    .catch((err) => {
+      console.error(err)
+      process.exit(1)
+    })
+}

package/vite/index.js

@@ -0,0 +1,35 @@
+const { lucideIcons } = require('./lucideIcons')
+const { frappeProxy } = require('./frappeProxy')
+const { frappeTypes } = require('./frappeTypes')
+const { jinjaBootData } = require('./jinjaBootData')
+const { buildConfig } = require('./buildConfig')
+
+function frappeuiPlugin(
+  options = {
+    lucideIcons: true,
+    frappeProxy: true,
+    frappeTypes: true,
+    jinjaBootData: true,
+    buildConfig: true,
+  },
+) {
+  let plugins = []
+  if (options.lucideIcons) {
+    plugins.push(lucideIcons(options.lucideIcons))
+  }
+  if (options.frappeProxy) {
+    plugins.push(frappeProxy(options.frappeProxy))
+  }
+  if (options.frappeTypes) {
+    plugins.push(frappeTypes(options.frappeTypes))
+  }
+  if (options.jinjaBootData) {
+    plugins.push(jinjaBootData(options.jinjaBootData))
+  }
+  if (options.buildConfig) {
+    plugins.push(buildConfig(options.buildConfig))
+  }
+  return plugins
+}
+
+module.exports = frappeuiPlugin

package/vite/jinjaBootData.js

@@ -0,0 +1,25 @@
+function jinjaBootData() {
+  return {
+    name: 'frappeui-jinja-boot-data-plugin',
+    transformIndexHtml(html, context) {
+      if (!context.server) {
+        // context.server is true in dev mode
+        // only inject this in production build
+        return html.replace(
+          /<\/body>/,
+          `
+          <script>
+              {% for key in boot %}
+              window["{{ key }}"] = {{ boot[key] | tojson }};
+              {% endfor %}
+          </script>
+          </body>
+          `,
+        )
+      }
+      return html
+    },
+  }
+}
+
+module.exports = { jinjaBootData }

package/vite/lucideIcons.js

@@ -0,0 +1,67 @@
+const LucideIcons = require('lucide-static')
+const Icons = require('unplugin-icons/vite')
+const Components = require('unplugin-vue-components/vite')
+const IconsResolver = require('unplugin-icons/resolver')
+
+function lucideIconsPlugin() {
+  return [
+    Components.default({
+      resolvers: [
+        IconsResolver.default({
+          prefix: false,
+          enabledCollections: ['lucide'],
+        }),
+      ],
+    }),
+    Icons.default({
+      customCollections: {
+        lucide: getIcons(),
+      },
+    }),
+  ]
+}
+
+function getIcons() {
+  let icons = {}
+  for (const icon in LucideIcons) {
+    if (icon === 'default') {
+      continue
+    }
+    let iconSvg = LucideIcons[icon]
+
+    // set stroke-width to 1.5
+    if (iconSvg && iconSvg.includes('stroke-width')) {
+      iconSvg = iconSvg.replace(/stroke-width="2"/g, 'stroke-width="1.5"')
+    }
+    icons[icon] = iconSvg
+
+    let dashKeys = camelToDash(icon)
+    for (let dashKey of dashKeys) {
+      if (dashKey !== icon) {
+        icons[dashKey] = iconSvg
+      }
+    }
+  }
+  return icons
+}
+
+function camelToDash(key) {
+  // barChart2 -> bar-chart-2
+  let withNumber = key.replace(/[A-Z0-9]/g, (m) => '-' + m.toLowerCase())
+  if (withNumber.startsWith('-')) {
+    withNumber = withNumber.substring(1)
+  }
+  // barChart2 -> bar-chart2
+  let withoutNumber = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())
+  if (withoutNumber.startsWith('-')) {
+    withoutNumber = withoutNumber.substring(1)
+  }
+
+  if (withNumber !== withoutNumber) {
+    // both are required because unplugin icon resolver doesn't put a dash before numbers
+    return [withNumber, withoutNumber]
+  }
+  return [withNumber]
+}
+
+exports.lucideIcons = lucideIconsPlugin

package/vite/utils.js

@@ -0,0 +1,48 @@
+const path = require('path')
+const fs = require('fs')
+
+function getConfig() {
+  let configPath = path.join(process.cwd(), 'frappeui.json')
+  if (fs.existsSync(configPath)) {
+    return JSON.parse(fs.readFileSync(configPath))
+  }
+}
+
+function getCommonSiteConfig() {
+  let currentDir = path.resolve('.')
+  // traverse up till we find frappe-bench with sites directory
+  while (currentDir !== '/') {
+    if (
+      fs.existsSync(path.join(currentDir, 'sites')) &&
+      fs.existsSync(path.join(currentDir, 'apps'))
+    ) {
+      let configPath = path.join(currentDir, 'sites', 'common_site_config.json')
+      if (fs.existsSync(configPath)) {
+        return JSON.parse(fs.readFileSync(configPath))
+      }
+      return null
+    }
+    currentDir = path.resolve(currentDir, '..')
+  }
+  return null
+}
+
+function findAppsFolder() {
+  let currentDir = process.cwd()
+  while (currentDir !== '/') {
+    if (
+      fs.existsSync(path.join(currentDir, 'apps')) &&
+      fs.existsSync(path.join(currentDir, 'sites'))
+    ) {
+      return path.join(currentDir, 'apps')
+    }
+    currentDir = path.resolve(currentDir, '..')
+  }
+  return null
+}
+
+module.exports = {
+  getConfig,
+  getCommonSiteConfig,
+  findAppsFolder,
+}

package/vite.js

@@ -1,106 +0,0 @@
-const path = require('path')
-const fs = require('fs')
-const DocTypeInterfaceGenerator = require('./scripts/generateInterface')
-
-module.exports = function proxyOptions({
-  port = 8080,
-  source = '^/(app|login|api|assets|files|private)',
-  enableDocTypeInterfaces = true,
-} = {}) {
-  const commonSiteConfig = getCommonSiteConfig()
-  const webserver_port = commonSiteConfig
-    ? commonSiteConfig.webserver_port
-    : 8000
-  if (!commonSiteConfig) {
-    console.log('No common_site_config.json found, using default port 8000')
-  }
-  let proxy = {}
-  proxy[source] = {
-    target: `http://127.0.0.1:${webserver_port}`,
-    ws: true,
-    router: function (req) {
-      const site_name = req.headers.host.split(':')[0]
-      return `http://${site_name}:${webserver_port}`
-    },
-  }
-
-  return {
-    name: 'frappeui-vite-plugin',
-    config: async () => {
-      if (enableDocTypeInterfaces) {
-        await generateDocTypeInterfaces()
-      }
-
-      return {
-        server: {
-          port: port,
-          proxy: proxy,
-        },
-      }
-    },
-  }
-}
-
-async function generateDocTypeInterfaces() {
-  const config = getConfig()
-  if (!(config && config.typeGeneration && config.typeGeneration.input)) return
-
-  const frontendFolder = process.cwd()
-  let outputPath = config.typeGeneration.output || 'src/types/doctypes.ts'
-  if (!path.isAbsolute(outputPath)) {
-    outputPath = path.join(frontendFolder, outputPath)
-  }
-
-  const appsFolder = findAppsFolder()
-  if (!appsFolder) {
-    console.error('Could not find frappe-bench/apps folder')
-    return
-  }
-
-  const generator = new DocTypeInterfaceGenerator(
-    appsFolder,
-    config.typeGeneration.input,
-    outputPath,
-  )
-  await generator.generate()
-}
-
-function getCommonSiteConfig() {
-  let currentDir = path.resolve('.')
-  // traverse up till we find frappe-bench with sites directory
-  while (currentDir !== '/') {
-    if (
-      fs.existsSync(path.join(currentDir, 'sites')) &&
-      fs.existsSync(path.join(currentDir, 'apps'))
-    ) {
-      let configPath = path.join(currentDir, 'sites', 'common_site_config.json')
-      if (fs.existsSync(configPath)) {
-        return JSON.parse(fs.readFileSync(configPath))
-      }
-      return null
-    }
-    currentDir = path.resolve(currentDir, '..')
-  }
-  return null
-}
-
-function findAppsFolder() {
-  let currentDir = process.cwd()
-  while (currentDir !== '/') {
-    if (
-      fs.existsSync(path.join(currentDir, 'apps')) &&
-      fs.existsSync(path.join(currentDir, 'sites'))
-    ) {
-      return path.join(currentDir, 'apps')
-    }
-    currentDir = path.resolve(currentDir, '..')
-  }
-  return null
-}
-
-function getConfig() {
-  let configPath = path.join(process.cwd(), 'frappeui.json')
-  if (fs.existsSync(configPath)) {
-    return JSON.parse(fs.readFileSync(configPath))
-  }
-}