first

.trae/skills/vite/references/core-features.md

@@ -0,0 +1,170 @@
+---
+name: core-features
+description: Core Vite features including TypeScript, JSX, CSS, and HTML processing
+---
+
+# Core Features
+
+## TypeScript
+
+Vite supports `.ts` files out of the box with transpilation via Oxc Transformer (20-30x faster than tsc).
+
+### Important: Transpile Only
+
+Vite does NOT perform type checking. Run type checking separately:
+
+```bash
+# Production build
+tsc --noEmit && vite build
+
+# During development (separate process)
+tsc --noEmit --watch
+
+# Or use vite-plugin-checker for browser error reporting
+```
+
+### TypeScript Configuration
+
+Required `tsconfig.json` settings:
+
+```json
+{
+  "compilerOptions": {
+    "isolatedModules": true,
+    "useDefineForClassFields": true,
+    "skipLibCheck": true
+  }
+}
+```
+
+### Client Types
+
+Add Vite's client types for `import.meta.env` and asset imports:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["vite/client"]
+  }
+}
+```
+
+This provides types for:
+- Asset imports (`.svg`, `.png`, etc.)
+- `import.meta.env` constants
+- `import.meta.hot` HMR API
+
+### Custom Type Overrides
+
+Override default asset import types:
+
+```ts
+// vite-env-override.d.ts
+declare module '*.svg' {
+  const content: React.FC<React.SVGProps<SVGElement>>
+  export default content
+}
+```
+
+### Path Aliases with tsconfig
+
+Enable tsconfig paths resolution:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  resolve: {
+    tsconfigPaths: true
+  }
+})
+```
+
+## JSX
+
+`.jsx` and `.tsx` files are supported out of the box. Custom JSX configuration:
+
+```ts
+export default defineConfig({
+  oxc: {
+    jsx: {
+      runtime: 'classic',  // or 'automatic'
+      pragma: 'h',
+      pragmaFrag: 'Fragment'
+    },
+    // Auto-inject JSX helpers
+    jsxInject: `import React from 'react'`
+  }
+})
+```
+
+## HTML
+
+`index.html` is the entry point, not tucked away in `public/`. Vite processes it as part of the module graph.
+
+### Supported Elements
+
+Vite processes these HTML element attributes:
+
+- `<script type="module" src>`
+- `<link href>` (stylesheets)
+- `<img src>`, `<img srcset>`
+- `<video src>`, `<video poster>`
+- `<audio src>`
+- `<source src>`, `<source srcset>`
+- `<meta content>` (for og:image, twitter:image, etc.)
+
+### Opt-out of Processing
+
+```html
+<script vite-ignore type="module" src="https://cdn.example.com/lib.js"></script>
+```
+
+### Multi-Page Apps
+
+Access any HTML file by its path:
+
+- `<root>/index.html` → `http://localhost:5173/`
+- `<root>/about.html` → `http://localhost:5173/about.html`
+- `<root>/blog/index.html` → `http://localhost:5173/blog/index.html`
+
+## JSON
+
+Direct import with named exports support:
+
+```ts
+// Import entire object
+import json from './data.json'
+
+// Named imports (tree-shakeable)
+import { field } from './data.json'
+```
+
+## Framework Support
+
+Official framework plugins:
+
+| Framework | Plugin |
+|-----------|--------|
+| Vue 3 | `@vitejs/plugin-vue` |
+| Vue 3 JSX | `@vitejs/plugin-vue-jsx` |
+| React | `@vitejs/plugin-react` |
+| React (SWC) | `@vitejs/plugin-react-swc` |
+| React Server Components | `@vitejs/plugin-rsc` |
+| Legacy browsers | `@vitejs/plugin-legacy` |
+
+## Content Security Policy
+
+Configure nonce for CSP:
+
+```ts
+export default defineConfig({
+  html: {
+    cspNonce: 'PLACEHOLDER'  // Replace per-request
+  }
+})
+```
+
+<!-- 
+Source references:
+- https://vite.dev/guide/features.html
+-->