directix 2.0.0 → 2.1.0

package/README.md

@@ -25,31 +25,57 @@ 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 Coming in v2.0.0 (Planned)
+## What's New in v2.1.0
 
-> **Note**: v2.0.0 is currently in development. The features below are planned and will be released soon.
+### Enhanced Web Components Support
 
-### Web Components Support
-
-Use Directix directives with Custom Elements / Web Components:
+v2.1.0 significantly enhances Web Components support with Shadow DOM, SSR safety, lifecycle hooks, and more:
 
 ```typescript
-import { vLazy, defineCustomElementDirective, registerDirectiveElements } from 'directix'
+import { 
+  vLazy, 
+  defineCustomElementDirective, 
+  createSSRSafeCustomElement,
+  hydrateCustomElements 
+} from 'directix'
 
-// Define a single custom element from directive
+// Define with lifecycle hooks and styles
 defineCustomElementDirective({
   name: 'lazy-img',
   directive: vLazy,
-  shadow: true
+  shadow: true,
+  styles: ':host { display: block; }',
+  lifecycle: {
+    onConnect: (el) => console.log('Connected', el),
+    onDisconnect: (el) => console.log('Disconnected', el),
+  },
 })
 
-// Register multiple directives as custom elements
-registerDirectiveElements({
-  'lazy-img': vLazy,
-  'click-outside': vClickOutside
+// 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:

package/dist/index.cjs

@@ -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.
@@ -79,7 +79,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.
@@ -22087,6 +22087,48 @@ function registerDirectiveElements(elements) {
     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: {
@@ -24260,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;
@@ -24380,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;
@@ -24390,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;
@@ -24404,6 +24449,7 @@ exports.isBoolean = isBoolean;
 exports.isBrowser = isBrowser;
 exports.isBrowserSupported = isBrowserSupported;
 exports.isCustomElement = isCustomElement;
+exports.isCustomElementDefined = isCustomElementDefined;
 exports.isDOMReady = isDOMReady;
 exports.isDevtoolsAvailable = isDevtoolsAvailable;
 exports.isEmpty = isEmpty;
@@ -24641,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;