@aria-ui/core - npm Package Compare versions

Comparing version 0.0.15 to 0.0.16

dist/index.d.ts

@@ -1,2 +0,2 @@
-import { HTMLElement as HTMLElement$1 } from 'server-dom-shim';
+import { HTMLElement } from 'server-dom-shim';
 import { batch as batch$1, untracked as untracked$1 } from '@preact/signals-core';
@@ -21,30 +21,2 @@ import { AriaAttributes } from '@dddstack/ariatype-aria-attributes';
 /**
- * Base class for all custom elements in Aria UI. It implements the
- * {@link ConnectableElement} interface.
- *
- * @group Elements
- */
-declare class BaseElement extends HTMLElement$1 implements ConnectableElement {
-    private _connectedCallbacks;
-    private _disconnectedCallback;
-    private _connected;
-    /**
-     * @hidden
-     */
-    connectedCallback(): void;
-    /**
-     * @hidden
-     */
-    disconnectedCallback(): void;
-    /**
-     * @hidden
-     */
-    adoptedCallback(): void;
-    /**
-     * @hidden
-     */
-    addConnectedCallback(callback: () => VoidFunction | void): void;
-}
-
-/**
  * A read-only signal that holds a reactive value.
@@ -226,10 +198,2 @@ */
 /**
- * Merges two objects, with the second object taking precedence. Only keys
- * present in the first object will be included in the result.
- *
- * @group Props and States
- */
-declare function assignProps<T extends object>(defaultProps: Readonly<T>, props?: Partial<T>): Readonly<T>;
-
-/**
  * A plain object containing signals.
@@ -256,7 +220,34 @@ *
 /**
- * A mixin for creating custom elements.
+ * Base class for all custom elements in Aria UI. It implements the
+ * {@link ConnectableElement} interface.
  *
+ * @group Elements
+ */
+declare class BaseElement extends HTMLElement implements ConnectableElement {
+    private _connectedCallbacks;
+    private _disconnectedCallback;
+    private _connected;
+    /**
+     * @hidden
+     */
+    connectedCallback(): void;
+    /**
+     * @hidden
+     */
+    disconnectedCallback(): void;
+    /**
+     * @hidden
+     */
+    adoptedCallback(): void;
+    /**
+     * @hidden
+     */
+    addConnectedCallback(callback: () => VoidFunction | void): void;
+}
+/**
+ * Create a custom element class.
+ *
  * @public
  */
-declare function ElementMixin<Props extends object>(useElement: (host: ConnectableElement, props?: Partial<Props>) => SignalState<Props>, defaultProps: Props): {
+declare function ElementBuilder<Props extends object>(useElement: (host: ConnectableElement, state: SignalState<Props>) => void, defaultProps: Props): {
     new (): BaseElement & Props;
@@ -266,2 +257,10 @@ prototype: HTMLElement;
 
-export { BaseElement, type ConnectableElement, type Context, ElementMixin, type ReadonlySignal, type Signal, type SignalState, type SignalValue, assignProps, batch, createComputed, createContext, createSignal, mapSignals, mapValues, untracked, useAnimationFrame, useAriaAttribute, useAriaRole, useAttribute, useEffect, useEventListener, useQuerySelector, useQuerySelectorAll, useStyle };
+/**
+ * Merges two objects, with the second object taking precedence. Only keys
+ * present in the first object will be included in the result.
+ *
+ * @group Props and States
+ */
+declare function assignProps<T extends object>(defaultProps: Readonly<T>, props?: Partial<T>): Readonly<T>;
+
+export { BaseElement, type ConnectableElement, type Context, ElementBuilder, type ReadonlySignal, type Signal, type SignalState, type SignalValue, assignProps, batch, createComputed, createContext, createSignal, mapSignals, mapValues, untracked, useAnimationFrame, useAriaAttribute, useAriaRole, useAttribute, useEffect, useEventListener, useQuerySelector, useQuerySelectorAll, useStyle };

dist/index.js

@@ -1,55 +0,3 @@
-// src/base-element.ts
-import { HTMLElement } from "server-dom-shim";
-var BaseElement = class extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    this._connectedCallbacks = [];
-    this._disconnectedCallback = [];
-    this._connected = false;
-  }
-  /**
-   * @hidden
-   */
-  connectedCallback() {
-    this._connected = true;
-    for (const callback of this._connectedCallbacks) {
-      const dispose = callback();
-      if (dispose) {
-        this._disconnectedCallback.push(dispose);
-      }
-    }
-  }
-  /**
-   * @hidden
-   */
-  disconnectedCallback() {
-    this._connected = false;
-    for (const callback of this._disconnectedCallback) {
-      callback();
-    }
-    this._disconnectedCallback = [];
-  }
-  /**
-   * @hidden
-   */
-  adoptedCallback() {
-    this.disconnectedCallback();
-    this.connectedCallback();
-  }
-  /**
-   * @hidden
-   */
-  addConnectedCallback(callback) {
-    this._connectedCallbacks.push(callback);
-    if (!this._connected) {
-      return;
-    }
-    const dispose = callback();
-    if (dispose) {
-      this._disconnectedCallback.push(dispose);
-    }
-  }
-};
-
 // src/context.ts
+import { getEventTarget } from "@zag-js/dom-query";
 var ContextRequestEvent = class extends Event {
@@ -71,3 +19,3 @@ constructor(key, callback) {
     element.addEventListener("aria-ui/context-request", (event) => {
-      if (element === event.target) {
+      if (element === getEventTarget(event)) {
         return;
@@ -290,2 +238,5 @@ }
 
+// src/element.ts
+import { HTMLElement } from "server-dom-shim";
+
 // src/types.ts
@@ -295,17 +246,2 @@ var getObjectEntries = Object.entries;
 
-// src/props.ts
-function assignProps(defaultProps, props) {
-  if (!props) {
-    return defaultProps;
-  }
-  const merged = { ...defaultProps };
-  for (const key of getObjectKeys(defaultProps)) {
-    const prop = props[key];
-    if (prop !== void 0) {
-      merged[key] = prop;
-    }
-  }
-  return merged;
-}
-
 // src/signal-state.ts
@@ -327,8 +263,59 @@ function mapValues(signals) {
 
-// src/element-mixin.ts
-function ElementMixin(useElement, defaultProps) {
+// src/element.ts
+var BaseElement = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this._connectedCallbacks = [];
+    this._disconnectedCallback = [];
+    this._connected = false;
+  }
+  /**
+   * @hidden
+   */
+  connectedCallback() {
+    this._connected = true;
+    for (const callback of this._connectedCallbacks) {
+      const dispose = callback();
+      if (dispose) {
+        this._disconnectedCallback.push(dispose);
+      }
+    }
+  }
+  /**
+   * @hidden
+   */
+  disconnectedCallback() {
+    this._connected = false;
+    for (const callback of this._disconnectedCallback) {
+      callback();
+    }
+    this._disconnectedCallback = [];
+  }
+  /**
+   * @hidden
+   */
+  adoptedCallback() {
+    this.disconnectedCallback();
+    this.connectedCallback();
+  }
+  /**
+   * @hidden
+   */
+  addConnectedCallback(callback) {
+    this._connectedCallbacks.push(callback);
+    if (!this._connected) {
+      return;
+    }
+    const dispose = callback();
+    if (dispose) {
+      this._disconnectedCallback.push(dispose);
+    }
+  }
+};
+function ElementBuilder(useElement, defaultProps) {
   class CustomElement extends BaseElement {
     constructor() {
       super();
-      this._s = useElement(this);
+      this._s = mapSignals(defaultProps);
+      useElement(this, this._s);
     }
@@ -343,6 +330,7 @@ }
       get() {
-        return this._s[prop].value;
+        return this._s[prop].get();
       },
       set(v) {
-        this._s[prop].value = v;
+        ;
+        this._s[prop].set(v);
       }
@@ -352,5 +340,20 @@ });
 }
+
+// src/props.ts
+function assignProps(defaultProps, props) {
+  if (!props) {
+    return defaultProps;
+  }
+  const merged = { ...defaultProps };
+  for (const key of getObjectKeys(defaultProps)) {
+    const prop = props[key];
+    if (prop !== void 0) {
+      merged[key] = prop;
+    }
+  }
+  return merged;
+}
 export {
   BaseElement,
-  ElementMixin,
+  ElementBuilder,
   assignProps,
@@ -357,0 +360,0 @@ batch,

package.json

 {
   "name": "@aria-ui/core",
   "type": "module",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "private": false,
@@ -15,2 +15,3 @@ "sideEffects": false,
     "@preact/signals-core": "^1.6.1",
+    "@zag-js/dom-query": "^0.58.0",
     "server-dom-shim": "^1.0.2"
@@ -20,3 +21,3 @@ },
     "tsup": "^8.1.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.2"
   },
@@ -23,0 +24,0 @@ "publishConfig": {

README.md

@@ -83,10 +83,7 @@ # @aria-ui/core
 
-### ElementMixin()
+### ElementBuilder()
 
 ```ts
-function ElementMixin<Props>(
-  useElement: (
-    host: ConnectableElement,
-    props?: Partial<Props>,
-  ) => SignalState<Props>,
+function ElementBuilder<Props>(
+  useElement: (host: ConnectableElement, state: SignalState<Props>) => void,
   defaultProps: Props,
@@ -96,3 +93,3 @@ ): () => BaseElement & Props;
 
-A mixin for creating custom elements.
+Create a custom element class.
 
@@ -99,0 +96,0 @@ ## Contexts

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26225

increased by0.29%

Lines of code

618

increased by0.49%

Worsened metrics

Dependency count

5

increased by25%

Number of downloads

3036

decreased by-9.67%

Number of lines in readme file

340

decreased by-0.87%

Dependency changes

• + Added@zag-js/dom-query@^0.58.0

• + Added@zag-js/dom-query@0.58.3(transitive)