frappe-ui 0.1.138 → 0.1.140

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.138",
+  "version": "0.1.140",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
+  "type": "module",
   "scripts": {
     "test": "vitest",
     "prettier": "yarn prettier -w ./src",

package/src/components/Button/Button.vue

@@ -85,7 +85,6 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 })
 
 const slots = useSlots()
-const router = useRouter()
 
 const buttonClasses = computed(() => {
   let solidClasses = {
@@ -216,6 +215,7 @@ const isIconButton = computed(() => {
 
 const handleClick = () => {
   if (props.route) {
+    const router = useRouter()
     return router.push(props.route)
   } else if (props.link) {
     return window.open(props.link, '_blank')

package/src/components/Combobox/Combobox.vue

@@ -46,7 +46,7 @@ interface ComboboxProps {
 const props = defineProps<ComboboxProps>()
 const emit = defineEmits(['update:modelValue', 'update:selectedOption'])
 
-const searchTerm = ref('')
+const searchTerm = ref(getDisplayValue(props.modelValue))
 const internalModelValue = ref(props.modelValue)
 const isOpen = ref(false)
 const userHasTyped = ref(false)
@@ -71,23 +71,23 @@ const onUpdateModelValue = (value: string | null) => {
   emit('update:selectedOption', selectedOpt)
 }
 
-const isGroup = (option: ComboboxOption): option is GroupedOption => {
+function isGroup(option: ComboboxOption): option is GroupedOption {
   return typeof option === 'object' && 'group' in option
 }
 
-const getLabel = (option: SimpleOption): string => {
+function getLabel(option: SimpleOption): string {
   return typeof option === 'string' ? option : option.label
 }
 
-const getValue = (option: SimpleOption): string => {
+function getValue(option: SimpleOption): string {
   return typeof option === 'string' ? option : option.value
 }
 
-const isDisabled = (option: SimpleOption): boolean => {
+function isDisabled(option: SimpleOption): boolean {
   return typeof option === 'object' && !!option.disabled
 }
 
-const getIcon = (option: SimpleOption): string | Component | undefined => {
+function getIcon(option: SimpleOption): string | Component | undefined {
   return typeof option === 'object' ? option.icon : undefined
 }
 
@@ -105,9 +105,10 @@ const allOptionsFlat = computed(() => {
 
 function getDisplayValue(selectedValue: string | null | undefined): string {
   if (!selectedValue) return ''
-  const selectedOption = allOptionsFlat.value.find(
-    (opt) => getValue(opt) === selectedValue,
+  const options = props.options.flatMap((opt) =>
+    isGroup(opt) ? opt.options : opt,
   )
+  const selectedOption = options.find((opt) => getValue(opt) === selectedValue)
   return selectedOption ? getLabel(selectedOption) : selectedValue || ''
 }
 

package/src/components/TextEditor/EditLink.vue

@@ -27,18 +27,16 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, useTemplateRef } from 'vue'
+import { onMounted, ref, useTemplateRef, nextTick } from 'vue'
 import Button from '../Button/Button.vue'
 import TextInput from '../TextInput.vue'
 import Tooltip from '../Tooltip/Tooltip.vue'
 import LucideCheck from '~icons/lucide/check'
 import LucideX from '~icons/lucide/x'
+import { isValidUrl } from '../../utils/url-validation'
 
 const props = defineProps<{
-  show: boolean
   href: string
-  onClose: () => void
-  onUpdateHref: (href: string) => void
 }>()
 
 const emit = defineEmits<{
@@ -49,28 +47,17 @@ const emit = defineEmits<{
 const _href = ref(props.href)
 const input = useTemplateRef('input')
 
-// Simple URL validation regex
-const isValidUrl = (url: string) => {
-  if (!url) return true
-  const regex =
-    /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/i
-  return regex.test(url)
-}
-
 const submitLink = () => {
-  if (isValidUrl(_href.value)) {
+  if (_href.value === '' || isValidUrl(_href.value)) {
     emit('updateHref', _href.value)
   }
 }
 
-onMounted(() => {
-  if (props.show) {
-    setTimeout(() => {
-      if (input.value?.el) {
-        input.value.el.focus()
-        input.value.el.select()
-      }
-    }, 0)
+onMounted(async () => {
+  await nextTick()
+  if (input.value?.el) {
+    input.value.el.focus()
+    input.value.el.select()
   }
 })
 </script>

package/src/components/TextEditor/link-extension.ts

@@ -1,8 +1,11 @@
-import Link from '@tiptap/extension-link'
 import { createApp, h } from 'vue'
+import Link from '@tiptap/extension-link'
+import tippy, { type Instance as TippyInstance } from 'tippy.js'
+import { getMarkRange, Range, Editor } from '@tiptap/core'
+import { MarkType, Mark as ProseMirrorMark } from 'prosemirror-model'
+import { Plugin, PluginKey } from 'prosemirror-state'
 import EditLink from './EditLink.vue'
-import tippy from 'tippy.js'
-import { getMarkRange, Mark, Range, Editor } from '@tiptap/core'
+import { linkPasteHandler } from './linkPasteHandler'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -22,6 +25,7 @@ export const LinkExtension = Link.extend({
       openOnClick: false,
       autolink: true,
       defaultProtocol: 'https',
+      linkOnPaste: false,
     }
   },
 
@@ -36,7 +40,8 @@ export const LinkExtension = Link.extend({
           const { doc } = state
 
           let range: Range | undefined = undefined
-          let mark: Mark | undefined = undefined
+          let mark: ProseMirrorMark | undefined = undefined
+          let shouldDelayPopover = false
 
           // Check if cursor is within a link or if there's a selection
           if (from === to) {
@@ -49,8 +54,15 @@ export const LinkExtension = Link.extend({
                 .resolve(markRange.from)
                 .marks()
                 .find((m) => m.type === this.type)
+
+              // Select the link text
+              editor
+                .chain()
+                .setTextSelection({ from: markRange.from, to: markRange.to })
+                .run()
+              shouldDelayPopover = true
             } else {
-              // No selection and not within a link
+              // No selection and not within a link, and cursor not in link
               return false
             }
           } else {
@@ -69,49 +81,58 @@ export const LinkExtension = Link.extend({
           const selectionFrom = range.from
           const selectionTo = range.to
 
-          openLinkEditor(existingHref, editor.view.dom)
-            .then((href) => {
-              if (href === null) {
-                return
-              }
+          const showPopover = () => {
+            openLinkEditor(existingHref, editor.view.dom)
+              .then((href) => {
+                if (href === null) {
+                  return
+                }
 
-              let chain = editor.chain().focus(null, { scrollIntoView: false })
+                let chain = editor
+                  .chain()
+                  .focus(null, { scrollIntoView: false })
 
-              if (href === '') {
-                chain
+                if (href === '') {
+                  chain
+                    .setTextSelection({ from: selectionFrom, to: selectionTo })
+                    .unsetLink()
+                    .command(({ tr }) => {
+                      tr.setStoredMarks([])
+                      return true
+                    })
+                    .run()
+                  return
+                }
+
+                chain = chain
                   .setTextSelection({ from: selectionFrom, to: selectionTo })
-                  .unsetLink()
+                  .setLink({ href })
+                  .setTextSelection(selectionTo)
                   .command(({ tr }) => {
                     tr.setStoredMarks([])
                     return true
                   })
-                  .run()
-                return
-              }
-
-              chain = chain
-                .setTextSelection({ from: selectionFrom, to: selectionTo })
-                .setLink({ href })
-                .setTextSelection(selectionTo) // Move cursor to the end of the link
-                .command(({ tr }) => {
-                  tr.setStoredMarks([]) // Clear stored marks to avoid applying link to next typed char
-                  return true
-                })
-
-              const posAfterLink = selectionTo
-              const charAfter =
-                posAfterLink < doc.content.size
-                  ? doc.textBetween(posAfterLink, posAfterLink + 1)
-                  : null
-
-              // Insert a space after the link if needed
-              if (charAfter === null || charAfter !== ' ') {
-                chain = chain.insertContent(' ')
-              }
-
-              chain.run()
-            })
-            .catch(() => {}) // Ignore cancellation
+
+                const posAfterLink = selectionTo
+                const charAfter =
+                  posAfterLink < doc.content.size
+                    ? doc.textBetween(posAfterLink, posAfterLink + 1)
+                    : null
+
+                if (charAfter === null || charAfter !== ' ') {
+                  chain = chain.insertContent(' ')
+                }
+
+                chain.run()
+              })
+              .catch(() => {})
+          }
+
+          if (shouldDelayPopover) {
+            requestAnimationFrame(showPopover)
+          } else {
+            showPopover()
+          }
 
           return true
         },
@@ -123,6 +144,27 @@ export const LinkExtension = Link.extend({
       'Mod-k': () => this.editor.commands.openLinkEditor(),
     }
   },
+
+  addProseMirrorPlugins() {
+    let plugins = this.parent?.() || []
+
+    plugins.push(
+      linkPasteHandler({
+        editor: this.editor,
+        defaultProtocol: this.options.defaultProtocol,
+        type: this.type,
+      }),
+    )
+
+    plugins.push(
+      clearLinkOnBoundaryPlugin({
+        editor: this.editor,
+        type: this.type,
+      }),
+    )
+
+    return plugins
+  },
 })
 
 function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
@@ -138,16 +180,17 @@ function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
     if (selection && selection.rangeCount > 0) {
       const range = selection.getRangeAt(0)
       const rect = range.getBoundingClientRect()
+      const isCollapsed = range.collapsed
 
       virtualReference = {
         getBoundingClientRect: () => ({
           width: 0,
-          height: 0,
+          height: rect.height,
           top: rect.top,
-          right: rect.left + rect.width / 2,
-          bottom: rect.top,
-          left: rect.left + rect.width / 2,
-          x: rect.left + rect.width / 2,
+          right: isCollapsed ? rect.left : rect.right,
+          bottom: rect.bottom,
+          left: rect.left,
+          x: rect.left,
           y: rect.top,
           toJSON: () => {},
         }),
@@ -158,18 +201,47 @@ function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
       }
     }
 
-    const app = createApp({
+    let app: ReturnType<typeof createApp> | null = null
+    let tippyInstance: TippyInstance | null = null
+    let isDestroyed = false
+    let promiseSettled = false
+
+    const settlePromise = (action: 'resolve' | 'reject', value?: any) => {
+      if (promiseSettled) return
+      promiseSettled = true
+      if (action === 'resolve') {
+        resolve(value)
+      } else {
+        reject(value)
+      }
+    }
+
+    const destroy = () => {
+      if (isDestroyed) return
+      isDestroyed = true
+
+      settlePromise('reject', 'Link editing cancelled or destroyed')
+
+      requestAnimationFrame(() => {
+        tippyInstance?.destroy()
+        app?.unmount()
+        container?.remove()
+        app = null
+        tippyInstance = null
+      })
+    }
+
+    app = createApp({
       render() {
         return h(EditLink, {
-          show: true,
           href,
           onClose: () => {
+            settlePromise('reject', 'Link editing cancelled')
             destroy()
-            reject('Link editing cancelled')
           },
           onUpdateHref: (newHref: string) => {
+            settlePromise('resolve', newHref)
             destroy()
-            resolve(newHref)
           },
         })
       },
@@ -177,7 +249,7 @@ function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
 
     app.mount(container)
 
-    const tippyInstance = tippy(anchor, {
+    tippyInstance = tippy(anchor, {
       getReferenceClientRect: () => virtualReference.getBoundingClientRect(),
       content: container,
       trigger: 'manual',
@@ -189,20 +261,69 @@ function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
       maxWidth: 'none',
       onHidden() {
         destroy()
-        reject('Link editing cancelled')
       },
+      hideOnClick: true,
+      interactiveDebounce: 75,
     })
 
-    function destroy() {
-      setTimeout(() => {
-        tippyInstance.destroy()
-        app.unmount()
-        container.remove()
-      }, 0)
+    if (!tippyInstance) {
+      container.remove()
+      settlePromise('reject', 'Failed to initialize link editor tooltip')
+      return
     }
 
     tippyInstance.show()
   })
 }
 
+function clearLinkOnBoundaryPlugin(options: {
+  editor: Editor
+  type: MarkType
+}) {
+  return new Plugin({
+    key: new PluginKey('clearLinkMarkOnBoundary'),
+    appendTransaction: (transactions, oldState, newState) => {
+      if (!options.editor.isEditable) {
+        return null
+      }
+
+      const { tr, doc, selection, storedMarks } = newState
+      const { $from, empty } = selection
+
+      if (!empty || !storedMarks || storedMarks.length === 0) {
+        // Only apply for cursor selections and if there are stored marks
+        return null
+      }
+
+      const linkMarkType = options.type
+      const hasStoredLinkMark = storedMarks.some(
+        (mark) => mark.type === linkMarkType,
+      )
+
+      if (!hasStoredLinkMark) {
+        return null
+      }
+
+      // Check if the cursor position itself has an active link mark in the document
+      const marksAtCursor = $from.marks()
+      const activeLinkAtCursor = marksAtCursor.some(
+        (mark) => mark.type === linkMarkType,
+      )
+
+      if (activeLinkAtCursor) {
+        // If there's an actual link mark active in the document at the cursor,
+        // then it's correct for the stored mark to be there.
+        return null
+      }
+
+      // If we are here, it means:
+      // 1. Selection is a cursor (empty).
+      // 2. There's a stored link mark.
+      // 3. There's no active link mark in the document at the cursor position.
+      // This indicates the stored link mark should be cleared.
+      return tr.setStoredMarks([])
+    },
+  })
+}
+
 export default LinkExtension

package/src/components/TextEditor/linkPasteHandler.ts

@@ -0,0 +1,51 @@
+import { Editor } from '@tiptap/core'
+import { MarkType } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { isValidUrl } from '../../utils/url-validation'
+
+type PasteHandlerOptions = {
+  editor: Editor
+  defaultProtocol: string
+  type: MarkType
+}
+
+export function linkPasteHandler(options: PasteHandlerOptions): Plugin {
+  return new Plugin({
+    key: new PluginKey('handlePasteLink'),
+    props: {
+      handlePaste: (view, event, slice) => {
+        const { state } = view
+        const { selection } = state
+        const { empty } = selection
+
+        if (empty) {
+          return false
+        }
+
+        let textContent = ''
+        slice.content.forEach((node) => {
+          textContent += node.textContent
+        })
+        if (!textContent) {
+          return false
+        }
+
+        let link = isValidUrl(textContent) ? textContent : null
+        if (!link) {
+          return false
+        }
+
+        return options.editor
+          .chain()
+          .setTextSelection({ from: selection.from, to: selection.to })
+          .setLink({ href: link })
+          .setTextSelection(selection.to)
+          .command(({ tr }) => {
+            tr.setStoredMarks([])
+            return true
+          })
+          .run()
+      },
+    },
+  })
+}

package/src/tailwind/colorPalette.js

@@ -1,5 +1,5 @@
-const tailwindColors = require('tailwindcss/colors')
-const colorsData = require('./colors.json')
+import tailwindColors from 'tailwindcss/colors'
+import colorsData from './colors.json' assert { type: 'json' }
 
 function generateColorPalette() {
   const colorPalette = {
@@ -108,8 +108,4 @@ function generateSemanticColors() {
   return output
 }
 
-module.exports = {
-  generateColorPalette,
-  generateCSSVariables,
-  generateSemanticColors,
-}
+export { generateColorPalette, generateCSSVariables, generateSemanticColors }

package/src/tailwind/figma-variables-to-colors.js

@@ -3,8 +3,8 @@
  * to colors JSON object that can be used in the Tailwind config.
  */
 
-const fs = require('fs')
-const path = require('path')
+import fs from 'fs'
+import path from 'path'
 
 function main() {
   const variables = getVariables()
@@ -144,7 +144,7 @@ function getVariables() {
     console.log('Please provide path to variables.json file')
     process.exit(1)
   }
-  return require(variablesJSONPath)
+  return JSON.parse(fs.readFileSync(variablesJSONPath, 'utf-8'))
 }
 
 main()

package/src/tailwind/plugin.js

@@ -1,9 +1,9 @@
-const plugin = require('tailwindcss/plugin')
-const {
+import plugin from 'tailwindcss/plugin'
+import {
   generateColorPalette,
   generateSemanticColors,
   generateCSSVariables,
-} = require('./colorPalette')
+} from './colorPalette.js'
 
 let colorPalette = generateColorPalette()
 let semanticColors = generateSemanticColors()
@@ -49,7 +49,7 @@ let componentStyles = {
   },
 }
 
-module.exports = plugin(
+export default plugin(
   function ({ addBase, addComponents, theme }) {
     addBase({ ...globalStyles(theme), ...cssVariables })
     addComponents(componentStyles)
@@ -342,7 +342,7 @@ module.exports = plugin(
             css: {
               fontSize: '14px',
               fontWeight: 420,
-              lineHeight: 1.6,
+              lineHeight: 1.5,
               letterSpacing: '0.02em',
               h1: {
                 fontSize: em(20, 14),
@@ -361,7 +361,7 @@ module.exports = plugin(
               },
               p: {
                 marginTop: '0.5rem',
-                marginBottom: '1rem',
+                marginBottom: '0.5rem',
               },
               'ul > li': {
                 margin: '0.5rem 0',

package/src/tailwind/preset.js

@@ -1,10 +1,9 @@
-const themePlugin = require('./plugin')
+import themePlugin from './plugin.js'
+import forms from '@tailwindcss/forms'
+import typography from '@tailwindcss/typography'
+
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   darkMode: ['selector', '[data-theme="dark"]'],
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    themePlugin,
-  ],
+  plugins: [forms, typography, themePlugin],
 }

package/src/tailwind/update-tailwind-classes.js

@@ -1,6 +1,6 @@
-const fs = require('fs')
-const path = require('path')
-const colors = require('./colors.json')
+import fs from 'fs'
+import path from 'path'
+import colors from './colors.json' assert { type: 'json' }
 
 function generateClassMap() {
   const classMap = {

package/src/utils/tailwind.config.js

@@ -1,6 +1,6 @@
-const preset = require('../tailwind/preset')
+import preset from '../tailwind/preset.js'
 console.warn(
   '`frappe-ui/src/utils/tailwind.config.js` is deprecated. Use `frappe-ui/tailwind/preset.js` instead.',
 )
 // keep backwards compatible for now
-module.exports = preset
+export default preset

package/src/utils/url-validation.ts

@@ -0,0 +1,39 @@
+/**
+ * Validates if the given string is a valid URL, including common protocols,
+ * relative paths, and anchor links. It also allows an empty string.
+ *
+ * @param url The URL string to validate.
+ * @returns True if the URL is considered valid, false otherwise.
+ */
+export function isValidUrl(url: string): boolean {
+  if (url === '') {
+    return true // Allows empty string as per documentation
+  }
+
+  // Regex for absolute URLs with common schemes (http, https, mailto, tel, //)
+  // Allows for paths, query strings, and fragments.
+  if (/^(https?:\/\/|mailto:|tel:|\/\/)[^\s]+$/i.test(url)) {
+    return true
+  }
+
+  // Regex for:
+  // 1. Relative paths (starting with / or .)
+  // 2. Anchor links (starting with #)
+  // These allow for most characters except whitespace, as the initial characters
+  // prevent misinterpretation as a scheme like 'javascript:'.
+  if (/^([./#][^\s]*)$/i.test(url)) {
+    return true
+  }
+
+  // Regex for "Schemeless" paths (e.g., page.html, my-document, slug-name)
+  // Must start with a word character or hyphen.
+  // Subsequent characters are restricted to common URL path/query/fragment characters
+  // (alphanumeric, -, _, ., /, #, ?, =, &, %).
+  // This prevents colons (avoiding 'javascript:' like schemes) and other problematic
+  // characters like spaces, (, ), !, {, }.
+  if (/^[\w\-]([\w\-./#?=&%]*)$/i.test(url)) {
+    return true
+  }
+
+  return false
+}

package/vite/buildConfig.js

@@ -1,7 +1,7 @@
-const path = require('path')
-const fs = require('fs')
+import path from 'path'
+import fs from 'fs'
 
-function buildConfig(options = {}) {
+export function buildConfig(options = {}) {
   let outDir = options.outDir || findOutputDir()
   if (!outDir) {
     console.error(
@@ -165,5 +165,3 @@ function findAppDir() {
 
   return null
 }
-
-module.exports = { buildConfig }

package/vite/doctypeInterfaceGenerator.js

@@ -1,7 +1,7 @@
-const fs = require('fs').promises
-const path = require('path')
+import fs from 'fs/promises'
+import path from 'path'
 
-class DocTypeInterfaceGenerator {
+export class DocTypeInterfaceGenerator {
   constructor(appsPath, appDoctypeMap, outputPath) {
     this.appsPath = appsPath
     this.appDoctypeMap = appDoctypeMap
@@ -244,5 +244,3 @@ class DocTypeInterfaceGenerator {
   `
   }
 }
-
-exports.DocTypeInterfaceGenerator = DocTypeInterfaceGenerator

package/vite/frappeProxy.js

@@ -1,6 +1,6 @@
-const { getCommonSiteConfig } = require('./utils')
+import { getCommonSiteConfig } from './utils.js'
 
-function frappeProxy({
+export function frappeProxy({
   port = 8080,
   source = '^/(app|login|api|assets|files|private)',
 } = {}) {
@@ -32,5 +32,3 @@ function frappeProxy({
     }),
   }
 }
-
-exports.frappeProxy = frappeProxy

package/vite/frappeTypes.js

@@ -1,7 +1,12 @@
-const path = require('path')
-const { spawn } = require('child_process')
+import path from 'path'
+import { spawn } from 'child_process'
+import { fileURLToPath } from 'url'
 
-function frappeTypes(options = {}) {
+// Get __dirname equivalent in ES modules
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export function frappeTypes(options = {}) {
   let childProcess = null
 
   return {
@@ -63,5 +68,3 @@ function frappeTypes(options = {}) {
     },
   }
 }
-
-exports.frappeTypes = frappeTypes

package/vite/generateTypes.js

@@ -1,6 +1,7 @@
-const path = require('path')
-const { findAppsFolder } = require('./utils')
-const { DocTypeInterfaceGenerator } = require('./doctypeInterfaceGenerator')
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { findAppsFolder } from './utils.js'
+import { DocTypeInterfaceGenerator } from './doctypeInterfaceGenerator.js'
 
 // Handle termination signals to exit cleanly
 process.on('SIGINT', () => process.exit(0))
@@ -49,7 +50,8 @@ async function main() {
 }
 
 // Execute if run directly
-if (require.main === module) {
+const currentFilePath = fileURLToPath(import.meta.url)
+if (process.argv[1] === currentFilePath) {
   main()
     .then(() => process.exit(0))
     .catch((err) => {

package/vite/index.js

@@ -1,8 +1,8 @@
-const { lucideIcons } = require('./lucideIcons')
-const { frappeProxy } = require('./frappeProxy')
-const { frappeTypes } = require('./frappeTypes')
-const { jinjaBootData } = require('./jinjaBootData')
-const { buildConfig } = require('./buildConfig')
+import { lucideIcons } from './lucideIcons.js'
+import { frappeProxy } from './frappeProxy.js'
+import { frappeTypes } from './frappeTypes.js'
+import { jinjaBootData } from './jinjaBootData.js'
+import { buildConfig } from './buildConfig.js'
 
 function frappeuiPlugin(
   options = {
@@ -32,4 +32,4 @@ function frappeuiPlugin(
   return plugins
 }
 
-module.exports = frappeuiPlugin
+export default frappeuiPlugin

package/vite/jinjaBootData.js

@@ -1,4 +1,4 @@
-function jinjaBootData() {
+export function jinjaBootData() {
   return {
     name: 'frappeui-jinja-boot-data-plugin',
     transformIndexHtml(html, context) {
@@ -21,5 +21,3 @@ function jinjaBootData() {
     },
   }
 }
-
-module.exports = { jinjaBootData }

package/vite/lucideIcons.js

@@ -1,19 +1,19 @@
-const LucideIcons = require('lucide-static')
-const Icons = require('unplugin-icons/vite')
-const Components = require('unplugin-vue-components/vite')
-const IconsResolver = require('unplugin-icons/resolver')
+import * as LucideIcons from 'lucide-static'
+import Icons from 'unplugin-icons/vite'
+import Components from 'unplugin-vue-components/vite'
+import IconsResolver from 'unplugin-icons/resolver'
 
-function lucideIconsPlugin() {
+export function lucideIcons() {
   return [
-    Components.default({
+    Components({
       resolvers: [
-        IconsResolver.default({
+        IconsResolver({
           prefix: false,
           enabledCollections: ['lucide'],
         }),
       ],
     }),
-    Icons.default({
+    Icons({
       customCollections: {
         lucide: getIcons(),
       },
@@ -63,5 +63,3 @@ function camelToDash(key) {
   }
   return [withNumber]
 }
-
-exports.lucideIcons = lucideIconsPlugin

package/vite/utils.js

@@ -1,14 +1,14 @@
-const path = require('path')
-const fs = require('fs')
+import path from 'path'
+import fs from 'fs'
 
-function getConfig() {
+export function getConfig() {
   let configPath = path.join(process.cwd(), 'frappeui.json')
   if (fs.existsSync(configPath)) {
     return JSON.parse(fs.readFileSync(configPath))
   }
 }
 
-function getCommonSiteConfig() {
+export function getCommonSiteConfig() {
   let currentDir = path.resolve('.')
   // traverse up till we find frappe-bench with sites directory
   while (currentDir !== '/') {
@@ -27,7 +27,7 @@ function getCommonSiteConfig() {
   return null
 }
 
-function findAppsFolder() {
+export function findAppsFolder() {
   let currentDir = process.cwd()
   while (currentDir !== '/') {
     if (
@@ -40,9 +40,3 @@ function findAppsFolder() {
   }
   return null
 }
-
-module.exports = {
-  getConfig,
-  getCommonSiteConfig,
-  findAppsFolder,
-}