refactor!: tree shaking by adding subpath exports

frappe/Billing/SignupBanner.vue

@@ -25,7 +25,7 @@
   </Button>
 </template>
 <script setup>
-import LightningIcon from '../Icons/LightningIcon.vue'
+import LightningIcon from '../../icons/LightningIcon.vue'
 
 const props = defineProps({
   isSidebarCollapsed: {

frappe/Billing/TrialBanner.vue

@@ -23,7 +23,7 @@
   </Button>
 </template>
 <script setup>
-import LightningIcon from '../Icons/LightningIcon.vue'
+import LightningIcon from '../../icons/LightningIcon.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import { Button } from '../../src/components/Button'
 import { createResource } from '../../src/resources'

frappe/Help/HelpModal.vue

@@ -55,10 +55,10 @@
 <script setup>
 import Dropdown from '../../src/components/Dropdown/Dropdown.vue'
 import Button from '../../src/components/Button/Button.vue'
-import StepsIcon from '../Icons/StepsIcon.vue'
-import MinimizeIcon from '../Icons/MinimizeIcon.vue'
-import MaximizeIcon from '../Icons/MaximizeIcon.vue'
-import HelpIcon from '../Icons/HelpIcon.vue'
+import StepsIcon from '../../icons/StepsIcon.vue'
+import MinimizeIcon from '../../icons/MinimizeIcon.vue'
+import MaximizeIcon from '../../icons/MaximizeIcon.vue'
+import HelpIcon from '../../icons/HelpIcon.vue'
 import OnboardingSteps from '../Onboarding/OnboardingSteps.vue'
 import HelpCenter from '../HelpCenter/HelpCenter.vue'
 import { useOnboarding } from '../Onboarding/onboarding'

frappe/Onboarding/GettingStartedBanner.vue

@@ -56,7 +56,7 @@
   </Button>
 </template>
 <script setup>
-import StepsIcon from '../Icons/StepsIcon.vue'
+import StepsIcon from '../../icons/StepsIcon.vue'
 import Button from '../../src/components/Button/Button.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import { useOnboarding } from './onboarding'

frappe/index.d.ts

@@ -0,0 +1,53 @@
+// Since the export is via JS file, we need to declare the module here
+declare module 'frappe-ui/frappe' {
+  import type { Component, ComputedRef, Ref } from 'vue'
+
+  // Onboarding
+  export interface OnboardingStep {
+    name: string
+    completed: boolean
+    [key: string]: any
+  }
+
+  export function useOnboarding(appName: string):
+    | {
+        steps: OnboardingStep[]
+        stepsCompleted: ComputedRef<number>
+        totalSteps: ComputedRef<number>
+        completedPercentage: ComputedRef<number>
+        isOnboardingStepsCompleted: Ref<boolean>
+        updateOnboardingStep: (
+          step: string,
+          value?: boolean,
+          skipped?: boolean,
+          callback?: ((step: string, skipped: boolean) => void) | null,
+        ) => void
+        skip: (
+          step: string,
+          callback?: ((step: string, skipped: boolean) => void) | null,
+        ) => void
+        skipAll: (callback?: ((value: boolean) => void) | null) => void
+        reset: (
+          step: string,
+          callback?: ((step: string, skipped: boolean) => void) | null,
+        ) => void
+        resetAll: (callback?: ((value: boolean) => void) | null) => void
+        setUp: (steps: OnboardingStep[]) => void
+        syncStatus: () => void
+      }
+    | undefined
+
+  // Help Modal
+  export const showHelpModal: Ref<boolean>
+  export const minimize: Ref<boolean>
+  export const HelpModal: Component
+
+  // Banners
+  export const GettingStartedBanner: Component
+  export const TrialBanner: Component
+  export const IntermediateStepModal: Component
+
+  //   Components
+  export const Link: Component
+  export type { LinkProps } from './Link/types'
+}

icons/index.ts

@@ -0,0 +1,10 @@
+export { default as CircleCheckIcon } from './CircleCheckIcon.vue'
+export { default as DownSolidIcon } from './DownSolidIcon.vue'
+export { default as GreenCheckIcon } from './GreenCheckIcon.vue'
+
+// Frappe Icons
+export { default as HelpIcon } from './HelpIcon.vue'
+export { default as LightningIcon } from './LightningIcon.vue'
+export { default as MaximizeIcon } from './MaximizeIcon.vue'
+export { default as MinimizeIcon } from './MinimizeIcon.vue'
+export { default as StepsIcon } from './StepsIcon.vue'

package.json

@@ -4,6 +4,7 @@
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
+  "sideEffects": false,
   "scripts": {
     "test": "vitest --run",
     "type-check": "tsc --noEmit",
@@ -17,6 +18,29 @@
     "story:build": "histoire build && cp 404.html .histoire/dist",
     "story:preview": "histoire preview"
   },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./frappe": {
+      "import": "./frappe/index.js"
+    },
+    "./icons": {
+      "import": "./icons/index.ts"
+    },
+    "./tailwind": {
+      "import": "./src/tailwind/preset.js",
+      "default": "./src/tailwind/preset.js"
+    },
+    "./vite": {
+      "import": "./vite/index.js"
+    },
+    "./style.css": {
+      "import": "./src/style.css"
+    },
+    "./tsconfig.base.json": "./tsconfig.base.json"
+  },
   "files": [
     "frappe",
     "src",

src/components/DatePicker/index.ts

@@ -0,0 +1,6 @@
+export { default as DatePicker } from './DatePicker.vue'
+export { default as DateRangePicker } from './DateRangePicker.vue'
+export { default as DateTimePicker } from './DateTimePicker.vue'
+export * from './types'
+export { useDatePicker } from './useDatePicker'
+export * from './utils'

src/components/ListView/ListGroupHeader.vue

@@ -26,7 +26,7 @@
 </template>
 <script setup>
 import { inject } from 'vue'
-import DownSolid from '../../icons/DownSolid.vue'
+import DownSolid from '../../../icons/DownSolidIcon.vue'
 
 const props = defineProps({
   group: {

src/components/Sidebar/index.ts

@@ -1,2 +1,5 @@
 export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarItem } from './SidebarItem.vue'
+export { default as SidebarSection } from './SidebarSection.vue'
 export type { SidebarProps } from './types'

src/components/Toast/Toast.vue

@@ -56,7 +56,7 @@ import { ToastAction, ToastClose, ToastDescription, ToastRoot } from 'reka-ui'
 import LucideInfo from '~icons/lucide/info'
 import LucideAlertTriangle from '~icons/lucide/alert-triangle'
 import LucideX from '~icons/lucide/x'
-import CircleCheck from '../../icons/CircleCheck.vue'
+import CircleCheck from '../../../icons/CircleCheckIcon.vue'
 import type { ToastProps } from './types'
 
 const props = defineProps<ToastProps>()

src/data-fetching/index.ts

@@ -1,6 +1,8 @@
+export * from './useCall/types'
 export { useCall } from './useCall/useCall'
-export { useList } from './useList/useList'
 export { useDoc } from './useDoc/useDoc'
 export { useDoctype } from './useDoctype/useDoctype'
-export { useNewDoc } from './useNewDoc/useNewDoc'
 export { useFrappeFetch } from './useFrappeFetch'
+export * from './useList/types'
+export { useList } from './useList/useList'
+export { useNewDoc } from './useNewDoc/useNewDoc'

src/index.ts

@@ -8,9 +8,7 @@ export * from './components/Button'
 export { default as Card } from './components/Card.vue'
 export * from './components/Combobox'
 export * from './components/Checkbox'
-export { default as DatePicker } from './components/DatePicker/DatePicker.vue'
-export { default as DateTimePicker } from './components/DatePicker/DateTimePicker.vue'
-export { default as DateRangePicker } from './components/DatePicker/DateRangePicker.vue'
+export * from './components/DatePicker'
 export * from './components/Dialog'
 export { default as Dialogs } from './components/Dialogs.vue'
 export * from './components/Divider'
@@ -20,7 +18,6 @@ export { default as FeatherIcon } from './components/FeatherIcon.vue'
 export * from './components/FileUploader'
 export * from './components/FormControl'
 export { default as FormLabel } from './components/FormLabel.vue'
-export { default as GreenCheckIcon } from './components/GreenCheckIcon.vue'
 export { default as Input } from './components/Input.vue'
 export { default as ListItem } from './components/ListItem.vue'
 export { default as LoadingIndicator } from './components/LoadingIndicator.vue'
@@ -66,7 +63,8 @@ export * from './components/Calendar'
 export * from './components/CircularProgressBar'
 export * from './components/Tree'
 export { default as FrappeUIProvider } from './components/Provider/FrappeUIProvider.vue'
-export { default as Sidebar } from './components/Sidebar/Sidebar.vue'
+export * from './components/Sidebar/index.ts'
+
 
 // grid layout
 export { default as GridLayout } from './components/VueGridLayout/Layout.vue'
@@ -83,6 +81,7 @@ export { default as onOutsideClickDirective } from './directives/onOutsideClick'
 export { default as visibilityDirective } from './directives/visibility'
 
 // utilities
+export { getCommonSiteConfig } from '../vite/utils.js'
 export { default as call, createCall } from './utils/call.js'
 export { default as debounce } from './utils/debounce'
 export { default as fileToBase64 } from './utils/file-to-base64'
@@ -93,31 +92,17 @@ export * from './utils/useFileUpload'
 export * from './utils/theme'
 
 // old data-fetching: resources
-export {
-  createResource,
-  createDocumentResource,
-  createListResource,
-  getCachedResource,
-  getCachedDocumentResource,
-  getCachedListResource,
-  resourcesPlugin,
-} from './resources/index.js'
+export * from './resources/index.ts'
+
 export { request } from './utils/request.js'
 export { frappeRequest } from './utils/frappeRequest.js'
 export { default as initSocket } from './utils/socketio.js'
 export { setConfig, getConfig } from './utils/config'
 
 // new data-fetching composables
-export {
-  useCall,
-  useList,
-  useDoc,
-  useNewDoc,
-  useDoctype,
-  useFrappeFetch,
-} from './data-fetching'
+export * from './data-fetching'
 
 // plugin
+export { confirmDialog } from './utils/confirmDialog.js'
 export { default as pageMetaPlugin } from './utils/pageMeta.js'
 export { default as FrappeUI } from './utils/plugin.js'
-export { confirmDialog } from './utils/confirmDialog.js'

src/resources/index.js → src/resources/index.ts

@@ -1,7 +1,9 @@
-export { createResource, getCachedResource } from './resources'
 export {
   createDocumentResource,
   getCachedDocumentResource,
 } from './documentResource'
 export { createListResource, getCachedListResource } from './listResource'
+export * from './local'
 export { default as resourcesPlugin } from './plugin'
+export * from './realtime'
+export { createResource, getCachedResource } from './resources'

src/resources/local.js → src/resources/local.ts

@@ -1,22 +1,22 @@
-import { get, set, del } from 'idb-keyval'
+import { del, get, set } from 'idb-keyval'
 
-export function saveLocal(key, data) {
+export function saveLocal<T = any>(key: string, data: T): Promise<void | null> {
   if (typeof indexedDB === 'undefined') {
     return Promise.resolve(null)
   }
   if (!key) return Promise.resolve()
   return set(key, JSON.stringify(data))
 }
 
-export function deleteLocal(key) {
+export function deleteLocal(key: string): Promise<void | null> {
   if (typeof indexedDB === 'undefined') {
     return Promise.resolve(null)
   }
   if (!key) return Promise.resolve()
   return del(key)
 }
 
-export function getLocal(key) {
+export function getLocal<T = any>(key: string): Promise<T | null> {
   if (typeof indexedDB === 'undefined') {
     return Promise.resolve(null)
   }

src/resources/realtime.ts

@@ -0,0 +1,21 @@
+import { Socket } from 'socket.io-client'
+
+export function onDocUpdate(
+  socket: Socket,
+  doctype: string,
+  callback: (name: string) => void,
+): void {
+  subscribe(socket, doctype)
+  socket.on('list_update', (data) => {
+    if (data.doctype == doctype) {
+      callback(data.name)
+    }
+  })
+}
+
+let subscribed: Record<string, boolean> = {}
+function subscribe(socket: Socket, doctype: string): void {
+  if (subscribed[doctype]) return
+  socket.emit('doctype_subscribe', doctype)
+  subscribed[doctype] = true
+}

tsconfig.base.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["vitest/globals", "unplugin-icons/types/vue"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

tsconfig.json

@@ -1,23 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "jsx": "preserve",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true,
-    "noEmit": true,
-    "types": ["vitest/globals", "unplugin-icons/types/vue"],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
   "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",
@@ -29,8 +10,10 @@
     "frappe/**/*.tsx",
     "frappe/**/*.vue",
     "frappe/index.js",
+    "frappe/index.d.ts",
     "vitest.config.ts",
     "vitest.setup.ts"
   ],
+  "extends": "./tsconfig.base.json",
   "references": [{ "path": "./tsconfig.node.json" }]
 }