wip

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+ui-src/.env

manifest.json

@@ -5,6 +5,6 @@
   "main": "dist/code.js",
   "ui": "dist/index.html",
   "editorType": ["figma"],
-  "networkAccess": { "allowedDomains": ["none"] },
+  "networkAccess": { "allowedDomains": ["https://bam.eu01.nr-data.net"] },
   "documentAccess": "dynamic-page"
 }

package-lock.json

@@ -1,15 +1,16 @@
 {
   "name": "penpot-exporter",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "penpot-exporter",
-      "version": "0.10.0",
+      "version": "0.10.2",
       "license": "MPL2.0",
       "dependencies": {
         "@create-figma-plugin/ui": "^3.2",
+        "@newrelic/browser-agent": "^1.269.0",
         "base64-js": "^1.5",
         "classnames": "^2.5",
         "lru-cache": "^11.0",
@@ -1796,6 +1797,19 @@
         "node": ">=6 <7 || >=8"
       }
     },
+    "node_modules/@newrelic/browser-agent": {
+      "version": "1.269.0",
+      "resolved": "https://registry.npmjs.org/@newrelic/browser-agent/-/browser-agent-1.269.0.tgz",
+      "integrity": "sha512-NIn7wccHN7Ii52JKG/3VIHUwZdScAGWKBIckTMtmnXbkCBTcfxNtiUwWi2g6/vWQK6VufuZy/gwWkq+hLUra2Q==",
+      "dependencies": {
+        "fflate": "0.7.4",
+        "rrweb": "2.0.0-alpha.12",
+        "web-vitals": "4.2.3"
+      },
+      "engines": {
+        "node": ">=12.17.0 < 13.0.0 || >=13.7.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2073,6 +2087,14 @@
         "win32"
       ]
     },
+    "node_modules/@rrweb/types": {
+      "version": "2.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/@rrweb/types/-/types-2.0.0-alpha.17.tgz",
+      "integrity": "sha512-AfDTVUuCyCaIG0lTSqYtrZqJX39ZEYzs4fYKnexhQ+id+kbZIpIJtaut5cto6dWZbB3SEe4fW0o90Po3LvTmfg==",
+      "dependencies": {
+        "rrweb-snapshot": "^2.0.0-alpha.17"
+      }
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
@@ -2580,6 +2602,11 @@
         }
       }
     },
+    "node_modules/@types/css-font-loading-module": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz",
+      "integrity": "sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -3071,6 +3098,11 @@
         "vite": "^4 || ^5"
       }
     },
+    "node_modules/@xstate/fsm": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@xstate/fsm/-/fsm-1.6.5.tgz",
+      "integrity": "sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw=="
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -3316,6 +3348,14 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -4775,6 +4815,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.4.tgz",
+      "integrity": "sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -6028,6 +6073,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -6047,7 +6097,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6393,8 +6442,7 @@
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
-      "dev": true
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -6430,7 +6478,6 @@
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
       "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -6823,6 +6870,42 @@
       "resolved": "https://registry.npmjs.org/romans/-/romans-2.0.16.tgz",
       "integrity": "sha512-VsNzu29gZf73w+q4LgNJ4eZ4qss7Wyhwzd4b/GDaOaVINs5OTuvr5NuE/fKnpm0ODBCqXxMcIal1elAbybwWpA=="
     },
+    "node_modules/rrdom": {
+      "version": "2.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/rrdom/-/rrdom-2.0.0-alpha.17.tgz",
+      "integrity": "sha512-b6caDiNcFO96Opp7TGdcVd4OLGSXu5dJe+A0IDiAu8mk7OmhqZCSDlgQdTKmdO5wMf4zPsUTgb8H/aNvR3kDHA==",
+      "dependencies": {
+        "rrweb-snapshot": "^2.0.0-alpha.17"
+      }
+    },
+    "node_modules/rrweb": {
+      "version": "2.0.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/rrweb/-/rrweb-2.0.0-alpha.12.tgz",
+      "integrity": "sha512-lUGwBV7gmbwz1dIgzo9EEayIVyxoTIF6NBF6+Jctqs4Uy45QkyARtikpQlCUfxVCGTCQ0FOee9jeVYsG39oq1g==",
+      "dependencies": {
+        "@rrweb/types": "^2.0.0-alpha.12",
+        "@types/css-font-loading-module": "0.0.7",
+        "@xstate/fsm": "^1.4.0",
+        "base64-arraybuffer": "^1.0.1",
+        "fflate": "^0.4.4",
+        "mitt": "^3.0.0",
+        "rrdom": "^2.0.0-alpha.12",
+        "rrweb-snapshot": "^2.0.0-alpha.12"
+      }
+    },
+    "node_modules/rrweb-snapshot": {
+      "version": "2.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-2.0.0-alpha.17.tgz",
+      "integrity": "sha512-GBg5pV8LHOTbeVmH2VHLEFR0mc2QpQMzAvcoxEGfPNWgWHc8UvKCyq7pqN1vA+fDZ+yXXbixeO0kB2pzVvFCBw==",
+      "dependencies": {
+        "postcss": "^8.4.38"
+      }
+    },
+    "node_modules/rrweb/node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -7093,7 +7176,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8429,6 +8511,11 @@
         "@esbuild/win32-x64": "0.21.5"
       }
     },
+    "node_modules/web-vitals": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.3.tgz",
+      "integrity": "sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q=="
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

package.json

@@ -23,6 +23,7 @@
   "license": "MPL2.0",
   "dependencies": {
     "@create-figma-plugin/ui": "^3.2",
+    "@newrelic/browser-agent": "^1.269.0",
     "base64-js": "^1.5",
     "classnames": "^2.5",
     "lru-cache": "^11.0",

ui-src/.env.example

@@ -0,0 +1,7 @@
+VITE_ACCOUNT_ID=
+VITE_TRUST_KEY=
+VITE_AGENT_ID=
+VITE_LICENSE_KEY=
+VITE_APPLICATION_ID=
+VITE_BEACON=
+VITE_ERROR_BEACON=

ui-src/context/useFigma.ts

@@ -69,6 +69,8 @@ export const useFigma = (): UseFigmaHook => {
         setExporting(false);
         setStep(undefined);
 
+        window.newrelic.addPageAction('document-exported');
+
         break;
       }
       case 'CUSTOM_FONTS': {

ui-src/main.tsx

@@ -1,3 +1,4 @@
+import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent';
 import 'node_modules/@create-figma-plugin/ui/lib/css/base.css';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -6,6 +7,38 @@ import { App } from './App';
 import './main.css';
 import './reset.css';
 
+const options = {
+  init: {
+    distributed_tracing: { enabled: false },
+    privacy: { cookies_enabled: true },
+    ajax: { deny_list: [import.meta.env.VITE_BEACON] }
+  },
+  loader_config: {
+    accountID: import.meta.env.VITE_ACCOUNT_ID,
+    trustKey: import.meta.env.VITE_TRUST_KEY,
+    agentID: import.meta.env.VITE_AGENT_ID,
+    licenseKey: import.meta.env.VITE_LICENSE_KEY,
+    applicationID: import.meta.env.VITE_APPLICATION_ID
+  },
+  info: {
+    beacon: import.meta.env.VITE_BEACON,
+    errorBeacon: import.meta.env.VITE_ERROR_BEACON,
+    licenseKey: import.meta.env.VITE_LICENSE_KEY,
+    applicationID: import.meta.env.VITE_APPLICATION_ID,
+    sa: 1
+  }
+};
+
+new BrowserAgent(options);
+
+declare global {
+  interface Window {
+    newrelic: BrowserAgent;
+  }
+}
+
+window.newrelic.addPageAction('plugin-loaded');
+
 createRoot(document.getElementById('root') as HTMLElement).render(
   <StrictMode>
     <App />

ui-src/vite-env.d.ts

@@ -1,2 +1,11 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+declare module ViteEnv {
+  interface ImportMetaEnv {
+    VITE_NR_ACCOUNT_ID: string;
+    VITE_NR_TRUST_KEY: string;
+    VITE_NR_AGENT_ID: string;
+    VITE_NR_LICENSE_KEY: string;
+    VITE_NR_APPLICATION_ID: string;
+  }
+}