chore: daily development

tools/canyon-extension/eslint.config.js

@@ -1,28 +1,28 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-)
+);

tools/canyon-extension/public/background.js

@@ -1 +1 @@
-console.log('background.js');
+console.log("background.js");

tools/canyon-extension/public/content-scripts.js

@@ -1 +1 @@
-console.log('content-scripts.js');
+console.log("content-scripts.js");

tools/canyon-extension/public/interceptor.js

@@ -1 +1 @@
-console.log('content-scripts.js');
+console.log("content-scripts.js");

tools/canyon-extension/src/App.tsx

@@ -1,24 +1,22 @@
 // import { css } from '@emotion/react';
-import { ConfigProvider } from 'antd';
+import { ConfigProvider } from "antd";
 
-import AppFooter from './components/app/footer.tsx';
-import AppHeader from './components/app/header.tsx';
-import AppMain from './components/app/main.tsx';
+import AppFooter from "./components/app/footer.tsx";
+import AppHeader from "./components/app/header.tsx";
+import AppMain from "./components/app/main.tsx";
 
 function App() {
   return (
     <ConfigProvider
       theme={{
         token: {
-          colorPrimary: '#0071c2',
+          colorPrimary: "#0071c2",
         },
       }}
     >
-      <div
-        className={'w-[500px]'}
-      >
+      <div className={"w-[500px]"}>
         <AppHeader />
-        <AppMain/>
+        <AppMain />
         <AppFooter />
       </div>
     </ConfigProvider>

tools/canyon-extension/src/components/app/footer.tsx

@@ -1,6 +1,6 @@
-import { ArrowRightOutlined, CaretRightOutlined } from '@ant-design/icons';
-import { Collapse, CollapseProps, theme } from 'antd';
-import { CSSProperties } from 'react';
+import { ArrowRightOutlined, CaretRightOutlined } from "@ant-design/icons";
+import { Collapse, CollapseProps, theme } from "antd";
+import { CSSProperties } from "react";
 
 const { useToken } = theme;
 const text = `Canyon offers a solution that involves adding a code probe during the construction of JavaScript projects and triggering the code probe upon page loading to gather code coverage data.`;
@@ -10,19 +10,21 @@ const AppFooter = () => {
   const panelStyle: React.CSSProperties = {
     marginBottom: 24,
     background: token.colorPrimaryBg,
-    border: 'none',
+    border: "none",
   };
-  const getItems: (panelStyle: CSSProperties) => CollapseProps['items'] = (panelStyle) => [
+  const getItems: (panelStyle: CSSProperties) => CollapseProps["items"] = (
+    panelStyle,
+  ) => [
     {
-      key: '1',
+      key: "1",
       label: (
         <span
           style={{
-            fontWeight: 'bold',
+            fontWeight: "bold",
             color: token.colorPrimary,
           }}
         >
-          {'Canyon is a JavaScript code coverage solution'}
+          {"Canyon is a JavaScript code coverage solution"}
         </span>
       ),
       children: (
@@ -34,12 +36,17 @@ const AppFooter = () => {
           <p>{text}</p>
           <span
             onClick={() => {
-              window.open('https://github.com/canyon-project/canyon');
+              window.open("https://github.com/canyon-project/canyon");
+            }}
+            style={{
+              textAlign: "right",
+              display: "block",
+              fontWeight: "bold",
+              cursor: "pointer",
             }}
-            style={{ textAlign: 'right', display: 'block', fontWeight: 'bold', cursor: 'pointer' }}
           >
             Learn more
-            <ArrowRightOutlined style={{ marginLeft: '10px' }} />
+            <ArrowRightOutlined style={{ marginLeft: "10px" }} />
           </span>
         </div>
       ),

tools/canyon-extension/src/components/app/header.tsx

@@ -1,30 +1,39 @@
-import { GithubOutlined } from '@ant-design/icons';
+import { GithubOutlined } from "@ant-design/icons";
 
-import logo from '../../assets/logo.svg';
+import logo from "../../assets/logo.svg";
 const AppHeader = () => {
   return (
     <header
-      className={'px-5 bg-[#3264ff] h-[72px] text-white leading-[72px] flex justify-between header'}
+      className={
+        "px-5 bg-[#3264ff] h-[72px] text-white leading-[72px] flex justify-between header"
+      }
     >
       <div
-        style={{ fontSize: '24px', display: 'flex', alignItems: 'center', cursor: 'pointer' }}
+        style={{
+          fontSize: "24px",
+          display: "flex",
+          alignItems: "center",
+          cursor: "pointer",
+        }}
         onClick={() => {
-          window.open('https://github.com/canyon-project/canyon');
+          window.open("https://github.com/canyon-project/canyon");
         }}
       >
-        <img style={{ width: '36px', marginRight: '12px' }} src={logo} alt='' />
-        <span style={{ fontWeight: 'bold' }}>Canyon</span>
+        <img style={{ width: "36px", marginRight: "12px" }} src={logo} alt="" />
+        <span style={{ fontWeight: "bold" }}>Canyon</span>
       </div>
 
       <div
-        style={{ cursor: 'pointer' }}
+        style={{ cursor: "pointer" }}
         onClick={() => {
-          window.open('https://github.com/canyon-project/canyon');
+          window.open("https://github.com/canyon-project/canyon");
         }}
       >
-        <GithubOutlined style={{
-          fontSize: '18px',
-        }} />
+        <GithubOutlined
+          style={{
+            fontSize: "18px",
+          }}
+        />
       </div>
     </header>
   );

tools/canyon-extension/src/components/app/main.tsx

@@ -1,7 +1,5 @@
 const AppMain = () => {
-  return <div>
-    AppMain
-  </div>
-}
+  return <div>AppMain</div>;
+};
 
 export default AppMain;

tools/canyon-extension/src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);

tools/canyon-extension/vite.config.ts

@@ -1,13 +1,11 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
 import tailwindcss from "@tailwindcss/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(),
-    tailwindcss(),
-  ],
-  build:{
-    sourcemap:false
+  plugins: [react(), tailwindcss()],
+  build: {
+    sourcemap: false,
   },
-})
+});

tools/canyon-extension/zip.js

@@ -1,4 +1,4 @@
-import adm_zip from 'adm-zip'
+import adm_zip from "adm-zip";
 
 const zip = new adm_zip();
 zip.addLocalFolder("./dist");