fix: package and formatting

with-styled-components-tailwindcss-antd/package.json → with-emotion-tailwindcss-antd/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "with-styled-components-tailwindcss-antd",
-  "displayName": "With styled components tailwindcss antd",
+  "name": "with-emotion-tailwindcss-antd",
+  "displayName": "With emotion tailwindcss antd",
   "version": "0.0.1",
   "description": "A basic Plasmo extension.",
   "author": "Plasmo Corp. <[email protected]>",
@@ -10,11 +10,11 @@
     "package": "plasmo package"
   },
   "dependencies": {
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "antd": "^5.9.2",
-    "plasmo": "0.83.0",
+    "@emotion/cache": "11.11.0",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "antd": "5.9.2",
+    "plasmo": "workspace:*",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -24,10 +24,10 @@
     "@types/node": "20.5.9",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.30",
+    "autoprefixer": "10.4.16",
+    "postcss": "8.4.30",
     "prettier": "3.0.3",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   },
   "manifest": {

with-styled-components-tailwindcss-antd/src/components/ButtonGroup/ButtonItem.tsx → with-emotion-tailwindcss-antd/src/components/ButtonGroup/ButtonItem.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import styled from '@emotion/styled';
+import styled from "@emotion/styled"
+import React from "react"
 
 import type { ButtonItemProps } from "./type"
 

with-google-analytics-measurement/background.ts

@@ -1,32 +1,33 @@
-import { Storage } from '@plasmohq/storage';
-import { AnalyticsEvent } from './utils';
+import { Storage } from "@plasmohq/storage"
+
+import { AnalyticsEvent } from "./utils"
 
 /**
  * On install, generate a random client ID and store it in sync storage.
  * This is used to identify unique users.
  */
 chrome.runtime.onInstalled.addListener(async (details) => {
-	if(details.reason == "install"){
-			// Generate a random client ID.
-			const clientId = self.crypto.randomUUID();
+  if (details.reason == "install") {
+    // Generate a random client ID.
+    const clientId = self.crypto.randomUUID()
 
-			// Storing in sync so that the client ID is synced across a user's devices.
-			const storage = new Storage({
-				area: 'sync',
-			});
+    // Storing in sync so that the client ID is synced across a user's devices.
+    const storage = new Storage({
+      area: "sync"
+    })
 
-			await storage.set('clientId', clientId);
+    await storage.set("clientId", clientId)
 
-			const platform = await chrome.runtime.getPlatformInfo();
+    const platform = await chrome.runtime.getPlatformInfo()
 
-			// Send a new_install event to Google Analytics.
-			await AnalyticsEvent([
-				{
-					name: 'new_install',
-					params: {
-						operating_system: platform.os,
-					}
-				}
-			]);
-	}
-});
+    // Send a new_install event to Google Analytics.
+    await AnalyticsEvent([
+      {
+        name: "new_install",
+        params: {
+          operating_system: platform.os
+        }
+      }
+    ])
+  }
+})

with-google-analytics-measurement/popup.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react"
+
 import { AnalyticsEvent } from "./utils"
 
 function IndexPopup() {
@@ -7,12 +8,12 @@ function IndexPopup() {
   useEffect(() => {
     AnalyticsEvent([
       {
-        name: 'page_view',
+        name: "page_view",
         params: {
-          page_title: 'popup',
+          page_title: "popup"
         }
       }
-    ]);
+    ])
   }, [])
 
   return (
@@ -21,23 +22,26 @@ function IndexPopup() {
         display: "flex",
         flexDirection: "column",
         padding: 16,
-        minWidth: "250px",
+        minWidth: "250px"
       }}>
       <h1>
         Welcome to your <a href="https://www.plasmo.com">Plasmo</a> Extension!
       </h1>
       <input onChange={(e) => setData(e.target.value)} value={data} />
-      <button onClick={() => AnalyticsEvent([
-        {
-          name: 'button_click',
-          params: {
-            method: 'TEST',
-            data,
+      <button
+        onClick={() =>
+          AnalyticsEvent([
+            {
+              name: "button_click",
+              params: {
+                method: "TEST",
+                data
+              }
             }
-          }
-        ])}>
-          Click me
-        </button>
+          ])
+        }>
+        Click me
+      </button>
     </div>
   )
 }

with-google-analytics-measurement/utils.ts

@@ -1,52 +1,52 @@
-import { Storage } from '@plasmohq/storage';
+import { Storage } from "@plasmohq/storage"
 
-if(!process.env.PLASMO_PUBLIC_GTAG_ID) {
-	throw new Error('PLASMO_PUBLIC_GTAG_ID environment variable not set.');
+if (!process.env.PLASMO_PUBLIC_GTAG_ID) {
+  throw new Error("PLASMO_PUBLIC_GTAG_ID environment variable not set.")
 }
 
-if(!process.env.PLASMO_PUBLIC_SECRET_API_KEY) {
-	throw new Error('PLASMO_PUBLIC_SECRET_API_KEY environment variable not set.');
+if (!process.env.PLASMO_PUBLIC_SECRET_API_KEY) {
+  throw new Error("PLASMO_PUBLIC_SECRET_API_KEY environment variable not set.")
 }
 
-const GA_ENDPOINT = 'https://www.google-analytics.com/mp/collect';
-const gtagId = process.env.PLASMO_PUBLIC_GTAG_ID;
-const secretApiKey = process.env.PLASMO_PUBLIC_SECRET_API_KEY;
+const GA_ENDPOINT = "https://www.google-analytics.com/mp/collect"
+const gtagId = process.env.PLASMO_PUBLIC_GTAG_ID
+const secretApiKey = process.env.PLASMO_PUBLIC_SECRET_API_KEY
 
 // https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference/events
 type CollectEventPayload = {
-	name: string,
-	params?: any,
-};
+  name: string
+  params?: any
+}
 
 /**
  * This function sends events to Google Analytics using the Measurement Protocol.
  * https://developers.google.com/analytics/devguides/collection/protocol/ga4/sending-events
- * 
+ *
  * @param events The events to send to Google Analytics.
  */
 export const AnalyticsEvent = async (events: CollectEventPayload[]) => {
-	const storage = new Storage({
-		area: 'sync',
-	});
-
-	let clientId = await storage.get('clientId');
-
-	// Just incase the client ID was not set on install.
-	if(!clientId) {
-		clientId = self.crypto.randomUUID();
-		await storage.set('clientId', clientId);
-	}
-
-	const fetched = await fetch(
-		`${GA_ENDPOINT}?measurement_id=${gtagId}&api_secret=${secretApiKey}`,
-		{
-			method: 'POST',
-			body: JSON.stringify({
-				client_id: clientId,
-				events,
-			}),
-		}
-	);
-
-	return fetched;
-}
+  const storage = new Storage({
+    area: "sync"
+  })
+
+  let clientId = await storage.get("clientId")
+
+  // Just incase the client ID was not set on install.
+  if (!clientId) {
+    clientId = self.crypto.randomUUID()
+    await storage.set("clientId", clientId)
+  }
+
+  const fetched = await fetch(
+    `${GA_ENDPOINT}?measurement_id=${gtagId}&api_secret=${secretApiKey}`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        client_id: clientId,
+        events
+      })
+    }
+  )
+
+  return fetched
+}