Support TSX

.vscode/settings.json

@@ -7,9 +7,13 @@
     "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
     "cSpell.words": [
         "Auths",
+        "clipboardy",
+        "countup",
         "echarts",
+        "filemanager",
         "Hengyang",
-        "Kanban"
+        "Kanban",
+        "zrender"
     ],
     "cSpell.ignorePaths": [
         "package-lock.json",

package.json

@@ -1,71 +1,74 @@
 {
-  "name": "timer",
-  "version": "2.1.1",
-  "description": "Web timer",
-  "homepage": "https://github.com/sheepzh/timer",
-  "scripts": {
-    "dev": "webpack --config=webpack/webpack.dev.ts --watch",
-    "dev:safari": "webpack --config=webpack/webpack.dev.safari.ts --watch",
-    "build": "webpack --config=webpack/webpack.prod.ts",
-    "build:safari": "webpack --config=webpack/webpack.prod.safari.ts",
-    "analyze": "webpack --config=webpack/webpack.analyze.ts",
-    "test": "jest --env=jsdom",
-    "test-c": "jest --coverage --env=jsdom"
-  },
-  "author": {
-    "name": "zhy",
-    "email": "[email protected]",
-    "url": "https://www.github.com/sheepzh"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@crowdin/crowdin-api-client": "^1.28.2",
-    "@types/chrome": "0.0.254",
-    "@types/copy-webpack-plugin": "^8.0.1",
-    "@types/echarts": "^4.9.22",
-    "@types/generate-json-webpack-plugin": "^0.3.7",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
-    "@types/psl": "^1.1.3",
-    "@types/webpack": "^5.28.5",
-    "@types/webpack-bundle-analyzer": "^4.6.3",
-    "babel-loader": "^9.1.3",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.8.1",
-    "eslint": "^8.56.0",
-    "filemanager-webpack-plugin": "^8.0.0",
-    "generate-json-webpack-plugin": "^2.0.0",
-    "html-webpack-plugin": "^5.5.4",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.7.6",
-    "node-sass": "^9.0.0",
-    "sass-loader": "^13.3.2",
-    "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.1",
-    "ts-loader": "^9.5.1",
-    "ts-node": "^10.9.2",
-    "tsconfig-paths": "^4.2.0",
-    "tslib": "^2.6.2",
-    "typescript": "5.3.3",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.89.0",
-    "webpack-bundle-analyzer": "^4.10.1",
-    "webpack-cli": "^5.1.4"
-  },
-  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "axios": "^1.6.2",
-    "clipboardy": "^4.0.0",
-    "countup.js": "^2.8.0",
-    "echarts": "^5.4.3",
-    "element-plus": "2.4.4",
-    "psl": "^1.9.0",
-    "stream-browserify": "^3.0.0",
-    "vue": "^3.3.12",
-    "vue-router": "^4.2.5"
-  },
-  "engines": {
-    "node": ">=18"
-  }
-}
+    "name": "timer",
+    "version": "2.1.1",
+    "description": "Web timer",
+    "homepage": "https://github.com/sheepzh/timer",
+    "scripts": {
+        "dev": "webpack --config=webpack/webpack.dev.ts --watch",
+        "dev:safari": "webpack --config=webpack/webpack.dev.safari.ts --watch",
+        "build": "webpack --config=webpack/webpack.prod.ts",
+        "build:safari": "webpack --config=webpack/webpack.prod.safari.ts",
+        "analyze": "webpack --config=webpack/webpack.analyze.ts",
+        "test": "jest --env=jsdom",
+        "test-c": "jest --coverage --env=jsdom"
+    },
+    "author": {
+        "name": "zhy",
+        "email": "[email protected]",
+        "url": "https://www.github.com/sheepzh"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+        "@babel/preset-env": "^7.23.8",
+        "@crowdin/crowdin-api-client": "^1.29.5",
+        "@types/chrome": "0.0.256",
+        "@types/copy-webpack-plugin": "^8.0.1",
+        "@types/echarts": "^4.9.22",
+        "@types/generate-json-webpack-plugin": "^0.3.7",
+        "@types/jest": "^29.5.11",
+        "@types/node": "^20.11.3",
+        "@types/psl": "^1.1.3",
+        "@types/webpack": "^5.28.5",
+        "@types/webpack-bundle-analyzer": "^4.6.3",
+        "@vue/babel-plugin-jsx": "^1.1.6",
+        "babel-loader": "^9.1.3",
+        "copy-webpack-plugin": "^12.0.1",
+        "css-loader": "^6.9.0",
+        "eslint": "^8.56.0",
+        "filemanager-webpack-plugin": "^8.0.0",
+        "generate-json-webpack-plugin": "^2.0.0",
+        "html-webpack-plugin": "^5.6.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "mini-css-extract-plugin": "^2.7.7",
+        "node-sass": "^9.0.0",
+        "sass-loader": "^14.0.0",
+        "style-loader": "^3.3.4",
+        "ts-jest": "^29.1.1",
+        "ts-loader": "^9.5.1",
+        "ts-node": "^10.9.2",
+        "tsconfig-paths": "^4.2.0",
+        "tslib": "^2.6.2",
+        "typescript": "5.3.3",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.89.0",
+        "webpack-bundle-analyzer": "^4.10.1",
+        "webpack-cli": "^5.1.4"
+    },
+    "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
+        "axios": "^1.6.5",
+        "clipboardy": "^4.0.0",
+        "countup.js": "^2.8.0",
+        "echarts": "^5.4.3",
+        "element-plus": "2.4.4",
+        "psl": "^1.9.0",
+        "stream-browserify": "^3.0.0",
+        "vue": "^3.4.14",
+        "vue-router": "^4.2.5"
+    },
+    "engines": {
+        "node": ">=18"
+    }
+}

src/api/chrome/runtime.ts

@@ -42,8 +42,8 @@ export function setUninstallURL(url: string): Promise<void> {
 
 /**
  * Get the url of this extension
- * 
- * @param path The path relative to the root directory of this extension 
+ *
+ * @param path The path relative to the root directory of this extension
  */
 export function getUrl(path: string): string {
     return chrome.runtime.getURL(path)

src/app/components/dashboard/card.ts → src/app/components/Dashboard/DashboardCard.tsx

@@ -6,22 +6,21 @@
  */
 
 import { ElCard, ElCol } from "element-plus"
-import { defineComponent, h } from "vue"
+import { defineComponent } from "vue"
 
 const _default = defineComponent({
-    name: "DashboardCard",
     props: {
         span: {
             type: Number,
             required: true
         }
     },
     setup(props, ctx) {
-        return () => h(ElCol, {
-            span: props.span
-        }, () => h(ElCard, {
-            style: { height: "100%" }
-        }, () => h(ctx.slots.default)))
+        return () => (
+            <ElCol span={props.span}>
+                <ElCard style={{ height: "100%" }} v-slots={ctx.slots} />
+            </ElCol>
+        )
     }
 })
 

src/app/components/dashboard/components/calendar-heat-map.ts → src/app/components/Dashboard/components/CalendarHeatMap.tsx

@@ -32,7 +32,7 @@ import statService, { StatQueryParam } from "@service/stat-service"
 import { locale } from "@i18n"
 import { formatTime, getWeeksAgo, MILL_PER_DAY, MILL_PER_MINUTE } from "@util/time"
 import { ElLoading } from "element-plus"
-import { defineComponent, h, onMounted, ref, Ref } from "vue"
+import { defineComponent, onMounted, ref, Ref } from "vue"
 import { groupBy, rotate } from "@util/array"
 import { BASE_TITLE_OPTION } from "../common"
 import { getPrimaryTextColor } from "@util/style"
@@ -243,45 +243,38 @@ class ChartWrapper {
     }
 }
 
-const _default = defineComponent({
-    name: "CalendarHeatMap",
-    setup() {
-        const isChinese = locale === "zh_CN"
-        const now = new Date()
-        const startTime: Date = getWeeksAgo(now, isChinese, WEEK_NUM)
+const _default = defineComponent(() => {
+    const isChinese = locale === "zh_CN"
+    const now = new Date()
+    const startTime: Date = getWeeksAgo(now, isChinese, WEEK_NUM)
 
-        const chart: Ref<HTMLDivElement> = ref()
-        const chartWrapper: ChartWrapper = new ChartWrapper(startTime, now)
+    const chart: Ref<HTMLDivElement> = ref()
+    const chartWrapper: ChartWrapper = new ChartWrapper(startTime, now)
 
-        onMounted(async () => {
-            // 1. loading
-            const loading = ElLoading.service({
-                target: `#${CONTAINER_ID}`,
-            })
-            // 2. init chart
-            chartWrapper.init(chart.value)
-            // 3. query data
-            const query: StatQueryParam = { date: [startTime, now], sort: "date" }
-            const items = await statService.select(query)
-            const result = {}
-            items.forEach(({ date, focus }) => result[date] = (result[date] || 0) + focus)
-            // 4. set weekdays
-            // Sunday to Monday
-            const weekDays = (t(msg => msg.calendar.weekDays)?.split?.('|') || []).reverse()
-            if (!isChinese) {
-                // Let Sunday last
-                // Saturday to Sunday
-                rotate(weekDays, 1)
-            }
-            // 5. render
-            chartWrapper.render(result, weekDays, loading)
-        })
-        return () => h('div', {
-            id: CONTAINER_ID,
-            class: 'chart-container',
-            ref: chart,
+    onMounted(async () => {
+        // 1. loading
+        const loading = ElLoading.service({
+            target: `#${CONTAINER_ID}`,
         })
-    }
+        // 2. init chart
+        chartWrapper.init(chart.value)
+        // 3. query data
+        const query: StatQueryParam = { date: [startTime, now], sort: "date" }
+        const items = await statService.select(query)
+        const result = {}
+        items.forEach(({ date, focus }) => result[date] = (result[date] || 0) + focus)
+        // 4. set weekdays
+        // Sunday to Monday
+        const weekDays = (t(msg => msg.calendar.weekDays)?.split?.('|') || []).reverse()
+        if (!isChinese) {
+            // Let Sunday last
+            // Saturday to Sunday
+            rotate(weekDays, 1)
+        }
+        // 5. render
+        chartWrapper.render(result, weekDays, loading)
+    })
+    return () => <div id={CONTAINER_ID} class="chart-container" ref={chart} />
 })
 
 export default _default