directix 1.11.0 → 2.0.0

package/dist/index.d.ts

@@ -102,6 +102,23 @@ export declare interface AnnounceOptions {
  */
 export declare function applyAriaAttributes(el: HTMLElement, config: ARIAConfig): void;
 
+/**
+ * Apply a Vue directive to a custom element
+ *
+ * @example
+ * ```ts
+ * import { vLazy } from 'directix'
+ * import { applyDirectiveToCustomElement } from 'directix/web-components'
+ *
+ * const myElement = document.querySelector('my-component')
+ * applyDirectiveToCustomElement(myElement, vLazy, { threshold: 0.5 })
+ * ```
+ */
+export declare function applyDirectiveToCustomElement<T = any>(el: Element, directive: Directive, value?: T, options?: {
+    arg?: string;
+    modifiers?: Record<string, boolean>;
+}): () => void;
+
 /**
  * ARIA attribute configuration
  */
@@ -1008,6 +1025,19 @@ export declare function createDirectiveBenchmark(directiveName: string, setup: (
     measureFullCycle: () => Promise<BenchmarkResult>;
 };
 
+/**
+ * Create a directive element wrapper
+ *
+ * @example
+ * ```ts
+ * import { createDirectiveElement, vLazy } from 'directix'
+ *
+ * const LazyImage = createDirectiveElement('lazy-image', vLazy)
+ * customElements.define('lazy-image', LazyImage)
+ * ```
+ */
+export declare function createDirectiveElement(_name: string, directive: Directive, options?: Omit<CustomElementDirectiveOptions, 'name' | 'directive'>): CustomElementConstructor;
+
 /**
  * Create a directive from a template
  *
@@ -1264,8 +1294,9 @@ export declare function createUppercaser(first?: boolean): (text: string) => str
 export declare function createVue2Directive<T, B extends Element>(hooks: DirectiveHooks<T, B>): Record<string, any>;
 
 /**
- * Vue 3 directive adapter
- * @returns Vue 3 directive object with created/mounted/updated/unmounted hooks
+ * Create Vue 3 directive with optimizations
+ * Uses markRaw for DOM elements and shallowReactive for state
+ * @returns Vue 3 directive object
  */
 export declare function createVue3Directive<T, B extends Element>(hooks: DirectiveHooks<T, B>): Record<string, any>;
 
@@ -1311,6 +1342,22 @@ export declare interface CSPConfig {
     nonce?: string;
 }
 
+/**
+ * Options for creating a custom element directive
+ */
+export declare interface CustomElementDirectiveOptions {
+    /** The element name (must contain a hyphen) */
+    name: string;
+    /** The Vue directive to apply */
+    directive: Directive;
+    /** Default binding value */
+    defaultValue?: any;
+    /** Whether to use shadow DOM */
+    shadow?: boolean;
+    /** Shadow DOM mode */
+    shadowMode?: 'open' | 'closed';
+}
+
 declare interface CustomIntegration {
     enabled: boolean;
     pushMetrics: (metrics: Metric[]) => Promise<void>;
@@ -1418,6 +1465,23 @@ export declare interface DeferredTask {
  */
 export declare function deferTask(id: string, execute: () => void | Promise<void>, priority?: 'critical' | 'high' | 'medium' | 'low'): void;
 
+/**
+ * Define a custom element that wraps a Vue directive
+ *
+ * @example
+ * ```ts
+ * import { vClickOutside, defineCustomElementDirective } from 'directix'
+ *
+ * defineCustomElementDirective({
+ *   name: 'click-outside',
+ *   directive: vClickOutside,
+ * })
+ *
+ * // Now you can use: <click-outside></click-outside>
+ * ```
+ */
+export declare function defineCustomElementDirective(options: CustomElementDirectiveOptions): void;
+
 /**
  * Define a cross-version compatible directive
  * @param definition The directive definition
@@ -2833,6 +2897,11 @@ export declare const isBrowser: () => boolean;
  */
 export declare function isBrowserSupported(browserName: string, version: number): boolean;
 
+/**
+ * Check if an element is a custom element
+ */
+export declare function isCustomElement(el: Element): boolean;
+
 /**
  * Check if DevTools is available
  */
@@ -4013,6 +4082,21 @@ export declare function quickPrint(target: string | HTMLElement, options?: UsePr
  */
 export declare function recordHistogram(name: string, value: number, labels?: Record<string, string>): void;
 
+/**
+ * Register multiple directives as custom elements
+ *
+ * @example
+ * ```ts
+ * import { registerDirectiveElements, vLazy, vClickOutside } from 'directix'
+ *
+ * registerDirectiveElements({
+ *   'lazy-img': vLazy,
+ *   'click-outside': vClickOutside,
+ * })
+ * ```
+ */
+export declare function registerDirectiveElements(elements: Record<string, Directive>): void;
+
 /**
  * Register a polyfill
  */

package/dist/index.iife.js

@@ -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.
  */
@@ -58,8 +58,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.
  */
@@ -78,7 +78,7 @@ var __async = (__this, __arguments, generator) => {
       },
       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) {
@@ -86,9 +86,9 @@ var __async = (__this, __arguments, generator) => {
         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
           );
         }
@@ -101,7 +101,7 @@ var __async = (__this, __arguments, generator) => {
       },
       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) {
@@ -112,7 +112,7 @@ var __async = (__this, __arguments, generator) => {
     };
     return directive;
   }
-  function normalizeBinding$1(binding) {
+  function normalizeBinding$2(binding) {
     var _a2;
     return {
       value: binding.value,
@@ -129,20 +129,20 @@ var __async = (__this, __arguments, generator) => {
     }
   }
   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) {
@@ -152,14 +152,14 @@ var __async = (__this, __arguments, generator) => {
         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;
         }
       },
@@ -167,7 +167,7 @@ var __async = (__this, __arguments, generator) => {
       },
       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) {
@@ -176,9 +176,8 @@ var __async = (__this, __arguments, generator) => {
         delete el.__directix_state__;
       }
     };
-    return directive;
   }
-  function normalizeBindingVue3(binding) {
+  function normalizeBinding$1(binding) {
     var _a2;
     return {
       value: binding.value,
@@ -21952,6 +21951,121 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
       }
     };
   }
+  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: {
@@ -24066,6 +24180,7 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
   exports.addPassiveListener = addPassiveListener;
   exports.announce = announce;
   exports.applyAriaAttributes = applyAriaAttributes;
+  exports.applyDirectiveToCustomElement = applyDirectiveToCustomElement;
   exports.assert = assert;
   exports.assertPositive = assertPositive;
   exports.assertRange = assertRange;
@@ -24113,6 +24228,7 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
   exports.createDelayedClick = createDelayedClick;
   exports.createDeprecationWarning = createDeprecationWarning;
   exports.createDirectiveBenchmark = createDirectiveBenchmark;
+  exports.createDirectiveElement = createDirectiveElement;
   exports.createDirectiveTemplate = createDirectiveTemplate;
   exports.createEventDirective = createEventDirective;
   exports.createI18n = createI18n;
@@ -24137,6 +24253,7 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
   exports.deepMerge = deepMerge;
   exports.deferNonCriticalDirective = deferNonCriticalDirective;
   exports.deferTask = deferTask;
+  exports.defineCustomElementDirective = defineCustomElementDirective;
   exports.defineDirective = defineDirective;
   exports.defineDirectiveGroup = defineDirectiveGroup;
   exports.definePlugin = definePlugin;
@@ -24265,6 +24382,7 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
   exports.isBoolean = isBoolean;
   exports.isBrowser = isBrowser;
   exports.isBrowserSupported = isBrowserSupported;
+  exports.isCustomElement = isCustomElement;
   exports.isDOMReady = isDOMReady;
   exports.isDevtoolsAvailable = isDevtoolsAvailable;
   exports.isEmpty = isEmpty;
@@ -24314,6 +24432,7 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
   exports.preloadModule = preloadModule;
   exports.quickPrint = quickPrint;
   exports.recordHistogram = recordHistogram;
+  exports.registerDirectiveElements = registerDirectiveElements;
   exports.registerPolyfill = registerPolyfill;
   exports.removeHealthCheck = removeHealthCheck;
   exports.requestIdleCallback = requestIdleCallback;