directix 1.10.0 → 2.0.0

package/README.md

@@ -8,12 +8,13 @@
 
 **English** | **[中文文档](README_CN.md)**
 
-A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3.
+A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3, with Web Components support.
 
 ## Features
 
 - 🎯 **Comprehensive** - 57 commonly used directives and 57 composables
-- 🔄 **Vue 2/3 Compatible** - Single codebase supports both Vue 2 and Vue 3
+- 🔄 **Vue 2/3 Compatible** - Single codebase supporting both Vue 2.6+ and Vue 3.0+
+- 🧩 **Web Components** - Use directives with Custom Elements / Web Components
 - 📦 **Tree-shakable** - Import only what you need
 - 🔒 **TypeScript** - Full TypeScript support with type definitions
 - 🚀 **SSR Friendly** - Multiple directives support SSR out of the box
@@ -24,16 +25,39 @@ A comprehensive, easy-to-use, and high-performance Vue custom directives library
 - 🌐 **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
+## What's Coming in v2.0.0 (Planned)
 
-### Vue 3 Optimization Preview
+> **Note**: v2.0.0 is currently in development. The features below are planned and will be released soon.
 
-Vue 3-specific optimizations leveraging the reactive system for better performance.
+### Web Components Support
+
+Use Directix directives with Custom Elements / Web Components:
+
+```typescript
+import { vLazy, defineCustomElementDirective, registerDirectiveElements } from 'directix'
+
+// Define a single custom element from directive
+defineCustomElementDirective({
+  name: 'lazy-img',
+  directive: vLazy,
+  shadow: true
+})
+
+// Register multiple directives as custom elements
+registerDirectiveElements({
+  'lazy-img': vLazy,
+  'click-outside': vClickOutside
+})
+```
+
+### Vue 3 Conditional Optimizations
+
+When using Vue 3, Directix automatically applies performance optimizations:
 
 ```typescript
 import { useLazyOptimized, useSuspenseDirective, teleportContent } from 'directix'
 
-// Optimized lazy loading with shallowRef
+// Optimized lazy loading with shallowRef (Vue 3 only)
 const { state, observe } = useLazyOptimized({
   onLoad: (entry) => console.log('Visible!')
 })
@@ -47,6 +71,10 @@ const { state, load } = useSuspenseDirective({
 teleportContent(element, { to: '#modal-container' })
 ```
 
+### Vue 2 Support Maintained
+
+**v2.0.0 will maintain full Vue 2 compatibility** - all v1.x code continues to work without modifications. We are committed to supporting both Vue 2 and Vue 3.
+
 ### Mobile Optimization
 
 Enhanced touch gestures with haptic feedback and PWA support.