Gathering detailed insights and metrics for @chizukicn/unplugin-generate-component-name
Gathering detailed insights and metrics for @chizukicn/unplugin-generate-component-name
A plugin for auto generate vue component name.
0.2.1
21
TypeScript
33.12 kB
Installations
npm install @chizukicn/unplugin-generate-component-nameDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.17.1
NPM Version
9.6.7
Releases
Unable to fetch releases
Languages
2
TypeScript
Vue
TypeScript (94.78%)
Vue (5.22%)
Developer
CCherry07
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
21 Stars
56 Commits
1 Forks
2 Watchers
1 Branches
2 Contributors
Updated on Jan 13, 2025
Maintainers
1
Package Meta Information
Latest Version
0.2.1
Package Id
@chizukicn/unplugin-generate-component-name@0.2.1
Unpacked Size
33.12 kB
Size
6.92 kB
File Count
22
NPM Version
9.6.7
Node Version
18.17.1
Published on
May 29, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
unplugin-generate-component-name
A plugin for auto generate vue component name.
Features
- 💚 Supports Vue 3 out-of-the-box.
- ⚡️ Supports Vite, Webpack, Rspack, Vue CLI, Rollup, esbuild and more, powered by unplugin.
- 🪐 Folder names and Setup extend two patterns.
- 🦾 Full TypeScript support.
Install
1# Yarn 2$ yarn add unplugin-generate-component-name -D 3 4# Pnpm 5$ pnpm i unplugin-generate-component-name -D
Vite
1// vite.config.ts 2import GenerateComponentName from 'unplugin-generate-component-name/vite' 3 4export default defineConfig({ 5 plugins: [ 6 GenerateComponentName({ /* options */ }), 7 ], 8})
Rollup
1// rollup.config.js 2import GenerateComponentName from 'unplugin-generate-component-name/rollup' 3 4export default { 5 plugins: [ 6 GenerateComponentName({ /* options */ }), 7 ], 8}
Webpack
1// webpack.config.js 2module.exports = { 3 /* ... */ 4 plugins: [ 5 require('unplugin-generate-component-name/webpack').default({ /* options */ }), 6 ], 7}
Usage
Folder names
- You can use the name of the directory where the Index Component resides as the name of the component.
Generating Vue Component Names
In Vue, we can use the unplugin-generate-component-name plugin to automatically generate component names based on directory names. This plugin makes it easier and more intuitive to find and manage components in a large codebase. For instance, let's say we have a Vue component named Index.vue, and this component is in the Home directory. With the unplugin-generate-component-name plugin, this component will automatically be named Home.
1src/home/ 2├── index.vue // component name is Home 3├── about.vue 4└── users/ 5 ├── index.vue // component name is Users 6 └── info.vue
Setup Extend
Continuing with the Setup Extend demo is writing the name="Home" on the script tag.
1<template> 2 <!-- Your component marker --> 3</template> 4 5<script setup name="Home"> 6 // Your script logic 7</script> 8 9<style> 10 <!-- Your component style --> 11</style>
In the <script setup> tag, we set the name attribute to "Home". This explicitly names the component "Home", and the unplugin-generate-component-name plugin will use this name instead of "Index".
Please note that you should first install and correctly configure the plugin in your vite.config.js or webpack.config.js file.
Options
1type GenComponentName = (opt: { 2 filePath: string; 3 dirname: string; 4 originalName: string; 5 attrName: string | undefined; 6}) => string; 7interface PattenOptions { 8 include?: string | RegExp | (string | RegExp)[]; 9 exclude?: string | RegExp | (string | RegExp)[]; 10 genComponentName: GenComponentName; 11} 12interface Options extends Omit<PattenOptions, 'genComponentName'> { 13 enter?: PattenOptions[]; 14}
include
The include option is utilized to specifically state the files that should be processed for component name auto-generation. This safeguard can be specified using a string, a regular expression, or an array that can hold a collection of both.
exclude
On the flip side, the exclude option operates by dictating the files that should abstain from the auto-generation process. This restriction can also be imposed using a string, a regular expression, or a combination of both held in an array.
enter
In the Options interface, there's an enter option. enter is an array where each object acts as a specific set of rules for handling different file paths.
Each set of rules can include include and exclude options which specify which files need special handling. Their value can be a string, a RegExp, or an array consisting of strings and RegExps. You can also specify a genComponentName function for custom component name generation.
Here's an example:
1// vite.config.ts 2import GenerateComponentName from 'unplugin-generate-component-name/vite' 3 4export default defineConfig({ 5 plugins: [ 6 GenerateComponentName({ 7 include: ['**/*.vue'], 8 enter: [{ 9 include: ["**/*index.vue"], 10 genComponentName: ({ attrName, dirname }) => attrName ?? dirname 11 }, { 12 exclude: ['**/*.index.vue'], 13 include: ["src/components/**/*.vue"], 14 genComponentName: ({ dirname, originalName }) => `${dirname}-${originalName}` 15 }] 16 }), 17 ], 18});
In this example, the unplugin-generate-component-name plugin is configured to process all .vue files. There are two objects within the enter option for different file paths:
-
The first object covers all files that end with
"index.vue". ThegenComponentNamefunction returns the component name. If anameis already specified in thescript setup tag, it will be prioritized; otherwise, the directory name (dirname) will be used. -
The second object excludes all files ending with
"index.vue"and only includes.vuefiles within the"src/components/"directory. AgenComponentNamefunction is used to generate the component name in the format of${dirname}-${originalName}.For instance, for a file namedMyButton.vueinsrc/components/Button, it will beButton-MyButton.
No vulnerabilities found.
No security vulnerabilities found.