https://github.com/stolinski/auto-import-lib-bug

https://github.com/stolinski/auto-import-lib-bug

Last synced: 27 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/stolinski/auto-import-lib-bug
• Owner: stolinski
• License: mit
• Created: 2022-04-20T18:25:09.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-04-20T18:50:43.000Z (over 2 years ago)
• Last Synced: 2024-10-28T14:27:21.788Z (2 months ago)
• Language: JavaScript
• Size: 28.3 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-autoimport

Automatically detect and import components/modules for SvelteKit projects.

### Before



### After



## Installation

```bash

npm i -D vite-plugin-autoimport

```

## Basic configuration

```js

// svelte.config.js

import autoImport from 'vite-plugin-autoimport';

export default {

  kit: {

    vite: {

      plugins: [

        autoImport({

          components: ['./src/components'],

        })

      ]

    }

  }

}

```

## Name strategy

By default the component names will be **namespaced** with its directory names and

normalized to **upper camel case**. For example:

```html

```

## Prefix

All components can be prefixed with a given name.

```js

autoImport({

  components: [{ name: './src/components', prefix: 'shared' } ],

})

```

So that

```html

```

## Flat

If the `flat` option is set to be true, no namespace will be added.

```js

autoImport({

  components: [{ name: './src/components', flat: true } ],

})

```

So that

```html

```

## Full options

```js

// svelte.config.js

import autoImport from 'vite-plugin-autoimport';

export default {

  kit: {

    vite: {

      plugins: [

        autoImport({

          // where to search for the components

          components: [

            './src/components',

            './src/routes/_fragments',

            { name: './src/lib', flat: true, prefix: 'lib' },

          ],

          // some frequently used modules

          module: {

            svelte: ['onMount', 'createEventDispatcher']

          },

          // manually import

          mapping: {

            API:  `import API from '~/src/api'`,

            Icon: `import * as Icon from '$components/icon'`,

          },

          // autoimport only for .svelte files

          // and only search for .svelte files inside components

          include: ['**/*.svelte'],

          // node_modules is ignored by default

          exclude: ['**/node_modules/**'],

        })

      ]

    }

  }

}

```