feat: biblioteca inteligente libs/ + 5 novas skills (20 skills total)
NOVAS SKILLS: - next-best-practices v0.1.0 (CLEAN) — Next.js App Router, RSC, caching, data - nextjs-patterns v1.0.0 (CLEAN) — Next.js 15: Server Actions, route handlers - vite v1.0.0 (CLEAN) — env vars, aliases, proxy, CJS compat - uncle-bob v1.0.0 (CLEAN) — Clean Code, SOLID, Clean Architecture - clean-code-review v1.0.0 (CLEAN) — naming, guard clauses, anti-patterns, refactoring - vue v1.0.0 (CLEAN) — Vue framework - vue-composition-api-best-practices v1.0.0 (CLEAN) — composables, Pinia, reactivity BIBLIOTECA INTELIGENTE libs/ (10 dominios, 11 arquivos): - typescript/ — TS safe + generics gotchas - react/ — Next.js App Router + Vite config - vue/ — Composition API + Pinia - linux/ — System diagnostic cheatsheet - database/ — PostgreSQL + MySQL patterns - browser/ — Chromium CLI + E2E testing - security/ — SAST audit (OWASP Top 10) - best-practices/ — Clean Code + SOLID + Clean Architecture - deploy/ — Docker multi-stack + OpenClaw ops - + INDEX.md como guia de navegacao .learnings/ — LRN-20260519-003 criado (biblioteca compartilhada)
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
# Composables Design
|
||||
|
||||
## Composable Philosophy
|
||||
|
||||
- Composables are functions that encapsulate stateful logic
|
||||
- Name with `use` prefix—`useMouse`, `useAuth`, `useFetch`
|
||||
- Return refs/reactive, not plain values—caller needs reactivity
|
||||
- Composables are like custom hooks in React
|
||||
|
||||
## Basic Structure
|
||||
|
||||
```javascript
|
||||
export function useCounter(initial = 0) {
|
||||
const count = ref(initial)
|
||||
const increment = () => count.value++
|
||||
const decrement = () => count.value--
|
||||
return { count, increment, decrement }
|
||||
}
|
||||
```
|
||||
|
||||
## Input Flexibility
|
||||
|
||||
- Accept ref OR plain value as input—support both use cases
|
||||
- `toValue()` (3.3+) unwraps ref or returns value—flexible API
|
||||
- For reactive objects, consider accepting getter function
|
||||
- Document what inputs are accepted
|
||||
|
||||
## Return Value Patterns
|
||||
|
||||
- Return object with named properties—allows destructuring what's needed
|
||||
- Return refs, not reactive—easier to destructure
|
||||
- Return methods along with state—complete API
|
||||
- Consider returning readonly for state—prevent external mutation
|
||||
|
||||
## Lifecycle in Composables
|
||||
|
||||
- `onMounted`, `onUnmounted` work inside composables—attached to calling component
|
||||
- Cleanup with `onUnmounted`—unsubscribe, clear timers
|
||||
- Composable must be called synchronously in setup—not in callbacks
|
||||
- Multiple components using same composable = separate instances
|
||||
|
||||
## Side Effects
|
||||
|
||||
- Start effects in composable—they run when component mounts
|
||||
- Clean up in `onUnmounted`—or use cleanup function in watchEffect
|
||||
- Consider `onScopeDispose` for effect scope cleanup
|
||||
- Return stop functions for manual control
|
||||
|
||||
## Async Composables
|
||||
|
||||
- Return reactive state that updates when async completes
|
||||
- Include loading and error states—`{data, isLoading, error}`
|
||||
- Consider `useFetch` pattern from VueUse
|
||||
- For SSR, handle hydration mismatch
|
||||
|
||||
## Composition Patterns
|
||||
|
||||
- Composables can use other composables—build on abstractions
|
||||
- Avoid deep nesting—keep composables focused
|
||||
- Share types between composables—consistent API
|
||||
- Consider extracting to separate packages—if truly reusable
|
||||
|
||||
## VueUse Reference
|
||||
|
||||
- Rich composable library—200+ utilities
|
||||
- Study patterns in VueUse—excellent examples
|
||||
- Don't reinvent—check if VueUse has it
|
||||
- Extend VueUse composables rather than replacing
|
||||
Reference in New Issue
Block a user