elements-kit 0.0.1 → 0.0.2

package/dist/slot.d.mts

@@ -0,0 +1,74 @@
+import "./polyfill-Bvo2e52W.mjs";
+import { ElementBuilder } from "./builder/index.mjs";
+
+//#region src/slot.d.ts
+/**
+ * A lightweight slot that reserves a region in the DOM using comment markers.
+ * Content between the markers can be replaced dynamically without wrapper elements.
+ */
+declare class Slot {
+  private readonly start;
+  private readonly end;
+  /**
+   * Render the slot as a DocumentFragment.
+   * If not yet mounted, inserts the comment markers and optional default content.
+   * If already mounted, extracts and returns the current content.
+   */
+  slot(defaultContent?: string | Node | ElementBuilder): DocumentFragment;
+  /**
+   * Replace the slot's content with the given element.
+   * No-op if the slot is not mounted or the content is identical.
+   */
+  set(element: Node): void;
+  get(): DocumentFragment | null;
+  /** Returns the parent node if the slot is mounted, otherwise `null`. */
+  parent(): ParentNode;
+  /** Whether the slot's comment markers are attached to the DOM. */
+  isMounted(): boolean;
+  private isSame;
+  /**
+   * Create a callable slot instance.
+   *
+   * The returned value is both a function and an object:
+   * - Call it to render the slot with optional default content.
+   * - Access `.set()`, `.parent()`, `.isMounted()` for slot management.
+   *
+   * @example
+   * ```ts
+   * const slot = createSlot();
+   * el.append(slot("default text"));  // mount with default
+   * slot.set(newElement);              // replace content
+   * ```
+   */
+  static new(): Slot & ((defaultContent?: string | Node | ElementBuilder) => DocumentFragment);
+}
+type SlotInstance = ReturnType<typeof Slot.new>;
+/** A callable slot — invoke to render, or access `.set()` / `.isMounted()` / `.parent()` for management. */
+/**
+ * Symbol key for attaching a `Slots` instance to a custom element instance.
+ * This prevent collisions with Element properties and are not meant to be treated as JSX children.
+ */
+declare const $slots: unique symbol;
+declare const $map: unique symbol;
+declare const $keys: unique symbol;
+declare const $has: unique symbol;
+/**
+ * A keyed collection of slot instances.
+ * Slots are pre-created from the provided keys and lazily created on first access for unknown keys.
+ */
+declare class Slots<K extends string> implements Iterable<[K, SlotInstance]> {
+  readonly [$map]: Map<K, Slot & ((defaultContent?: string | Node | ElementBuilder) => DocumentFragment)>;
+  private constructor();
+  [Symbol.iterator](): MapIterator<[K, Slot & ((defaultContent?: string | Node | ElementBuilder) => DocumentFragment)]>;
+  [Symbol.toStringTag](): string;
+  [Symbol.hasInstance](instance: unknown): instance is Slots<any>;
+  [$has](key: K): boolean;
+  /** Check whether a slot with the given key exists. */
+  static has<K extends string>(slots: Slots<K>, key: K): boolean;
+  [$keys](): MapIterator<K>;
+  /** Iterate over all registered slot keys. */
+  static keys<K extends string>(slots: Slots<K>): MapIterator<K>;
+  static new<K extends string>(keys: K[]): Slots<K> & { readonly [P in K]: SlotInstance };
+}
+//#endregion
+export { $slots, Slot, SlotInstance, Slots };

package/dist/slot.mjs

@@ -0,0 +1,143 @@
+//#region src/slot.ts
+/**
+* A lightweight slot that reserves a region in the DOM using comment markers.
+* Content between the markers can be replaced dynamically without wrapper elements.
+*/
+var Slot = class Slot {
+	start = document.createComment("{");
+	end = document.createComment("}");
+	/**
+	* Render the slot as a DocumentFragment.
+	* If not yet mounted, inserts the comment markers and optional default content.
+	* If already mounted, extracts and returns the current content.
+	*/
+	slot(defaultContent) {
+		const fragment = document.createDocumentFragment();
+		if (this.isMounted()) {
+			const range = document.createRange();
+			range.setStartAfter(this.start);
+			range.setEndBefore(this.end);
+			fragment.appendChild(range.extractContents());
+			return fragment;
+		}
+		fragment.appendChild(this.start);
+		fragment.appendChild(this.end);
+		if (defaultContent) {
+			const defaultNode = typeof defaultContent === "string" ? document.createTextNode(defaultContent) : defaultContent instanceof Node ? defaultContent : defaultContent.ref();
+			fragment.insertBefore(defaultNode, this.end);
+		}
+		return fragment;
+	}
+	/**
+	* Replace the slot's content with the given element.
+	* No-op if the slot is not mounted or the content is identical.
+	*/
+	set(element) {
+		const parent = this.parent();
+		if (!parent) return;
+		if (this.isSame(element)) return;
+		const range = document.createRange();
+		range.setStartAfter(this.start);
+		range.setEndBefore(this.end);
+		range.deleteContents();
+		parent.insertBefore(element, this.end);
+	}
+	get() {
+		if (!this.isMounted()) return null;
+		const range = document.createRange();
+		range.setStartAfter(this.start);
+		range.setEndBefore(this.end);
+		return range.extractContents();
+	}
+	/** Returns the parent node if the slot is mounted, otherwise `null`. */
+	parent() {
+		return this.isMounted() ? this.start.parentNode : null;
+	}
+	/** Whether the slot's comment markers are attached to the DOM. */
+	isMounted() {
+		return this.start.parentNode === this.end.parentNode && !!this.start.parentNode;
+	}
+	isSame(element) {
+		return this.start.nextSibling === element && this.end === element.nextSibling;
+	}
+	/**
+	* Create a callable slot instance.
+	*
+	* The returned value is both a function and an object:
+	* - Call it to render the slot with optional default content.
+	* - Access `.set()`, `.parent()`, `.isMounted()` for slot management.
+	*
+	* @example
+	* ```ts
+	* const slot = createSlot();
+	* el.append(slot("default text"));  // mount with default
+	* slot.set(newElement);              // replace content
+	* ```
+	*/
+	static new() {
+		const instance = new Slot();
+		return new Proxy(instance.slot.bind(instance), {
+			apply(target, _thisArg, argArray) {
+				return target(...argArray);
+			},
+			get(_target, prop) {
+				return instance[prop];
+			},
+			getPrototypeOf() {
+				return Slot.prototype;
+			}
+		});
+	}
+};
+/** A callable slot — invoke to render, or access `.set()` / `.isMounted()` / `.parent()` for management. */
+/**
+* Symbol key for attaching a `Slots` instance to a custom element instance.
+* This prevent collisions with Element properties and are not meant to be treated as JSX children.
+*/
+const $slots = Symbol("slots");
+const $map = Symbol("map");
+const $keys = Symbol("keys");
+const $has = Symbol("has");
+/**
+* A keyed collection of slot instances.
+* Slots are pre-created from the provided keys and lazily created on first access for unknown keys.
+*/
+var Slots = class Slots {
+	[$map] = /* @__PURE__ */ new Map();
+	constructor(keys = []) {
+		for (const key of keys) this[$map].set(key, Slot.new());
+	}
+	[Symbol.iterator]() {
+		return this[$map][Symbol.iterator]();
+	}
+	[Symbol.toStringTag]() {
+		return "Slots";
+	}
+	[Symbol.hasInstance](instance) {
+		return instance instanceof Slots;
+	}
+	[$has](key) {
+		return this[$map].has(key);
+	}
+	/** Check whether a slot with the given key exists. */
+	static has(slots, key) {
+		return slots[$has](key);
+	}
+	[$keys]() {
+		return this[$map].keys();
+	}
+	/** Iterate over all registered slot keys. */
+	static keys(slots) {
+		return slots[$keys]();
+	}
+	static new(keys) {
+		const instance = new Slots(keys);
+		return new Proxy(instance, { get(target, prop, receiver) {
+			if (typeof prop === "string" && target[$map].has(prop)) return target[$map].get(prop);
+			return Reflect.get(target, prop, receiver);
+		} });
+	}
+};
+
+//#endregion
+export { $slots, Slot, Slots };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",
@@ -17,35 +17,61 @@
   ],
   "author": "@waelbettayeb",
   "license": "MIT",
-  "main": "./dist/core.js",
-  "types": "./dist/core.d.ts",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "import": "./dist/core.js",
-      "types": "./dist/core.d.ts"
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
     },
     "./signals": {
-      "import": "./dist/signals.js",
+      "import": "./dist/signals.mjs",
       "types": "./dist/signals.d.ts"
     },
+    "./slot": {
+      "import": "./dist/slot.mjs",
+      "types": "./dist/slot.d.ts"
+    },
+    "./attributes": {
+      "import": "./dist/attributes.mjs",
+      "types": "./dist/attributes.d.ts"
+    },
     "./builder": {
-      "import": "./dist/builder.js",
-      "types": "./dist/builder.d.ts"
+      "import": "./dist/builder/index.mjs",
+      "types": "./dist/builder/index.d.ts"
+    },
+    "./builder/dom": {
+      "import": "./dist/builder/dom.mjs",
+      "types": "./dist/builder/dom.d.ts"
+    },
+    "./jsx-runtime": {
+      "import": "./dist/jsx-runtime/index.mjs",
+      "types": "./dist/jsx-runtime/index.d.ts"
+    },
+    "./jsx-dev-runtime": {
+      "import": "./dist/jsx-runtime/index.mjs",
+      "types": "./dist/jsx-runtime/index.d.ts"
     }
   },
   "scripts": {
-    "demo": "pnpx vite ./demo",
-    "build": "tsdown"
+    "demo": "pnpx vite ./demo -c demo/vite.config.ts",
+    "build": "tsdown",
+    "watch": "tsdown -w",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
-  "packageManager": "pnpm@10.26.2",
+  "packageManager": "pnpm@10.33.0",
   "devDependencies": {
-    "tsdown": "0.18.4",
-    "typescript": "^5.9.3"
+    "happy-dom": "^20.8.9",
+    "tsdown": "0.21.7",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2"
   },
   "dependencies": {
-    "alien-signals": "^3.1.2"
+    "alien-signals": "^3.1.2",
+    "dom-expressions": "^0.40.6"
   }
 }