npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@chizukicn/unplugin-generate-component-name

v0.2.1

Published

A plugin for auto generate vue component name.

Downloads

3

Readme

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

# Yarn
$ yarn add unplugin-generate-component-name -D

# Pnpm
$ pnpm i unplugin-generate-component-name -D
// vite.config.ts
import GenerateComponentName from 'unplugin-generate-component-name/vite'

export default defineConfig({
  plugins: [
    GenerateComponentName({ /* options */ }),
  ],
})

// rollup.config.js
import GenerateComponentName from 'unplugin-generate-component-name/rollup'

export default {
  plugins: [
    GenerateComponentName({ /* options */ }),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-generate-component-name/webpack').default({ /* options */ }),
  ],
}

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.

src/home/
├── index.vue // component name is Home
├── about.vue
└── users/
    ├── index.vue // component name is Users
    └── info.vue

Setup Extend

Continuing with the Setup Extend demo is writing the name="Home" on the script tag.

<template>
  <!-- Your component marker -->
</template>

<script setup name="Home">
  // Your script logic
</script>

<style>
  <!-- Your component style -->
</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

type GenComponentName = (opt: {
    filePath: string;
    dirname: string;
    originalName: string;
    attrName: string | undefined;
}) => string;
interface PattenOptions {
    include?: string | RegExp | (string | RegExp)[];
    exclude?: string | RegExp | (string | RegExp)[];
    genComponentName: GenComponentName;
}
interface Options extends Omit<PattenOptions, 'genComponentName'> {
    enter?: PattenOptions[];
}

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:

// vite.config.ts
import GenerateComponentName from 'unplugin-generate-component-name/vite'

export default defineConfig({
  plugins: [
     GenerateComponentName({
      include: ['**/*.vue'],
      enter: [{
        include: ["**/*index.vue"],
        genComponentName: ({ attrName, dirname }) => attrName ?? dirname
      }, {
        exclude: ['**/*.index.vue'],
        include: ["src/components/**/*.vue"],
        genComponentName: ({ dirname, originalName }) => `${dirname}-${originalName}`
      }]
    }),
  ],
});

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". The genComponentName function returns the component name. If a name is already specified in the script 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 .vue files within the "src/components/" directory. A genComponentName function is used to generate the component name in the format of ${dirname}-${originalName}.For instance, for a file namedMyButton.vue in src/components/Button, it will beButton-MyButton.