directix 1.11.0 → 2.1.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,65 @@ 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 New in v2.1.0
 
-### Vue 3 Optimization Preview
+### Enhanced Web Components Support
 
-Vue 3-specific optimizations leveraging the reactive system for better performance.
+v2.1.0 significantly enhances Web Components support with Shadow DOM, SSR safety, lifecycle hooks, and more:
+
+```typescript
+import { 
+  vLazy, 
+  defineCustomElementDirective, 
+  createSSRSafeCustomElement,
+  hydrateCustomElements 
+} from 'directix'
+
+// Define with lifecycle hooks and styles
+defineCustomElementDirective({
+  name: 'lazy-img',
+  directive: vLazy,
+  shadow: true,
+  styles: ':host { display: block; }',
+  lifecycle: {
+    onConnect: (el) => console.log('Connected', el),
+    onDisconnect: (el) => console.log('Disconnected', el),
+  },
+})
+
+// SSR-safe custom elements
+const LazyImage = createSSRSafeCustomElement('lazy-img', vLazy, {
+  shadow: true,
+  styles: ':host { display: block; }',
+})
+
+// SSR render
+const html = LazyImage.ssrRender({ src: 'image.jpg' })
+
+// Client hydration
+hydrateCustomElements(document.body)
+```
+
+### New Web Components APIs
+
+| API | Description |
+|-----|-------------|
+| `CustomElementLifecycleHooks` | Lifecycle hooks interface (onConnect, onDisconnect, onAdopt, onAttributeChange) |
+| `SSRSafeCustomElement` | SSR-safe custom element type |
+| `isCustomElementDefined(name)` | Check if a custom element is already defined |
+| `whenCustomElementDefined(name)` | Async wait for custom element definition |
+| `getRegisteredCustomElements()` | Get all registered custom element names |
+| `hydrateCustomElements(root)` | Hydrate custom elements on client (SSR support) |
+| `createSSRSafeCustomElement()` | Create SSR-safe custom elements with declarative Shadow DOM |
+
+### 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 +97,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.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.
  */
@@ -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.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.
  */
@@ -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,163 @@ 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);
+  });
+}
+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: {
@@ -24087,6 +24243,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 +24291,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;
@@ -24144,6 +24302,7 @@ exports.createNumberFormatter = createNumberFormatter;
 exports.createPerformanceBudget = createPerformanceBudget;
 exports.createPermissionCheck = createPermissionCheck;
 exports.createPermissionChecker = createPermissionChecker;
+exports.createSSRSafeCustomElement = createSSRSafeCustomElement;
 exports.createSafeContentHandler = createSafeContentHandler;
 exports.createSafeDirectiveWrapper = createSafeDirectiveWrapper;
 exports.createStyleDirective = createStyleDirective;
@@ -24158,6 +24317,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;
@@ -24263,6 +24423,7 @@ exports.getPermissionManager = getPermissionManager;
 exports.getPluginManager = getPluginManager;
 exports.getPluginRegistry = getPluginRegistry;
 exports.getPolyfillStatus = getPolyfillStatus;
+exports.getRegisteredCustomElements = getRegisteredCustomElements;
 exports.getSlowestDirectives = getSlowestDirectives;
 exports.getSupportedRegions = getSupportedRegions;
 exports.getTimezoneInfo = getTimezoneInfo;
@@ -24273,6 +24434,7 @@ exports.handleSSRUnsupported = handleSSRUnsupported;
 exports.handleTouchConflict = handleTouchConflict;
 exports.hasPermission = hasPermission$2;
 exports.hasPermissionSync = hasPermissionSync;
+exports.hydrateCustomElements = hydrateCustomElements;
 exports.importConfig = importConfig;
 exports.incrementCounter = incrementCounter;
 exports.info = info;
@@ -24286,6 +24448,8 @@ exports.isArray = isArray;
 exports.isBoolean = isBoolean;
 exports.isBrowser = isBrowser;
 exports.isBrowserSupported = isBrowserSupported;
+exports.isCustomElement = isCustomElement;
+exports.isCustomElementDefined = isCustomElementDefined;
 exports.isDOMReady = isDOMReady;
 exports.isDevtoolsAvailable = isDevtoolsAvailable;
 exports.isEmpty = isEmpty;
@@ -24335,6 +24499,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;
@@ -24522,6 +24687,7 @@ exports.warnUnsupportedFeatureOnce = warnUnsupportedFeatureOnce;
 exports.warnUnsupportedFeatures = warnUnsupportedFeatures;
 exports.watchConfig = watchConfig;
 exports.watchEffectBinding = watchEffectBinding;
+exports.whenCustomElementDefined = whenCustomElementDefined;
 exports.withAuditLog = withAuditLog;
 exports.withErrorRecovery = withErrorRecovery;
 exports.withPerformanceMonitoring = withPerformanceMonitoring;