ifs-code-tools 1.0.1

package/dist/index.d.cts

@@ -0,0 +1,167 @@
+import React from 'react';
+
+/**
+ * Widget 类型定义
+ */
+interface WidgetProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: Partial<CSSStyleDeclaration>;
+    /** 其他自定义属性 */
+    [key: string]: unknown;
+}
+interface WidgetInstance {
+    /** 更新 Widget props */
+    update: (newProps: WidgetProps) => void;
+    /** 卸载 Widget */
+    unmount: () => void;
+}
+interface LoadWidgetOptions {
+    /** Widget 根目录地址（如 https://cdn.example.com/widgets/my-widget），与 appId 二选一 */
+    url?: string;
+    /** Widget 应用 ID，与 url 二选一 */
+    appId?: string;
+    /** 挂载容器，可以是 DOM 元素或选择器 */
+    container: HTMLElement | string;
+    /** Widget 属性 */
+    props?: WidgetProps;
+    /** 加载超时时间（毫秒），默认 30000 */
+    timeout?: number;
+    /** 加载完成回调 */
+    onLoad?: () => void;
+    /** 加载失败回调 */
+    onError?: (error: Error) => void;
+}
+
+/**
+ * Widget 加载器
+ * 轻量级工具，用于在第三方平台嵌入 Mixo Widget
+ */
+
+/**
+ * 加载并挂载 Widget
+ *
+ * @example
+ * ```ts
+ * import { widget } from '@ali/mixo-tools';
+ *
+ * // 方式一：通过 url 加载
+ * const instance = await widget.loadWidget({
+ *   url: 'https://cdn.example.com/widgets/my-widget',
+ *   container: '#widget-container',
+ *   props: { theme: 'dark' }
+ * });
+ *
+ * // 方式二：通过 appId 加载
+ * const instance = await widget.loadWidget({
+ *   appId: 'my-app-id',
+ *   container: '#widget-container',
+ *   props: { theme: 'dark' }
+ * });
+ *
+ * // 更新 props
+ * instance.update({ theme: 'light' });
+ *
+ * // 卸载
+ * instance.unmount();
+ * ```
+ */
+declare function loadWidget(options: LoadWidgetOptions): Promise<WidgetInstance>;
+/**
+ * 预加载 Widget 资源（不挂载）
+ * 用于提前加载 Widget，优化用户体验
+ *
+ * @example
+ * ```ts
+ * import { widget } from '@ali/mixo-tools';
+ *
+ * // 方式一：通过 url 预加载
+ * widget.preloadWidget({ url: 'https://cdn.example.com/widgets/my-widget' });
+ *
+ * // 方式二：通过 appId 预加载
+ * widget.preloadWidget({ appId: 'my-app-id' });
+ *
+ * // 用户交互时快速挂载（会从缓存中读取，加载更快）
+ * const instance = await widget.loadWidget({
+ *   url: 'https://cdn.example.com/widgets/my-widget',
+ *   container: '#container'
+ * });
+ * ```
+ */
+declare function preloadWidget(options: {
+    url?: string;
+    appId?: string;
+}): Promise<void>;
+
+/**
+ * WidgetRender - React 组件形式的 Widget 加载器
+ */
+
+/**
+ * WidgetRender 组件属性
+ */
+interface WidgetRenderProps {
+    /** Widget 根目录地址，与 appId 二选一 */
+    url?: string;
+    /** Widget 应用 ID，与 url 二选一 */
+    appId?: string;
+    /** 传递给 Widget 的属性 */
+    widgetProps?: WidgetProps;
+    /** 加载超时时间（毫秒），默认 30000 */
+    timeout?: number;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: React.CSSProperties;
+    /** 加载中渲染内容 */
+    loading?: React.ReactNode;
+    /** 加载失败渲染内容，传入错误对象 */
+    fallback?: React.ReactNode | ((error: Error) => React.ReactNode);
+    /** 加载完成回调 */
+    onLoad?: () => void;
+    /** 加载失败回调 */
+    onError?: (error: Error) => void;
+}
+/**
+ * WidgetRender - React 组件形式的 Widget 加载器
+ *
+ * @example
+ * ```tsx
+ * import { WidgetRender } from '@ali/mixo-tools';
+ *
+ * function App() {
+ *   return (
+ *     // 方式一：通过 url 加载
+ *     <WidgetRender
+ *       url="https://cdn.example.com/widgets/my-widget"
+ *       widgetProps={{ theme: 'dark' }}
+ *       loading={<div>Loading...</div>}
+ *       fallback={(error) => <div>Error: {error.message}</div>}
+ *     />
+ *
+ *     // 方式二：通过 appId 加载
+ *     <WidgetRender
+ *       appId="my-app-id"
+ *       widgetProps={{ theme: 'dark' }}
+ *       loading={<div>Loading...</div>}
+ *       fallback={(error) => <div>Error: {error.message}</div>}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function WidgetRender(props: WidgetRenderProps): React.ReactElement;
+
+/**
+ * Widget 模块
+ * 提供 Widget 加载和 React 组件
+ */
+
+declare const _default: {
+    loadWidget: typeof loadWidget;
+    preloadWidget: typeof preloadWidget;
+    WidgetRender: typeof WidgetRender;
+};
+
+export { _default as widget };

package/dist/index.d.ts

@@ -0,0 +1,167 @@
+import React from 'react';
+
+/**
+ * Widget 类型定义
+ */
+interface WidgetProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: Partial<CSSStyleDeclaration>;
+    /** 其他自定义属性 */
+    [key: string]: unknown;
+}
+interface WidgetInstance {
+    /** 更新 Widget props */
+    update: (newProps: WidgetProps) => void;
+    /** 卸载 Widget */
+    unmount: () => void;
+}
+interface LoadWidgetOptions {
+    /** Widget 根目录地址（如 https://cdn.example.com/widgets/my-widget），与 appId 二选一 */
+    url?: string;
+    /** Widget 应用 ID，与 url 二选一 */
+    appId?: string;
+    /** 挂载容器，可以是 DOM 元素或选择器 */
+    container: HTMLElement | string;
+    /** Widget 属性 */
+    props?: WidgetProps;
+    /** 加载超时时间（毫秒），默认 30000 */
+    timeout?: number;
+    /** 加载完成回调 */
+    onLoad?: () => void;
+    /** 加载失败回调 */
+    onError?: (error: Error) => void;
+}
+
+/**
+ * Widget 加载器
+ * 轻量级工具，用于在第三方平台嵌入 Mixo Widget
+ */
+
+/**
+ * 加载并挂载 Widget
+ *
+ * @example
+ * ```ts
+ * import { widget } from '@ali/mixo-tools';
+ *
+ * // 方式一：通过 url 加载
+ * const instance = await widget.loadWidget({
+ *   url: 'https://cdn.example.com/widgets/my-widget',
+ *   container: '#widget-container',
+ *   props: { theme: 'dark' }
+ * });
+ *
+ * // 方式二：通过 appId 加载
+ * const instance = await widget.loadWidget({
+ *   appId: 'my-app-id',
+ *   container: '#widget-container',
+ *   props: { theme: 'dark' }
+ * });
+ *
+ * // 更新 props
+ * instance.update({ theme: 'light' });
+ *
+ * // 卸载
+ * instance.unmount();
+ * ```
+ */
+declare function loadWidget(options: LoadWidgetOptions): Promise<WidgetInstance>;
+/**
+ * 预加载 Widget 资源（不挂载）
+ * 用于提前加载 Widget，优化用户体验
+ *
+ * @example
+ * ```ts
+ * import { widget } from '@ali/mixo-tools';
+ *
+ * // 方式一：通过 url 预加载
+ * widget.preloadWidget({ url: 'https://cdn.example.com/widgets/my-widget' });
+ *
+ * // 方式二：通过 appId 预加载
+ * widget.preloadWidget({ appId: 'my-app-id' });
+ *
+ * // 用户交互时快速挂载（会从缓存中读取，加载更快）
+ * const instance = await widget.loadWidget({
+ *   url: 'https://cdn.example.com/widgets/my-widget',
+ *   container: '#container'
+ * });
+ * ```
+ */
+declare function preloadWidget(options: {
+    url?: string;
+    appId?: string;
+}): Promise<void>;
+
+/**
+ * WidgetRender - React 组件形式的 Widget 加载器
+ */
+
+/**
+ * WidgetRender 组件属性
+ */
+interface WidgetRenderProps {
+    /** Widget 根目录地址，与 appId 二选一 */
+    url?: string;
+    /** Widget 应用 ID，与 url 二选一 */
+    appId?: string;
+    /** 传递给 Widget 的属性 */
+    widgetProps?: WidgetProps;
+    /** 加载超时时间（毫秒），默认 30000 */
+    timeout?: number;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: React.CSSProperties;
+    /** 加载中渲染内容 */
+    loading?: React.ReactNode;
+    /** 加载失败渲染内容，传入错误对象 */
+    fallback?: React.ReactNode | ((error: Error) => React.ReactNode);
+    /** 加载完成回调 */
+    onLoad?: () => void;
+    /** 加载失败回调 */
+    onError?: (error: Error) => void;
+}
+/**
+ * WidgetRender - React 组件形式的 Widget 加载器
+ *
+ * @example
+ * ```tsx
+ * import { WidgetRender } from '@ali/mixo-tools';
+ *
+ * function App() {
+ *   return (
+ *     // 方式一：通过 url 加载
+ *     <WidgetRender
+ *       url="https://cdn.example.com/widgets/my-widget"
+ *       widgetProps={{ theme: 'dark' }}
+ *       loading={<div>Loading...</div>}
+ *       fallback={(error) => <div>Error: {error.message}</div>}
+ *     />
+ *
+ *     // 方式二：通过 appId 加载
+ *     <WidgetRender
+ *       appId="my-app-id"
+ *       widgetProps={{ theme: 'dark' }}
+ *       loading={<div>Loading...</div>}
+ *       fallback={(error) => <div>Error: {error.message}</div>}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function WidgetRender(props: WidgetRenderProps): React.ReactElement;
+
+/**
+ * Widget 模块
+ * 提供 Widget 加载和 React 组件
+ */
+
+declare const _default: {
+    loadWidget: typeof loadWidget;
+    preloadWidget: typeof preloadWidget;
+    WidgetRender: typeof WidgetRender;
+};
+
+export { _default as widget };