directix 2.0.0 → 2.1.0

package/dist/index.d.ts

@@ -1225,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
  *
@@ -1356,6 +1384,28 @@ export declare interface CustomElementDirectiveOptions {
     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 {
@@ -2694,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
  */
@@ -2794,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
  */
@@ -2902,6 +2985,23 @@ export declare function isBrowserSupported(browserName: string, version: number)
  */
 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
  */
@@ -4402,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
  */
@@ -10529,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,5 +1,5 @@
 /*!
- * directix v2.0.0
+ * 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,7 +58,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 /*!
- * directix v2.0.0
+ * 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.
@@ -22066,6 +22066,48 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
       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: {
@@ -24239,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;
@@ -24359,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;
@@ -24369,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;
@@ -24383,6 +24428,7 @@ ${(_a2 = new Error("Stack trace").stack) == null ? void 0 : _a2.split("\n").slic
   exports.isBrowser = isBrowser;
   exports.isBrowserSupported = isBrowserSupported;
   exports.isCustomElement = isCustomElement;
+  exports.isCustomElementDefined = isCustomElementDefined;
   exports.isDOMReady = isDOMReady;
   exports.isDevtoolsAvailable = isDevtoolsAvailable;
   exports.isEmpty = isEmpty;
@@ -24620,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;