py-test-component 1.0.11 → 2.0.1

package/package.json

@@ -1,23 +1,19 @@
 {
   "name": "py-test-component",
-  "version": "1.0.11",
+  "version": "2.0.1",
   "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": {
-      "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"
     }
@@ -25,8 +21,7 @@
   "files": [
     "dist",
     "src/react",
-    "src/vue",
-    "index.d.ts"
+    "src/vue"
   ],
   "scripts": {
     "build": "webpack --mode production",

package/src/react/index.js

@@ -1,146 +1,55 @@
-import { createElement, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import { useEffect, useRef, useState, forwardRef } from 'react';
 
 // 注入 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;
-
-/**
- * 加载组件库核心逻辑
- * 动态加载 UMD 构建产物，避免循环依赖
- */
-async function doLoad() {
-  if (typeof window === 'undefined') return null;
-  if (window.PyComponent) return window.PyComponent;
-
-  // 使用相对路径加载构建产物，支持 Webpack/Vite 等构建工具解析
-  const module = await import('../../dist/py-component.esm.js');
-  const PyComponent = module.default || module;
-
-  if (PyComponent && typeof window !== 'undefined') {
-    window.PyComponent = PyComponent;
-  }
-
-  return PyComponent;
-}
-
-/**
- * 获取或创建加载 Promise
- */
-function loadPyComponent() {
-  if (loadPromise) return loadPromise;
-  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);
-
+  const [loaded, setLoaded] = useState(false);
   useEffect(() => {
-    // 自动注入 CSS
     injectElementUICSS();
-
-    if (isLoaded) {
-      setLoaded(true);
-      return;
-    }
-
-    loadPyComponent()
-      .then(() => setLoaded(true))
-      .catch((err) => {
-        console.error('[py-test-component] 加载失败:', err);
-        setError(err);
-      });
+    import('../../dist/py-component.esm.js').then(() => setLoaded(true));
   }, []);
-
-  return { loaded, error, PyComponent: typeof window !== 'undefined' ? window.PyComponent : null };
+  return loaded;
 }
 
-// PyTable React 包装组件
-export const PyTable = forwardRef(function PyTable({ data, loading: propsLoading, ...props }, ref) {
-  const elRef = useRef(null);
-  const { loaded, error } = usePyComponent();
+// 通用包装函数：动态创建 React 组件
+function wrapVueComponent(tagName, dataProp = null) {
+  return forwardRef(function WrappedComponent({ propData, loading, ...props }, ref) {
+    const elRef = useRef(null);
+    const loaded = usePyComponent();
 
-  useImperativeHandle(ref, () => ({
-    getElement: () => elRef.current,
-    loaded,
-    error
-  }));
+    useEffect(() => {
+      if (elRef.current && propData !== undefined && dataProp) {
+        elRef.current[dataProp] = propData;
+      }
+    }, [propData]);
 
-  useEffect(() => {
-    if (elRef.current && data && loaded) {
-      // 直接设置 property，避免 JSON 序列化/反序列化开销
-      elRef.current.tableData = data;
+    if (!loaded && loading) {
+      return <div style={{ padding: '20px', textAlign: 'center' }}>{loading}</div>;
     }
-  }, [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({ loading: propsLoading, ...props }, ref) {
-  const elRef = useRef(null);
-  const { loaded, error } = usePyComponent();
-
-  useImperativeHandle(ref, () => ({
-    getElement: () => elRef.current,
-    loaded,
-    error
-  }));
-
-  if (!loaded && propsLoading) {
-    return createElement('div', { style: { padding: '20px', textAlign: 'center' } }, propsLoading);
-  }
-
-  return createElement('py-weather', { ref: elRef, ...props });
-});
-
-// 初始化函数
-export function initPyComponent(config) {
-  return loadPyComponent().then((PyComponent) => {
-    if (PyComponent?.init) {
-      PyComponent.init(config);
-    }
-    return PyComponent;
+    return <tagName ref={ref || elRef} {...props} />;
   });
 }
 
-// 获取 store
-export function getStore() {
-  return typeof window !== 'undefined' ? window.PyComponent?.store : null;
-}
+// 一键注册所有组件
+export const PyTable = wrapVueComponent('py-table', 'propData');
+export const PyWeather = wrapVueComponent('py-weather', 'propData');
 
-// 预加载函数
-export function preloadPyComponent() {
-  return loadPyComponent();
+// 初始化 store（唯一暴露给外部的 store 方法）
+export function initStore(config) {
+  return import('../../dist/py-component.esm.js').then((m) => {
+    const PyComponent = m.default || m;
+    PyComponent?.store?.set?.(config);
+    return PyComponent?.store;
+  });
 }

package/src/vue/index.js

@@ -1,6 +1,12 @@
 // Vue 项目专用入口 - 直接导出 Vue 组件
 import PyTable from '../components/PyTable.vue';
 import PyWeather from '../components/PyWeather.vue';
+import store from '../store';
 
-export { PyTable, PyWeather };
-export default { PyTable, PyWeather };
+// 初始化 store（统一的方法）
+function initStore(config) {
+  store.set(config);
+}
+
+export { PyTable, PyWeather, initStore };
+export default { PyTable, PyWeather, initStore };