first

.cursor/skills/vite/references/features-glob-import.md

@@ -0,0 +1,161 @@
+---
+name: features-glob-import
+description: Vite's import.meta.glob for batch importing modules and dynamic imports
+---
+
+# Glob Import
+
+## Basic Usage
+
+Import multiple modules using glob patterns:
+
+```ts
+const modules = import.meta.glob('./dir/*.js')
+// Transformed to:
+// {
+//   './dir/foo.js': () => import('./dir/foo.js'),
+//   './dir/bar.js': () => import('./dir/bar.js'),
+// }
+```
+
+Iterate and load:
+
+```ts
+for (const path in modules) {
+  modules[path]().then((mod) => {
+    console.log(path, mod)
+  })
+}
+```
+
+## Eager Loading
+
+Load all modules immediately (no dynamic import):
+
+```ts
+const modules = import.meta.glob('./dir/*.js', { eager: true })
+// Transformed to:
+// import * as __glob_0 from './dir/foo.js'
+// import * as __glob_1 from './dir/bar.js'
+// const modules = {
+//   './dir/foo.js': __glob_0,
+//   './dir/bar.js': __glob_1,
+// }
+```
+
+## Multiple Patterns
+
+```ts
+const modules = import.meta.glob([
+  './dir/*.js',
+  './another/*.js'
+])
+```
+
+## Negative Patterns
+
+Exclude files with `!` prefix:
+
+```ts
+const modules = import.meta.glob([
+  './dir/*.js',
+  '!**/bar.js'  // Exclude bar.js
+])
+```
+
+## Named Imports
+
+Import specific exports for tree-shaking:
+
+```ts
+const modules = import.meta.glob('./dir/*.js', {
+  import: 'setup'
+})
+// './dir/foo.js': () => import('./dir/foo.js').then(m => m.setup)
+```
+
+Import default export:
+
+```ts
+const modules = import.meta.glob('./dir/*.js', {
+  import: 'default',
+  eager: true
+})
+```
+
+## Custom Queries
+
+Import as raw strings or URLs:
+
+```ts
+const moduleStrings = import.meta.glob('./dir/*.svg', {
+  query: '?raw',
+  import: 'default'
+})
+
+const moduleUrls = import.meta.glob('./dir/*.svg', {
+  query: '?url',
+  import: 'default'
+})
+```
+
+Custom queries for plugins:
+
+```ts
+const modules = import.meta.glob('./dir/*.js', {
+  query: { foo: 'bar', bar: true }
+})
+```
+
+## Base Path
+
+Change the base path for imports:
+
+```ts
+const modules = import.meta.glob('./**/*.js', {
+  base: './base'
+})
+// Keys: './dir/foo.js'
+// Imports: './base/dir/foo.js'
+```
+
+## Important Caveats
+
+1. **Vite-only feature** - Not a web standard
+2. **Patterns must be literals** - Cannot use variables
+3. **Relative or absolute** - Must start with `./`, `/`, or use an alias
+4. **Glob matching** - Uses [tinyglobby](https://github.com/SuperchupuDev/tinyglobby)
+
+## Dynamic Import with Variables
+
+Limited dynamic import support:
+
+```ts
+const module = await import(`./dir/${file}.js`)
+```
+
+**Rules:**
+- Must start with `./` or `../`
+- Must end with file extension
+- Variable represents only one level (no `foo/bar`)
+- Own directory needs filename pattern: `./prefix-${foo}.js` not `./${foo}.js`
+
+## Practical Example: Loading Route Components
+
+```ts
+// Lazy load all page components
+const pages = import.meta.glob('./pages/*.vue')
+
+const routes = Object.keys(pages).map((path) => {
+  const name = path.match(/\.\/pages\/(.*)\.vue$/)[1]
+  return {
+    path: `/${name.toLowerCase()}`,
+    component: pages[path]  // Lazy loaded
+  }
+})
+```
+
+<!-- 
+Source references:
+- https://vite.dev/guide/features.html#glob-import
+-->