directix 1.11.0 → 2.1.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
  *
@@ -1195,6 +1225,34 @@ export declare function createSafeDirectiveWrapper<T>(directiveName: string, ope
     validateBinding?: (binding: any) => boolean;
 }): (el: HTMLElement, binding: any, vnode: any) => Promise<T | undefined>;
 
+/**
+ * Create SSR-safe custom element with declarative shadow DOM support
+ *
+ * @param name - Element name
+ * @param directive - Vue directive
+ * @param options - Element options
+ * @returns SSR-safe custom element definition
+ *
+ * @example
+ * ```ts
+ * import { createSSRSafeCustomElement, vLazy } from 'directix'
+ *
+ * const LazyImage = createSSRSafeCustomElement('lazy-image', vLazy, {
+ *   shadow: true,
+ *   styles: ':host { display: block; }',
+ * })
+ *
+ * // SSR render
+ * const html = LazyImage.ssrRender({ src: 'image.jpg' })
+ *
+ * // Register in browser
+ * if (typeof window !== 'undefined') {
+ *   customElements.define('lazy-image', LazyImage.elementClass)
+ * }
+ * ```
+ */
+export declare function createSSRSafeCustomElement(name: string, directive: Directive, options?: Omit<CustomElementDirectiveOptions, 'name' | 'directive'>): SSRSafeCustomElement;
+
 /**
  * Create a style-based directive template
  *
@@ -1264,8 +1322,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 +1370,44 @@ 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';
+    /** CSS styles to inject into shadow DOM (v2.1.0) */
+    styles?: string | string[];
+    /** Attributes to observe for changes (v2.1.0) */
+    observedAttributes?: string[];
+    /** Lifecycle hooks (v2.1.0) */
+    lifecycle?: CustomElementLifecycleHooks;
+    /** Enable slot content projection (v2.1.0) */
+    slots?: boolean;
+}
+
+/**
+ * Lifecycle hooks for custom element
+ */
+export declare interface CustomElementLifecycleHooks {
+    /** Called when element is connected to DOM */
+    onConnect?: (el: HTMLElement) => void;
+    /** Called when element is disconnected from DOM */
+    onDisconnect?: (el: HTMLElement) => void;
+    /** Called when element is adopted to a new document */
+    onAdopt?: (el: HTMLElement) => void;
+    /** Called when an attribute changes */
+    onAttributeChange?: (el: HTMLElement, name: string, oldValue: string | null, newValue: string | null) => void;
+}
+
 declare interface CustomIntegration {
     enabled: boolean;
     pushMetrics: (metrics: Metric[]) => Promise<void>;
@@ -1418,6 +1515,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
@@ -2630,6 +2744,21 @@ export declare function getPolyfillStatus(): Record<string, {
     required: boolean;
 }>;
 
+/**
+ * Get all registered custom element names
+ *
+ * @returns Array of custom element names
+ *
+ * @example
+ * ```ts
+ * import { getRegisteredCustomElements } from 'directix'
+ *
+ * const elements = getRegisteredCustomElements()
+ * console.log('Registered:', elements)
+ * ```
+ */
+export declare function getRegisteredCustomElements(): string[];
+
 /**
  * Get slowest directives
  */
@@ -2730,6 +2859,24 @@ export declare interface HotkeyDefinition {
     disabled?: boolean | Ref<boolean>;
 }
 
+/**
+ * Hydrate custom elements on the client (SSR support)
+ *
+ * @param root - Root element to hydrate
+ *
+ * @example
+ * ```ts
+ * import { hydrateCustomElements, registerDirectiveElements } from 'directix'
+ *
+ * // Register directives first
+ * registerDirectiveElements({ 'lazy-img': vLazy })
+ *
+ * // Then hydrate
+ * hydrateCustomElements(document.body)
+ * ```
+ */
+export declare function hydrateCustomElements(root?: Element): void;
+
 /**
  * i18n instance type
  */
@@ -2833,6 +2980,28 @@ 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 custom element is defined
+ *
+ * @param name - Element name
+ * @returns True if element is defined
+ *
+ * @example
+ * ```ts
+ * import { isCustomElementDefined } from 'directix'
+ *
+ * if (!isCustomElementDefined('lazy-img')) {
+ *   customElements.define('lazy-img', LazyImage)
+ * }
+ * ```
+ */
+export declare function isCustomElementDefined(name: string): boolean;
+
 /**
  * Check if DevTools is available
  */
@@ -4013,6 +4182,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
  */
@@ -4318,6 +4502,14 @@ export declare function setWarningLevel(level: LogLevel): void;
  */
 export declare type SkeletonAnimation = 'wave' | 'pulse' | 'none';
 
+/**
+ * SSR-safe custom element result (v2.1.0)
+ */
+export declare interface SSRSafeCustomElement {
+    elementClass: CustomElementConstructor;
+    ssrRender: (attrs?: Record<string, string>) => string;
+}
+
 /**
  * Start a performance measurement
  */
@@ -10445,6 +10637,22 @@ export declare class WeakCache<K extends object, V> {
     size(): number;
 }
 
+/**
+ * Wait for custom element to be defined
+ *
+ * @param name - Element name
+ * @returns Promise that resolves when element is defined
+ *
+ * @example
+ * ```ts
+ * import { whenCustomElementDefined } from 'directix'
+ *
+ * await whenCustomElementDefined('lazy-img')
+ * // Element is now ready to use
+ * ```
+ */
+export declare function whenCustomElementDefined(name: string): Promise<void>;
+
 /**
  * Measure and log performance
  */

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.1.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.1.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,163 @@ ${(_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);
+    });
+  }
+  function isCustomElementDefined(name) {
+    return customElements.get(name) !== void 0;
+  }
+  function whenCustomElementDefined(name) {
+    return __async(this, null, function* () {
+      yield customElements.whenDefined(name);
+    });
+  }
+  function getRegisteredCustomElements() {
+    const registry = customElements.__registry;
+    if (registry && typeof registry.keys === "function") {
+      return Array.from(registry.keys());
+    }
+    return [];
+  }
+  function hydrateCustomElements(root = document.body) {
+    const customElementsList = root.querySelectorAll("*");
+    customElementsList.forEach((el) => {
+      var _a2;
+      if (isCustomElement(el)) {
+        const clone = el.cloneNode(true);
+        (_a2 = el.parentNode) == null ? void 0 : _a2.replaceChild(clone, el);
+      }
+    });
+  }
+  function createSSRSafeCustomElement(name, directive, options) {
+    const { styles, shadow = false } = options || {};
+    const ssrRender = (attrs = {}) => {
+      const attrString = Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
+      if (shadow) {
+        const stylesString = styles ? `<style>${Array.isArray(styles) ? styles.join("") : styles}</style>` : "";
+        return `<${name} ${attrString}><template shadowroot="open">${stylesString}<slot></slot></template></${name}>`;
+      }
+      return `<${name} ${attrString}></${name}>`;
+    };
+    const elementClass = typeof window === "undefined" ? class extends HTMLElement {
+    } : createDirectiveElement(name, directive, options);
+    return {
+      elementClass,
+      ssrRender
+    };
+  }
   const zhCN = {
     directives: {
       debounce: {
@@ -24066,6 +24222,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 +24270,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;
@@ -24123,6 +24281,7 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
   exports.createPerformanceBudget = createPerformanceBudget;
   exports.createPermissionCheck = createPermissionCheck;
   exports.createPermissionChecker = createPermissionChecker;
+  exports.createSSRSafeCustomElement = createSSRSafeCustomElement;
   exports.createSafeContentHandler = createSafeContentHandler;
   exports.createSafeDirectiveWrapper = createSafeDirectiveWrapper;
   exports.createStyleDirective = createStyleDirective;
@@ -24137,6 +24296,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;
@@ -24242,6 +24402,7 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
   exports.getPluginManager = getPluginManager;
   exports.getPluginRegistry = getPluginRegistry;
   exports.getPolyfillStatus = getPolyfillStatus;
+  exports.getRegisteredCustomElements = getRegisteredCustomElements;
   exports.getSlowestDirectives = getSlowestDirectives;
   exports.getSupportedRegions = getSupportedRegions;
   exports.getTimezoneInfo = getTimezoneInfo;
@@ -24252,6 +24413,7 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
   exports.handleTouchConflict = handleTouchConflict;
   exports.hasPermission = hasPermission$2;
   exports.hasPermissionSync = hasPermissionSync;
+  exports.hydrateCustomElements = hydrateCustomElements;
   exports.importConfig = importConfig;
   exports.incrementCounter = incrementCounter;
   exports.info = info;
@@ -24265,6 +24427,8 @@ ${(_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.isCustomElementDefined = isCustomElementDefined;
   exports.isDOMReady = isDOMReady;
   exports.isDevtoolsAvailable = isDevtoolsAvailable;
   exports.isEmpty = isEmpty;
@@ -24314,6 +24478,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;
@@ -24501,6 +24666,7 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
   exports.warnUnsupportedFeatures = warnUnsupportedFeatures;
   exports.watchConfig = watchConfig;
   exports.watchEffectBinding = watchEffectBinding;
+  exports.whenCustomElementDefined = whenCustomElementDefined;
   exports.withAuditLog = withAuditLog;
   exports.withErrorRecovery = withErrorRecovery;
   exports.withPerformanceMonitoring = withPerformanceMonitoring;