directix 1.11.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.

package/dist/index.cjs

@@ -1,6 +1,6 @@
 /*!
- * directix v1.11.0
- * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
+ * directix v2.0.0
+ * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3, with Web Components support
  * (c) 2021-present saqqdy <https://github.com/saqqdy>
  * Released under the MIT License.
  */
@@ -79,8 +79,8 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 /*!
- * directix v1.11.0
- * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
+ * directix v2.0.0
+ * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3, with Web Components support
  * (c) 2021-present saqqdy <https://github.com/saqqdy>
  * Released under the MIT License.
  */
@@ -99,7 +99,7 @@ function createVue2Directive(hooks) {
     },
     inserted(el, binding, vnode) {
       if (hooks.mounted) {
-        hooks.mounted(el, normalizeBinding$1(binding), vnode);
+        hooks.mounted(el, normalizeBinding$2(binding), vnode);
       }
     },
     update(el, binding, vnode, oldVnode) {
@@ -107,9 +107,9 @@ function createVue2Directive(hooks) {
       if (hooks.updated) {
         hooks.updated(
           el,
-          normalizeBinding$1(binding),
+          normalizeBinding$2(binding),
           vnode,
-          normalizeBinding$1(__spreadProps(__spreadValues({}, binding), { value: binding.oldValue })),
+          normalizeBinding$2(__spreadProps(__spreadValues({}, binding), { value: binding.oldValue })),
           oldVnode
         );
       }
@@ -122,7 +122,7 @@ function createVue2Directive(hooks) {
     },
     unbind(el, binding, vnode) {
       if (hooks.unmounted) {
-        hooks.unmounted(el, normalizeBinding$1(binding), vnode);
+        hooks.unmounted(el, normalizeBinding$2(binding), vnode);
       }
       const state2 = el.__directix_state__;
       if (state2 == null ? void 0 : state2.cleanup) {
@@ -133,7 +133,7 @@ function createVue2Directive(hooks) {
   };
   return directive;
 }
-function normalizeBinding$1(binding) {
+function normalizeBinding$2(binding) {
   var _a2;
   return {
     value: binding.value,
@@ -150,20 +150,20 @@ function addCleanup$1(el, fn) {
   }
 }
 function createVue3Directive(hooks) {
-  const directive = {
+  return {
     created(el, binding, vnode) {
-      const state2 = {
-        value: binding.value,
+      const state2 = vue.shallowReactive({
+        value: binding.value != null ? vue.markRaw(binding.value) : binding.value,
         vnode,
         cleanup: []
-      };
+      });
       el.__directix_state__ = state2;
     },
     beforeMount(_el, _binding, _vnode) {
     },
     mounted(el, binding, vnode) {
       if (hooks.mounted) {
-        hooks.mounted(el, normalizeBindingVue3(binding), vnode);
+        hooks.mounted(el, normalizeBinding$1(binding), vnode);
       }
     },
     beforeUpdate(_el, _binding, _vnode, _prevVnode) {
@@ -173,14 +173,14 @@ function createVue3Directive(hooks) {
       if (hooks.updated) {
         hooks.updated(
           el,
-          normalizeBindingVue3(binding),
+          normalizeBinding$1(binding),
           vnode,
-          normalizeBindingVue3(__spreadProps(__spreadValues({}, binding), { value: binding.oldValue })),
+          normalizeBinding$1(__spreadProps(__spreadValues({}, binding), { value: binding.oldValue })),
           prevVnode
         );
       }
       if (state2) {
-        state2.value = binding.value;
+        state2.value = binding.value != null ? vue.markRaw(binding.value) : binding.value;
         state2.vnode = vnode;
       }
     },
@@ -188,7 +188,7 @@ function createVue3Directive(hooks) {
     },
     unmounted(el, binding, vnode) {
       if (hooks.unmounted) {
-        hooks.unmounted(el, normalizeBindingVue3(binding), vnode);
+        hooks.unmounted(el, normalizeBinding$1(binding), vnode);
       }
       const state2 = el.__directix_state__;
       if (state2 == null ? void 0 : state2.cleanup) {
@@ -197,9 +197,8 @@ function createVue3Directive(hooks) {
       delete el.__directix_state__;
     }
   };
-  return directive;
 }
-function normalizeBindingVue3(binding) {
+function normalizeBinding$1(binding) {
   var _a2;
   return {
     value: binding.value,
@@ -21973,6 +21972,121 @@ function teleportContent(content, options) {
     }
   };
 }
+function isCustomElement(el) {
+  return el.tagName.includes("-") || customElements.get(el.tagName.toLowerCase()) !== void 0;
+}
+function applyDirectiveToCustomElement(el, directive, value, options) {
+  const binding = {
+    value,
+    oldValue: null,
+    arg: options == null ? void 0 : options.arg,
+    modifiers: (options == null ? void 0 : options.modifiers) || {},
+    instance: null
+  };
+  const vnode = { el };
+  const mountedHook = directive.mounted;
+  if (mountedHook) {
+    mountedHook(el, binding, vnode, null);
+  }
+  return () => {
+    const unmountedHook = directive.unmounted;
+    if (unmountedHook) {
+      unmountedHook(el, binding, vnode, null);
+    }
+  };
+}
+function defineCustomElementDirective(options) {
+  const { name, directive, defaultValue, shadow = false, shadowMode = "open" } = options;
+  class DirectiveCustomElement extends HTMLElement {
+    constructor() {
+      super();
+      __publicField(this, "cleanup");
+      __publicField(this, "currentValue", defaultValue);
+      if (shadow) {
+        this.attachShadow({ mode: shadowMode });
+      }
+    }
+    connectedCallback() {
+      this.cleanup = applyDirectiveToCustomElement(
+        this,
+        directive,
+        this.currentValue
+      );
+    }
+    disconnectedCallback() {
+      if (this.cleanup) {
+        this.cleanup();
+        this.cleanup = void 0;
+      }
+    }
+    // Allow setting value via attribute
+    static get observedAttributes() {
+      return ["value"];
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      if (attrName === "value" && oldValue !== newValue) {
+        this.currentValue = newValue;
+        if (this.cleanup) {
+          this.cleanup();
+        }
+        this.cleanup = applyDirectiveToCustomElement(
+          this,
+          directive,
+          this.currentValue
+        );
+      }
+    }
+  }
+  customElements.define(name, DirectiveCustomElement);
+}
+function createDirectiveElement(_name, directive, options) {
+  const { defaultValue, shadow = false, shadowMode = "open" } = options || {};
+  return class extends HTMLElement {
+    constructor() {
+      super();
+      __publicField(this, "cleanup");
+      __publicField(this, "currentValue", defaultValue);
+      if (shadow) {
+        this.attachShadow({ mode: shadowMode });
+      }
+    }
+    connectedCallback() {
+      this.cleanup = applyDirectiveToCustomElement(
+        this,
+        directive,
+        this.currentValue
+      );
+    }
+    disconnectedCallback() {
+      if (this.cleanup) {
+        this.cleanup();
+        this.cleanup = void 0;
+      }
+    }
+    static get observedAttributes() {
+      return ["value"];
+    }
+    attributeChangedCallback(_attrName, oldValue, newValue) {
+      if (oldValue !== newValue) {
+        this.currentValue = newValue;
+        if (this.cleanup) {
+          this.cleanup();
+        }
+        this.cleanup = applyDirectiveToCustomElement(
+          this,
+          directive,
+          this.currentValue
+        );
+      }
+    }
+  };
+}
+function registerDirectiveElements(elements) {
+  Object.entries(elements).forEach(([elementName, elementDirective]) => {
+    const elementClass = createDirectiveElement(elementName, elementDirective);
+    customElements.define(elementName, elementClass);
+  });
+}
 const zhCN = {
   directives: {
     debounce: {
@@ -24087,6 +24201,7 @@ exports.addNonPassiveListener = addNonPassiveListener;
 exports.addPassiveListener = addPassiveListener;
 exports.announce = announce;
 exports.applyAriaAttributes = applyAriaAttributes;
+exports.applyDirectiveToCustomElement = applyDirectiveToCustomElement;
 exports.assert = assert;
 exports.assertPositive = assertPositive;
 exports.assertRange = assertRange;
@@ -24134,6 +24249,7 @@ exports.createDebouncedResizeHandler = createDebouncedResizeHandler;
 exports.createDelayedClick = createDelayedClick;
 exports.createDeprecationWarning = createDeprecationWarning;
 exports.createDirectiveBenchmark = createDirectiveBenchmark;
+exports.createDirectiveElement = createDirectiveElement;
 exports.createDirectiveTemplate = createDirectiveTemplate;
 exports.createEventDirective = createEventDirective;
 exports.createI18n = createI18n;
@@ -24158,6 +24274,7 @@ exports.deepClone = deepClone;
 exports.deepMerge = deepMerge;
 exports.deferNonCriticalDirective = deferNonCriticalDirective;
 exports.deferTask = deferTask;
+exports.defineCustomElementDirective = defineCustomElementDirective;
 exports.defineDirective = defineDirective;
 exports.defineDirectiveGroup = defineDirectiveGroup;
 exports.definePlugin = definePlugin;
@@ -24286,6 +24403,7 @@ exports.isArray = isArray;
 exports.isBoolean = isBoolean;
 exports.isBrowser = isBrowser;
 exports.isBrowserSupported = isBrowserSupported;
+exports.isCustomElement = isCustomElement;
 exports.isDOMReady = isDOMReady;
 exports.isDevtoolsAvailable = isDevtoolsAvailable;
 exports.isEmpty = isEmpty;
@@ -24335,6 +24453,7 @@ exports.prefetchVisibleElements = prefetchVisibleElements;
 exports.preloadModule = preloadModule;
 exports.quickPrint = quickPrint;
 exports.recordHistogram = recordHistogram;
+exports.registerDirectiveElements = registerDirectiveElements;
 exports.registerPolyfill = registerPolyfill;
 exports.removeHealthCheck = removeHealthCheck;
 exports.requestIdleCallback = requestIdleCallback;