From 439fb89645a5538a0f7f1277d697d90bb2449eb4 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 28 Nov 2023 20:44:51 -0500
Subject: [PATCH] track framework usage

---
 .../src/components/OutputSettingsSection.tsx  |  6 ++++++
 frontend/src/plausible.d.ts                   | 19 +++++++++++++++++++
 frontend/vite.config.ts                       |  2 +-
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/plausible.d.ts

diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index fd76281..615c008 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -44,6 +44,9 @@ interface Props {
 
 function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
   const onCSSValueChange = (value: string) => {
+    window.plausible("OutputSettings", {
+      props: { framework: "CSS", value: value },
+    });
     setOutputSettings((prev) => {
       if (prev.js === JSFrameworkOption.REACT) {
         if (value !== CSSOption.TAILWIND) {
@@ -65,6 +68,9 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
   };
 
   const onJsFrameworkChange = (value: string) => {
+    window.plausible("OutputSettings", {
+      props: { framework: "JS", value: value },
+    });
     if (value === JSFrameworkOption.REACT) {
       setOutputSettings(() => ({
         css: CSSOption.TAILWIND,
diff --git a/frontend/src/plausible.d.ts b/frontend/src/plausible.d.ts
new file mode 100644
index 0000000..bfc548c
--- /dev/null
+++ b/frontend/src/plausible.d.ts
@@ -0,0 +1,19 @@
+// plausible.d.ts
+
+// Define the Plausible function type
+type Plausible = (eventName: string, options?: PlausibleOptions) => void;
+
+// Define the Plausible options type
+interface PlausibleOptions {
+  callback?: () => void;
+  props?: Record<string, any>;
+}
+
+// Extend the Window interface to include the `plausible` function
+declare global {
+  interface Window {
+    plausible: Plausible;
+  }
+}
+
+export {};
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 539718a..22f59d4 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -16,7 +16,7 @@ export default ({ mode }) => {
         inject: {
           data: {
             injectHead: process.env.VITE_IS_DEPLOYED
-              ? '<script defer="" data-domain="screenshottocode.com" src="https://plausible.io/js/script.tagged-events.outbound-links.js"></script>'
+              ? '<script defer="" data-domain="screenshottocode.com" src="https://plausible.io/js/script.js"></script><script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>'
               : "",
           },
         },