directix 1.9.0 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -24,6 +24,94 @@ A comprehensive, easy-to-use, and high-performance Vue custom directives library
24
24
  - 🌐 **i18n Support** - Built-in internationalization with Chinese, English, and Japanese translations
25
25
  - 🔌 **Plugin System** - Extensible plugin architecture for community contributions
26
26
 
27
+ ## What's New in v1.10.0
28
+
29
+ ### Vue 3 Optimization Preview
30
+
31
+ Vue 3-specific optimizations leveraging the reactive system for better performance.
32
+
33
+ ```typescript
34
+ import { useLazyOptimized, useSuspenseDirective, teleportContent } from 'directix'
35
+
36
+ // Optimized lazy loading with shallowRef
37
+ const { state, observe } = useLazyOptimized({
38
+ onLoad: (entry) => console.log('Visible!')
39
+ })
40
+
41
+ // Suspense-ready async directive
42
+ const { state, load } = useSuspenseDirective({
43
+ loader: () => fetchData()
44
+ })
45
+
46
+ // Teleport content to target
47
+ teleportContent(element, { to: '#modal-container' })
48
+ ```
49
+
50
+ ### Mobile Optimization
51
+
52
+ Enhanced touch gestures with haptic feedback and PWA support.
53
+
54
+ ```typescript
55
+ import { useEnhancedTouch, triggerHaptic, usePWA } from 'directix'
56
+
57
+ // 12+ gesture types with haptic feedback
58
+ const { activeGesture, bind } = useEnhancedTouch({
59
+ feedback: { haptic: true, visual: true },
60
+ onSwipe: (e) => console.log(`Swiped ${e.direction}`),
61
+ onPinch: (e) => console.log(`Scale: ${e.scale}`),
62
+ })
63
+
64
+ // PWA support
65
+ const { isOnline, needsUpdate } = usePWA({ serviceWorker: { enabled: true } })
66
+ ```
67
+
68
+ ### Accessibility (A11y)
69
+
70
+ Comprehensive ARIA support, screen reader announcements, and keyboard navigation.
71
+
72
+ ```typescript
73
+ import {
74
+ applyAriaAttributes,
75
+ announce,
76
+ useKeyboardNavigation,
77
+ useFocusTrap
78
+ } from 'directix'
79
+
80
+ // Apply ARIA attributes
81
+ applyAriaAttributes(element, {
82
+ role: 'button',
83
+ ariaLabel: 'Submit',
84
+ ariaDisabled: true,
85
+ })
86
+
87
+ // Screen reader announcements
88
+ announce('Form submitted successfully')
89
+
90
+ // Keyboard navigation with focus trap
91
+ const { bind } = useKeyboardNavigation({ focusTrap: true, rovingTabindex: true })
92
+ ```
93
+
94
+ ### Security Enhancement
95
+
96
+ Advanced XSS protection, CSP compatibility, and security audit tools.
97
+
98
+ ```typescript
99
+ import { sanitizeHtml, SecurityAudit, getCSPNonce } from 'directix'
100
+
101
+ // Advanced HTML sanitization
102
+ const clean = sanitizeHtml(userInput, {
103
+ allowedTags: ['b', 'i', 'p'],
104
+ detectDangerousPatterns: true,
105
+ })
106
+
107
+ // Security audit
108
+ const report = SecurityAudit.generateReport(htmlContent)
109
+ console.log(SecurityAudit.formatReport(report, 'json'))
110
+
111
+ // Check dependencies for vulnerabilities
112
+ const vulns = await SecurityAudit.checkDependencies()
113
+ ```
114
+
27
115
  ## What's New in v1.9.0
28
116
 
29
117
  ### Internationalization (i18n)