feat: directory namespaces support (#8)

Co-authored-by: Anthony Fu <[email protected]>

Author: Subwaytime

README.md

@@ -16,7 +16,6 @@
   </a>
 </p>
 
-
 <br>
 
 ## Usage
@@ -36,11 +35,11 @@ import ViteComponents from 'vite-plugin-components'
 export default {
   plugins: [
     ViteComponents()
-  ]
-}
+  ],
+};
 ```
 
-That's all. 
+That's all.
 
 Use components in templates as you would usually do but NO `import` and `component registration` required anymore! It will import components on demand, code splitting is also possible.
 
@@ -89,11 +88,18 @@ The following show the default values of the configuration
 ViteComponents({
   // relative paths to the directory to search for components.
   dirs: ['src/components'],
+
   // valid file extensions for components.
   extensions: ['vue'],
   // search for subdirectories
   deep: true,
 
+  // Allow subdirectories as namespace prefix for components.
+  directoryAsNamespace: false,
+  // Subdirectory paths for ignoring namespace prefixes
+  // works when `directoryAsNamespace: true`
+  globalNamespaces: [],
+  
   // vite config
   // currently, vite does not provide an API for plugins to get the config https://github.com/vitejs/vite/issues/738
   // you will need to pass `alias` and `root` if you set them in vite config

src/context.ts

@@ -26,6 +26,7 @@ export class Context {
       throw new Error('[vite-plugin-components] extensions are required to search for components')
 
     const extsGlob = exts.length === 1 ? exts[0] : `{${exts.join(',')}}`
+
     this.globs = toArray(dirs).map(i =>
       deep
         ? `${i}/**/*.${extsGlob}`
@@ -73,7 +74,7 @@ export class Context {
     Array
       .from(this._componentPaths)
       .forEach((path) => {
-        const name = normalize(getNameFromFilePath(path))
+        const name = normalize(getNameFromFilePath(path, this.options))
         if (this._componentNameMap[name]) {
           console.warn(`[vite-plugin-components] component "${name}"(${path}) has naming conflicts with other components, ignored.`)
           return

src/index.ts

@@ -10,6 +10,10 @@ const defaultOptions: Options = {
   dirs: 'src/components',
   extensions: 'vue',
   deep: true,
+
+  directoryAsNamespace: false,
+  globalNamespaces: [],
+
   alias: {},
   root: process.cwd(),
 }

src/types.ts

@@ -7,21 +7,38 @@ export interface Options {
    * @default 'src/components'
    */
   dirs: string | string[]
+
   /**
    * Valid file extensions for components.
    * @default ['vue']
    */
   extensions: string | string[]
+
   /**
    * Search for subdirectories
    * @default true
    */
   deep: boolean
+
+  /**
+   * Allow subdirectories as namespace prefix for components
+   * @default false
+   */
+  directoryAsNamespace: boolean
+
+  /**
+   * Subdirectory paths for ignoring namespace prefixes
+   * works when `directoryAsNamespace: true`
+   * @default "[]"
+   */
+  globalNamespaces: string[]
+
   /**
    * Path alias, same as what you passed to vite root config
    * @default {}
    */
   alias: Record<string, string>
+
   /**
    * Root path of Vite project.
    * @default 'process.cwd()'

src/utils.ts

@@ -1,6 +1,11 @@
 import path from 'path'
-// @ts-ignore
 import minimatch from 'minimatch'
+import { Options } from './types'
+
+export interface ResolveComponent {
+  filename: string
+  namespace?: string
+}
 
 export function normalize(str: string) {
   return capitalize(camelize(str))
@@ -20,6 +25,14 @@ export function toArray<T>(arr: T | T[]): T[] {
   return [arr]
 }
 
+export function isEmpty(value: any) {
+  if (!value || value === null || value === undefined || (Array.isArray(value) && Object.keys(value).length <= 0))
+    return true
+
+  else
+    return false
+}
+
 export function matchGlobs(filepath: string, globs: string[]) {
   for (const glob of globs) {
     if (minimatch(filepath, glob))
@@ -28,15 +41,48 @@ export function matchGlobs(filepath: string, globs: string[]) {
   return false
 }
 
-export function getNameFromFilePath(filePath: string): string {
+export function getNameFromFilePath(filePath: string, options: Options): string {
+  const { dirs, directoryAsNamespace, globalNamespaces } = options
+
   const parsedFilePath = path.parse(filePath)
-  if (parsedFilePath.name === 'index') {
-    const filePathSegments = filePath.split(path.sep)
-    const parentDirName = filePathSegments[filePathSegments.length - 2]
-    if (parentDirName)
-      return parentDirName
+
+  let strippedPath = ''
+
+  // remove include directories from filepath
+  for (const dir of toArray(dirs)) {
+    if (parsedFilePath.dir.startsWith(dir)) {
+      strippedPath = parsedFilePath.dir.slice(dir.length)
+      break
+    }
   }
-  return parsedFilePath.name
+
+  let folders = strippedPath.slice(1).split('/').filter(Boolean)
+  let filename = parsedFilePath.name
+
+  // set parent directory as filename if it is index
+  if (filename === 'index' && !directoryAsNamespace) {
+    filename = `${folders.slice(-1)[0]}`
+    return filename
+  }
+
+  if (directoryAsNamespace) {
+    // remove namesspaces from folder names
+    if (globalNamespaces.some((name: string) => folders.includes(name)))
+      folders = folders.filter(f => !globalNamespaces.includes(f))
+
+    if (filename.toLowerCase() === 'index')
+      filename = ''
+
+    if (!isEmpty(folders)) {
+      // add folders to filename
+      filename = [...folders, filename].filter(Boolean).join('-')
+    }
+
+    console.log('!!!', filename)
+    return filename
+  }
+
+  return filename
 }
 
 export function resolveAlias(filepath: string, alias: Record<string, string>) {

test/fixture/src/App.vue

@@ -1,8 +1,22 @@
 <template>
-  <ComponentA msg="a" />
-  <component-b msg="b" />
-  <ComponentC msg="c" />
-  <recursive :data="tree" />
+  <div class="block">
+    <h1>Basic (4)</h1>
+    <ComponentA msg="a" />
+    <component-b msg="b" />
+    <ComponentC msg="c" />
+    <h3>Recursive Components</h3>
+    <recursive :data="tree" />
+  </div>
+
+  <div class="block">
+    <h1>Namespaced (4)</h1>
+    <!-- Index -->
+    <Book />
+    <UiButton />
+    <UiNestedCheckbox />
+    <!-- Global -->
+    <Avatar />
+  </div>
 </template>
 
 <script setup lang='ts'>
@@ -16,3 +30,12 @@ export const tree = ref({
   ],
 })
 </script>
+
+<style scoped>
+.block {
+  padding: 0px 20px 10px 20px;
+  margin: 20px 20px;
+  border: 1px solid #888;
+  border-radius: 5px;
+}
+</style>

test/fixture/src/components/Recursive.vue

@@ -2,7 +2,7 @@
   <div>
     <div>{{ data.label }}</div>
     <div class="child">
-      <recursive v-for="item in data.children" :data="item" />
+      <recursive v-for="(item, idx) in data.children" :key="idx" :data="item" />
     </div>
   </div>
 </template>

test/fixture/src/components/book/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <h3>Index Component: <code>book/index.vue</code></h3>
+</template>
+
+<script>
+export default {
+  name: 'Book',
+}
+</script>

test/fixture/src/components/global/avatar.vue

@@ -0,0 +1,9 @@
+<template>
+  <h3>Global Namespaced Component: <code>global/avatar.vue</code></h3>
+</template>
+
+<script>
+export default {
+  name: 'Avatar',
+}
+</script>

test/fixture/src/components/ui/button.vue

@@ -0,0 +1,9 @@
+<template>
+  <h3>Namespaced Component: <code>iu/button.vue</code></h3>
+</template>
+
+<script>
+export default {
+  name: 'UiButton',
+}
+</script>