py-test-component 1.0.2 → 1.0.4

package/dist/py-component.js.LICENSE.txt

@@ -6,6 +6,12 @@
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
 
+/**
+  * vue-custom-element v3.3.0
+  * (c) 2021 Karol Fabjańczuk
+  * @license MIT
+  */
+
 /**
  * @license
  * Lodash <https://lodash.com/>

package/index.d.ts

@@ -1,3 +1,7 @@
+// ============================================
+// py-test-component - TypeScript 类型定义
+// ============================================
+
 declare module 'py-test-component' {
   export interface PyComponentStore {
     set(config: Record<string, any>): void;
@@ -35,6 +39,8 @@ declare module 'py-test-component/react' {
   export interface PyTableProps {
     /** 表格数据 */
     data?: Record<string, any>[];
+    /** 加载中的占位内容 */
+    loading?: ReactNode;
     /** 其他 HTML 属性 */
     [key: string]: any;
   }
@@ -42,29 +48,33 @@ declare module 'py-test-component/react' {
   export interface PyWeatherProps {
     /** 城市名称 */
     city?: string;
+    /** 加载中的占位内容 */
+    loading?: ReactNode;
     /** 其他 HTML 属性 */
     [key: string]: any;
   }
 
-  export interface PyTableRef {
-    /** 获取 DOM 元素 */
-    getElement: () => HTMLElement | null;
-  }
-
-  export interface PyWeatherRef {
+  export interface PyComponentRef {
     /** 获取 DOM 元素 */
     getElement: () => HTMLElement | null;
+    /** 是否已加载完成 */
+    loaded: boolean;
+    /** 加载错误信息 */
+    error: Error | null;
   }
 
-  /** 表格组件 */
-  export const PyTable: ForwardRefExoticComponent<PyTableProps & RefAttributes<PyTableRef>>;
+  /** 表格组件 - React 版本 */
+  export const PyTable: ForwardRefExoticComponent<PyTableProps & RefAttributes<PyComponentRef>>;
 
-  /** 天气组件 */
-  export const PyWeather: ForwardRefExoticComponent<PyWeatherProps & RefAttributes<PyWeatherRef>>;
+  /** 天气组件 - React 版本 */
+  export const PyWeather: ForwardRefExoticComponent<PyWeatherProps & RefAttributes<PyComponentRef>>;
 
   /** 初始化组件库 */
-  export function initPyComponent(config?: Record<string, any>): void;
+  export function initPyComponent(config?: Record<string, any>): Promise<any>;
 
   /** 获取全局 store */
   export function getStore(): Record<string, any> | null;
+
+  /** 预加载组件库（可提前调用以加速渲染） */
+  export function preloadPyComponent(): Promise<any>;
 }

package/package.json

@@ -1,17 +1,26 @@
 {
   "name": "py-test-component",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Vue2 + ElementUI 组件库，支持 React 使用",
   "main": "dist/py-component.js",
   "module": "dist/py-component.esm.js",
   "types": "index.d.ts",
   "exports": {
     ".": {
+      "types": "./index.d.ts",
       "import": "./dist/py-component.esm.js",
       "require": "./dist/py-component.js"
     },
-    "./vue": "./src/vue/index.js",
-    "./react": "./src/react/index.js"
+    "./vue": {
+      "types": "./index.d.ts",
+      "import": "./src/vue/index.js",
+      "require": "./src/vue/index.js"
+    },
+    "./react": {
+      "types": "./index.d.ts",
+      "import": "./src/react/index.js",
+      "require": "./src/react/index.js"
+    }
   },
   "files": [
     "dist",
@@ -24,24 +33,25 @@
     "dev": "webpack --mode development --watch"
   },
   "dependencies": {
-    "vue": "^2.7.14",
-    "element-ui": "^2.15.13"
+    "element-ui": "^2.15.0",
+    "vue": "^2.7.0",
+    "vue-custom-element": "^3.3.0"
   },
   "devDependencies": {
-    "webpack": "^5.88.0",
-    "webpack-cli": "^5.1.0",
-    "vue-loader": "^15.10.1",
-    "vue-template-compiler": "^2.7.14",
-    "css-loader": "^6.8.1",
-    "style-loader": "^1.3.0",
-    "babel-loader": "^9.1.2",
     "@babel/core": "^7.22.0",
     "@babel/preset-env": "^7.22.0",
-    "@vue/web-component-wrapper": "^1.3.0"
+    "@vue/web-component-wrapper": "^1.3.0",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.8.1",
+    "style-loader": "^1.3.0",
+    "vue-loader": "^15.10.1",
+    "vue-template-compiler": "^2.7.14",
+    "webpack": "^5.88.0",
+    "webpack-cli": "^5.1.0"
   },
   "peerDependencies": {
-    "vue": "^2.7.0",
-    "element-ui": "^2.15.0"
+    "element-ui": "^2.15.0",
+    "vue": "^2.7.0"
   },
   "peerDependenciesMeta": {
     "vue": {

package/src/react/index.js

@@ -1,65 +1,135 @@
-import { createElement, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { createElement, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 
-// 加载脚本的 Promise（只加载一次）
+// 注入 ElementUI CSS（只执行一次）
+let cssInjected = false;
+function injectElementUICSS() {
+  if (cssInjected || typeof document === 'undefined') return;
+  cssInjected = true;
+
+  // 检查是否已存在
+  if (document.querySelector('link[data-py-component-css]')) return;
+
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css';
+  link.dataset.pyComponentCss = 'true';
+  document.head.appendChild(link);
+}
+
+// 加载状态管理
 let loadPromise = null;
+let isLoaded = false;
+
+/**
+ * 加载组件库核心逻辑
+ * 使用 ESM 动态导入，由构建工具处理路径解析
+ */
+async function doLoad() {
+  if (typeof window === 'undefined') return null;
+  if (window.PyComponent) return window.PyComponent;
+
+  const module = await import('py-test-component');
+  const PyComponent = module.default || module;
+
+  if (PyComponent && typeof window !== 'undefined') {
+    window.PyComponent = PyComponent;
+  }
 
+  return PyComponent;
+}
+
+/**
+ * 获取或创建加载 Promise
+ */
 function loadPyComponent() {
   if (loadPromise) return loadPromise;
-  if (typeof window === 'undefined') return Promise.resolve();
-  if (window.PyComponent) return Promise.resolve(window.PyComponent);
-
-  loadPromise = new Promise((resolve, reject) => {
-    const script = document.createElement('script');
-    script.src = '/py-component.js';
-    script.async = true;
-    script.onload = () => resolve(window.PyComponent);
-    script.onerror = reject;
-    document.body.appendChild(script);
+  if (isLoaded && window.PyComponent) {
+    return Promise.resolve(window.PyComponent);
+  }
+
+  loadPromise = doLoad().finally(() => {
+    isLoaded = true;
   });
 
   return loadPromise;
 }
 
+/**
+ * 使用组件库的 Hook
+ */
+function usePyComponent() {
+  const [loaded, setLoaded] = useState(isLoaded);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    // 自动注入 CSS
+    injectElementUICSS();
+
+    if (isLoaded) {
+      setLoaded(true);
+      return;
+    }
+
+    loadPyComponent()
+      .then(() => setLoaded(true))
+      .catch((err) => {
+        console.error('[py-test-component] 加载失败:', err);
+        setError(err);
+      });
+  }, []);
+
+  return { loaded, error, PyComponent: typeof window !== 'undefined' ? window.PyComponent : null };
+}
+
 // PyTable React 包装组件
-export const PyTable = forwardRef(function PyTable({ data, ...props }, ref) {
+export const PyTable = forwardRef(function PyTable({ data, loading: propsLoading, ...props }, ref) {
   const elRef = useRef(null);
+  const { loaded, error } = usePyComponent();
 
   useImperativeHandle(ref, () => ({
-    getElement: () => elRef.current
+    getElement: () => elRef.current,
+    loaded,
+    error
   }));
 
   useEffect(() => {
-    loadPyComponent();
-  }, []);
-
-  useEffect(() => {
-    if (elRef.current && data) {
+    if (elRef.current && data && loaded) {
       elRef.current.setAttribute('table-data', JSON.stringify(data));
     }
-  }, [data]);
+  }, [data, loaded]);
+
+  if (!loaded && propsLoading) {
+    return createElement('div', { style: { padding: '20px', textAlign: 'center' } }, propsLoading);
+  }
 
   return createElement('py-table', { ref: elRef, ...props });
 });
 
 // PyWeather React 包装组件
-export const PyWeather = forwardRef(function PyWeather(props, ref) {
+export const PyWeather = forwardRef(function PyWeather({ loading: propsLoading, ...props }, ref) {
   const elRef = useRef(null);
+  const { loaded, error } = usePyComponent();
 
   useImperativeHandle(ref, () => ({
-    getElement: () => elRef.current
+    getElement: () => elRef.current,
+    loaded,
+    error
   }));
 
-  useEffect(() => {
-    loadPyComponent();
-  }, []);
+  if (!loaded && propsLoading) {
+    return createElement('div', { style: { padding: '20px', textAlign: 'center' } }, propsLoading);
+  }
 
   return createElement('py-weather', { ref: elRef, ...props });
 });
 
 // 初始化函数
 export function initPyComponent(config) {
-  loadPyComponent().then((PyComponent) => {
-    PyComponent.init(config);
+  return loadPyComponent().then((PyComponent) => {
+    if (PyComponent?.init) {
+      PyComponent.init(config);
+    }
+    return PyComponent;
   });
 }
 
@@ -67,3 +137,8 @@ export function initPyComponent(config) {
 export function getStore() {
   return typeof window !== 'undefined' ? window.PyComponent?.store : null;
 }
+
+// 预加载函数
+export function preloadPyComponent() {
+  return loadPyComponent();
+}