refactor: use unplugin-auto-import

docs/composables.d.ts

@@ -1,12 +1,9 @@
-// generated by iles
-// We suggest you to commit this file into source control
-
+// Generated by 'unplugin-auto-import'
+export {}
 declare global {
   const definePageComponent: typeof import('iles')['definePageComponent']
   const useDocuments: typeof import('iles')['useDocuments']
   const useHead: typeof import('iles')['useHead']
   const usePage: typeof import('iles')['usePage']
   const useRoute: typeof import('iles')['useRoute']
 }
-
-export { }

packages/iles/package.json

@@ -82,6 +82,7 @@
     "picocolors": "^1.0.0",
     "unist-util-visit": "^4.1.0",
     "unplugin-vue-components": "^0.21.1",
+    "unplugin-auto-import": "^0.11.4",
     "vite": "^3.2.0",
     "vue": "^3.2.37",
     "vue-router": "^4.0.12"

packages/iles/src/node/config.ts

@@ -6,6 +6,7 @@ import creatDebugger from 'debug'
 import { loadConfigFromFile, mergeConfig as mergeViteConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import components from 'unplugin-vue-components/vite'
+import composables from 'unplugin-auto-import/vite'
 import pages from '@islands/pages'
 import mdx from '@islands/mdx'
 
@@ -136,6 +137,7 @@ async function setNamedPlugins (config: AppConfig, env: ConfigEnv, plugins: Name
     tagName.startsWith('ile-') || ceChecks.some(fn => fn!(tagName))
 
   plugins.components = components(config.components)
+  plugins.composables = composables(config.composables)
   plugins.vue = vue(config.vue)
 
   const optionalPlugins = {
@@ -281,6 +283,20 @@ function appConfigDefaults (appConfig: AppConfig, userConfig: UserConfig, env: C
       ],
       transformer: 'vue3',
     },
+    composables: {
+      dts: resolve(root, 'composables.d.ts'),
+      imports: [
+        {
+          iles: [
+            'definePageComponent',
+            'useDocuments',
+            'useHead',
+            'usePage',
+            'useRoute',
+          ],
+        },
+      ],
+    },
   }
 }
 

packages/iles/src/node/plugin/plugin.ts

@@ -16,7 +16,6 @@ import { parseId } from './parse'
 import { wrapIslandsInSFC, wrapLayout } from './wrap'
 import { extendSite } from './site'
 import { detectMDXComponents } from './markdown'
-import { autoImportComposables, writeComposablesDTS } from './composables'
 import documents from './documents'
 
 function isMarkdown (path: string) {
@@ -63,8 +62,6 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
         root = config.root
         isBuild = config.command === 'build'
         appConfig.resolvePath = config.createResolver()
-
-        writeComposablesDTS(root)
       },
       async resolveId (id) {
         if (id === ILES_APP_ENTRY)
@@ -147,21 +144,10 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
     plugins.vue,
     ...appConfig.vitePlugins,
     plugins.components,
+    plugins.composables,
 
     documents(appConfig),
 
-    {
-      name: 'iles:composables',
-      enforce: 'post',
-      async transform (code, id) {
-        if (!id.startsWith(appConfig.srcDir)) return
-
-        const { path, query } = parseId(id)
-        if (isVueScript(path, query) || /\.[tj]sx?/.test(path))
-          return await autoImportComposables(code, id)
-      },
-    },
-
     {
       name: 'iles:page-data',
       enforce: 'post',

packages/iles/types/shared.d.ts

@@ -5,6 +5,8 @@ import type { App, Ref, DefineComponent, VNode, AsyncComponentLoader } from 'vue
 import type VuePlugin, { Options as VueOptions } from '@vitejs/plugin-vue'
 import type ComponentsPlugin from 'unplugin-vue-components/vite'
 import type { Options as ComponentOptions } from 'unplugin-vue-components/types'
+import type composablesPlugin from 'unplugin-auto-import/vite'
+import type { Options as composablesOptions } from 'unplugin-auto-import/types'
 
 import type { Options as RequiredSolidOptions } from 'vite-plugin-solid'
 import type { Options as SvelteOptions } from '@sveltejs/vite-plugin-svelte'
@@ -107,6 +109,7 @@ export interface NamedPlugins {
   pages: { api: PagesApi }
   vue: ReturnType<typeof VuePlugin>
   components: ReturnType<typeof ComponentsPlugin>
+  composables: ReturnType<typeof composablesPlugin>
 }
 
 export interface SSGContext {
@@ -128,6 +131,7 @@ export interface BaseIlesConfig extends PagesOptions {
    * imports for components in Vue and MDX files.
    */
   components: ComponentOptions
+  composables: composablesOptions
   /**
    * Configuration options for @preact/preset-vite
    */

playground/the-vue-point/composables.d.ts

@@ -1,12 +1,9 @@
-// generated by iles
-// We suggest you to commit this file into source control
-
+// Generated by 'unplugin-auto-import'
+export {}
 declare global {
   const definePageComponent: typeof import('iles')['definePageComponent']
   const useDocuments: typeof import('iles')['useDocuments']
   const useHead: typeof import('iles')['useHead']
   const usePage: typeof import('iles')['usePage']
   const useRoute: typeof import('iles')['useRoute']
 }
-
-export { }