From a2e90950a63817aba9b3080c6b04a4a9ac67511a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= Date: Sun, 3 Dec 2023 16:47:09 +0100 Subject: [PATCH] feat: add local package preset support (#451) --- README.md | 16 ++++++++++++++++ examples/vite-svelte/package.json | 1 + examples/vite-svelte/src/App.svelte | 4 ++++ examples/vite-svelte/vite.config.ts | 1 + pnpm-lock.yaml | 9 +++++++++ src/core/ctx.ts | 2 +- src/types.ts | 12 +++++++++++- test/__snapshots__/dts.test.ts.snap | 3 +++ test/dts.test.ts | 1 + 9 files changed, 47 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bf9a050a..5434f11f 100644 --- a/README.md +++ b/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 diff --git a/examples/vite-svelte/package.json b/examples/vite-svelte/package.json index dd19bd55..5d1de56c 100644 --- a/examples/vite-svelte/package.json +++ b/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", diff --git a/examples/vite-svelte/src/App.svelte b/examples/vite-svelte/src/App.svelte index 12bb0b2c..74ed63fc 100644 --- a/examples/vite-svelte/src/App.svelte +++ b/examples/vite-svelte/src/App.svelte @@ -6,6 +6,8 @@ onMount(function() { console.log('onMount called') }) + + $:browser = detect()
@@ -25,5 +27,7 @@
+ + 
Browser: { browser?.name }
diff --git a/examples/vite-svelte/vite.config.ts b/examples/vite-svelte/vite.config.ts index e95a7dfc..5e548be7 100644 --- a/examples/vite-svelte/vite.config.ts +++ b/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', }), ], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 58ab72cc..f7624311 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -197,6 +197,9 @@ importers: '@tsconfig/svelte': specifier: ^5.0.2 version: 5.0.2 + detect-browser-es: + specifier: ^0.1.0 + version: 0.1.0 svelte: specifier: ^4.2.5 version: 4.2.5 @@ -3468,6 +3471,12 @@ packages: resolution: {integrity: sha512-FJ9RDpf3GicEBvzI3jxc2XhHzbqD8p4ANw/1kPsFBfTvP1b7Gn/Lg1vO7R9J4IVgoMbyUmFrFGZafJ1hPZpvlg==} dev: true + /detect-browser-es@0.1.0: + resolution: {integrity: sha512-8yEmwwlcPVIJDUk+I92cRTC+EJ/O8+655mPjiqSrIqnqEiLqwUW7F5oLOyx02io0rcUHd30j0ZrWFGlD0FnJDA==} + dependencies: + std-env: 3.4.3 + dev: true + /detect-indent@6.1.0: resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==} engines: {node: '>=8'} diff --git a/src/core/ctx.ts b/src/core/ctx.ts index b6218e14..218b12f1 100644 --- a/src/core/ctx.ts +++ b/src/core/ctx.ts @@ -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()] : []), diff --git a/src/types.ts b/src/types.ts index 1f0eb9b2..43bdb040 100644 --- a/src/types.ts +++ b/src/types.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 + /** + * 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 */ diff --git a/test/__snapshots__/dts.test.ts.snap b/test/__snapshots__/dts.test.ts.snap index 2f4b6972..641aa24d 100644 --- a/test/__snapshots__/dts.test.ts.snap +++ b/test/__snapshots__/dts.test.ts.snap @@ -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'] diff --git a/test/dts.test.ts b/test/dts.test.ts index d4206204..57338d01 100644 --- a/test/dts.test.ts +++ b/test/dts.test.ts @@ -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',