feat: show current version (#5)

package.json

@@ -24,6 +24,7 @@
     "react-redux": "^8.0.5"
   },
   "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.2",
     "@types/node": "^20.1.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",

pnpm-lock.yaml

@@ -39,6 +39,9 @@ dependencies:
     version: 8.0.5(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
 
 devDependencies:
+  '@rollup/plugin-replace':
+    specifier: ^5.0.2
+    version: 5.0.2
   '@types/node':
     specifier: ^20.1.1
     version: 20.1.1
@@ -1865,6 +1868,19 @@ packages:
       reselect: 4.1.8
     dev: false
 
+  /@rollup/plugin-replace@5.0.2:
+    resolution: {integrity: sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.0.2
+      magic-string: 0.27.0
+    dev: true
+
   /@rollup/plugin-virtual@3.0.1:
     resolution: {integrity: sha512-fK8O0IL5+q+GrsMLuACVNk2x21g3yaw+sG2qn16SnUd3IlBsQyvWxLMGHmCmXRMecPjGRSZ/1LmZB4rjQm68og==}
     engines: {node: '>=14.0.0'}
@@ -1875,6 +1891,20 @@ packages:
         optional: true
     dev: true
 
+  /@rollup/pluginutils@5.0.2:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.1
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
   /@swc/core-darwin-arm64@1.3.57:
     resolution: {integrity: sha512-lhAK9kF/ppZdNTdaxJl2gE0bXubzQXTgxB2Xojme/1sbOipaLTskBbJ3FLySChpmVOzD0QSCTiW8w/dmQxqNIQ==}
     engines: {node: '>=10'}
@@ -1987,6 +2017,10 @@ packages:
       '@swc/core-win32-x64-msvc': 1.3.57
     dev: true
 
+  /@types/estree@1.0.1:
+    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
+    dev: true
+
   /@types/hoist-non-react-statics@3.3.1:
     resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
     dependencies:
@@ -2599,6 +2633,10 @@ packages:
     engines: {node: '>=4.0'}
     dev: true
 
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: true
+
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -2966,6 +3004,13 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /magic-string@0.27.0:
+    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}

src/Footer.tsx

@@ -1,4 +1,4 @@
-import { Center, Link, Text } from '@chakra-ui/react';
+import { Center, Flex, Link, Text } from '@chakra-ui/react';
 import { Suspense } from 'react';
 import { SDKVersion } from './SDKVersion';
 
@@ -17,13 +17,13 @@ export function Footer() {
         left="0"
         flexDir="column"
       >
-        <Text>
-          {'音乐解锁 (x.x.x) '}
+        <Flex as={Text}>
+          {'音乐解锁 (__APP_VERSION_SHORT__'}
           <Suspense>
             <SDKVersion />
           </Suspense>
-          {' - 移除已购音乐的加密保护。'}
-        </Text>
+          {') - 移除已购音乐的加密保护。'}
+        </Flex>
         <Text>
           {'Copyright © 2019 - 2023 '}
           <Link href="https://git.unlock-music.dev/um" isExternal>

src/SDKVersion.tsx

@@ -1,20 +1,32 @@
 import { InfoOutlineIcon } from '@chakra-ui/icons';
-import { Tooltip } from '@chakra-ui/react';
+import { Tooltip, VStack, Text, Box, Flex } from '@chakra-ui/react';
 import { workerClientBus } from './decrypt-worker/client';
 import { DECRYPTION_WORKER_ACTION_NAME } from './decrypt-worker/constants';
 
 import usePromise from 'react-promise-suspense';
 
 const getSDKVersion = async () => {
-  const version = workerClientBus.request(DECRYPTION_WORKER_ACTION_NAME.VERSION, null);
-  return `SDK: ${version}`;
+  return workerClientBus.request(DECRYPTION_WORKER_ACTION_NAME.VERSION, null);
 };
 
 export function SDKVersion() {
   const sdkVersion = usePromise(getSDKVersion, []);
   return (
-    <Tooltip hasArrow placement="top" label={sdkVersion} bg="gray.300" color="black">
-      <InfoOutlineIcon />
-    </Tooltip>
+    <Flex pl="1" alignItems="center">
+      <Tooltip
+        hasArrow
+        placement="top"
+        label={
+          <VStack>
+            <Text>App: __APP_VERSION__</Text>
+            <Text>SDK: {sdkVersion}</Text>
+          </VStack>
+        }
+        bg="gray.300"
+        color="black"
+      >
+        <InfoOutlineIcon />
+      </Tooltip>
+    </Flex>
   );
 }

vite.config.ts

@@ -1,9 +1,25 @@
-import path from 'path';
+import cp from 'node:child_process';
+import url from 'node:url';
+import path from 'node:path';
+import fs from 'node:fs';
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import wasm from 'vite-plugin-wasm';
+import replace from '@rollup/plugin-replace';
 import topLevelAwait from 'vite-plugin-top-level-await';
 
+const gitRoot = url.fileURLToPath(new URL('.', import.meta.url));
+const pkg = JSON.parse(fs.readFileSync(gitRoot + '/package.json', 'utf-8'));
+
+function command(cmd, dir = '') {
+  return cp.execSync(cmd, { cwd: path.join(gitRoot, dir), encoding: 'utf-8' }).trim();
+}
+
+const COMMAND_GIT_VERSION = 'git describe --long --dirty --tags --always';
+const shortCommit = command(COMMAND_GIT_VERSION);
+const version = `${pkg.version}-${shortCommit}`;
+
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
@@ -25,7 +41,18 @@ export default defineConfig({
   optimizeDeps: {
     exclude: ['@jixun/libparakeet'],
   },
-  plugins: [react(), wasm(), topLevelAwait()],
+  plugins: [
+    replace({
+      preventAssignment: true,
+      values: {
+        __APP_VERSION_SHORT__: pkg.version,
+        __APP_VERSION__: version,
+      },
+    }),
+    react(),
+    wasm(),
+    topLevelAwait(),
+  ],
   resolve: {
     alias: {
       '~': path.resolve(__dirname, 'src'),