@ailuracode/alpine-child 0.1.0 → 2.0.0

package/README.md

@@ -5,24 +5,24 @@ Alpine.js directive for **asChild-style** composition: transfer attributes, clas
 ## Install
 
 ```bash
-npm install @ailuracode/alpine-child @alpinejs/morph alpinejs
+pnpm add @ailuracode/alpine-child @ailuracode/alpine-core @alpinejs/morph alpinejs
 ```
 
-## Setup
+## Quick start
 
-```js
+```ts
 import Alpine from "alpinejs";
 import morph from "@alpinejs/morph";
-import child from "@ailuracode/alpine-child";
+import { childPlugin } from "@ailuracode/alpine-child";
 
 Alpine.plugin(morph);
-Alpine.plugin(child);
+Alpine.plugin(childPlugin());
 Alpine.start();
 ```
 
 Unwrapping uses [`Alpine.morph()`](https://alpinejs.dev/plugins/morph) — register Morph before `x-child`.
 
-## Usage
+## Quick start
 
 ```html
 <span
@@ -89,7 +89,7 @@ Programmatic listeners attached to the wrapper at runtime are **not** transferre
 
 ## Blade components
 
-```blade
+```html
 {{-- resources/views/components/button.blade.php --}}
 <span
     x-child
@@ -99,7 +99,7 @@ Programmatic listeners attached to the wrapper at runtime are **not** transferre
 </span>
 ```
 
-```blade
+```html
 <x-button>
     <a href="{{ route('docs') }}">Docs</a>
 </x-button>
@@ -126,6 +126,16 @@ This package registers a single directive:
 
 No stores or magics are added.
 
+### Avoiding name collisions
+
+If your application already owns an `x-child` directive — or another toolkit plugin registers on that name — rename the integration surface without touching the unwrap pass:
+
+```ts
+Alpine.plugin(childPlugin({ directiveKey: "unwrap" })); // → x-unwrap
+```
+
+The exposed constant `DEFAULT_CHILD_DIRECTIVE_KEY` keeps the rename discoverable from TypeScript.
+
 ## License
 
 MIT

package/dist/global.d.ts

@@ -1,9 +1,31 @@
-/// <reference types="@types/alpinejs" />
+/**
+ * Ambient type surface for `@ailuracode/alpine-child`.
+ *
+ * Re-exports the public type surface so consumers can include this
+ * file via the triple-slash directive and typecheck `x-child`
+ * references without pulling the runtime entrypoint.
+ *
+ * Per core's `global.d.ts` convention, this package does NOT augment
+ * external modules — the `x-child` directive is identified by its
+ * attribute name, not by an `Alpine.*` namespace entry. Consumers that
+ * need typed access to the unwrap machinery should import the types
+ * from `@ailuracode/alpine-child` directly:
+ *
+ * ```ts
+ * import type {
+ *   ChildDirectiveConfig,
+ *   ChildMergeMode,
+ *   ChildPluginOptions,
+ * } from "@ailuracode/alpine-child";
+ * ```
+ */
 
-export type ChildMergeMode = "default" | "merge" | "replace";
+/// <reference types="@types/alpinejs" />
 
-declare global {
-  namespace Alpine {
-    // Directive-only plugin — no magics or stores.
-  }
-}
+export type {
+  ChildDirectiveConfig,
+  ChildMergeMode,
+  ChildMorphOptions,
+  ChildPluginCallback,
+  ChildPluginOptions,
+} from "./types.js";

package/dist/index.d.ts

@@ -1,20 +1,170 @@
-import AlpineType from 'alpinejs';
+import { Alpine, PluginCallback } from '@ailuracode/alpine-core';
+import { Alpine as Alpine$1 } from 'alpinejs';
 
+/**
+ * Public type contracts for `@ailuracode/alpine-child`.
+ *
+ * Per `.cursor/rules/formatting.mdc`, every public type
+ * lives in a `types.ts` module so consumers can import them without pulling
+ * the implementation. The shape IS the contract — renaming a field or
+ * changing a variant is a breaking change.
+ *
+ * The directive is intentionally minimal: one merge mode per element,
+ * no events, no state. The types here document the entire public surface
+ * besides the runtime functions in `./controller` and the Alpine glue
+ * in `./plugin`.
+ */
+
+/**
+ * How wrapper attributes interact with the first element child during the
+ * unwrap pass.
+ *
+ * - `'default'` — `class` and `style` merge token/property lists with
+ *   child tokens winning on conflict; other attributes copy only when
+ *   missing on the child. Existing child `id`, `aria-*`, and `data-*`
+ *   attributes always win.
+ * - `'merge'` — explicit alias for `'default'`. Surfaced via the
+ *   `.merge` modifier; reserved as a distinct variant so future
+ *   semantics (e.g. deep attribute merging) can branch on it without
+ *   breaking the modifier contract.
+ * - `'replace'` — wrapper values overwrite child values on conflict.
+ *   `class` and `style` still merge token/property lists.
+ */
 type ChildMergeMode = "default" | "merge" | "replace";
+/**
+ * Parsed `x-child` directive configuration extracted from the wrapper's
+ * attributes. Produced by `parseChildDirective` in `./controller`.
+ */
+interface ChildDirectiveConfig {
+    readonly mode: ChildMergeMode;
+}
+/**
+ * Options accepted by {@link childPlugin}. The directive currently has
+ * no runtime knobs beyond what the modifiers express, so the options
+ * surface is empty by design — reserved as the public seam for future
+ * cross-cutting configuration (e.g. warning sinks, scoped mutation
+ * observers, debug logging).
+ */
+interface ChildPluginOptions {
+    readonly id?: string;
+    /**
+     * `x-child` directive key the Alpine plugin registers under. Defaults
+     * to {@link DEFAULT_CHILD_DIRECTIVE_KEY}. Set when the host already
+     * owns a `child` directive or another toolkit plugin would collide
+     * on that name — the rename avoids the collision without touching
+     * the unwrap pass or attribute transfer helpers.
+     */
+    readonly directiveKey?: string;
+}
+/** Default `x-child` directive key registered by {@link childPlugin}. */
+declare const DEFAULT_CHILD_DIRECTIVE_KEY = "child";
+/**
+ * Typed view of `Alpine` the child plugin uses internally.
+ *
+ * Adds the `morph(el, html, options)` helper from `@alpinejs/morph` on
+ * top of the toolkit's {@link Alpine} generic. The morph function is
+ * only present when consumers register `Alpine.plugin(morph)` before
+ * `childPlugin(...)`; the plugin runtime-checks its presence and warns
+ * otherwise. The toolkit's `Alpine<Stores>` only ADDS overloads, so a
+ * real `Alpine` runtime is assignable to this view without a cast.
+ */
+type ChildAlpine = Alpine<Record<string, never>> & {
+    /**
+     * Forwarded from `@alpinejs/morph`. The plugin reads this property at
+     * runtime and falls back with a warning when it is absent.
+     */
+    morph?(el: Element, newHtml: string | Element, options?: ChildMorphOptions): Element;
+};
+/** Subset of `Alpine.morph` options the plugin reads. */
+interface ChildMorphOptions {
+    readonly added?: (node: Node) => void;
+}
+/**
+ * `Alpine.plugin()` callback signature.
+ *
+ * Typed against the base `Alpine` via the toolkit's `PluginCallback`
+ * generic so `childPlugin(...)` drops straight into `Alpine.plugin(...)`
+ * without a cast.
+ */
+type ChildPluginCallback = PluginCallback<Alpine$1>;
+
+/**
+ * Internal merge helpers for `@ailuracode/alpine-child`.
+ *
+ * Pure DOM utilities used by `controller.ts` to apply the wrapper → child
+ * attribute transfer. Lives under `internal/` so the public surface stays
+ * small — every helper here is consumed by the controller facade.
+ *
+ * Construction rules (per
+ * `.cursor/rules/new-package.mdc`):
+ *
+ * - No `window` / `document` access — these run on whatever `Element`
+ *   instances the controller hands them.
+ * - No Alpine APIs, no scope reads, no event subscriptions.
+ *
+ * The merge rules are documented in the package README under
+ * "Attribute rules" — keep this file in sync when the public rules
+ * change.
+ */
+
 /** Returns the first element child, skipping text and comment nodes. */
 declare function findFirstElementChild(parent: Element): Element | null;
 /** Counts element children (excluding text/comment nodes). */
 declare function countElementChildren(parent: Element): number;
-/** Parses `x-child` directive modifiers from element attributes. */
-declare function parseChildDirective(el: Element): {
-    mode: ChildMergeMode;
-} | null;
-/** Transfers wrapper attributes onto the first element child. */
-declare function transferAttributes(wrapper: Element, child: Element, mode?: ChildMergeMode): void;
-/** Removes transferable attributes from the wrapper after unwrapping. */
+/**
+ * Parses `x-child` directive modifiers from element attributes.
+ *
+ * Returns `null` when the directive is absent, so the plugin can skip
+ * elements without `x-child` quickly without extra branching. Returns a
+ * config with `mode: 'default'` when the attribute is present without
+ * any modifier.
+ */
+declare function parseChildDirective(el: Element): ChildDirectiveConfig | null;
+/**
+ * Applies the wrapper attributes onto the child following the active
+ * {@link ChildMergeMode}.
+ *
+ * Public from the controller's perspective — `internal/` re-export
+ * is internal-by-convention, not strict.
+ */
+declare function transferAttributes(wrapper: Element, child: Element, mode: ChildMergeMode): void;
+/**
+ * Removes every attribute from the wrapper.
+ *
+ * After `Alpine.morph()` swaps the wrapper out of the document, this
+ * is mostly defensive — the wrapper is already detached. Kept exported
+ * so tests can verify the scrub step in isolation, and so consumers
+ * that wire `x-child` into a custom Alpine adapter can run the same
+ * cleanup themselves.
+ */
 declare function clearTransferredAttributes(wrapper: Element): void;
 
-/** Alpine.js plugin. Registers the `x-child` directive (asChild-style unwrapping). */
-declare function childPlugin(Alpine: AlpineType.Alpine): void;
+/**
+ * Alpine.js integration for `@ailuracode/alpine-child`.
+ *
+ * Thin adapter that registers the `x-child` directive. The unwrap pass
+ * runs in `Alpine.interceptInit` so the wrapper is hidden before its
+ * own descendants init, and the morph swap is deferred to the next
+ * tick so sibling components (e.g. `x-show` on a sidebar) init first.
+ *
+ * Two ways to consume the package:
+ *
+ * 1. Standalone — import any of the helpers in `./controller` directly
+ *    for tests, custom directives, or non-Alpine adapters.
+ * 2. Alpine — `childPlugin({ id? })` returns the `Alpine.plugin()`
+ *    callback that registers the directive.
+ *
+ * The framework-agnostic logic lives in `./controller` and
+ * `./internal/transfer`. This file is the only place that imports
+ * Alpine APIs.
+ */
+
+/**
+ * Plugin factory — returns the `Alpine.plugin()` callback. Pass
+ * {@link ChildPluginOptions} to configure future cross-cutting knobs,
+ * or `{}` for the package defaults. See `AGENTS.md` for the
+ * integration contract.
+ */
+declare function childPlugin(options?: ChildPluginOptions): ChildPluginCallback;
 
-export { type ChildMergeMode, clearTransferredAttributes, countElementChildren, childPlugin as default, findFirstElementChild, parseChildDirective, transferAttributes };
+export { type ChildAlpine, type ChildDirectiveConfig, type ChildMergeMode, type ChildMorphOptions, type ChildPluginCallback, type ChildPluginOptions, DEFAULT_CHILD_DIRECTIVE_KEY, childPlugin, clearTransferredAttributes, countElementChildren, childPlugin as default, findFirstElementChild, parseChildDirective, transferAttributes };

package/dist/index.js

@@ -1,232 +1 @@
-// src/transfer.ts
-var CHILD_DIRECTIVE_PREFIX = "x-child";
-var NEVER_TRANSFER = /* @__PURE__ */ new Set([
-  CHILD_DIRECTIVE_PREFIX,
-  "x-ignore",
-  "x-ignore.self",
-  "x-teleport",
-  "x-cloak"
-]);
-var NEVER_TRANSFER_PREFIXES = ["x-child.", "x-teleport.", "x-transition", "x-effect"];
-var SCOPE_ATTRS = /* @__PURE__ */ new Set(["x-data", "x-init", "x-ref"]);
-function isNeverTransfer(name) {
-  if (NEVER_TRANSFER.has(name)) {
-    return true;
-  }
-  return NEVER_TRANSFER_PREFIXES.some((prefix) => name.startsWith(prefix));
-}
-function findFirstElementChild(parent) {
-  for (const node of parent.childNodes) {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      return node;
-    }
-  }
-  return null;
-}
-function countElementChildren(parent) {
-  let count = 0;
-  for (const node of parent.childNodes) {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      count += 1;
-    }
-  }
-  return count;
-}
-function parseChildDirective(el) {
-  for (const { name } of el.attributes) {
-    if (name === CHILD_DIRECTIVE_PREFIX) {
-      return { mode: "default" };
-    }
-    if (!name.startsWith(`${CHILD_DIRECTIVE_PREFIX}.`)) {
-      continue;
-    }
-    const modifiers = name.slice(CHILD_DIRECTIVE_PREFIX.length + 1).split(".");
-    if (modifiers.includes("replace")) {
-      return { mode: "replace" };
-    }
-    if (modifiers.includes("merge")) {
-      return { mode: "merge" };
-    }
-    return { mode: "default" };
-  }
-  return null;
-}
-function mergeClassTokens(...values) {
-  const tokens = /* @__PURE__ */ new Set();
-  for (const value of values) {
-    for (const token of value.split(/\s+/)) {
-      if (token) {
-        tokens.add(token);
-      }
-    }
-  }
-  return [...tokens].join(" ");
-}
-function parseInlineStyle(style) {
-  const map = /* @__PURE__ */ new Map();
-  for (const part of style.split(";")) {
-    const trimmed = part.trim();
-    if (!trimmed) {
-      continue;
-    }
-    const colon = trimmed.indexOf(":");
-    if (colon === -1) {
-      continue;
-    }
-    const property = trimmed.slice(0, colon).trim().toLowerCase();
-    const value = trimmed.slice(colon + 1).trim();
-    map.set(property, value);
-  }
-  return map;
-}
-function serializeInlineStyle(map) {
-  return [...map.entries()].map(([property, value]) => `${property}: ${value}`).join("; ");
-}
-function mergeInlineStyle(wrapperStyle, childStyle, childWins) {
-  const wrapperMap = parseInlineStyle(wrapperStyle);
-  const childMap = parseInlineStyle(childStyle);
-  const merged = childWins ? new Map([...wrapperMap, ...childMap]) : new Map([...childMap, ...wrapperMap]);
-  return serializeInlineStyle(merged);
-}
-function childHasAttribute(el, name) {
-  return el.hasAttribute(name);
-}
-function shouldCopyAttribute(name, wrapper, child, mode) {
-  if (isNeverTransfer(name)) {
-    return false;
-  }
-  if (name === "id" && childHasAttribute(child, "id")) {
-    return false;
-  }
-  if (SCOPE_ATTRS.has(name) && childHasAttribute(child, name)) {
-    return false;
-  }
-  if (mode === "replace") {
-    return wrapper.hasAttribute(name);
-  }
-  if (mode === "default" || mode === "merge") {
-    if (name === "class" || name === "style") {
-      return wrapper.hasAttribute(name);
-    }
-    return wrapper.hasAttribute(name) && !childHasAttribute(child, name);
-  }
-  return false;
-}
-function applyAttribute(wrapper, child, name, mode) {
-  const wrapperValue = wrapper.getAttribute(name) ?? "";
-  const childValue = child.getAttribute(name) ?? "";
-  if (name === "class") {
-    if (mode === "replace") {
-      child.setAttribute("class", mergeClassTokens(wrapperValue, childValue));
-      return;
-    }
-    child.setAttribute("class", mergeClassTokens(childValue, wrapperValue));
-    return;
-  }
-  if (name === "style") {
-    const merged = mergeInlineStyle(wrapperValue, childValue, mode !== "replace");
-    if (merged) {
-      child.setAttribute("style", merged);
-    }
-    return;
-  }
-  if (mode === "replace" || !childHasAttribute(child, name)) {
-    child.setAttribute(name, wrapperValue);
-  }
-}
-function transferAttributes(wrapper, child, mode = "default") {
-  const names = /* @__PURE__ */ new Set();
-  for (const { name } of wrapper.attributes) {
-    names.add(name);
-  }
-  for (const name of names) {
-    if (!shouldCopyAttribute(name, wrapper, child, mode)) {
-      continue;
-    }
-    applyAttribute(wrapper, child, name, mode);
-  }
-}
-function clearTransferredAttributes(wrapper) {
-  const toRemove = [];
-  for (const { name } of wrapper.attributes) {
-    if (isNeverTransfer(name)) {
-      toRemove.push(name);
-      continue;
-    }
-    toRemove.push(name);
-  }
-  for (const name of toRemove) {
-    wrapper.removeAttribute(name);
-  }
-}
-
-// src/index.ts
-var processedWrappers = /* @__PURE__ */ new WeakSet();
-function warnChild(message) {
-  console.warn(message);
-}
-function childPlugin(Alpine) {
-  Alpine.addInitSelector(() => `[${Alpine.prefixed("child")}]`);
-  Alpine.interceptInit((el, skip) => {
-    const config = parseChildDirective(el);
-    if (!config) {
-      return;
-    }
-    if (processedWrappers.has(el)) {
-      return;
-    }
-    const target = findFirstElementChild(el);
-    if (!target) {
-      warnChild("[x-child] No element child found; directive ignored.");
-      return;
-    }
-    if (countElementChildren(el) > 1) {
-      warnChild("[x-child] Multiple element children; only the first is used.");
-    }
-    const morph = Alpine.morph;
-    if (typeof morph !== "function") {
-      warnChild(
-        "[x-child] @alpinejs/morph is required \u2014 register Alpine.plugin(morph) before x-child."
-      );
-      return;
-    }
-    processedWrappers.add(el);
-    el._x_ignoreSelf = true;
-    target._x_ignore = true;
-    skip();
-    Alpine.nextTick(() => {
-      if (!(el.isConnected || target.isConnected)) {
-        return;
-      }
-      transferAttributes(el, target, config.mode);
-      let promoted = null;
-      Alpine.mutateDom(() => {
-        morph(el, target.outerHTML, {
-          added(node) {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-              promoted = node;
-            }
-          }
-        });
-      });
-      const result = promoted ?? (el.isConnected ? el : null);
-      if (result) {
-        processedWrappers.add(result);
-        result._x_ignore = void 0;
-        Alpine.initTree(result);
-      }
-      clearTransferredAttributes(el);
-    });
-  });
-  Alpine.directive("child", () => {
-  }).before("ignore");
-}
-export {
-  clearTransferredAttributes,
-  countElementChildren,
-  childPlugin as default,
-  findFirstElementChild,
-  parseChildDirective,
-  transferAttributes
-};
-//# sourceMappingURL=index.js.map
+var f="x-child",v=new Set([f,"x-ignore","x-ignore.self","x-teleport","x-cloak"]),D=["x-child.","x-teleport.","x-transition","x-effect"],I=new Set(["x-data","x-init","x-ref"]);function N(t){return v.has(t)?!0:D.some(e=>t.startsWith(e))}function S(t,e,n,r){return N(t)||t==="id"&&n.hasAttribute("id")||I.has(t)&&n.hasAttribute(t)?!1:r==="replace"?e.hasAttribute(t):r==="default"||r==="merge"?t==="class"||t==="style"?e.hasAttribute(t):e.hasAttribute(t)&&!n.hasAttribute(t):!1}function a(t){for(let e of t.childNodes)if(e.nodeType===Node.ELEMENT_NODE)return e;return null}function c(t){let e=0;for(let n of t.childNodes)n.nodeType===Node.ELEMENT_NODE&&(e+=1);return e}function p(t){for(let{name:e}of t.attributes){if(e===f)return{mode:"default"};if(!e.startsWith(`${f}.`))continue;let n=e.slice(f.length+1).split(".");return n.includes("replace")?{mode:"replace"}:n.includes("merge")?{mode:"merge"}:{mode:"default"}}return null}function g(t,e,n){for(let{name:r}of t.attributes)S(r,t,e,n)&&O(t,e,r,n)}function m(t){for(let{name:e}of t.attributes)t.removeAttribute(e)}function x(...t){let e=new Set;for(let n of t)for(let r of n.split(/\s+/))r&&e.add(r);return[...e].join(" ")}function y(t){let e=new Map;for(let n of t.split(";")){let r=n.trim();if(!r)continue;let i=r.indexOf(":");if(i===-1)continue;let l=r.slice(0,i).trim().toLowerCase(),s=r.slice(i+1).trim();e.set(l,s)}return e}function R(t){return[...t.entries()].map(([e,n])=>`${e}: ${n}`).join("; ")}function k(t,e,n){let r=y(t),i=y(e),l=n?new Map([...r,...i]):new Map([...i,...r]);return R(l)}function O(t,e,n,r){let i=t.getAttribute(n)??"",l=e.getAttribute(n)??"";if(n==="class"){if(r==="replace"){e.setAttribute("class",x(i,l));return}e.setAttribute("class",x(l,i));return}if(n==="style"){let s=k(i,l,r!=="replace");s&&e.setAttribute("style",s);return}(r==="replace"||!e.hasAttribute(n))&&e.setAttribute(n,i)}import{guardDirective as P}from"@ailuracode/alpine-core";var E="child";function M(t={}){let e=t.directiveKey??E;return function(r){let i=r,l=new WeakSet;i.addInitSelector(()=>`[${i.prefixed(e)}]`),i.interceptInit((o,_)=>{let h=p(o);if(!h||l.has(o))return;let d=a(o);if(!d)return;c(o)>1;let C=i.morph;typeof C=="function"&&(l.add(o),o._x_ignoreSelf=!0,d._x_ignore=!0,_(),i.nextTick(()=>{if(!(o.isConnected||d.isConnected))return;g(o,d,h.mode);let A=null;i.mutateDom(()=>{let T={added(b){b.nodeType===Node.ELEMENT_NODE&&(A=b)}};C(o,d.outerHTML,T)});let u=A??(o.isConnected?o:null);u&&(l.add(u),u._x_ignore=void 0,i.initTree(u)),m(o)}))});let s=P(i,e,()=>({}),"child");s&&typeof s.before=="function"&&s.before("ignore")}}var L=M;export{E as DEFAULT_CHILD_DIRECTIVE_KEY,M as childPlugin,m as clearTransferredAttributes,c as countElementChildren,L as default,a as findFirstElementChild,p as parseChildDirective,g as transferAttributes};

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@ailuracode/alpine-child",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "description": "Alpine.js x-child directive — asChild-style attribute transfer to the first child element",
   "type": "module",
   "license": "MIT",
   "author": "ailuracode",
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -32,8 +33,8 @@
   },
   "types": "./dist/global.d.ts",
   "peerDependencies": {
+    "@ailuracode/alpine-core": "^0.3.0",
     "@alpinejs/morph": "^3.0.0",
-    "@types/alpinejs": "^3.13.11",
     "alpinejs": "^3.0.0"
   },
   "peerDependenciesMeta": {
@@ -42,7 +43,12 @@
     }
   },
   "devDependencies": {
-    "@alpinejs/morph": "^3.15.12"
+    "@alpinejs/morph": "^3.15.12",
+    "@types/alpinejs": "^3.13.10",
+    "@types/node": "^26.1.0",
+    "tsup": "^8.5.0",
+    "alpinejs": "^3.15.12",
+    "@ailuracode/alpine-core": "0.3.0"
   },
   "keywords": [
     "alpinejs",
@@ -52,8 +58,33 @@
     "as-child",
     "headless"
   ],
+  "toolkit": {
+    "bundleBudget": {
+      "category": "small-feature"
+    }
+  },
+  "size-limit": [
+    {
+      "name": "full surface",
+      "path": "dist/index.js",
+      "import": "*",
+      "ignore": [
+        "alpinejs",
+        "@ailuracode/alpine-core",
+        "@alpinejs/morph"
+      ],
+      "gzip": true,
+      "brotli": true,
+      "limit": "1.5 kB"
+    }
+  ],
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --clean --sourcemap --out-dir dist && cp src/global.d.ts dist/global.d.ts",
-    "test": "vitest run --config ../../vitest.config.ts test"
+    "build": "tsup --config tsup.config.ts && cp src/global.d.ts dist/global.d.ts",
+    "clean": "rm -rf dist",
+    "size": "size-limit",
+    "test": "vitest run --config ../../vitest.config.ts packages/child",
+    "test:watch": "vitest --config ../../vitest.config.ts",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json",
+    "test:e2e": "playwright test --config playwright.config.ts"
   }
 }

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/transfer.ts","../src/index.ts"],"sourcesContent":["export type ChildMergeMode = \"default\" | \"merge\" | \"replace\";\n\nconst CHILD_DIRECTIVE_PREFIX = \"x-child\";\n\nconst NEVER_TRANSFER = new Set([\n  CHILD_DIRECTIVE_PREFIX,\n  \"x-ignore\",\n  \"x-ignore.self\",\n  \"x-teleport\",\n  \"x-cloak\",\n]);\n\nconst NEVER_TRANSFER_PREFIXES = [\"x-child.\", \"x-teleport.\", \"x-transition\", \"x-effect\"];\n\nconst SCOPE_ATTRS = new Set([\"x-data\", \"x-init\", \"x-ref\"]);\n\nfunction isNeverTransfer(name: string): boolean {\n  if (NEVER_TRANSFER.has(name)) {\n    return true;\n  }\n\n  return NEVER_TRANSFER_PREFIXES.some((prefix) => name.startsWith(prefix));\n}\n\n/** Returns the first element child, skipping text and comment nodes. */\nexport function findFirstElementChild(parent: Element): Element | null {\n  for (const node of parent.childNodes) {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      return node as Element;\n    }\n  }\n\n  return null;\n}\n\n/** Counts element children (excluding text/comment nodes). */\nexport function countElementChildren(parent: Element): number {\n  let count = 0;\n\n  for (const node of parent.childNodes) {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      count += 1;\n    }\n  }\n\n  return count;\n}\n\n/** Parses `x-child` directive modifiers from element attributes. */\nexport function parseChildDirective(el: Element): { mode: ChildMergeMode } | null {\n  for (const { name } of el.attributes) {\n    if (name === CHILD_DIRECTIVE_PREFIX) {\n      return { mode: \"default\" };\n    }\n\n    if (!name.startsWith(`${CHILD_DIRECTIVE_PREFIX}.`)) {\n      continue;\n    }\n\n    const modifiers = name.slice(CHILD_DIRECTIVE_PREFIX.length + 1).split(\".\");\n\n    if (modifiers.includes(\"replace\")) {\n      return { mode: \"replace\" };\n    }\n\n    if (modifiers.includes(\"merge\")) {\n      return { mode: \"merge\" };\n    }\n\n    return { mode: \"default\" };\n  }\n\n  return null;\n}\n\nfunction mergeClassTokens(...values: string[]): string {\n  const tokens = new Set<string>();\n\n  for (const value of values) {\n    for (const token of value.split(/\\s+/)) {\n      if (token) {\n        tokens.add(token);\n      }\n    }\n  }\n\n  return [...tokens].join(\" \");\n}\n\nfunction parseInlineStyle(style: string): Map<string, string> {\n  const map = new Map<string, string>();\n\n  for (const part of style.split(\";\")) {\n    const trimmed = part.trim();\n    if (!trimmed) {\n      continue;\n    }\n\n    const colon = trimmed.indexOf(\":\");\n    if (colon === -1) {\n      continue;\n    }\n\n    const property = trimmed.slice(0, colon).trim().toLowerCase();\n    const value = trimmed.slice(colon + 1).trim();\n    map.set(property, value);\n  }\n\n  return map;\n}\n\nfunction serializeInlineStyle(map: Map<string, string>): string {\n  return [...map.entries()].map(([property, value]) => `${property}: ${value}`).join(\"; \");\n}\n\nfunction mergeInlineStyle(wrapperStyle: string, childStyle: string, childWins: boolean): string {\n  const wrapperMap = parseInlineStyle(wrapperStyle);\n  const childMap = parseInlineStyle(childStyle);\n  const merged = childWins\n    ? new Map([...wrapperMap, ...childMap])\n    : new Map([...childMap, ...wrapperMap]);\n\n  return serializeInlineStyle(merged);\n}\n\nfunction childHasAttribute(el: Element, name: string): boolean {\n  return el.hasAttribute(name);\n}\n\nfunction shouldCopyAttribute(\n  name: string,\n  wrapper: Element,\n  child: Element,\n  mode: ChildMergeMode\n): boolean {\n  if (isNeverTransfer(name)) {\n    return false;\n  }\n\n  if (name === \"id\" && childHasAttribute(child, \"id\")) {\n    return false;\n  }\n\n  if (SCOPE_ATTRS.has(name) && childHasAttribute(child, name)) {\n    return false;\n  }\n\n  if (mode === \"replace\") {\n    return wrapper.hasAttribute(name);\n  }\n\n  if (mode === \"default\" || mode === \"merge\") {\n    if (name === \"class\" || name === \"style\") {\n      return wrapper.hasAttribute(name);\n    }\n\n    return wrapper.hasAttribute(name) && !childHasAttribute(child, name);\n  }\n\n  return false;\n}\n\nfunction applyAttribute(\n  wrapper: Element,\n  child: Element,\n  name: string,\n  mode: ChildMergeMode\n): void {\n  const wrapperValue = wrapper.getAttribute(name) ?? \"\";\n  const childValue = child.getAttribute(name) ?? \"\";\n\n  if (name === \"class\") {\n    if (mode === \"replace\") {\n      child.setAttribute(\"class\", mergeClassTokens(wrapperValue, childValue));\n      return;\n    }\n\n    child.setAttribute(\"class\", mergeClassTokens(childValue, wrapperValue));\n    return;\n  }\n\n  if (name === \"style\") {\n    const merged = mergeInlineStyle(wrapperValue, childValue, mode !== \"replace\");\n    if (merged) {\n      child.setAttribute(\"style\", merged);\n    }\n    return;\n  }\n\n  if (mode === \"replace\" || !childHasAttribute(child, name)) {\n    child.setAttribute(name, wrapperValue);\n  }\n}\n\n/** Transfers wrapper attributes onto the first element child. */\nexport function transferAttributes(\n  wrapper: Element,\n  child: Element,\n  mode: ChildMergeMode = \"default\"\n): void {\n  const names = new Set<string>();\n\n  for (const { name } of wrapper.attributes) {\n    names.add(name);\n  }\n\n  for (const name of names) {\n    if (!shouldCopyAttribute(name, wrapper, child, mode)) {\n      continue;\n    }\n\n    applyAttribute(wrapper, child, name, mode);\n  }\n}\n\n/** Removes transferable attributes from the wrapper after unwrapping. */\nexport function clearTransferredAttributes(wrapper: Element): void {\n  const toRemove: string[] = [];\n\n  for (const { name } of wrapper.attributes) {\n    if (isNeverTransfer(name)) {\n      toRemove.push(name);\n      continue;\n    }\n\n    toRemove.push(name);\n  }\n\n  for (const name of toRemove) {\n    wrapper.removeAttribute(name);\n  }\n}\n","import type AlpineType from \"alpinejs\";\nimport {\n  clearTransferredAttributes,\n  countElementChildren,\n  findFirstElementChild,\n  parseChildDirective,\n  transferAttributes,\n} from \"./transfer.js\";\n\nexport type { ChildMergeMode } from \"./transfer.js\";\nexport {\n  clearTransferredAttributes,\n  countElementChildren,\n  findFirstElementChild,\n  parseChildDirective,\n  transferAttributes,\n} from \"./transfer.js\";\n\nconst processedWrappers = new WeakSet<Element>();\n\ntype AlpineElement = Element & {\n  _x_ignore?: boolean;\n  _x_ignoreSelf?: boolean;\n};\n\ntype MorphOptions = {\n  added?: (node: Node) => void;\n};\n\ntype AlpineWithMorph = AlpineType.Alpine & {\n  morph?: (el: Element, newHtml: string | Element, options?: MorphOptions) => Element;\n};\n\nfunction warnChild(message: string): void {\n  // biome-ignore lint/suspicious/noConsole: intentional developer warnings for invalid markup\n  console.warn(message);\n}\n\n/** Alpine.js plugin. Registers the `x-child` directive (asChild-style unwrapping). */\nexport default function childPlugin(Alpine: AlpineType.Alpine): void {\n  Alpine.addInitSelector(() => `[${Alpine.prefixed(\"child\")}]`);\n\n  Alpine.interceptInit((el: Element, skip: () => void) => {\n    const config = parseChildDirective(el);\n    if (!config) {\n      return;\n    }\n\n    if (processedWrappers.has(el)) {\n      return;\n    }\n\n    const target = findFirstElementChild(el);\n    if (!target) {\n      warnChild(\"[x-child] No element child found; directive ignored.\");\n      return;\n    }\n\n    if (countElementChildren(el) > 1) {\n      warnChild(\"[x-child] Multiple element children; only the first is used.\");\n    }\n\n    const morph = (Alpine as AlpineWithMorph).morph;\n    if (typeof morph !== \"function\") {\n      warnChild(\n        \"[x-child] @alpinejs/morph is required — register Alpine.plugin(morph) before x-child.\"\n      );\n      return;\n    }\n\n    // Defer unwrap until after the current initTree pass so DOM mutations from\n    // morph do not corrupt scope for siblings initialized later (e.g. sidebar).\n    processedWrappers.add(el);\n    (el as AlpineElement)._x_ignoreSelf = true;\n    (target as AlpineElement)._x_ignore = true;\n    skip();\n\n    Alpine.nextTick(() => {\n      if (!(el.isConnected || target.isConnected)) {\n        return;\n      }\n\n      transferAttributes(el, target, config.mode);\n\n      let promoted: Element | null = null;\n\n      Alpine.mutateDom(() => {\n        morph(el, target.outerHTML, {\n          added(node) {\n            if (node.nodeType === Node.ELEMENT_NODE) {\n              promoted = node as Element;\n            }\n          },\n        });\n      });\n\n      const result = promoted ?? (el.isConnected ? el : null);\n      if (result) {\n        processedWrappers.add(result);\n        (result as AlpineElement)._x_ignore = undefined;\n        Alpine.initTree(result as HTMLElement);\n      }\n\n      clearTransferredAttributes(el);\n    });\n  });\n\n  Alpine.directive(\"child\", () => {\n    // Unwrap runs in interceptInit before other directives on the wrapper.\n  }).before(\"ignore\");\n}\n"],"mappings":"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","names":[]}