fix: react示例

demo-utm-react/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fingerprintjs/fingerprintjs": "^4.6.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -14,8 +15,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
-    "utm-params-extractor-test": "file:..",
+    "utm-params-extractor-test": "1.0.17",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -24,12 +24,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
+  
   "browserslist": {
     "production": [
       ">0.2%",

demo-utm-react/src/App.tsx

@@ -1,24 +1,35 @@
-import React, { useEffect, useState } from 'react';
-import UtmTracker, { UtmParams } from 'utm-params-extractor-test';
+import { useEffect, useState } from 'react';
+import 'utm-params-extractor-test'; // 引入后会挂载到 window 上
 
 function App() {
-  const [utm, setUtm] = useState<UtmParams | null>(null);
+  const [tracker, setTracker] = useState<null>(null);
 
   useEffect(() => {
-    const params = UtmTracker.get();
-    setUtm(params);
+    // 实例化追踪器，并保存实例到状态
+// @ts-ignore
+    const trackerInstance = new window.UtmTracker({
+      reportUrl: 'http://192.168.3.17:9999/marketing/data/report',
+      autoSend: false
+    });
+// @ts-ignore
+    setTracker(trackerInstance); // 存入实例，而非类本身
+    console.log('初始化完成:', trackerInstance);
   }, []);
 
+  const onClickSend = () => {
+    if (tracker) {
+// @ts-ignore
+      tracker.send(); // 调用实例方法
+    } else {
+      console.warn('UtmTracker 尚未初始化');
+    }
+  };
+
   return (
-    <div style={{ padding: 24 }}>
-      <h1>UTM Params Extractor Demo</h1>
-      <p>本页面演示如何在 React + TypeScript 项目中使用 <code>utm-params-extractor-test</code> 包。</p>
-      <h2>获取到的参数：</h2>
-      <pre style={{ background: '#f6f8fa', padding: 16, borderRadius: 8 }}>
-        {utm ? JSON.stringify(utm, null, 2) : '正在获取...'}
-      </pre>
+    <div>
+      <button onClick={onClickSend}>发送</button>
     </div>
   );
 }
 
-export default App;
+export default App;

package-lock.json

@@ -1,15 +1,16 @@
 {
-  "name": "utm-params-extractor",
-  "version": "1.0.0",
+  "name": "utm-params-extractor-test",
+  "version": "1.0.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "utm-params-extractor",
-      "version": "1.0.0",
+      "name": "utm-params-extractor-test",
+      "version": "1.0.7",
       "license": "MIT",
       "dependencies": {
-        "utm-params-extractor": "^1.0.0"
+        "@fingerprintjs/fingerprintjs": "^4.6.2",
+        "utm-params-extractor-test": "^1.0.0"
       },
       "devDependencies": {
         "@babel/core": "^7.27.7",
@@ -1530,6 +1531,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@fingerprintjs/fingerprintjs": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/@fingerprintjs/fingerprintjs/-/fingerprintjs-4.6.2.tgz",
+      "integrity": "sha512-g8mXuqcFKbgH2CZKwPfVtsUJDHyvcgIABQI7Y0tzWEFXpGxJaXuAuzlifT2oTakjDBLTK4Gaa9/5PERDhqUjtw==",
+      "license": "BUSL-1.1",
+      "dependencies": {
+        "tslib": "^2.4.1"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.11",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@jridgewell/gen-mapping/-/gen-mapping-0.3.11.tgz",
@@ -3433,6 +3443,12 @@
         }
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/undici-types": {
       "version": "7.8.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/undici-types/-/undici-types-7.8.0.tgz",
@@ -3515,11 +3531,15 @@
         "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/utm-params-extractor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/utm-params-extractor/-/utm-params-extractor-1.0.0.tgz",
-      "integrity": "sha512-hHDp0uOuwX0iL6cgIh1XQTpDBkidZtxhqgpwBTyMr1EJCYCCWSgbg/lG97wKLFyWs1qkzMVenww/1QxTdpcHBQ==",
-      "license": "MIT"
+    "node_modules/utm-params-extractor-test": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npmjs.org/utm-params-extractor-test/-/utm-params-extractor-test-1.0.17.tgz",
+      "integrity": "sha512-OIIgIxIgTwApL0DdaD3e0WtLPvb0HvPNCaP6g/51wfdBO10jz1TgvnrgrfaYgWrmNW5zBnY7ZgrhWelpdCtUjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@fingerprintjs/fingerprintjs": "^4.6.2",
+        "utm-params-extractor-test": "^1.0.0"
+      }
     },
     "node_modules/watchpack": {
       "version": "2.4.4",

package.json

@@ -27,6 +27,7 @@
   "author": "Jiachen",
   "license": "MIT",
   "dependencies": {
+    "@fingerprintjs/fingerprintjs": "^4.6.2",
     "utm-params-extractor-test": "^1.0.0"
   },
   "types": "index.d.ts"