RFC: Auto register for types

[antfu]

Context:

• feat(preset): pinia and vuex presets #60 (comment)
• Add type Ref for TypeScript antfu/vue-global-api#10

For example, it would be great to have common types like Ref, ComputedRef globally available when using the Vue preset. I would expect the API to be like

{
  // auto importing for import
  imports: [
    'vue'
  ],
  // auto importing for types
  types: [
    'vue', // again, we could have presets for it.
    {
      vue: ['Ref', 'ComputedRef']
    }
  ]
}

[userquin]

@antfu

Created new branch feat/auto-register-global-types:

• added types and split resolvedImports on TransformOptions (now has imports and types) on src/types.ts: added also some new stuff to support global types
• created pickTypes helper function, it is exported on each unplugin to allow import partial preset types or full preset: you can see on playground vite.config.ts file with partial preset for vue using Ref and ComputedRef on HelloWorld sfc
• added global types for vue, vue-demi, @vue/composition-api, pinia and vuex: we need to review them, maybe I forgot some types/interfaces
• updated core to handle changes made to the types: with no breaking changes

You can find global types presets stuff on src/global-types directory.

There are some // todo@userquin comments on src/core modules, take a look when you've time.

EDIT: maybe there is a breaking change if someone is using the resolvedImports from TransformOptions.

[userquin]

Right now I include global types on d.ts file using:

// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
import type {
  ComputedRef as __ComputedRef,
  Ref as __Ref  
} from 'vue'

declare global {
  type ComputedRef<T> = __ComputedRef<T>
  type Ref<T> = __Ref<T>
  const computed: typeof import('vue')['computed']
  ...
}
export{}

maybe we can use this another approach as suggested on issue on vue-global-api repo (both approaches work in IntelliJ, this latter would simplify the logic to generate the d.ts file and avoid adding redundant imports):

// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
  type ComputedRef<T> = import('vue').ComputedRef<T>
  type Ref<T> = import('vue').Ref<T>
  const computed: typeof import('vue')['computed']
  ...
}
export {}

[userquin]

Current approach on IntelliJ:

With suggested approach on vue-global-api repo on IntelliJ:

[userquin]

Pushed some changes:

• revert changing resolvedImports, included resolvedTypes on TransformOptions
• use import also for types on dts generation
• added pinia, vuex and svelte types

[jrson83]

Will you release a npm package with integrated #118 soon?

[antfu]

It's not yet possible to have a .d.ts redirecting a type from another module.

https://stackblitz.com/edit/node-jjgj6g?file=index.ts

I'd consider it as a limitation of TypeScript. If anyone finds a solution, please comment with a fork of the Stackblitz playground and then we could discuss how to implement that. Thanks.

[ennioVisco]

According to this: https://gist.github.com/Bnaya/97080f563fa8242e26a041732185a260 it depends to some typescript flag that can (and perhaps should) be disabled?

[terran42]

@antfu Maybe I misunderstood, but is this not what you want?

• https://stackblitz.com/edit/node-v1ncfz?file=imports.d.ts%3AL11
• https://stackblitz.com/edit/node-v1ncfz?file=global.d.ts%3AL2-L2 (commented out, but works too when L11 in imports.d.ts is commented out)

Both seems to work, at least to my needs:

• Ref<number> in index.ts has hint type Ref<T> = Ref<any>
• Cmd+Click directs me to the right place in imports.d.ts or global.d.ts
• Cmd+Click in imports.d.ts or global.d.ts on V.Ref or import('vue').Ref leads to definitions in Vue.

I'm happy with that.

[KeyToLove]

It's not yet possible to have a .d.ts redirecting a type from another module.

https://stackblitz.com/edit/node-jjgj6g?file=index.ts

I'd consider it as a limitation of TypeScript. If anyone finds a solution, please comment with a fork of the Stackblitz playground and then we could discuss how to implement that. Thanks.

也就是说现阶段想使用依赖的interface或其它类型定义（e.g: Ref），依旧需要通过显示引入的方式么🤔️

[antfu]

@terran42 Thanks for trying. But your solution seems to throw away the generics and make them any. I think it's not good enough.

[MKraust]

@antfu TypeScript 5.0 introduces export type * from '...'. Stable release is scheduled to March 14th.
https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/#support-for-export-type

Any chances that type auto-imports could be implemented in the near future after TS 5.0 release?

[LukerSpringtree]

dirs 配置的目标文件 中的类型 怎么自动导出

[byronogis]

dirs 配置的目标文件 中的类型 怎么自动导出

现在(截至v0.18.2), 在本地有两种办法

1. 本地打补丁, 启用类型包含

比如使用 pnpm: pnpm patch unplugin-auto-import

在 dist/chunk* 文件中查找 scanExports 方法, 将第二个参数改为 true,
对应的源码见

• unplugin-auto-import/src/core/ctx.ts

  Line 34 in e88f923

  return (await Promise.all(files.map(i => scanExports(i, false)))).flat()

• https://github.com/unjs/unimport/blob/a851b73c6dcf4aaf7309f275363dc510bd8e7ebb/src/node/scan-dirs.ts#L74

2. 手动配置 imports 选项, 枚举需要自动导入的类型, 比如

import { resolve } from 'node:path'
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig(() => {
  return {
    plugins: [
      AutoImport({
        imports: [
          {
            from: resolve(__dirname, 'src/types/memory'),
            imports: [
              'MemoryItem',
            ],
            type: true,
          },
        ]
      })
    ]
  }
})

第一种方式启用文件夹的类型包含后, 暂不清楚是否有其它副作用, 好处是不用自己枚举了, 只要在放进 dirs 选项就可以;
第二种方式不需要侵入包, 但需要自己一个一个列出来.