@easemate/web-kit 0.1.5 → 0.2.0

package/build/react/use-web-kit.cjs

@@ -0,0 +1,150 @@
+"use strict";
+/**
+ * React hook for initializing @easemate/web-kit
+ *
+ * This module provides hooks for React integration.
+ * React is a peer dependency - users must install it separately.
+ *
+ * @module
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebKit = useWebKit;
+// Singleton to track if web-kit has been initialized globally
+let globalController = null;
+let initCount = 0;
+/**
+ * React hook for initializing @easemate/web-kit.
+ *
+ * This hook handles initialization and cleanup of the web kit,
+ * ensuring components are registered before rendering.
+ *
+ * **Important for Next.js App Router:**
+ * - Use this hook in a client component (`'use client'`)
+ * - Place it at the top of your component tree (e.g., in a layout)
+ * - The hook is SSR-safe and will only initialize on the client
+ *
+ * **Note:** This hook requires React to be installed. Import React hooks
+ * directly in your component and pass them to this function, or use the
+ * imperative `initWebKit()` function directly.
+ *
+ * @example
+ * ```tsx
+ * // app/providers.tsx
+ * 'use client';
+ *
+ * import { useEffect, useState, useRef } from '../react';
+ * import { initWebKit } from '@easemate/web-kit';
+ *
+ * export function Providers({ children }: { children: React.ReactNode }) {
+ *   const [ready, setReady] = useState(false);
+ *   const controllerRef = useRef<WebKitController | null>(null);
+ *
+ *   useEffect(() => {
+ *     const controller = initWebKit({
+ *       theme: 'default',
+ *       styles: 'main',
+ *       fonts: 'default'
+ *     });
+ *     controllerRef.current = controller;
+ *     controller.ready.then(() => setReady(true));
+ *
+ *     return () => controller.dispose();
+ *   }, []);
+ *
+ *   return <>{children}</>;
+ * }
+ * ```
+ */
+function useWebKit(options, hooks) {
+    const isSSR = typeof window === 'undefined';
+    const { useState, useEffect, useRef } = hooks;
+    const { skip = false, ...initOptions } = options;
+    const [ready, setReady] = useState(false);
+    const controllerRef = useRef(null);
+    const optionsRef = useRef(initOptions);
+    useEffect(() => {
+        // Skip on SSR or if explicitly skipped
+        if (isSSR || skip) {
+            return;
+        }
+        let isMounted = true;
+        const initialize = async () => {
+            // If already initialized globally, reuse the controller
+            if (globalController) {
+                initCount++;
+                controllerRef.current = globalController;
+                await globalController.ready;
+                if (isMounted) {
+                    setReady(true);
+                }
+                return;
+            }
+            // Dynamic import to ensure this only runs on client
+            const { initWebKit } = await Promise.resolve().then(() => __importStar(require('../init')));
+            const controller = initWebKit(optionsRef.current);
+            globalController = controller;
+            initCount++;
+            controllerRef.current = controller;
+            await controller.ready;
+            if (isMounted) {
+                setReady(true);
+            }
+        };
+        initialize();
+        return () => {
+            isMounted = false;
+            initCount--;
+            // Only dispose if this was the last user of the global controller
+            if (initCount <= 0 && globalController) {
+                globalController.dispose();
+                globalController = null;
+                initCount = 0;
+            }
+        };
+    }, [skip]);
+    return {
+        ready,
+        theme: controllerRef.current?.theme,
+        dispose: () => {
+            controllerRef.current?.dispose();
+            if (controllerRef.current === globalController) {
+                globalController = null;
+                initCount = 0;
+            }
+            controllerRef.current = null;
+        }
+    };
+}

package/build/react/use-web-kit.d.cts

@@ -0,0 +1,80 @@
+/**
+ * React hook for initializing @easemate/web-kit
+ *
+ * This module provides hooks for React integration.
+ * React is a peer dependency - users must install it separately.
+ *
+ * @module
+ */
+import type { InitWebKitOptions, WebKitController } from '../init';
+/**
+ * Options for useWebKit hook
+ */
+export interface UseWebKitOptions extends InitWebKitOptions {
+    /**
+     * Skip initialization (useful for conditional rendering)
+     * @default false
+     */
+    skip?: boolean;
+}
+/**
+ * Return type for useWebKit hook
+ */
+export interface UseWebKitReturn {
+    /** Whether the web kit is ready */
+    ready: boolean;
+    /** Theme controller (if theme was configured) */
+    theme?: WebKitController['theme'];
+    /** Dispose function for cleanup */
+    dispose: () => void;
+}
+/**
+ * React hook for initializing @easemate/web-kit.
+ *
+ * This hook handles initialization and cleanup of the web kit,
+ * ensuring components are registered before rendering.
+ *
+ * **Important for Next.js App Router:**
+ * - Use this hook in a client component (`'use client'`)
+ * - Place it at the top of your component tree (e.g., in a layout)
+ * - The hook is SSR-safe and will only initialize on the client
+ *
+ * **Note:** This hook requires React to be installed. Import React hooks
+ * directly in your component and pass them to this function, or use the
+ * imperative `initWebKit()` function directly.
+ *
+ * @example
+ * ```tsx
+ * // app/providers.tsx
+ * 'use client';
+ *
+ * import { useEffect, useState, useRef } from '../react';
+ * import { initWebKit } from '@easemate/web-kit';
+ *
+ * export function Providers({ children }: { children: React.ReactNode }) {
+ *   const [ready, setReady] = useState(false);
+ *   const controllerRef = useRef<WebKitController | null>(null);
+ *
+ *   useEffect(() => {
+ *     const controller = initWebKit({
+ *       theme: 'default',
+ *       styles: 'main',
+ *       fonts: 'default'
+ *     });
+ *     controllerRef.current = controller;
+ *     controller.ready.then(() => setReady(true));
+ *
+ *     return () => controller.dispose();
+ *   }, []);
+ *
+ *   return <>{children}</>;
+ * }
+ * ```
+ */
+export declare function useWebKit(options: UseWebKitOptions, hooks: {
+    useState: <T>(initial: T) => [T, (value: T) => void];
+    useEffect: (effect: () => (() => void) | undefined, deps?: unknown[]) => void;
+    useRef: <T>(initial: T) => {
+        current: T;
+    };
+}): UseWebKitReturn;

package/build/react/use-web-kit.d.ts

@@ -0,0 +1,80 @@
+/**
+ * React hook for initializing @easemate/web-kit
+ *
+ * This module provides hooks for React integration.
+ * React is a peer dependency - users must install it separately.
+ *
+ * @module
+ */
+import type { InitWebKitOptions, WebKitController } from '../init';
+/**
+ * Options for useWebKit hook
+ */
+export interface UseWebKitOptions extends InitWebKitOptions {
+    /**
+     * Skip initialization (useful for conditional rendering)
+     * @default false
+     */
+    skip?: boolean;
+}
+/**
+ * Return type for useWebKit hook
+ */
+export interface UseWebKitReturn {
+    /** Whether the web kit is ready */
+    ready: boolean;
+    /** Theme controller (if theme was configured) */
+    theme?: WebKitController['theme'];
+    /** Dispose function for cleanup */
+    dispose: () => void;
+}
+/**
+ * React hook for initializing @easemate/web-kit.
+ *
+ * This hook handles initialization and cleanup of the web kit,
+ * ensuring components are registered before rendering.
+ *
+ * **Important for Next.js App Router:**
+ * - Use this hook in a client component (`'use client'`)
+ * - Place it at the top of your component tree (e.g., in a layout)
+ * - The hook is SSR-safe and will only initialize on the client
+ *
+ * **Note:** This hook requires React to be installed. Import React hooks
+ * directly in your component and pass them to this function, or use the
+ * imperative `initWebKit()` function directly.
+ *
+ * @example
+ * ```tsx
+ * // app/providers.tsx
+ * 'use client';
+ *
+ * import { useEffect, useState, useRef } from '../react';
+ * import { initWebKit } from '@easemate/web-kit';
+ *
+ * export function Providers({ children }: { children: React.ReactNode }) {
+ *   const [ready, setReady] = useState(false);
+ *   const controllerRef = useRef<WebKitController | null>(null);
+ *
+ *   useEffect(() => {
+ *     const controller = initWebKit({
+ *       theme: 'default',
+ *       styles: 'main',
+ *       fonts: 'default'
+ *     });
+ *     controllerRef.current = controller;
+ *     controller.ready.then(() => setReady(true));
+ *
+ *     return () => controller.dispose();
+ *   }, []);
+ *
+ *   return <>{children}</>;
+ * }
+ * ```
+ */
+export declare function useWebKit(options: UseWebKitOptions, hooks: {
+    useState: <T>(initial: T) => [T, (value: T) => void];
+    useEffect: (effect: () => (() => void) | undefined, deps?: unknown[]) => void;
+    useRef: <T>(initial: T) => {
+        current: T;
+    };
+}): UseWebKitReturn;

package/build/react/use-web-kit.js

@@ -0,0 +1,114 @@
+/**
+ * React hook for initializing @easemate/web-kit
+ *
+ * This module provides hooks for React integration.
+ * React is a peer dependency - users must install it separately.
+ *
+ * @module
+ */
+// Singleton to track if web-kit has been initialized globally
+let globalController = null;
+let initCount = 0;
+/**
+ * React hook for initializing @easemate/web-kit.
+ *
+ * This hook handles initialization and cleanup of the web kit,
+ * ensuring components are registered before rendering.
+ *
+ * **Important for Next.js App Router:**
+ * - Use this hook in a client component (`'use client'`)
+ * - Place it at the top of your component tree (e.g., in a layout)
+ * - The hook is SSR-safe and will only initialize on the client
+ *
+ * **Note:** This hook requires React to be installed. Import React hooks
+ * directly in your component and pass them to this function, or use the
+ * imperative `initWebKit()` function directly.
+ *
+ * @example
+ * ```tsx
+ * // app/providers.tsx
+ * 'use client';
+ *
+ * import { useEffect, useState, useRef } from '../react';
+ * import { initWebKit } from '@easemate/web-kit';
+ *
+ * export function Providers({ children }: { children: React.ReactNode }) {
+ *   const [ready, setReady] = useState(false);
+ *   const controllerRef = useRef<WebKitController | null>(null);
+ *
+ *   useEffect(() => {
+ *     const controller = initWebKit({
+ *       theme: 'default',
+ *       styles: 'main',
+ *       fonts: 'default'
+ *     });
+ *     controllerRef.current = controller;
+ *     controller.ready.then(() => setReady(true));
+ *
+ *     return () => controller.dispose();
+ *   }, []);
+ *
+ *   return <>{children}</>;
+ * }
+ * ```
+ */
+export function useWebKit(options, hooks) {
+    const isSSR = typeof window === 'undefined';
+    const { useState, useEffect, useRef } = hooks;
+    const { skip = false, ...initOptions } = options;
+    const [ready, setReady] = useState(false);
+    const controllerRef = useRef(null);
+    const optionsRef = useRef(initOptions);
+    useEffect(() => {
+        // Skip on SSR or if explicitly skipped
+        if (isSSR || skip) {
+            return;
+        }
+        let isMounted = true;
+        const initialize = async () => {
+            // If already initialized globally, reuse the controller
+            if (globalController) {
+                initCount++;
+                controllerRef.current = globalController;
+                await globalController.ready;
+                if (isMounted) {
+                    setReady(true);
+                }
+                return;
+            }
+            // Dynamic import to ensure this only runs on client
+            const { initWebKit } = await import('../init');
+            const controller = initWebKit(optionsRef.current);
+            globalController = controller;
+            initCount++;
+            controllerRef.current = controller;
+            await controller.ready;
+            if (isMounted) {
+                setReady(true);
+            }
+        };
+        initialize();
+        return () => {
+            isMounted = false;
+            initCount--;
+            // Only dispose if this was the last user of the global controller
+            if (initCount <= 0 && globalController) {
+                globalController.dispose();
+                globalController = null;
+                initCount = 0;
+            }
+        };
+    }, [skip]);
+    return {
+        ready,
+        theme: controllerRef.current?.theme,
+        dispose: () => {
+            controllerRef.current?.dispose();
+            if (controllerRef.current === globalController) {
+                globalController = null;
+                initCount = 0;
+            }
+            controllerRef.current = null;
+        }
+    };
+}

package/build/register.cjs

@@ -23,6 +23,7 @@ require("./elements/monitor/index.cjs");
 require("./elements/monitor/fps.cjs");
 require("./elements/number/index.cjs");
 require("./elements/origin/index.cjs");
+require("./elements/panel/index.cjs");
 require("./elements/popover/index.cjs");
 require("./elements/radio/index.cjs");
 require("./elements/radio/input.cjs");

package/build/register.d.cts

@@ -20,6 +20,7 @@ import "./elements/monitor/index.cjs";
 import "./elements/monitor/fps.cjs";
 import "./elements/number/index.cjs";
 import "./elements/origin/index.cjs";
+import "./elements/panel/index.cjs";
 import "./elements/popover/index.cjs";
 import "./elements/radio/index.cjs";
 import "./elements/radio/input.cjs";

package/build/register.d.ts

@@ -20,6 +20,7 @@ import "./elements/monitor/index.js";
 import "./elements/monitor/fps.js";
 import "./elements/number/index.js";
 import "./elements/origin/index.js";
+import "./elements/panel/index.js";
 import "./elements/popover/index.js";
 import "./elements/radio/index.js";
 import "./elements/radio/input.js";

package/build/register.js

@@ -21,6 +21,7 @@ import "./elements/monitor/index.js";
 import "./elements/monitor/fps.js";
 import "./elements/number/index.js";
 import "./elements/origin/index.js";
+import "./elements/panel/index.js";
 import "./elements/popover/index.js";
 import "./elements/radio/index.js";
 import "./elements/radio/input.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easemate/web-kit",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "UI kit of web components for easemate - a typescript animation library",
   "type": "module",
   "files": [
@@ -55,6 +55,7 @@
       "./decorators": "./src/decorators/index.ts",
       "./utils": "./src/utils/index.ts",
       "./theme": "./src/theme/index.ts",
+      "./react": "./src/react/index.ts",
       "./register": "./src/register.ts"
     }
   },
@@ -84,12 +85,25 @@
       "import": "./build/theme/index.js",
       "require": "./build/theme/index.cjs"
     },
+    "./react": {
+      "types": "./build/react/index.d.cts",
+      "import": "./build/react/index.js",
+      "require": "./build/react/index.cjs"
+    },
     "./register": {
       "types": "./build/register.d.cts",
       "import": "./build/register.js",
       "require": "./build/register.cjs"
     }
   },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "main": "./build/index.cjs",
   "types": "./build/index.d.cts",
   "module": "./build/index.js",