directix 1.8.0 → 1.10.0

package/README.md

@@ -21,6 +21,227 @@ A comprehensive, easy-to-use, and high-performance Vue custom directives library
 - ⚡ **Zero Dependencies** - Lightweight with minimal bundle size
 - 🎨 **Composables** - Every directive has a corresponding composable for Composition API
 - 🔧 **Utility Exports** - Export `configurePermission`, `getPermissionConfig` and other utilities for advanced usage
+- 🌐 **i18n Support** - Built-in internationalization with Chinese, English, and Japanese translations
+- 🔌 **Plugin System** - Extensible plugin architecture for community contributions
+
+## What's New in v1.10.0
+
+### Vue 3 Optimization Preview
+
+Vue 3-specific optimizations leveraging the reactive system for better performance.
+
+```typescript
+import { useLazyOptimized, useSuspenseDirective, teleportContent } from 'directix'
+
+// Optimized lazy loading with shallowRef
+const { state, observe } = useLazyOptimized({
+  onLoad: (entry) => console.log('Visible!')
+})
+
+// Suspense-ready async directive
+const { state, load } = useSuspenseDirective({
+  loader: () => fetchData()
+})
+
+// Teleport content to target
+teleportContent(element, { to: '#modal-container' })
+```
+
+### Mobile Optimization
+
+Enhanced touch gestures with haptic feedback and PWA support.
+
+```typescript
+import { useEnhancedTouch, triggerHaptic, usePWA } from 'directix'
+
+// 12+ gesture types with haptic feedback
+const { activeGesture, bind } = useEnhancedTouch({
+  feedback: { haptic: true, visual: true },
+  onSwipe: (e) => console.log(`Swiped ${e.direction}`),
+  onPinch: (e) => console.log(`Scale: ${e.scale}`),
+})
+
+// PWA support
+const { isOnline, needsUpdate } = usePWA({ serviceWorker: { enabled: true } })
+```
+
+### Accessibility (A11y)
+
+Comprehensive ARIA support, screen reader announcements, and keyboard navigation.
+
+```typescript
+import { 
+  applyAriaAttributes, 
+  announce, 
+  useKeyboardNavigation, 
+  useFocusTrap 
+} from 'directix'
+
+// Apply ARIA attributes
+applyAriaAttributes(element, {
+  role: 'button',
+  ariaLabel: 'Submit',
+  ariaDisabled: true,
+})
+
+// Screen reader announcements
+announce('Form submitted successfully')
+
+// Keyboard navigation with focus trap
+const { bind } = useKeyboardNavigation({ focusTrap: true, rovingTabindex: true })
+```
+
+### Security Enhancement
+
+Advanced XSS protection, CSP compatibility, and security audit tools.
+
+```typescript
+import { sanitizeHtml, SecurityAudit, getCSPNonce } from 'directix'
+
+// Advanced HTML sanitization
+const clean = sanitizeHtml(userInput, {
+  allowedTags: ['b', 'i', 'p'],
+  detectDangerousPatterns: true,
+})
+
+// Security audit
+const report = SecurityAudit.generateReport(htmlContent)
+console.log(SecurityAudit.formatReport(report, 'json'))
+
+// Check dependencies for vulnerabilities
+const vulns = await SecurityAudit.checkDependencies()
+```
+
+## What's New in v1.9.0
+
+### Internationalization (i18n)
+
+Full i18n support for directive messages and documentation.
+
+```typescript
+import { createI18n, setLocale } from 'directix'
+
+// Initialize with locale
+createI18n({
+  locale: 'en-US',
+  fallbackLocale: 'en-US',
+  messages: { 'en-US': enUS, 'zh-CN': zhCN, 'ja-JP': jaJP }
+})
+
+// Switch locale at runtime
+setLocale('zh-CN')
+```
+
+### Unified Warning System
+
+Improved developer experience with structured error messages.
+
+```typescript
+import { warn, directiveWarn, assertType } from 'directix'
+
+// Directive-specific warnings
+directiveWarn('debounce', 'errors.invalid_wait', { wait: 'abc' })
+
+// Type assertions
+assertType<number>(value, 'number', 'debounce', 'wait')
+```
+
+### Plugin System
+
+Extensible plugin architecture for community contributions.
+
+```typescript
+import { definePlugin, getPluginManager } from 'directix'
+
+const myPlugin = definePlugin({
+  meta: { name: 'my-plugin', version: '1.0.0' },
+  install(ctx) {
+    ctx.registerDirective('my-directive', vMyDirective)
+  }
+})
+
+getPluginManager().register(myPlugin)
+```
+
+### Community Plugin Registry
+
+Discover and install community plugins programmatically.
+
+```typescript
+import { getPluginRegistry } from 'directix'
+
+const registry = getPluginRegistry()
+
+// Search plugins
+const results = await registry.search('animation')
+
+// Get all plugins
+const plugins = await registry.getAll()
+
+// Install a plugin
+await registry.install('directix-animate', manager)
+```
+
+### Timezone & Locale Utilities
+
+Region-specific formatting for dates, numbers, and currencies.
+
+```typescript
+import { getTimezoneInfo, formatDateLocale, formatCurrencyLocale } from 'directix'
+
+// Get timezone info
+const tz = getTimezoneInfo() // { id: 'Asia/Shanghai', offset: 8, ... }
+
+// Format date by locale
+formatDateLocale(new Date()) // Auto-detects user locale
+
+// Format currency
+formatCurrencyLocale(99.99) // '$99.99' (US) or '99,99€' (DE)
+```
+
+### Vue DevTools Integration
+
+Debug directives directly in Vue DevTools.
+
+```typescript
+import { enableDevtools, trackDirective } from 'directix'
+
+// Enable DevTools integration
+enableDevtools()
+
+// Track directive usage
+trackDirective('debounce', { element: 'input' })
+```
+
+### Performance Monitoring
+
+Measure directive performance with detailed metrics.
+
+```typescript
+import { enablePerformance, getPerformanceReport } from 'directix'
+
+// Enable monitoring
+enablePerformance()
+
+// Get performance report
+const report = getPerformanceReport()
+// [{ name: 'debounce', mount: { p50: 0.5ms, p95: 1.2ms }, ... }]
+```
+
+### Scenario Examples
+
+10+ real-world examples demonstrating directive combinations:
+
+- **Form Validation** - v-debounce, v-mask, v-trim, v-focus
+- **Permission Management** - v-permission, v-click-outside
+- **Image Gallery** - v-lazy, v-image-preview, v-swipe
+- **Infinite Scroll** - v-infinite-scroll, v-virtual-list, v-loading
+- **Rich Text Editor** - v-sanitize, v-highlight, v-emoji
+- **Gesture Interaction** - v-touch, v-swipe, v-pan, v-pinch
+- **Data Visualization** - v-progress, v-counter, v-countdown
+- **Drag & Sort** - v-draggable, v-intersect
+- **Print & Export** - v-print, v-export
+- **Fullscreen Media** - v-fullscreen, v-lottie
 
 ## Online Demo