feat: 0.3.0

Author: chenxch

README.md

@@ -5,6 +5,12 @@
 Make the vue script setup syntax support the name attribute
 
 ## CHANGELOG
+
+[0.3.0]
+- Feature
+- Expanded the function of automatic name generation
+`For details, refer to Options and extendIgnore`
+
 [0.2.5]
 - Fix cjs exports
 
@@ -37,6 +43,48 @@ Make the vue script setup syntax support the name attribute
 npm i unplugin-vue-setup-extend-plus
 ```
 
+## Options
+
+```ts
+vueSetupExtend({
+  // Advanced mode for name, not necessary
+  mode?: 'none' | 'fileName' | 'relativeName' | Function
+  // none: Cancel the setting of name.
+  //       e.g.
+  //       <script setup name="CustomName"> 'CustomName' will be ignored
+  // fileName: Automatically read file names
+  //       e.g.
+  //       /user/demo/src/user/login.vue  => Login
+  // relativeName: Automatically read relative path names
+  //       e.g.
+  //       /user/demo/src/user/login.vue  => UserLogin
+  // Function: support a custom function
+  // (fileId: string) => {
+  //    let name = ''
+  //    ...
+  //    return name
+  // }
+  //  fileId e.g. /user/demo/src/user/login.vue
+})
+
+```
+
+## extendIgnore
+
+`Since the user may define the name attribute of the component in the script tag, this conflicts with the default name set by this plugin. So you need to add a switch attribute to the script setup.`
+
+```html
+<template>
+  <div>hello world {{ a }}</div>
+</template>
+
+// name="App" will be invalid
+<script lang="ts" setup name="App" inheritAttrs="false" extendIgnore>
+  const a = 1
+</script>
+```
+
+
 <details>
 <summary>Vite</summary><br>
 

src/core/transform.ts

@@ -1,14 +1,16 @@
-import { basename } from 'path'
+import { basename, parse as pathParse } from 'path'
 import { compileScript, parse } from '@vue/compiler-sfc'
 import MagicString from 'magic-string'
+import type { Options } from '../types'
 
-export function supportScriptName(code: string, id: string) {
+export function supportScriptName(code: string, id: string, options: Options) {
+  const { mode } = options
   let s: MagicString | undefined
   const str = () => s || (s = new MagicString(code))
   const { descriptor } = parse(code)
-  if (!descriptor.script && descriptor.scriptSetup) {
+  if (!descriptor.script && descriptor.scriptSetup && !descriptor.scriptSetup.attrs?.extendIgnore) {
     const result = compileScript(descriptor, { id })
-    const name = result.attrs.name
+    const name = typeof result.attrs.name === 'string' ? result.attrs.name : nameProcess(id, mode)
     const lang = result.attrs.lang
     const inheritAttrs = result.attrs.inheritAttrs
     if (name || inheritAttrs) {
@@ -39,3 +41,26 @@ export default defineComponent({
     return null
   }
 }
+
+function nameProcess(id: string, mode: Options['mode']) {
+  const commonId = id.replaceAll('\\', '/').split('?')[0]
+  if (typeof mode === 'string') {
+    const parseUrl = pathParse(commonId)
+    const fileName = parseUrl.name
+    const relativeName = parseUrl.dir.split('/').at(-1)
+    if (mode === 'fileName')
+      return camelize(fileName)
+
+    if (mode === 'relativeName')
+      return camelize(`${relativeName}-${fileName}`)
+  }
+
+  if (typeof mode === 'function')
+    return mode(commonId)
+
+  return ''
+}
+
+function camelize(str: string) {
+  return str.replace(/-(\w)/g, (_, c) => c ? c.toUpperCase() : '').replace(/(\w)/, (_, c) => c.toUpperCase())
+}

src/core/unplugin.ts

@@ -1,17 +1,22 @@
 import { createUnplugin } from 'unplugin'
+import type { Options } from '../types'
 import { supportScriptName } from './transform'
 
-export default createUnplugin(() => ({
-  name: 'unplugin-vue-setup-extend-plus',
-  enforce: 'pre',
+export default createUnplugin((options: Options = {}) => {
+  return {
+    name: 'unplugin-vue-setup-extend-plus',
+    enforce: 'pre',
 
-  transformInclude(id) {
-    return id.endsWith('.vue')
-  },
+    transformInclude(id) {
+      return id.endsWith('.vue')
+    },
 
-  async transform(code, id) {
-    if (/\.vue$/.test(id) || /\.vue\?.*type=script.*/.test(id))
-      return supportScriptName.call(this, code, id)
-    return null
-  },
-}))
+    async transform(code, id) {
+      if (options.mode && options.mode === 'none')
+        return null
+      if (/\.vue$/.test(id) || /\.vue\?.*type=script.*/.test(id))
+        return supportScriptName.call(this, code, id, options)
+      return null
+    },
+  }
+})

src/types.ts

@@ -1,8 +1,4 @@
+export type ModeType = 'none' | 'fileName' | 'relativeName'
 export interface Options {
-  /**
-   * Turn on name extension
-   * @default true
-   */
-  // name?: boolean
-  // inheritAttrs?: boolean
+  mode?: ModeType | Function
 }