Open2
solidstartで、autoimportを実現する
yuna内容
nuxtjsのcomposablesのように、importを記述しなくても自動的に関数やcomponentが使える仕組みを、
SolidStartで実現した時のメモです。
注意
現状：tsx内で参照した関数が、なぜかうまくimportされません。。。
保留中。
yunaunplugin-auto-import を利用する
▼Auto import APIs on-demand for Vite, Webpack and Rollup
-
Viteプラグインの利用: SolidStartは内部でViteを使用しています。Viteに対応した
unplugin-auto-importをSolidStartのvite.config.tsで設定すれば、特定のディレクトリにある関数などを自動で読み込むようにカスタマイズできます。
bun add -D unplugin-auto-import
app.config.ts
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
vite: {
plugins: [
tailwindcss(),
AutoImport({
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
],
dirs: [
'./src/composables/**', // all nested modules
],
// TypeScript の型定義ファイルを自動生成
dts: './auto-imports.d.ts',
// ESLintの設定を生成
eslintrc: {
enabled: true,
},
}),
]
}
});
これで、composables/ ディレクトリの中にあるファイルから、exportした関数が使えるようになります。
ちなみに、export defaultしている場合は、そのファイル名がそのまま型定義として出力されます。（ただし、先頭は小文字）なので、自分で変数を指定したい場合は、defaultではなく個別にexportするのが良さそう。
auto-imports.d.ts
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
// biome-ignore lint: disable
export {}
declare global {
const common: typeof import('./src/constants/common')['default']
const deepFreeze: typeof import('./src/utils/object')['deepFreeze']
const setWindowStore: typeof import('./src/composables/store/window')['setWindowStore']
const windowStore: typeof import('./src/composables/store/window')['windowStore']
}