@ydant/async 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,109 @@
+# @ydant/async
+
+Async components for Ydant: Suspense, ErrorBoundary, and Resource.
+
+## Installation
+
+```bash
+pnpm add @ydant/async
+```
+
+## Usage
+
+### Suspense
+
+```typescript
+import { div, text, type Component } from "@ydant/core";
+import { Suspense, createResource } from "@ydant/async";
+
+// Create async resource
+const userResource = createResource(() => fetch("/api/user").then((r) => r.json()));
+
+// Component using resource
+const UserProfile: Component = () =>
+  div(function* () {
+    const user = userResource();
+    yield* text(`Name: ${user.name}`);
+  });
+
+// Wrap with Suspense
+const App: Component = () =>
+  Suspense({
+    fallback: () => text("Loading..."),
+    children: UserProfile,
+  });
+```
+
+### ErrorBoundary
+
+```typescript
+import { ErrorBoundary } from "@ydant/async";
+
+const App: Component = () =>
+  ErrorBoundary({
+    fallback: (error) => text(`Error: ${error.message}`),
+    children: () => RiskyComponent(),
+  });
+```
+
+### Combined Usage
+
+```typescript
+const App: Component = () =>
+  ErrorBoundary({
+    fallback: (error) => text(`Error: ${error.message}`),
+    children: () =>
+      Suspense({
+        fallback: () => text("Loading..."),
+        children: AsyncContent,
+      }),
+  });
+```
+
+## API
+
+### Suspense
+
+```typescript
+function Suspense(props: SuspenseProps): ElementGenerator;
+
+interface SuspenseProps {
+  fallback: () => Render;
+  children: Component;
+}
+```
+
+Shows fallback while async content is loading.
+
+### ErrorBoundary
+
+```typescript
+function ErrorBoundary(props: ErrorBoundaryProps): ElementGenerator;
+
+interface ErrorBoundaryProps {
+  fallback: (error: Error) => Render;
+  children: () => ElementGenerator;
+}
+```
+
+Catches errors in child components and shows fallback.
+
+### createResource
+
+```typescript
+function createResource<T>(fetcher: () => Promise<T>): Resource<T>;
+
+interface Resource<T> {
+  (): T; // Throws promise if pending, error if failed
+  refetch(): void;
+  state: "pending" | "ready" | "error";
+}
+```
+
+Creates a resource that suspends while loading.
+
+## Module Structure
+
+- `suspense.ts` - Suspense component
+- `error-boundary.ts` - ErrorBoundary component
+- `resource.ts` - createResource

package/dist/ErrorBoundary.d.ts

@@ -0,0 +1,16 @@
+import { ChildContent, Render } from '@ydant/core';
+/** ErrorBoundary コンポーネントの props */
+export interface ErrorBoundaryProps {
+    /** エラー発生時に表示するコンポーネント */
+    fallback: (error: Error, reset: () => void) => Render;
+    /** 子コンポーネント */
+    children: () => ChildContent;
+}
+/**
+ * ErrorBoundary コンポーネント
+ *
+ * 注意: JavaScript のジェネレータでは、yield で throw されたエラーを
+ * キャッチするには特別な対応が必要です。
+ * この実装は同期エラーのみをキャッチします。
+ */
+export declare function ErrorBoundary(props: ErrorBoundaryProps): Render;

package/dist/Suspense.d.ts

@@ -0,0 +1,36 @@
+import { ChildContent, Render } from '@ydant/core';
+/** Suspense コンポーネントの props */
+export interface SuspenseProps {
+    /** ローディング中に表示するコンポーネント */
+    fallback: () => Render;
+    /** 子コンポーネント */
+    children: () => ChildContent;
+}
+/**
+ * Suspense コンポーネント
+ *
+ * 注意: 現在の実装では、ジェネレータベースの DSL と
+ * Promise throw パターンの組み合わせに制限があります。
+ * 代替として、Resource の loading/error プロパティを使った
+ * 明示的なローディング状態管理を推奨します。
+ */
+export declare function Suspense(props: SuspenseProps): Render;
+/**
+ * 明示的なローディング状態を使った代替パターン
+ *
+ * Resource の loading プロパティを使って条件分岐する。
+ *
+ * @example
+ * ```typescript
+ * import { createResource } from "@ydant/async";
+ * import { show } from "@ydant/core";
+ *
+ * const dataResource = createResource(fetchData, { initialValue: null });
+ *
+ * yield* show(
+ *   dataResource.loading,
+ *   () => div(() => [text("Loading...")]),
+ *   () => div(() => [text(dataResource()?.message ?? "")])
+ * );
+ * ```
+ */

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export type { Resource } from './resource';
+export type { SuspenseProps } from './Suspense';
+export type { ErrorBoundaryProps } from './ErrorBoundary';
+export { createResource } from './resource';
+export { Suspense } from './Suspense';
+export { ErrorBoundary } from './ErrorBoundary';

package/dist/index.es.js

@@ -0,0 +1,103 @@
+import { div as a } from "@ydant/base";
+function l(c, i) {
+  let e;
+  if (i?.initialValue !== void 0)
+    e = { status: "resolved", data: i.initialValue };
+  else {
+    const n = c();
+    e = { status: "pending", promise: n }, n.then((r) => {
+      e = { status: "resolved", data: r };
+    }).catch((r) => {
+      e = { status: "rejected", error: r };
+    });
+  }
+  const t = (() => {
+    switch (e.status) {
+      case "pending":
+        throw e.promise;
+      case "rejected":
+        throw e.error;
+      case "resolved":
+        return e.data;
+    }
+  });
+  Object.defineProperty(t, "loading", {
+    get: () => e.status === "pending"
+  }), Object.defineProperty(t, "error", {
+    get: () => e.status === "rejected" ? e.error : null
+  }), t.peek = () => {
+    switch (e.status) {
+      case "pending":
+        throw new Error("Resource is still loading");
+      case "rejected":
+        throw e.error;
+      case "resolved":
+        return e.data;
+    }
+  }, t.refetch = async () => {
+    const n = c();
+    e = { status: "pending", promise: n };
+    try {
+      e = { status: "resolved", data: await n };
+    } catch (r) {
+      e = { status: "rejected", error: r };
+    }
+  };
+  let s = null;
+  return i?.refetchInterval && (s = setInterval(() => {
+    t.refetch();
+  }, i.refetchInterval)), t.dispose = () => {
+    s !== null && (clearInterval(s), s = null);
+  }, t;
+}
+function* d(c) {
+  const { fallback: i, children: e } = c, t = yield* a(function* () {
+    let s = !1, n = null;
+    try {
+      yield* e();
+    } catch (r) {
+      if (r instanceof Promise)
+        s = !0, n = r;
+      else
+        throw r;
+    }
+    s && n && (yield* i(), n.then(() => {
+      t.refresh(function* () {
+        yield* e();
+      });
+    }).catch(() => {
+      t.refresh(function* () {
+        yield* e();
+      });
+    }));
+  });
+  return t;
+}
+function* u(c) {
+  const { fallback: i, children: e } = c, t = yield* a(function* () {
+    try {
+      yield* e();
+    } catch (s) {
+      if (s instanceof Promise)
+        throw s;
+      const n = () => {
+        t.refresh(function* () {
+          try {
+            yield* e();
+          } catch (r) {
+            if (r instanceof Promise)
+              throw r;
+            yield* i(r, n);
+          }
+        });
+      };
+      yield* i(s, n);
+    }
+  });
+  return t;
+}
+export {
+  u as ErrorBoundary,
+  d as Suspense,
+  l as createResource
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("@ydant/base")):typeof define=="function"&&define.amd?define(["exports","@ydant/base"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i.YdantAsync={},i.YdantBase))})(this,(function(i,a){"use strict";function d(c,o){let e;if(o?.initialValue!==void 0)e={status:"resolved",data:o.initialValue};else{const n=c();e={status:"pending",promise:n},n.then(r=>{e={status:"resolved",data:r}}).catch(r=>{e={status:"rejected",error:r}})}const t=(()=>{switch(e.status){case"pending":throw e.promise;case"rejected":throw e.error;case"resolved":return e.data}});Object.defineProperty(t,"loading",{get:()=>e.status==="pending"}),Object.defineProperty(t,"error",{get:()=>e.status==="rejected"?e.error:null}),t.peek=()=>{switch(e.status){case"pending":throw new Error("Resource is still loading");case"rejected":throw e.error;case"resolved":return e.data}},t.refetch=async()=>{const n=c();e={status:"pending",promise:n};try{e={status:"resolved",data:await n}}catch(r){e={status:"rejected",error:r}}};let s=null;return o?.refetchInterval&&(s=setInterval(()=>{t.refetch()},o.refetchInterval)),t.dispose=()=>{s!==null&&(clearInterval(s),s=null)},t}function*l(c){const{fallback:o,children:e}=c,t=yield*a.div(function*(){let s=!1,n=null;try{yield*e()}catch(r){if(r instanceof Promise)s=!0,n=r;else throw r}s&&n&&(yield*o(),n.then(()=>{t.refresh(function*(){yield*e()})}).catch(()=>{t.refresh(function*(){yield*e()})}))});return t}function*u(c){const{fallback:o,children:e}=c,t=yield*a.div(function*(){try{yield*e()}catch(s){if(s instanceof Promise)throw s;const n=()=>{t.refresh(function*(){try{yield*e()}catch(r){if(r instanceof Promise)throw r;yield*o(r,n)}})};yield*o(s,n)}});return t}i.ErrorBoundary=u,i.Suspense=l,i.createResource=d,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/dist/resource.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Resource
+ *
+ * 非同期データフェッチングを管理するリソース。
+ *
+ * @example
+ * ```typescript
+ * const userResource = createResource(() => fetch("/api/user").then(r => r.json()));
+ *
+ * // コンポーネント内で使用
+ * yield* Suspense({
+ *   fallback: () => div(() => [text("Loading...")]),
+ *   children: function* () {
+ *     const user = userResource();  // データが準備できるまで suspend
+ *     yield* h1(() => [text(`Hello, ${user.name}`)]);
+ *   },
+ * });
+ * ```
+ */
+/** Resource インターフェース */
+export interface Resource<T> {
+    /** データを読み取る（ペンディング中は suspend） */
+    (): T;
+    /** 現在の値を取得（購読なし、ペンディング/エラー中は throw） */
+    peek(): T;
+    /** ローディング中かどうか */
+    readonly loading: boolean;
+    /** エラーがあれば Error、なければ null */
+    readonly error: Error | null;
+    /** 再フェッチ */
+    refetch(): Promise<void>;
+    /** リソースを破棄（自動再フェッチを停止） */
+    dispose(): void;
+}
+/**
+ * 非同期リソースを作成
+ *
+ * @param fetcher - データをフェッチする非同期関数
+ * @param options - オプション（初期値、再フェッチ間隔など）
+ */
+export declare function createResource<T>(fetcher: () => Promise<T>, options?: {
+    /** 初期値 */
+    initialValue?: T;
+    /** 自動再フェッチ間隔（ミリ秒） */
+    refetchInterval?: number;
+}): Resource<T>;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ydant/async",
+  "version": "0.1.0",
+  "description": "Async components (Suspense, ErrorBoundary) for Ydant",
+  "keywords": [
+    "async",
+    "error-boundary",
+    "suspense",
+    "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/async"
+  },
+  "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"
+  }
+}