auto-import-vue.plugin.ts

import { App, defineAsyncComponent } from 'vue'

// Function to convert a string to kebab case
const toKebabCase = (str) =>
  str
    .replace(/([a-z])([A-Z])/g, '$1-$2')
    .replace(/\s+/g, '-')
    .toLowerCase()

// Dynamically register components by scanning the components directory
const importAllComponents = () => {
  const components = {}
  const componentContext = import.meta.globEager('@/components/**/*.vue')

  for (const path in componentContext) {
    console.log(path);
    const componentConfig = componentContext[path]
    const componentName = toKebabCase(path.substring(path.indexOf('components/') + 'components/'.length).replace(/\.\w+$/, '').replace(/\//g, '-'))
    components[componentName] = defineAsyncComponent(() => import('@/' + path.slice(path.indexOf('components/'))))
    console.log(componentName, components);
  }

  return components
}

// Get an object of modules for components
const registerComponents = {
  install(app: App) {
    for (const [componentName, componentConfig] of Object.entries(importAllComponents())) {
      app.component(componentName, componentConfig)
    }
  },
}

export default registerComponents