# vite-plugin-autoimport

> Automatically detect and import components or modules

Latest version **1.6.6** (published 2022-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-autoimport
pnpm add vite-plugin-autoimport
yarn add vite-plugin-autoimport
bun add vite-plugin-autoimport
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.6.6 |
| Published | 2022-04-25 |
| First published | 2021-04-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 70 KB |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 240 |
| Author | yuanchuan |
| Maintainers | yuanchuan |
| Keywords | vite, sveltekit |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-autoimport
- Repository: https://github.com/yuanchuan/sveltekit-autoimport
- Homepage: https://github.com/yuanchuan/sveltekit-autoimport#readme
- Issues: https://github.com/yuanchuan/sveltekit-autoimport/issues
- npm.io page: https://npm.io/package/vite-plugin-autoimport

## Dependencies (4)

- [svelte](https://npm.io/package/svelte.md) ^3.47.0
- [magic-string](https://npm.io/package/magic-string.md) ^0.26.1
- [estree-walker](https://npm.io/package/estree-walker.md) ^2.0.2
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^4.1.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.6.6 (latest) — 2022-04-25
- 1.6.5 — 2022-04-25
- 1.6.4 — 2022-04-22
- 1.6.3 — 2022-04-21
- 1.6.2 — 2022-04-21
- 1.6.1 — 2022-04-20
- 1.6.0 — 2022-04-20
- 1.5.0 — 2022-04-12
- 1.4.3 — 2021-11-20
- 1.4.2 — 2021-08-20
- 1.4.1 — 2021-08-20
- 1.4.0 — 2021-08-04
- 1.3.7 — 2021-08-04
- 1.3.6 — 2021-07-27
- 1.3.5 — 2021-07-22
- … 10 more at https://npm.io/package/vite-plugin-autoimport/versions

## README

# vite-plugin-autoimport

---------------------------

### Warning: This package has been renamed to [sveltekit-autoimport](https://www.npmjs.com/package/sveltekit-autoimport).

--------------------------

![Build Status](https://github.com/yuanchuan/sveltekit-autoimport/actions/workflows/ci.yml/badge.svg)

Automatically detect and import components/modules for <a href="https://kit.svelte.dev/">SvelteKit</a> projects.

### Before

<img src="screenshots/before.png" alt="Code without sveltekit-autoimport" />

### After

<img src="screenshots/after.png" alt="Code with sveltekit-autoimport"/>


## Installation

```bash
npm i -D sveltekit-autoimport
```

## Basic configuration

Inside `svelte.config.js`.

```js
/* As a vite plugin (recommended) */

import autoImport from 'sveltekit-autoimport';

export default {
  kit: {
    vite: {
      plugins: [
        autoImport({
          components: ['./src/components'],
        })
      ]
    }
  }
}
```

```js
/* Or as a svelte preprocessor for some special modules */

import autoImport from 'sveltekit-autoimport';
import { mdsvex } from 'mdsvex';

export default {
  kit: {},
  preprocess: [
    autoImport({
      components: ['./src/components'],
      include: ['**/*.(svelte|md)'],
    }),
    /* order matters */
    mdsvex()
  ]
}
```

## How it works?

This tool will **NOT** add global components blindly into your files.
Instead, it searches for **undefined** components or modules,
and then try to fix them by auto importing.

#### You need to guide it where to import the components from:

```js
autoImport({
  components: ['./src/components']
})
```

#### Or tell it how to import for some specific variables:

```js
autoImport({
  mapping: {
    API: `import API from '~/api/api.js'`,
    MY_FUNCTION: `import MY_FUNCTION from 'lib/my-function'`
  }
})
```

#### Or explictly list the components being used from a third party module:

```js
autoImport({
  module: {
    'carbon-components-svelte': [
      'Button',
      'Accordion',
      'AccordionItem',
      'Grid as CarbonGrid', /* rename */
    ]
  }
})
```

## Name strategy

By default the component names will be **namespaced** with their directory names and
then normalized to **upper camel case** format. For example:

```html
<MyComponent />
<!-- my-component.svelte -->

<MyAnotherComponent />
<!-- my_another_component.svelte -->

<FormInput />
<!-- form/input.svelte -->

<Modal />
<!-- modal/index.svelte -->
```

## Prefix

Components can be prefixed with a given name.

```js
autoImport({
  components: [{ name: './src/components', prefix: 'shared' } ],
})
```

So that

```html
<SharedComponent />
<!-- component.svelte -->

<SharedFormInput />
<!-- form/input.svelte -->
```

## 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
<Input />
<!-- form/input.svelte -->

<Popup />
<!-- modal/inline/popup.svelte -->

```

## Full options

```js
// svelte.config.js
import autoImport from 'sveltekit-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/**'],

        })
      ]
    }
  }
}
```

---
_Source: https://npm.io/package/vite-plugin-autoimport · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._