【TypeScript】importの記述を不要にするunplugin-auto-import

// import { useState } from 'react' ← この記述が不要に 🙌
export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}

yarn create vite
yarn create v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-vite
      - cva
✔ Project name: … auto-import-sample
✔ Select a framework: › react
✔ Select a variant: › react-ts

Scaffolding project in /Users/matsumoto.kazuya/lab/auto-import-sample...

Done. Now run:

  cd auto-import-sample
  yarn
  yarn dev

✨  Done in 9.86s.

cd auto-import-sample
yarn
yarn dev

import { useState } from 'react' // この行を書かなくていいようにしていく

AutoImport({
  include: [/\.[tj]sx?$/], // .ts, .tsx, .js, .jsx
  imports: ['react'],
  dts: './src/auto-imports.d.ts'
})

[/\.ts$/, /\.tsx$/, /\.js$/, /\.jsx$/]

imports: [
  // presets
  'react',
  // カスタム
  {
    '@vueuse/core': [
      // named importsを使いたい場合
      'useMouse', // import { useMouse } from '@vueuse/core',
      // aliasを使いたい場合
      ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
    ],
    'axios': [
      // defaultを使いたい場合
      ['default', 'axios'], // import { default as axios } from 'axios',
    ],
    '[package-name]': [
      '[import-names]',
      // alias
      ['[from]', '[alias]'],
    ],
  },
]

dts: './src/auto-imports.d.ts'

export default createUnplugin<Options>((options) => { // オプションを引数で受けとる
  ...
  return {
    ...
    async transform(code, id) {
　　　　// 1. ソースコードを変換
      const res = await transform(code, id, resolved)
      if (res)
        // 2. .d.tsファイルを生成
        generateConfigFiles()

      return res
    }
		...
  }
})

export async function transform(
  code: string,
  id: string,
  {
    imports,
    sourceMap,
    resolvers,
    resolvedImports = {},
    ignore = [],
  }: TransformOptions,
) {
  // modulesのRecord
  const modules: Record<string, ImportInfo[]> = {}

  for (const name of Array.from(identifiers)) {
　　 // importsの情報からmodulesのレコードを生成
    let info = getOwn(resolvedImports, name) || getOwn(imports, name)
    ...
    addToModules({
      from: info.from,
      name: info.name,
      as: name,
    })
		...
  }

  // modulesからimport文を作成
  const importStatements = Object.entries(modules)
    ....

  // コードの頭にimprot文を差し込む
  // ex) import { useState } from 'react'
  const s = new MagicString(code)
  s.prependLeft(0, importStatements)

  return {
    code: s.toString(),
    ...
  }
}

import { useState } from 'react';import "./App.css"; // ←この行が自動で追加される
import logo from "./logo.svg";
import { jsx as _jsx } from "react/jsx-runtime";
....

import type { ImportsFlatMap } from '../types'

export function generateDeclaration(imports: ImportsFlatMap, resolvedImports: ImportsFlatMap = {}) {
  const body = [
    ...Object.entries(imports),
    ...Object.entries(resolvedImports),
  ]
    .sort((a, b) => a[0].localeCompare(b[0]))
    .map(([name, info]) => `  const ${name}: typeof import('${info.from}')${info.name !== '*' ? `['${info.name || name}']` : ''}`)
    .join('\n')
  return `// Generated by 'unplugin-auto-import'\n// We suggest you to commit this file into source control\ndeclare global {\n${body}\n}\nexport {}\n`
}

// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
  ...
  const useState: typeof import('react')['useState']
  ...
}
export {}