From d976ca811cba57d28dae9fbbeac055b9841d13e1 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sat, 4 Apr 2026 13:31:09 +0200 Subject: [PATCH] feat: add OpenPanel analytics via @openpanel/web SDK --- package.json | 3 +- pnpm-lock.yaml | 158 +++++++++++++++++++++++++++++------------------ src/main.ts | 1 + src/openpanel.ts | 8 +++ 4 files changed, 110 insertions(+), 60 deletions(-) create mode 100644 src/openpanel.ts diff --git a/package.json b/package.json index 99723d2..147f4cb 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "commit": "cz" }, "dependencies": { + "@openpanel/web": "^1.3.0", "@vueuse/core": "^10.7.2", "@vueuse/math": "^10.7.2", "bulma": "^0.9.4", @@ -30,12 +31,12 @@ "vue-router": "^4.6.4" }, "devDependencies": { - "@types/md5": "^2.3.6", "@faker-js/faker": "^10.2.0", "@pinia/testing": "^0.1.3", "@rushstack/eslint-patch": "^1.15.0", "@tsconfig/node18": "^18.2.6", "@types/jsdom": "^27.0.0", + "@types/md5": "^2.3.6", "@types/node": "^25.0.10", "@vitejs/plugin-vue": "^5.0.4", "@vitest/browser": "^1.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fdfe271..ae8006b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@openpanel/web': + specifier: ^1.3.0 + version: 1.3.0 '@vueuse/core': specifier: ^10.7.2 version: 10.7.2(vue@3.5.27(typescript@5.9.3)) @@ -244,10 +247,6 @@ packages: resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==} engines: {node: '>=6.9.0'} - '@babel/helper-string-parser@7.21.5': - resolution: {integrity: sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==} - engines: {node: '>=6.9.0'} - '@babel/helper-string-parser@7.27.1': resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} engines: {node: '>=6.9.0'} @@ -276,11 +275,6 @@ packages: resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==} engines: {node: '>=6.9.0'} - '@babel/parser@7.23.9': - resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==} - engines: {node: '>=6.0.0'} - hasBin: true - '@babel/parser@7.28.6': resolution: {integrity: sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==} engines: {node: '>=6.0.0'} @@ -705,10 +699,6 @@ packages: resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==} engines: {node: '>=6.9.0'} - '@babel/types@7.21.5': - resolution: {integrity: sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==} - engines: {node: '>=6.9.0'} - '@babel/types@7.28.6': resolution: {integrity: sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==} engines: {node: '>=6.9.0'} @@ -954,6 +944,12 @@ packages: '@one-ini/wasm@0.1.1': resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==} + '@openpanel/sdk@1.3.0': + resolution: {integrity: sha512-VK/1oawBjGdxA+oYtqcWlNXlLT1zRJ9tslHoMvqqsqlcLNOhH26ltcHpyGp5RhtIF7uIkCltiicALfFN7fyldw==} + + '@openpanel/web@1.3.0': + resolution: {integrity: sha512-geUPcn35oMqWlBS7rB4ejP6qzKGs4VDAZhoSw9MD3q/UYkD/pfTEx70z1ydGVJMjHREdXoAL1XVhBLdZmu1gsw==} + '@parcel/watcher-android-arm64@2.5.6': resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==} engines: {node: '>= 10.0.0'} @@ -1171,6 +1167,12 @@ packages: cpu: [x64] os: [win32] + '@rrweb/types@2.0.0-alpha.20': + resolution: {integrity: sha512-RbnDgKxA/odwB1R4gF7eUUj+rdSrq6ROQJsnMw7MIsGzlbSYvJeZN8YY4XqU0G6sKJvXI6bSzk7w/G94jNwzhw==} + + '@rrweb/utils@2.0.0-alpha.20': + resolution: {integrity: sha512-MTQOmhPRe39C0fYaCnnVYOufQsyGzwNXpUStKiyFSfGLUJrzuwhbRoUAKR5w6W2j5XuA0bIz3ZDIBztkquOhLw==} + '@rushstack/eslint-patch@1.15.0': resolution: {integrity: sha512-ojSshQPKwVvSMR8yT2L/QtUkV5SXi/IfDiJ4/8d6UbTPjiHVmxZzUAzGD8Tzks1b9+qQkZa0isUOvYObedITaw==} @@ -1197,6 +1199,9 @@ packages: '@types/conventional-commits-parser@5.0.0': resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==} + '@types/css-font-loading-module@0.0.7': + resolution: {integrity: sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==} + '@types/estree@0.0.39': resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==} @@ -1490,6 +1495,9 @@ packages: resolution: {integrity: sha512-PJcP4d1Fr8Zp+YIfGN93G0fjDj/6J0I6Gf6p0IpJk8qKQpdFDm4gB+lc202iv2YkyC+oT6b4Ik2W9LzvpSKNoQ==} engines: {node: ^16.13 || >=18} + '@xstate/fsm@1.6.5': + resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==} + abbrev@2.0.0: resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -1643,6 +1651,10 @@ packages: bare-path@2.1.0: resolution: {integrity: sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw==} + base64-arraybuffer@1.0.2: + resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==} + engines: {node: '>= 0.6.0'} + base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -3537,9 +3549,18 @@ packages: engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true + rrdom@2.0.0-alpha.20: + resolution: {integrity: sha512-hoqjS4662LtBp82qEz9GrqU36UpEmCvTA2Hns3qdF7cklLFFy3G+0Th8hLytJENleHHWxsB5nWJ3eXz5mSRxdQ==} + rrweb-cssom@0.6.0: resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==} + rrweb-snapshot@2.0.0-alpha.20: + resolution: {integrity: sha512-YTNf9YVeaGRo/jxY3FKBge2c/Ojd/KTHmuWloUSB+oyPXuY73ZeeG873qMMmhIpqEn7hn7aBF1eWEQmP7wjf8A==} + + rrweb@2.0.0-alpha.20: + resolution: {integrity: sha512-CZKDlm+j1VA50Ko3gnMbpvguCAleljsTNXPnVk9aeNP8o6T6kolRbISHyDZpqZ4G+bdDLlQOignPP3jEsXs8Gg==} + run-async@2.4.1: resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==} engines: {node: '>=0.12.0'} @@ -3858,10 +3879,6 @@ packages: resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==} engines: {node: '>=0.6.0'} - to-fast-properties@2.0.0: - resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} - engines: {node: '>=4'} - to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -4376,10 +4393,10 @@ snapshots: '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.21.8) '@babel/helper-module-transforms': 7.21.5 '@babel/helpers': 7.21.5 - '@babel/parser': 7.23.9 + '@babel/parser': 7.28.6 '@babel/template': 7.20.7 '@babel/traverse': 7.21.5 - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 convert-source-map: 1.9.0 debug: 4.3.4 gensync: 1.0.0-beta.2 @@ -4390,18 +4407,18 @@ snapshots: '@babel/generator@7.21.5': dependencies: - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.18 jsesc: 2.5.2 '@babel/helper-annotate-as-pure@7.18.6': dependencies: - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 '@babel/helper-builder-binary-assignment-operator-visitor@7.21.5': dependencies: - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 '@babel/helper-compilation-targets@7.21.5(@babel/core@7.21.8)': dependencies: @@ -4451,19 +4468,19 @@ snapshots: '@babel/helper-function-name@7.21.0': dependencies: '@babel/template': 7.20.7 - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 '@babel/helper-hoist-variables@7.18.6': dependencies: - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 '@babel/helper-member-expression-to-functions@7.21.5': dependencies: - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 '@babel/helper-module-imports@7.21.4': dependencies: - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 '@babel/helper-module-transforms@7.21.5': dependencies: @@ -4471,16 +4488,16 @@ snapshots: '@babel/helper-module-imports': 7.21.4 '@babel/helper-simple-access': 7.21.5 '@babel/helper-split-export-declaration': 7.18.6 - '@babel/helper-validator-identifier': 7.19.1 + '@babel/helper-validator-identifier': 7.28.5 '@babel/template': 7.20.7 '@babel/traverse': 7.21.5 - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 transitivePeerDependencies: - supports-color '@babel/helper-optimise-call-expression@7.18.6': dependencies: - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 '@babel/helper-plugin-utils@7.21.5': {} @@ -4490,7 +4507,7 @@ snapshots: '@babel/helper-annotate-as-pure': 7.18.6 '@babel/helper-environment-visitor': 7.21.5 '@babel/helper-wrap-function': 7.20.5 - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 transitivePeerDependencies: - supports-color @@ -4501,23 +4518,21 @@ snapshots: '@babel/helper-optimise-call-expression': 7.18.6 '@babel/template': 7.20.7 '@babel/traverse': 7.21.5 - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 transitivePeerDependencies: - supports-color '@babel/helper-simple-access@7.21.5': dependencies: - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 '@babel/helper-skip-transparent-expression-wrappers@7.20.0': dependencies: - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 '@babel/helper-split-export-declaration@7.18.6': dependencies: - '@babel/types': 7.21.5 - - '@babel/helper-string-parser@7.21.5': {} + '@babel/types': 7.28.6 '@babel/helper-string-parser@7.27.1': {} @@ -4532,7 +4547,7 @@ snapshots: '@babel/helper-function-name': 7.21.0 '@babel/template': 7.20.7 '@babel/traverse': 7.21.5 - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 transitivePeerDependencies: - supports-color @@ -4540,7 +4555,7 @@ snapshots: dependencies: '@babel/template': 7.20.7 '@babel/traverse': 7.21.5 - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 transitivePeerDependencies: - supports-color @@ -4550,10 +4565,6 @@ snapshots: chalk: 2.4.2 js-tokens: 4.0.0 - '@babel/parser@7.23.9': - dependencies: - '@babel/types': 7.21.5 - '@babel/parser@7.28.6': dependencies: '@babel/types': 7.28.6 @@ -4871,7 +4882,7 @@ snapshots: '@babel/helper-hoist-variables': 7.18.6 '@babel/helper-module-transforms': 7.21.5 '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-validator-identifier': 7.19.1 + '@babel/helper-validator-identifier': 7.28.5 transitivePeerDependencies: - supports-color @@ -5033,7 +5044,7 @@ snapshots: '@babel/plugin-transform-unicode-escapes': 7.21.5(@babel/core@7.21.8) '@babel/plugin-transform-unicode-regex': 7.18.6(@babel/core@7.21.8) '@babel/preset-modules': 0.1.5(@babel/core@7.21.8) - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 babel-plugin-polyfill-corejs2: 0.3.3(@babel/core@7.21.8) babel-plugin-polyfill-corejs3: 0.6.0(@babel/core@7.21.8) babel-plugin-polyfill-regenerator: 0.4.1(@babel/core@7.21.8) @@ -5048,7 +5059,7 @@ snapshots: '@babel/helper-plugin-utils': 7.21.5 '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.21.8) '@babel/plugin-transform-dotall-regex': 7.18.6(@babel/core@7.21.8) - '@babel/types': 7.21.5 + '@babel/types': 7.28.6 esutils: 2.0.3 '@babel/regjsgen@0.8.0': {} @@ -5060,8 +5071,8 @@ snapshots: '@babel/template@7.20.7': dependencies: '@babel/code-frame': 7.21.4 - '@babel/parser': 7.23.9 - '@babel/types': 7.21.5 + '@babel/parser': 7.28.6 + '@babel/types': 7.28.6 '@babel/traverse@7.21.5': dependencies: @@ -5071,19 +5082,13 @@ snapshots: '@babel/helper-function-name': 7.21.0 '@babel/helper-hoist-variables': 7.18.6 '@babel/helper-split-export-declaration': 7.18.6 - '@babel/parser': 7.23.9 - '@babel/types': 7.21.5 + '@babel/parser': 7.28.6 + '@babel/types': 7.28.6 debug: 4.3.4 globals: 11.12.0 transitivePeerDependencies: - supports-color - '@babel/types@7.21.5': - dependencies: - '@babel/helper-string-parser': 7.21.5 - '@babel/helper-validator-identifier': 7.19.1 - to-fast-properties: 2.0.0 - '@babel/types@7.28.6': dependencies: '@babel/helper-string-parser': 7.27.1 @@ -5253,7 +5258,7 @@ snapshots: '@jridgewell/gen-mapping@0.3.3': dependencies: '@jridgewell/set-array': 1.1.2 - '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/sourcemap-codec': 1.5.5 '@jridgewell/trace-mapping': 0.3.18 '@jridgewell/resolve-uri@3.1.0': {} @@ -5290,6 +5295,14 @@ snapshots: '@one-ini/wasm@0.1.1': {} + '@openpanel/sdk@1.3.0': {} + + '@openpanel/web@1.3.0': + dependencies: + '@openpanel/sdk': 1.3.0 + '@rrweb/types': 2.0.0-alpha.20 + rrweb: 2.0.0-alpha.20 + '@parcel/watcher-android-arm64@2.5.6': optional: true @@ -5461,6 +5474,10 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.12.0': optional: true + '@rrweb/types@2.0.0-alpha.20': {} + + '@rrweb/utils@2.0.0-alpha.20': {} + '@rushstack/eslint-patch@1.15.0': {} '@sinclair/typebox@0.27.8': {} @@ -5487,6 +5504,8 @@ snapshots: '@types/node': 25.0.10 optional: true + '@types/css-font-loading-module@0.0.7': {} + '@types/estree@0.0.39': {} '@types/estree@1.0.1': {} @@ -5882,6 +5901,8 @@ snapshots: transitivePeerDependencies: - supports-color + '@xstate/fsm@1.6.5': {} + abbrev@2.0.0: {} acorn-jsx@5.3.2(acorn@8.11.3): @@ -6054,6 +6075,8 @@ snapshots: bare-os: 2.2.0 optional: true + base64-arraybuffer@1.0.2: {} + base64-js@1.5.1: {} basic-ftp@5.0.4: {} @@ -8085,8 +8108,27 @@ snapshots: '@rollup/rollup-win32-x64-msvc': 4.12.0 fsevents: 2.3.3 + rrdom@2.0.0-alpha.20: + dependencies: + rrweb-snapshot: 2.0.0-alpha.20 + rrweb-cssom@0.6.0: {} + rrweb-snapshot@2.0.0-alpha.20: + dependencies: + postcss: 8.5.6 + + rrweb@2.0.0-alpha.20: + dependencies: + '@rrweb/types': 2.0.0-alpha.20 + '@rrweb/utils': 2.0.0-alpha.20 + '@types/css-font-loading-module': 0.0.7 + '@xstate/fsm': 1.6.5 + base64-arraybuffer: 1.0.2 + mitt: 3.0.0 + rrdom: 2.0.0-alpha.20 + rrweb-snapshot: 2.0.0-alpha.20 + run-async@2.4.1: {} run-parallel@1.2.0: @@ -8416,8 +8458,6 @@ snapshots: dependencies: os-tmpdir: 1.0.2 - to-fast-properties@2.0.0: {} - to-regex-range@5.0.1: dependencies: is-number: 7.0.0 @@ -8531,7 +8571,7 @@ snapshots: dependencies: browserslist: 4.21.5 escalade: 3.1.1 - picocolors: 1.0.0 + picocolors: 1.1.1 uri-js@4.4.1: dependencies: diff --git a/src/main.ts b/src/main.ts index 04ff1e1..17f09dd 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,6 +5,7 @@ import App from './App.vue' import { router } from './router' import VueDiff from 'vue-diff' +import './openpanel' import './assets/main.scss' import 'vue-diff/dist/index.css' diff --git a/src/openpanel.ts b/src/openpanel.ts new file mode 100644 index 0000000..b372e24 --- /dev/null +++ b/src/openpanel.ts @@ -0,0 +1,8 @@ +import { OpenPanel } from '@openpanel/web' + +export const op = new OpenPanel({ + clientId: '00b205e9-2993-4124-9290-bb45851f5967', + trackScreenViews: true, + trackOutgoingLinks: true, + trackAttributes: true +})