@ydant/transition 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 cwd-k2
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,232 @@
+# @ydant/transition
+
+CSS transition components for Ydant.
+
+## Installation
+
+```bash
+pnpm add @ydant/transition
+```
+
+## Usage
+
+### Transition (Enter-only)
+
+For simple show/hide with enter animation only:
+
+```typescript
+import { div, button, text, on, type Component, type Slot } from "@ydant/core";
+import { Transition } from "@ydant/transition";
+
+const App: Component = () => {
+  let show = true;
+  let transitionSlot: Slot;
+
+  return div(function* () {
+    yield* button(() => [
+      on("click", () => {
+        show = !show;
+        transitionSlot.refresh(() =>
+          Transition({
+            show,
+            name: "fade",
+            children: () => div(() => [text("Fade me!")]),
+          }),
+        );
+      }),
+      text("Toggle"),
+    ]);
+
+    transitionSlot = yield* div(() =>
+      Transition({
+        show,
+        name: "fade",
+        children: () => div(() => [text("Fade me!")]),
+      }),
+    );
+  });
+};
+```
+
+### createTransition (Enter + Leave)
+
+For full enter/leave animation support with programmatic control:
+
+```typescript
+import { div, button, text, on, classes, type Component } from "@ydant/core";
+import { createTransition, type TransitionHandle } from "@ydant/transition";
+
+const App: Component = () => {
+  let fadeTransition: TransitionHandle;
+
+  return div(function* () {
+    yield* button(function* () {
+      yield* on("click", async () => {
+        const isVisible = fadeTransition.slot.node.firstElementChild !== null;
+        await fadeTransition.setShow(!isVisible);
+      });
+      yield* text("Toggle");
+    });
+
+    fadeTransition = yield* createTransition({
+      enter: "fade-enter",
+      enterFrom: "fade-enter-from",
+      enterTo: "fade-enter-to",
+      leave: "fade-leave",
+      leaveFrom: "fade-leave-from",
+      leaveTo: "fade-leave-to",
+      children: () => div(() => [text("Animated content")]),
+    });
+  });
+};
+```
+
+### CSS Classes
+
+#### For `Transition` (name-based)
+
+| Class                 | When Applied   |
+| --------------------- | -------------- |
+| `{name}-enter`        | Start of enter |
+| `{name}-enter-active` | During enter   |
+| `{name}-enter-to`     | End of enter   |
+| `{name}-leave`        | Start of leave |
+| `{name}-leave-active` | During leave   |
+| `{name}-leave-to`     | End of leave   |
+
+#### For `createTransition` (explicit classes)
+
+| Prop        | When Applied               |
+| ----------- | -------------------------- |
+| `enter`     | During enter animation     |
+| `enterFrom` | Initial state before enter |
+| `enterTo`   | Final state after enter    |
+| `leave`     | During leave animation     |
+| `leaveFrom` | Initial state before leave |
+| `leaveTo`   | Final state after leave    |
+
+### Example CSS
+
+```css
+/* For Transition (name="fade") */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* For createTransition */
+.fade-enter {
+  transition: opacity 300ms ease;
+}
+.fade-enter-from {
+  opacity: 0;
+}
+.fade-enter-to {
+  opacity: 1;
+}
+.fade-leave {
+  transition: opacity 300ms ease;
+}
+.fade-leave-from {
+  opacity: 1;
+}
+.fade-leave-to {
+  opacity: 0;
+}
+```
+
+### TransitionGroup
+
+For animating lists of items:
+
+```typescript
+import { TransitionGroup } from "@ydant/transition";
+
+const App: Component = () => {
+  const items = [{ id: 1, text: "Item 1" }];
+
+  return div(function* () {
+    const { slot, refresh } = yield* TransitionGroup({
+      name: "list",
+      items,
+      keyFn: (item) => item.id,
+      renderItem: (item) => div(() => [text(item.text)]),
+    });
+
+    // To update:
+    // items.push({ id: 2, text: "Item 2" });
+    // refresh(items);
+  });
+};
+```
+
+## API
+
+### Transition
+
+```typescript
+function Transition(props: TransitionProps): ElementGenerator;
+
+interface TransitionProps {
+  show: boolean;
+  name: string;
+  children: () => Render;
+  onEnter?: () => void;
+  onLeave?: () => void;
+  onAfterEnter?: () => void;
+  onAfterLeave?: () => void;
+}
+```
+
+### createTransition
+
+```typescript
+function* createTransition(
+  props: CreateTransitionProps
+): Generator<unknown, TransitionHandle, Slot>;
+
+interface CreateTransitionProps {
+  enter: string;
+  enterFrom: string;
+  enterTo: string;
+  leave: string;
+  leaveFrom: string;
+  leaveTo: string;
+  children: () => Render;
+}
+
+interface TransitionHandle {
+  slot: Slot;
+  setShow(show: boolean): Promise<void>;
+}
+```
+
+### TransitionGroup
+
+```typescript
+function TransitionGroup<T>(props: TransitionGroupProps<T>): ElementGenerator;
+
+interface TransitionGroupProps<T> {
+  name: string;
+  items: T[];
+  keyFn: (item: T) => string | number;
+  renderItem: (item: T) => Render;
+}
+```
+
+### Low-level APIs
+
+```typescript
+function enterTransition(el: HTMLElement, props: EnterProps): Promise<void>;
+function leaveTransition(el: HTMLElement, props: LeaveProps): Promise<void>;
+```
+
+## Module Structure
+
+- `Transition.ts` - Single element transitions (Transition, createTransition)
+- `TransitionGroup.ts` - List transitions

package/dist/Transition.d.ts

@@ -0,0 +1,76 @@
+import { ChildContent, Render } from '@ydant/core';
+import { Slot, Element } from '@ydant/base';
+export interface TransitionProps {
+    /** 要素を表示するかどうか */
+    show: boolean;
+    /** 入場トランジションの基本クラス */
+    enter?: string;
+    /** 入場開始時のクラス */
+    enterFrom?: string;
+    /** 入場終了時のクラス */
+    enterTo?: string;
+    /** 退場トランジションの基本クラス */
+    leave?: string;
+    /** 退場開始時のクラス */
+    leaveFrom?: string;
+    /** 退場終了時のクラス */
+    leaveTo?: string;
+    /** トランジション対象の子要素 */
+    children: () => ChildContent;
+}
+/**
+ * 入場トランジションを実行
+ */
+export declare function enterTransition(el: HTMLElement, props: TransitionProps): Promise<void>;
+/**
+ * 退場トランジションを実行
+ */
+export declare function leaveTransition(el: HTMLElement, props: TransitionProps): Promise<void>;
+/**
+ * Transition コンポーネント
+ *
+ * show の変化に応じて enter アニメーションを実行する。
+ *
+ * 注意: 現在の実装では enter アニメーションのみサポート。
+ * leave アニメーションが必要な場合は `createTransition` を使用すること。
+ *
+ * @see createTransition - leave アニメーションをサポートする代替 API
+ */
+export declare function Transition(props: TransitionProps): Render;
+/**
+ * 状態管理付き Transition コンポーネント
+ *
+ * leave アニメーションをサポートするために、
+ * 専用の refresh 関数を提供する。
+ */
+export interface TransitionHandle {
+    /** Transition の Slot */
+    slot: Slot;
+    /** show 状態を更新（アニメーション付き） */
+    setShow: (show: boolean) => Promise<void>;
+}
+/** createTransition の戻り値型。yield* で使用し、TransitionHandle を返す。 */
+export type TransitionInstruction = Generator<Element, TransitionHandle, Slot>;
+/**
+ * 状態管理付き Transition を作成
+ *
+ * @example
+ * ```typescript
+ * const transition = yield* createTransition({
+ *   enter: "fade-enter",
+ *   enterFrom: "fade-enter-from",
+ *   enterTo: "fade-enter-to",
+ *   leave: "fade-leave",
+ *   leaveFrom: "fade-leave-from",
+ *   leaveTo: "fade-leave-to",
+ *   children: () => div(() => [text("Content")]),
+ * });
+ *
+ * // Show with animation
+ * await transition.setShow(true);
+ *
+ * // Hide with animation
+ * await transition.setShow(false);
+ * ```
+ */
+export declare function createTransition(props: Omit<TransitionProps, "show">): TransitionInstruction;

package/dist/TransitionGroup.d.ts

@@ -0,0 +1,38 @@
+import { Slot, ElementRender } from '@ydant/base';
+export interface TransitionGroupProps<T> {
+    /** トランジション対象のアイテム配列 */
+    items: T[];
+    /** 各アイテムのユニークキーを返す関数 */
+    keyFn: (item: T) => string | number;
+    /** 入場トランジションの基本クラス */
+    enter?: string;
+    /** 入場開始時のクラス */
+    enterFrom?: string;
+    /** 入場終了時のクラス */
+    enterTo?: string;
+    /** 退場トランジションの基本クラス */
+    leave?: string;
+    /** 退場開始時のクラス */
+    leaveFrom?: string;
+    /** 退場終了時のクラス */
+    leaveTo?: string;
+    /** 各アイテムをレンダリングする関数（要素を返す必要がある） */
+    children: (item: T, index: number) => ElementRender;
+}
+/**
+ * TransitionGroup コンポーネント
+ *
+ * keyed() と Slot.refresh() を組み合わせて、
+ * リスト要素の追加・削除時にトランジションを適用する。
+ */
+export declare function TransitionGroup<T>(props: TransitionGroupProps<T>): ElementRender;
+/**
+ * TransitionGroup のリフレッシュ用ヘルパー（stateful）
+ *
+ * Slot.refresh() と組み合わせて使用する。
+ * 新しいアイテムリストを受け取り、トランジション付きで更新する。
+ *
+ * 削除されるアイテムには leave トランジションが適用され、
+ * トランジション完了後に DOM から削除される。
+ */
+export declare function createTransitionGroupRefresher<T>(props: Omit<TransitionGroupProps<T>, "items">): (slot: Slot, items: T[]) => void;

package/dist/global.d.ts

@@ -0,0 +1,6 @@
+import { TransitionHandle } from './Transition';
+declare module "@ydant/core" {
+  interface PluginReturnExtensions {
+    TransitionHandle: TransitionHandle;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference path="./global.d.ts" />
+export type { TransitionProps, TransitionHandle, TransitionInstruction } from './Transition';
+export type { TransitionGroupProps } from './TransitionGroup';
+export { Transition, createTransition, enterTransition, leaveTransition } from './Transition';
+export { TransitionGroup, createTransitionGroupRefresher } from './TransitionGroup';

package/dist/index.es.js

@@ -0,0 +1,139 @@
+import { div as m, onMount as v, keyed as S } from "@ydant/base";
+function c(e, t) {
+  t && e.classList.add(...t.split(" ").filter(Boolean));
+}
+function f(e, t) {
+  t && e.classList.remove(...t.split(" ").filter(Boolean));
+}
+function u(e) {
+  return new Promise((t) => {
+    const o = getComputedStyle(e), a = parseFloat(o.transitionDuration) * 1e3;
+    if (a === 0) {
+      t();
+      return;
+    }
+    const r = () => {
+      e.removeEventListener("transitionend", r), t();
+    };
+    e.addEventListener("transitionend", r), setTimeout(t, a + 50);
+  });
+}
+async function T(e, t) {
+  c(e, t.enter), c(e, t.enterFrom), e.offsetHeight, await new Promise((o) => {
+    requestAnimationFrame(() => {
+      c(e, t.enterTo), f(e, t.enterFrom), o();
+    });
+  }), await u(e), f(e, t.enter), f(e, t.enterTo);
+}
+async function K(e, t) {
+  c(e, t.leave), c(e, t.leaveFrom), e.offsetHeight, await new Promise((o) => {
+    requestAnimationFrame(() => {
+      c(e, t.leaveTo), f(e, t.leaveFrom), o();
+    });
+  }), await u(e), f(e, t.leave), f(e, t.leaveTo);
+}
+const h = /* @__PURE__ */ new WeakMap();
+function B(e) {
+  const { show: t, children: o } = e;
+  return m(function* () {
+    const a = yield* m(function* () {
+      t && (yield* o());
+    });
+    yield* v(() => {
+      const r = a.node;
+      let n = h.get(r);
+      n || (n = {
+        isShowing: !1,
+        isAnimating: !1,
+        childSlot: null
+      }, h.set(r, n));
+      const s = r.firstElementChild;
+      return t && !n.isShowing ? (n.isShowing = !0, s && T(s, e)) : !t && n.isShowing && !n.isAnimating && (n.isShowing = !1), () => {
+        h.delete(r);
+      };
+    });
+  });
+}
+function* E(e) {
+  const { children: t } = e;
+  let o = !1, a = !1;
+  const r = function* () {
+    o && (yield* t());
+  }, n = yield* m(r);
+  return {
+    slot: n,
+    setShow: async (d) => {
+      if (!(d === o || a)) {
+        if (a = !0, d) {
+          o = !0, n.refresh(r);
+          const i = n.node.firstElementChild;
+          i && await T(i, e);
+        } else {
+          const i = n.node.firstElementChild;
+          i && await K(i, e), o = !1, n.refresh(r);
+        }
+        a = !1;
+      }
+    }
+  };
+}
+async function g(e, t) {
+  c(e, t.enter), c(e, t.enterFrom), e.offsetHeight, requestAnimationFrame(() => {
+    f(e, t.enterFrom), c(e, t.enterTo);
+  }), await u(e), f(e, t.enter), f(e, t.enterTo);
+}
+async function A(e, t) {
+  if (!t.leave && !t.leaveFrom && !t.leaveTo) {
+    e.remove();
+    return;
+  }
+  c(e, t.leave), c(e, t.leaveFrom), e.offsetHeight, requestAnimationFrame(() => {
+    f(e, t.leaveFrom), c(e, t.leaveTo);
+  }), await u(e), e.remove();
+}
+function* k(e) {
+  const { items: t, keyFn: o, children: a } = e, r = /* @__PURE__ */ new Set();
+  for (const s of t)
+    r.add(o(s));
+  return yield* m(function* () {
+    for (let s = 0; s < t.length; s++) {
+      const d = t[s], i = o(d), l = yield* S(i, a)(d, s);
+      yield* v(() => {
+        g(l.node, e);
+      });
+    }
+  });
+}
+function q(e) {
+  const { keyFn: t, children: o } = e, a = {
+    prevItems: [],
+    elementsByKey: /* @__PURE__ */ new Map()
+  };
+  return (r, n) => {
+    const s = /* @__PURE__ */ new Set();
+    for (const i of n)
+      s.add(t(i));
+    const d = new Set(a.prevItems.map(t));
+    for (const i of d)
+      if (!s.has(i)) {
+        const l = a.elementsByKey.get(i);
+        l && (A(l, e), a.elementsByKey.delete(i));
+      }
+    r.refresh(function* () {
+      for (let i = 0; i < n.length; i++) {
+        const l = n[i], y = t(l), F = !d.has(y), w = yield* S(y, o)(l, i);
+        a.elementsByKey.set(y, w.node), F && (yield* v(() => {
+          g(w.node, e);
+        }));
+      }
+    }), a.prevItems = [...n];
+  };
+}
+export {
+  B as Transition,
+  k as TransitionGroup,
+  E as createTransition,
+  q as createTransitionGroupRefresher,
+  T as enterTransition,
+  K as leaveTransition
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(c,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("@ydant/base")):typeof define=="function"&&define.amd?define(["exports","@ydant/base"],s):(c=typeof globalThis<"u"?globalThis:c||self,s(c.YdantTransition={},c.YdantBase))})(this,(function(c,s){"use strict";function d(e,n){n&&e.classList.add(...n.split(" ").filter(Boolean))}function u(e,n){n&&e.classList.remove(...n.split(" ").filter(Boolean))}function y(e){return new Promise(n=>{const o=getComputedStyle(e),a=parseFloat(o.transitionDuration)*1e3;if(a===0){n();return}const r=()=>{e.removeEventListener("transitionend",r),n()};e.addEventListener("transitionend",r),setTimeout(n,a+50)})}async function h(e,n){d(e,n.enter),d(e,n.enterFrom),e.offsetHeight,await new Promise(o=>{requestAnimationFrame(()=>{d(e,n.enterTo),u(e,n.enterFrom),o()})}),await y(e),u(e,n.enter),u(e,n.enterTo)}async function w(e,n){d(e,n.leave),d(e,n.leaveFrom),e.offsetHeight,await new Promise(o=>{requestAnimationFrame(()=>{d(e,n.leaveTo),u(e,n.leaveFrom),o()})}),await y(e),u(e,n.leave),u(e,n.leaveTo)}const v=new WeakMap;function F(e){const{show:n,children:o}=e;return s.div(function*(){const a=yield*s.div(function*(){n&&(yield*o())});yield*s.onMount(()=>{const r=a.node;let t=v.get(r);t||(t={isShowing:!1,isAnimating:!1,childSlot:null},v.set(r,t));const f=r.firstElementChild;return n&&!t.isShowing?(t.isShowing=!0,f&&h(f,e)):!n&&t.isShowing&&!t.isAnimating&&(t.isShowing=!1),()=>{v.delete(r)}})})}function*K(e){const{children:n}=e;let o=!1,a=!1;const r=function*(){o&&(yield*n())},t=yield*s.div(r);return{slot:t,setShow:async l=>{if(!(l===o||a)){if(a=!0,l){o=!0,t.refresh(r);const i=t.node.firstElementChild;i&&await h(i,e)}else{const i=t.node.firstElementChild;i&&await w(i,e),o=!1,t.refresh(r)}a=!1}}}}async function S(e,n){d(e,n.enter),d(e,n.enterFrom),e.offsetHeight,requestAnimationFrame(()=>{u(e,n.enterFrom),d(e,n.enterTo)}),await y(e),u(e,n.enter),u(e,n.enterTo)}async function A(e,n){if(!n.leave&&!n.leaveFrom&&!n.leaveTo){e.remove();return}d(e,n.leave),d(e,n.leaveFrom),e.offsetHeight,requestAnimationFrame(()=>{u(e,n.leaveFrom),d(e,n.leaveTo)}),await y(e),e.remove()}function*B(e){const{items:n,keyFn:o,children:a}=e,r=new Set;for(const f of n)r.add(o(f));return yield*s.div(function*(){for(let f=0;f<n.length;f++){const l=n[f],i=o(l),m=yield*s.keyed(i,a)(l,f);yield*s.onMount(()=>{S(m.node,e)})}})}function C(e){const{keyFn:n,children:o}=e,a={prevItems:[],elementsByKey:new Map};return(r,t)=>{const f=new Set;for(const i of t)f.add(n(i));const l=new Set(a.prevItems.map(n));for(const i of l)if(!f.has(i)){const m=a.elementsByKey.get(i);m&&(A(m,e),a.elementsByKey.delete(i))}r.refresh(function*(){for(let i=0;i<t.length;i++){const m=t[i],T=n(m),M=!l.has(T),g=yield*s.keyed(T,o)(m,i);a.elementsByKey.set(T,g.node),M&&(yield*s.onMount(()=>{S(g.node,e)}))}}),a.prevItems=[...t]}}c.Transition=F,c.TransitionGroup=B,c.createTransition=K,c.createTransitionGroupRefresher=C,c.enterTransition=h,c.leaveTransition=w,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));

package/dist/utils.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Transition ユーティリティ関数
+ *
+ * Transition, TransitionGroup コンポーネントで共通使用される
+ * CSS クラス操作とトランジション待機のヘルパー関数。
+ */
+/**
+ * 要素に CSS クラスを追加する
+ *
+ * スペース区切りのクラス文字列を分割して追加する。
+ * 空文字列や undefined は無視される。
+ *
+ * @param el - 対象の HTML 要素
+ * @param classes - スペース区切りのクラス文字列
+ */
+export declare function addClasses(el: HTMLElement, classes: string | undefined): void;
+/**
+ * 要素から CSS クラスを削除する
+ *
+ * スペース区切りのクラス文字列を分割して削除する。
+ * 空文字列や undefined は無視される。
+ *
+ * @param el - 対象の HTML 要素
+ * @param classes - スペース区切りのクラス文字列
+ */
+export declare function removeClasses(el: HTMLElement, classes: string | undefined): void;
+/**
+ * CSS トランジションの終了を待機する
+ *
+ * 要素の transitionDuration を取得し、transitionend イベントを待つ。
+ * duration が 0 の場合は即座に resolve する。
+ * 安全のため、duration + 50ms でタイムアウトを設定する。
+ *
+ * @param el - 対象の HTML 要素
+ * @returns トランジション終了時に resolve する Promise
+ */
+export declare function waitForTransition(el: HTMLElement): Promise<void>;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ydant/transition",
+  "version": "0.1.0",
+  "description": "Transition components for Ydant",
+  "keywords": [
+    "animation",
+    "css",
+    "transition",
+    "ydant"
+  ],
+  "homepage": "https://github.com/cwd-k2/ydant#readme",
+  "bugs": {
+    "url": "https://github.com/cwd-k2/ydant/issues"
+  },
+  "license": "MIT",
+  "author": "cwd-k2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cwd-k2/ydant.git",
+    "directory": "packages/transition"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "@ydant/dev": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "peerDependencies": {
+    "@ydant/base": "0.1.0",
+    "@ydant/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  }
+}