unimport

unimport

Unified utils for auto importing APIs in modules

Features

• Auto import registed APIs for Vite, Webpack or esbuild powered by unplugin
• TypeScript declartion file generation
• Auto import for custom APIs defined under specific directories
• Auto import for Vue template

Install

# npm
npm install unimport

# yarn
yarn install unimport

# pnpm
pnpm install unimport

Usage

Plugin Usage

Powered by unplugin, unimport provides a plugin interface for bundlers.

Vite / Rollup

// vite.config.js / rollup.config.js
import Unimport from 'unimport/unplugin'

export default {
  plugins: [
    Unimport.vite({ /* plugin options */ })
  ]
}

Webpack

// webpack.config.js
import Unimport from 'unimport/unplugin'

module.exports = {
  plugins: [
    Unimport.webpack({ /* plugin options */ })
  ]
}

Programmatic Usage

// ESM
import { createUnimport } from 'unimport'

// CommonJS
const { createUnimport } = require('unimport')

const { injectImports } = createUnimport({
  imports: [{ name: 'fooBar', from: 'test-id' }]
})

// { code: "import { fooBar } from 'test-id';console.log(fooBar())" }
console.log(injectImports('console.log(fooBar())'))

Configurations

Type Declarations

Unimport.vite({
  dts: true // or a path to generateed file
})

Directory Auto Import

Unimport.vite({
  dirs: [
    './composables'
  ]
})

Exported APIs for modules under ./composables will be auto imported.

Vue Template Auto Import

In Vue's template, usage of APIs are in different context than plain modules. Thus some custom transformation are required. To enable it, set addons.vueTemplate to true:

Unimport.vite({
  addons: {
    vueTemplate: true
  }
})

Caveats

When auto-import a ref, inline operations won't be auto unwrapped.

export const counter = ref(0)

<template>
  <!-- this is ok -->
  <div>{{ counter }}</div>

  <!-- counter here is a ref, this won't work, volar will throw -->
  <div>{{ counter + 1 }}</div>

  <!-- use this instead -->
  <div>{{ counter.value + 1 }}</div>
</template>

We recommend using Volar for type checking, which will help you to identify the misusage.

💻 Development

• Clone this repository
• Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

License

Made with 💛

Published under MIT License.

Changelog

0.2.1 (2022-05-10)

Bug Fixes

• vue-template: webpack compatibility (ffc71dc)

Features

• auto import for Vue template (#15) (136fb32)