format: apply repo prettier (3.8.1) to the folded skills tree
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
This commit is contained in:
@@ -30,18 +30,18 @@ export default defineConfig({
|
||||
platform: 'neutral',
|
||||
external: ['react', 'react-dom'],
|
||||
dts: true,
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Component Example
|
||||
|
||||
```tsx
|
||||
// src/MyButton.tsx
|
||||
import React from 'react'
|
||||
import React from 'react';
|
||||
|
||||
interface MyButtonProps {
|
||||
type?: 'primary' | 'secondary'
|
||||
onClick?: () => void
|
||||
type?: 'primary' | 'secondary';
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export const MyButton: React.FC<MyButtonProps> = ({ type = 'primary', onClick }) => {
|
||||
@@ -49,13 +49,13 @@ export const MyButton: React.FC<MyButtonProps> = ({ type = 'primary', onClick })
|
||||
<button className={`btn btn-${type}`} onClick={onClick}>
|
||||
Click me
|
||||
</button>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
```ts
|
||||
// src/index.ts
|
||||
export { MyButton } from './MyButton'
|
||||
export { MyButton } from './MyButton';
|
||||
```
|
||||
|
||||
## JSX Transform
|
||||
@@ -68,10 +68,11 @@ Modern JSX transform (React 17+):
|
||||
export default defineConfig({
|
||||
entry: ['src/index.tsx'],
|
||||
// Automatic JSX is default
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
**Characteristics:**
|
||||
|
||||
- No `import React` needed
|
||||
- Smaller bundle size
|
||||
- React 17+ required
|
||||
@@ -85,13 +86,14 @@ export default defineConfig({
|
||||
entry: ['src/index.tsx'],
|
||||
inputOptions: {
|
||||
transform: {
|
||||
jsx: 'react', // Classic transform
|
||||
jsx: 'react', // Classic transform
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
**Characteristics:**
|
||||
|
||||
- Requires `import React from 'react'`
|
||||
- Compatible with older React versions
|
||||
|
||||
@@ -108,7 +110,7 @@ pnpm add -D @rollup/plugin-babel babel-plugin-react-compiler
|
||||
### Configure
|
||||
|
||||
```ts
|
||||
import pluginBabel from '@rollup/plugin-babel'
|
||||
import pluginBabel from '@rollup/plugin-babel';
|
||||
|
||||
export default defineConfig({
|
||||
entry: ['src/index.tsx'],
|
||||
@@ -126,7 +128,7 @@ export default defineConfig({
|
||||
}),
|
||||
],
|
||||
dts: true,
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## Common Patterns
|
||||
@@ -141,11 +143,11 @@ export default defineConfig({
|
||||
external: [
|
||||
'react',
|
||||
'react-dom',
|
||||
/^react\//, // react/jsx-runtime, etc.
|
||||
/^react\//, // react/jsx-runtime, etc.
|
||||
],
|
||||
dts: true,
|
||||
clean: true,
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Multiple Components
|
||||
@@ -161,7 +163,7 @@ export default defineConfig({
|
||||
format: ['esm', 'cjs'],
|
||||
external: ['react', 'react-dom'],
|
||||
dts: true,
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Hooks Library
|
||||
@@ -171,10 +173,10 @@ export default defineConfig({
|
||||
entry: ['src/index.ts'],
|
||||
format: ['esm', 'cjs'],
|
||||
platform: 'neutral',
|
||||
external: ['react'], // Only React needed
|
||||
external: ['react'], // Only React needed
|
||||
dts: true,
|
||||
treeshake: true,
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Monorepo React Packages
|
||||
@@ -187,10 +189,10 @@ export default defineConfig({
|
||||
external: [
|
||||
'react',
|
||||
'react-dom',
|
||||
/^@mycompany\//, // Other workspace packages
|
||||
/^@mycompany\//, // Other workspace packages
|
||||
],
|
||||
dts: true,
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## TypeScript Configuration
|
||||
@@ -203,11 +205,11 @@ export default defineConfig({
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"jsx": "react-jsx", // or "react" for classic
|
||||
"jsx": "react-jsx", // or "react" for classic
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"strict": true,
|
||||
"isolatedDeclarations": true, // Fast DTS generation
|
||||
"isolatedDeclarations": true, // Fast DTS generation
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src"]
|
||||
@@ -252,7 +254,7 @@ export default defineConfig({
|
||||
### With Fast Refresh (Development)
|
||||
|
||||
```ts
|
||||
import react from '@vitejs/plugin-react'
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig((options) => ({
|
||||
entry: ['src/index.ts'],
|
||||
@@ -264,7 +266,7 @@ export default defineConfig((options) => ({
|
||||
react({ fastRefresh: true }),
|
||||
]
|
||||
: [],
|
||||
}))
|
||||
}));
|
||||
```
|
||||
|
||||
## Tips
|
||||
@@ -284,7 +286,7 @@ export default defineConfig((options) => ({
|
||||
Ensure React is externalized:
|
||||
|
||||
```ts
|
||||
external: ['react', 'react-dom', /^react\//]
|
||||
external: ['react', 'react-dom', /^react\//];
|
||||
```
|
||||
|
||||
### Type Errors with JSX
|
||||
@@ -294,7 +296,7 @@ Check `tsconfig.json`:
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx" // or "react"
|
||||
"jsx": "react-jsx" // or "react"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -304,12 +306,7 @@ Check `tsconfig.json`:
|
||||
Add to external patterns:
|
||||
|
||||
```ts
|
||||
external: [
|
||||
'react',
|
||||
'react-dom',
|
||||
'react/jsx-runtime',
|
||||
'react/jsx-dev-runtime',
|
||||
]
|
||||
external: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime'];
|
||||
```
|
||||
|
||||
## Related
|
||||
|
||||
Reference in New Issue
Block a user