feat(app): #58 Auto Imports

This pull request is intended to close issue #58 by adding the auto imports feature.

Closes: #58

example/package.json

@@ -13,7 +13,7 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@selemondev/windi-ui": "workspace:^",
+    "@windi-ui/vue": "workspace:^",
     "@tsconfig/node18": "^18.2.0",
     "@types/node": "^20.4.5",
     "@vitejs/plugin-vue": "^4.2.3",

package.json

@@ -20,7 +20,7 @@
     "test": "vitest",
     "test:update": "vitest -u",
     "test:coverage": "vitest --coverage",
-    "windi-ui": "pnpm --filter @selemondev/windi-ui",
+    "windi-ui": "pnpm --filter @windi-ui/vue",
     "postinstall": "npx simple-git-hooks",
     "major": "taze minor -wIr"
   },

packages/windi/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@selemondev/windi-ui",
+  "name": "@windi-ui/vue",
   "version": "0.0.6",
   "packageManager": "pnpm@8.6.10",
   "description": "Build Accessible Apps 10x faster",
@@ -22,35 +22,39 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.umd.js",
-      "import": "./dist/index.es.js"
+      "types": "./dist/src/index.d.ts",
+      "require": "./dist/windi-ui.cjs",
+      "import": "./dist/windi-ui.mjs"
     },
     "./dist/theme/windiTheme": "./dist/theme/windiTheme"
   },
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/windi-ui.cjs",
+  "module": "./dist/windi-ui.mjs",
+  "types": "./dist/src/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
     "build": "vite build && pnpm run build:theme",
     "build:watch": "vite build --watch",
-    "build:theme": "ts-node ./scripts/theme.ts",
+    "build:theme": "esno ./scripts/theme.ts",
     "dev": "vite",
     "play": "pnpm --filter playground dev",
     "prepublishOnly": "pnpm run build",
     "release": "pnpm build && bumpp --commit --push --tag && pnpm publish",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
-  "dependencies": {
+  "peerDependencies": {
     "@headlessui/vue": "^1.7.15",
+    "vue": "^3.3.4"
+  },
+  "dependencies": {
     "@heroicons/vue": "^2.0.18",
-    "@selemondev/windi-ui": "workspace:^",
+    "@windi-ui/vue": "workspace:^",
     "classnames": "^2.3.2",
+    "esno": "^0.17.0",
     "tailwind-merge": "^1.14.0",
     "vue-router": "^4.2.4"
   },

packages/windi/src/componentResolver.ts

@@ -0,0 +1,11 @@
+import type { ComponentResolver } from 'unplugin-vue-components'
+
+export function WindiUIComponentResolver(): ComponentResolver {
+  return {
+    type: 'component',
+    resolve: (name: string) => {
+      if (name.match(/^W[A-Z]/))
+        return { name, from: '@windi-ui/vue' }
+    },
+  }
+}

packages/windi/src/components/Button/WButton.vue

@@ -152,7 +152,6 @@ export default defineComponent({
 </script>
 
 <template>
-  {{ variant }}
   <component :is="props.to ? 'a' : 'button'" :disabled="disabled" :class="buttonWrapperClass" v-bind="bind">
     <slot name="leading" :disabled="disabled" :loading="props.loading">
       <Icon v-if="isLeading && leadingIcon" :icon="leadingIcon" :style="iconSizeStyle" />

packages/windi/src/components/index.ts

@@ -0,0 +1,17 @@
+export { default as WAvatar } from './Avatar/WAvatar.vue'
+export { default as WAvatarGroup } from './Avatar/WAvatarGroup.vue'
+export { default as WAccordion } from './Accordion/WAccordion.vue'
+export { default as WAccordionItem } from './Accordion/WAccordionItem.vue'
+export { default as WAlert } from './Alert/WAlert.vue'
+export { default as WAlertDescription } from './Alert/WAlertDescription.vue'
+export { default as WBadge } from './Badge/WBadge.vue'
+export { default as WButton } from './Button/WButton.vue'
+export { default as WButtonGroup } from './Button/WButtonGroup.vue'
+export { default as WCheckbox } from './Checkbox/WCheckbox.vue'
+export { default as WDivider } from './Divider/WDivider.vue'
+export { default as WIcon } from './Icon/WIcon.vue'
+export { default as WInput } from './Input/WInput.vue'
+export { default as WKbd } from './Kbd/WKbd.vue'
+export { default as WModal } from './Modal/WModal.vue'
+export { default as WSwitch } from './Switch/WSwitch.vue'
+export { default as WTag } from './Tag/WTag.vue'

packages/windi/src/index.ts

@@ -1,67 +1,7 @@
-import type { App, defineComponent } from 'vue'
-import './assets/css/tailwind.css'
-import Alert from './components/Alert/WAlert.vue'
-import AlertDescription from './components/Alert/WAlertDescription.vue'
-import Avatar from './components/Avatar/WAvatar.vue'
-import Icon from './components/Icon/WIcon.vue'
-import type { WindiUIConfiguration } from './Types/variant'
-import AvatarGroup from './components/Avatar/WAvatarGroup.vue'
-import Badge from './components/Badge/WBadge.vue'
-import Button from './components/Button/WButton.vue'
-import ButtonGroup from './components/Button/WButtonGroup.vue'
-import Accordion from './components/Accordion/WAccordion.vue'
-import AccordionItem from './components/Accordion/WAccordionItem.vue'
-import Kbd from './components/Kbd/WKbd.vue'
-import Input from './components/Input/WInput.vue'
-import Checkbox from './components/Checkbox/WCheckbox.vue'
-import Divider from './components/Divider/WDivider.vue'
-import Switch from './components/Switch/WSwitch.vue'
-import Tag from './components/Tag/WTag.vue'
-import windiTheme from './theme/windiTheme'
-import Modal from './components/Modal/WModal.vue'
+export * from './components'
 
-const components: Record<string, ReturnType<typeof defineComponent>> = {
-  Accordion,
-  AccordionItem,
-  Alert,
-  AlertDescription,
-  Icon,
-  Avatar,
-  AvatarGroup,
-  Badge,
-  Button,
-  ButtonGroup,
-  Kbd,
-  Input,
-  Checkbox,
-  Divider,
-  Switch,
-  Tag,
-  Modal,
-}
+export { default as createWindiUI } from './plugin'
 
-function install(app: App, configuration: WindiUIConfiguration) {
-  for (const component in components)
-    app.component(components[component].name, components[component])
-  app.provide('config', configuration)
-}
+export { WindiUIComponentResolver } from './componentResolver'
 
-export default { install, windiTheme }
-
-export { default as Alert } from './components/Alert'
-export { default as AlertDescription } from './components/Alert'
-export { default as Icon } from './components/Icon'
-export { default as Avatar } from './components/Avatar'
-export { default as AvatarGroup } from './components/Avatar'
-export { default as Badge } from './components/Badge'
-export { default as Button } from './components/Button'
-export { default as ButtonGroup } from './components/Button'
-export { default as Accordion } from './components/Accordion'
-export { default as AccordionItem } from './components/Accordion'
-export { default as Kbd } from './components/Kbd'
-export { default as Input } from './components/Input'
-export { default as Checkbox } from './components/Checkbox'
-export { default as Divider } from './components/Divider'
-export { default as Switch } from './components/Switch'
-export { default as Tag } from './components/Tag'
-export { default as Modal } from './components/Modal'
+export { default } from './install'

packages/windi/src/install.ts

@@ -0,0 +1,8 @@
+import * as components from './components'
+import create from './plugin'
+
+export default create({
+  components: Object.keys(components).map(
+    key => components[key as keyof object],
+  ),
+})

packages/windi/src/plugin.ts

@@ -0,0 +1,41 @@
+import type { App } from 'vue'
+import './assets/css/tailwind.css'
+import type { WindiUIConfiguration } from './Types/variant'
+
+const defaultOptions: WindiUIOptions = {
+  prefix: 'W',
+  registerComponents: true,
+}
+
+export interface WindiUIOptions {
+  prefix?: string
+  components?: any
+  theme?: any
+  registerComponents?: boolean
+}
+
+function create(createOptions: WindiUIOptions = {}) {
+  const install = (app: App, installOptions: WindiUIConfiguration) => {
+    const options = {
+      ...defaultOptions,
+      ...createOptions,
+      ...installOptions,
+    }
+    if (options.registerComponents) {
+      if (options.components) {
+        options.components.forEach((component: any) => {
+          const name = component.name.startsWith('W') ? component.name.slice(1) : component.name
+
+          app.component(`${options.prefix}${name}`, component)
+        })
+      }
+    }
+    app.provide('config', installOptions)
+  }
+
+  return {
+    install,
+  }
+}
+
+export default create

packages/windi/tsconfig.json

@@ -1,10 +1,4 @@
 {
-  "ts-node": {
-    // these options are overrides used only by ts-node
-    "compilerOptions": {
-      "module": "commonjs"
-    }
-  },
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "target": "esnext",

packages/windi/vite.config.ts

@@ -1,15 +1,15 @@
-import path, { resolve } from 'node:path'
+import { resolve } from 'node:path'
 import Vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 
 // https://github.com/qmhc/vite-plugin-dts
 import dtsPlugin from 'vite-plugin-dts'
 
-// import * as pkg from './package.json'
+import * as pkg from './package.json'
 
-// const externals = [
-//   ...Object.keys(pkg.peerDependencies || {}),
-// ]
+const externals = [
+  ...Object.keys(pkg.peerDependencies || {}),
+]
 export default defineConfig({
   plugins: [
     Vue(),
@@ -24,13 +24,13 @@ export default defineConfig({
   },
   build: {
     lib: {
-      entry: path.resolve(__dirname, 'src/index.ts'),
-      formats: ['es', 'umd', 'cjs'],
+      entry: resolve(__dirname, './src/index.ts'),
+      formats: ['es', 'cjs'],
       name: 'windi-ui',
-      fileName: format => `index.${format}.js`,
+      fileName: format => format === 'cjs' ? 'windi-ui.cjs' : 'windi-ui.mjs',
     },
     rollupOptions: {
-      external: ['vue'],
+      external: externals,
       output: {
         format: 'esm',
         globals: {

playground/package.json

@@ -24,7 +24,7 @@
   },
   "homepage": "https://github.com/selemondev/windi-ui#readme",
   "dependencies": {
-    "@selemondev/windi-ui": "workspace:^",
+    "@windi-ui/vue": "workspace:^",
     "@vue/repl": "^1.4.1",
     "autoprefixer": "^10.4.14",
     "compare-versions": "^4.1.4",

playground/src/main.ts

@@ -2,12 +2,9 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import '@vue/repl/dist/style.css'
 import "./assets/tailwind.css"
-import install from "@selemondev/windi-ui"
-import config from "@selemondev/windi-ui/dist/theme/windiTheme"
 import '@unocss/reset/tailwind.css'
 // import 'onu-ui/dist/style.css'
 import 'uno.css'
-import "../node_modules/@selemondev/windi-ui/dist/style.css"
 
 // @ts-expect-error Custom window property
 window.VUE_DEVTOOLS_CONFIG = {

playground/src/template/lib-install.js

@@ -1,6 +1,6 @@
 import { getCurrentInstance } from 'vue'
 // import UnoUI from 'onu-ui'
-import install from '@selemondev/windi-ui'
+// import install from '@selemondev/windi-ui'
 
 let installed = false
 
@@ -9,7 +9,7 @@ export function libInstall() {
     return
   const instance = getCurrentInstance()
 
-  instance.appContext.app.use(install)
+  // instance.appContext.app.use(install)
   installed = true
 }
 

playground/src/vue-ui-next-dev-proxy.ts

@@ -1,3 +0,0 @@
-import install from '@selemondev/windi-ui'
-export * from '@selemondev/windi-ui'
-export default install

playground/tailwind.config.cjs

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", './node_modules/@selemondev/windi-ui/dist/theme/*.{js,ts,json}'],
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", './node_modules/@windi-ui/vue/dist/theme/*.{js,ts,json}'],
   theme: {
     extend: {},
   },