@aem-sdk/tracker-plugin-anim-fluency 0.1.0-beta.0

package/README.md

@@ -0,0 +1,21 @@
+# @aem-sdk/tracker-plugin-anim-fluency
+
+Browser animation fluency 插件。保留旧 `@ali/aes-tracker-plugin-animFluency` 的核心采集能力。
+
+## 安装
+
+```bash
+pnpm add @aem-sdk/tracker @aem-sdk/tracker-plugin-anim-fluency@next
+```
+
+## 用法
+
+```ts
+import AES from "@aem-sdk/tracker";
+import AnimFluencyPlugin from "@aem-sdk/tracker-plugin-anim-fluency";
+
+const aes = new AES({ pid: "demo" });
+aes.use(AnimFluencyPlugin);
+```
+
+插件只在注册后监听 `transitionstart` 与 `animationstart`，不会在 import 时注册 listener、启动 RAF 或发送日志。上报字段直接使用新平台最终存储字段：`p1` 为动画节点 selector，`p2` 为动画名，`p3` 为掉帧率，`p4` 为平均 FPS，`p6` 为动画类型。

package/dist/index.cjs

@@ -0,0 +1 @@
+function e(e){if(!e)return;if(Object.prototype.toString.call(e)===`[object Array]`)return t(e);let n=[],r=e;for(;r;)n.push(r),r=r.parentNode;return t(n)}function t(e){let t=[],n=typeof document<`u`?document.body:void 0;for(let r=0;r<e.length;r+=1){let i=e[r];if(i===n||typeof document<`u`&&i===document||typeof window<`u`&&i===window)break;let a=i;if(a.id){t.push(`#${String(a.id)}`);break}if(typeof a.className==`string`&&a.className){t.push(`.${a.className.split(/\s+/).filter(e=>!!e).join(`.`)}`);continue}a.nodeName&&t.push(String(a.nodeName))}return t.reverse().join(` `)||void 0}const n=e=>{if(typeof window>`u`||typeof document>`u`)return;let t={},n=Math.random(),i=`__aesTrans_${n}`,o=`__aesAnim_${n}`,c=(e,n)=>{let r=a();if(!r||t[e])return;let i,o=()=>{let a=s();if(!i){i=a,t[e]=r(o);return}n(a-i),i=a,t[e]=r(o)};t[e]=r(o)};try{document.addEventListener(`transitionstart`,n=>{r(e,n,{animName:n.propertyName,animType:`transition`,endEventName:`transitionend`,markerProperty:i,requestIds:t,startFps:c})}),document.addEventListener(`animationstart`,n=>{r(e,n,{animName:n.animationName,animType:`animation`,endEventName:`animationend`,markerProperty:o,requestIds:t,startFps:c})})}catch(e){return}};function r(t,n,r){if(!n||!n.target||!n.path)return;let a=n.target;if(a[r.markerProperty])return;a[r.markerProperty]=1;let s=String(Math.random()),l=new Date().getTime(),u=[],d;r.startFps(s,e=>{u.length>1e3&&u.shift(),u.push(e)});let f=(n={})=>{d&&a.removeEventListener&&a.removeEventListener(r.endEventName,d);let f=r.requestIds[s];if(f){var p;(p=o())==null||p(f)}delete r.requestIds[s],u.length&&c(()=>{let o=!Number.isNaN(n.elapsedTime)&&n.elapsedTime!==void 0?n.elapsedTime*1e3:new Date().getTime()-l,s=Math.floor(o/16.666666666666668),c=(s-u.length)/s,d=1e3/i(u);try{t.log(`animFluency`,{p1:e(n.path||a),p2:r.animName,p3:c,p4:d,p6:r.animType})}catch(e){return}})},p=setTimeout(()=>{f()},1100);a.addEventListener&&(d=e=>{clearTimeout(p),f(e)},a.addEventListener(r.endEventName,d))}function i(e){return e.reduce((e,t)=>e+t,0)/e.length}function a(){let e=window,t=e.requestAnimationFrame||e.webkitRequestAnimationFrame;return typeof t==`function`?t:void 0}function o(){let e=window,t=e.cancelAnimationFrame||e.webkitCancelAnimationFrame;return typeof t==`function`?t:void 0}function s(){return window.performance&&performance.now?performance.now():new Date().getTime()}function c(e){try{let t=globalThis.requestIdleCallback;if(typeof t==`function`){t(e,{timeout:1e3});return}}catch(e){}setTimeout(e,0)}module.exports=n;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { AESPluginFactory } from "@aem-sdk/tracker";
+
+//#region src/index.d.ts
+interface AnimFluencyPluginOptions {}
+declare const AESPluginAnimFluency: AESPluginFactory<void, AnimFluencyPluginOptions>;
+//#endregion
+export { AnimFluencyPluginOptions, AESPluginAnimFluency as default };

package/dist/index.mjs

@@ -0,0 +1 @@
+function e(e){if(!e)return;if(Object.prototype.toString.call(e)===`[object Array]`)return t(e);let n=[],r=e;for(;r;)n.push(r),r=r.parentNode;return t(n)}function t(e){let t=[],n=typeof document<`u`?document.body:void 0;for(let r=0;r<e.length;r+=1){let i=e[r];if(i===n||typeof document<`u`&&i===document||typeof window<`u`&&i===window)break;let a=i;if(a.id){t.push(`#${String(a.id)}`);break}if(typeof a.className==`string`&&a.className){t.push(`.${a.className.split(/\s+/).filter(e=>!!e).join(`.`)}`);continue}a.nodeName&&t.push(String(a.nodeName))}return t.reverse().join(` `)||void 0}const n=e=>{if(typeof window>`u`||typeof document>`u`)return;let t={},n=Math.random(),i=`__aesTrans_${n}`,o=`__aesAnim_${n}`,c=(e,n)=>{let r=a();if(!r||t[e])return;let i,o=()=>{let a=s();if(!i){i=a,t[e]=r(o);return}n(a-i),i=a,t[e]=r(o)};t[e]=r(o)};try{document.addEventListener(`transitionstart`,n=>{r(e,n,{animName:n.propertyName,animType:`transition`,endEventName:`transitionend`,markerProperty:i,requestIds:t,startFps:c})}),document.addEventListener(`animationstart`,n=>{r(e,n,{animName:n.animationName,animType:`animation`,endEventName:`animationend`,markerProperty:o,requestIds:t,startFps:c})})}catch(e){return}};function r(t,n,r){if(!n||!n.target||!n.path)return;let a=n.target;if(a[r.markerProperty])return;a[r.markerProperty]=1;let s=String(Math.random()),l=new Date().getTime(),u=[],d;r.startFps(s,e=>{u.length>1e3&&u.shift(),u.push(e)});let f=(n={})=>{d&&a.removeEventListener&&a.removeEventListener(r.endEventName,d);let f=r.requestIds[s];if(f){var p;(p=o())==null||p(f)}delete r.requestIds[s],u.length&&c(()=>{let o=!Number.isNaN(n.elapsedTime)&&n.elapsedTime!==void 0?n.elapsedTime*1e3:new Date().getTime()-l,s=Math.floor(o/16.666666666666668),c=(s-u.length)/s,d=1e3/i(u);try{t.log(`animFluency`,{p1:e(n.path||a),p2:r.animName,p3:c,p4:d,p6:r.animType})}catch(e){return}})},p=setTimeout(()=>{f()},1100);a.addEventListener&&(d=e=>{clearTimeout(p),f(e)},a.addEventListener(r.endEventName,d))}function i(e){return e.reduce((e,t)=>e+t,0)/e.length}function a(){let e=window,t=e.requestAnimationFrame||e.webkitRequestAnimationFrame;return typeof t==`function`?t:void 0}function o(){let e=window,t=e.cancelAnimationFrame||e.webkitCancelAnimationFrame;return typeof t==`function`?t:void 0}function s(){return window.performance&&performance.now?performance.now():new Date().getTime()}function c(e){try{let t=globalThis.requestIdleCallback;if(typeof t==`function`){t(e,{timeout:1e3});return}}catch(e){}setTimeout(e,0)}export{n as default};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@aem-sdk/tracker-plugin-anim-fluency",
+  "version": "0.1.0-beta.0",
+  "description": "AEM Web SDK browser animation fluency plugin",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "devDependencies": {
+    "@aem-sdk/tracker": "0.1.0-beta.0"
+  },
+  "peerDependencies": {
+    "@aem-sdk/tracker": "^0.1.0-beta.0"
+  },
+  "aemSizeBudget": {
+    "gzipBytes": 3072
+  },
+  "scripts": {
+    "build": "tsdown",
+    "clean": "rm -rf dist dist-types",
+    "typecheck": "tsc -b tsconfig.json"
+  }
+}