feat: add local package preset support (#451)

Author: userquin

README.md

@@ -312,6 +312,22 @@ Refer to the [type definitions](./src/types.ts) for more options.
 
 See [src/presets](./src/presets).
 
+## Package Presets
+
+We only provide presets for the most popular packages, to use any package not included here you can install it as dev dependency and add it to the `packagePresets` array option:
+```ts
+AutoImport({
+  /* other options */
+  packagePresets: ['detect-browser-es'/* other local package names */]
+})
+```
+
+You can check the [Svelte example](./examples/vite-svelte) for a working example registering `detect-browser-es` package preset and auto importing `detect` function in [App.svelte](./examples/vite-svelte/src/App.svelte).
+
+Please refer to the [unimport PackagePresets jsdocs](https://github.com/unjs/unimport/blob/main/src/types.ts) for more information about options like `ignore` or `cache`.
+
+**Note**: ensure local packages used have package exports configured properly, otherwise the corresponding modules exports will not be detected.
+
 ## TypeScript
 
 In order to properly hint types for auto-imported APIs

examples/vite-svelte/package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@tsconfig/svelte": "^5.0.2",
+    "detect-browser-es": "^0.1.0",
     "svelte": "^4.2.5",
     "svelte-check": "^3.6.0",
     "svelte-preprocess": "^5.1.0",

examples/vite-svelte/src/App.svelte

@@ -6,6 +6,8 @@
   onMount(function() {
       console.log('onMount called')
   })
+
+  $:browser = detect()
 </script>
 
 <main>
@@ -25,5 +27,7 @@
   <br />
 
   <Counter />
+
+  <pre>Browser: { browser?.name }</pre>
 </main>
 

examples/vite-svelte/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
         'svelte/store',
         'svelte/transition',
       ],
+      packagePresets: ['detect-browser-es'],
       dts: './src/auto-imports.d.ts',
     }),
   ],

pnpm-lock.yaml

@@ -53,7 +53,7 @@ export function createContext(options: Options = {}, root = process.cwd()) {
 
   const unimport = createUnimport({
     imports: [],
-    presets: [],
+    presets: options.packagePresets?.map(p => typeof p === 'string' ? { package: p } : p) ?? [],
     injectAtEnd,
     addons: [
       ...(options.vueTemplate ? [vueTemplateAddon()] : []),

src/core/ctx.ts

@@ -1,6 +1,6 @@
 import type { Arrayable, Awaitable } from '@antfu/utils'
 import type { FilterPattern } from '@rollup/pluginutils'
-import type { Import, InlinePreset } from 'unimport'
+import type { Import, InlinePreset, PackagePreset } from 'unimport'
 import { PresetName } from './presets'
 
 export interface ImportLegacy {
@@ -78,6 +78,16 @@ export interface Options {
    */
   imports?: Arrayable<ImportsMap | PresetName | InlinePreset>
 
+  /**
+   * Local package presets.
+   *
+   * Register local installed packages as a preset.
+   *
+   * @default []
+   * @see https://github.com/unplugin/unplugin-auto-import#package-presets
+   */
+  packagePresets?: (PackagePreset | string)[]
+
   /**
    * Identifiers to be ignored
    */

src/types.ts

@@ -15,7 +15,9 @@ declare global {
   const $ref: typeof import('vue/macros')['$ref']
   const $shallowRef: typeof import('vue/macros')['$shallowRef']
   const $toRef: typeof import('vue/macros')['$toRef']
+  const Bundle: typeof import('magic-string')['Bundle']
   const EffectScope: typeof import('vue-demi')['EffectScope']
+  const SourceMap: typeof import('magic-string')['SourceMap']
   const afterUpdate: typeof import('svelte')['afterUpdate']
   const backIn: typeof import('svelte/easing')['backIn']
   const backInOut: typeof import('svelte/easing')['backInOut']
@@ -40,6 +42,7 @@ declare global {
   const customDefault: typeof import('custom')['default']
   const customNamed: typeof import('custom')['customNamed']
   const customRef: typeof import('vue-demi')['customRef']
+  const default: typeof import('magic-string')['default']
   const defineAsyncComponent: typeof import('vue-demi')['defineAsyncComponent']
   const defineComponent: typeof import('vue-demi')['defineComponent']
   const derived: typeof import('svelte/store')['derived']

test/__snapshots__/dts.test.ts.snap

@@ -6,6 +6,7 @@ import { createContext } from '../src/core/ctx'
 it('dts', async () => {
   const cwd = process.cwd()
   const ctx = createContext({
+    packagePresets: ['magic-string'],
     imports: [
       'vue-demi',
       'react',