chore: show version and commit in playground

violentmonkey · Mar 9, 2024 · 7e10a12 · 7e10a12
1 parent 6bc5980
commit 7e10a12
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -16,8 +16,10 @@
     "build:js": "NODE_ENV=production rollup -c",
     "build:types": "tsc -p tsconfig.prod.json",
     "build": "run-s ci clean build:*",
-    "demo:cp": "cp src/demo/* dist",
-    "demo": "run-s build:js demo:cp"
+    "demo:dev": "DEMO=1 run-s demo:cp dev",
+    "demo:build": "DEMO=1 run-s build",
+    "demo:cp": "cp src/demo/index.html dist",
+    "demo": "run-s demo:build demo:cp"
   },
   "unpkg": "dist/index.js",
   "jsdelivr": "dist/index.js",
@@ -47,7 +49,8 @@
     "@gera2ld/plaid-test": "~2.6.0",
     "del-cli": "^5.1.0",
     "husky": "^9.0.11",
-    "jest-environment-jsdom": "^29.7.0"
+    "jest-environment-jsdom": "^29.7.0",
+    "vue": "^3.4.21"
   },
   "jest": {
     "testEnvironment": "jsdom"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -1,13 +1,22 @@
 import { defineExternal, definePlugins } from '@gera2ld/plaid-rollup';
+import { execSync } from 'node:child_process';
 import { defineConfig } from 'rollup';
 import pkg from './package.json' assert { type: 'json' };
 
 const banner = `/*! ${pkg.name} v${pkg.version} | ${pkg.license} License */`;
+const commit = execSync('git rev-parse --short HEAD').toString().trim();
 
 const bundleOptions = {
   extend: true,
   esModule: false,
 };
+const values = {
+  'process.env.VERSION': JSON.stringify(pkg.version),
+  'process.env.COMMIT': JSON.stringify(commit),
+};
+const external = defineExternal(
+  Object.keys({ ...pkg.dependencies, ...pkg.devDependencies }),
+);
 
 export default defineConfig([
   {
@@ -17,10 +26,10 @@ export default defineConfig([
       minimize: false,
       replaceValues: {
         'process.env.VM': false,
-        'process.env.VERSION': JSON.stringify(pkg.version),
+        ...values,
       },
     }),
-    external: defineExternal(Object.keys(pkg.dependencies)),
+    external,
     output: {
       format: 'esm',
       file: `dist/index.mjs`,
@@ -34,7 +43,7 @@ export default defineConfig([
       minimize: false,
       replaceValues: {
         'process.env.VM': true,
-        'process.env.VERSION': JSON.stringify(pkg.version),
+        ...values,
       },
     }),
     output: {
@@ -45,4 +54,27 @@ export default defineConfig([
       ...bundleOptions,
     },
   },
+  ...(process.env.DEMO
+    ? [
+        {
+          input: 'src/demo/app.js',
+          plugins: definePlugins({
+            esm: true,
+            minimize: false,
+            replaceValues: {
+              'process.env.VM': true,
+              ...values,
+            },
+          }),
+          external,
+          output: {
+            format: 'iife',
+            file: 'dist/app.js',
+            globals: {
+              vue: 'Vue',
+            },
+          },
+        },
+      ]
+    : []),
 ]);
diff --git a/src/demo/app.js b/src/demo/app.js
@@ -1,4 +1,5 @@
-const { createApp, nextTick, ref, watch, onMounted } = Vue;
+import { createApp, nextTick, ref, watch, onMounted } from 'vue';
+
 createApp({
   setup() {
     const shortcuts = ref(`\
@@ -97,6 +98,7 @@ ArrowUp ArrowUp ArrowDown ArrowDown ArrowLeft ArrowRight ArrowLeft ArrowRight B
 
     return {
       version: VM.shortcut.version,
+      commit: process.env.COMMIT,
       shortcuts,
       sequence,
       keyTriggered,

diff --git a/src/demo/index.html b/src/demo/index.html
@@ -43,7 +43,14 @@
   <body>
     <div id="app" class="max-w-screen-lg mx-auto px-2" un-cloak>
       <h1 class="text-center"><em>@violentmonkey/shortcut</em> Playground</h1>
-      <p class="text-right text-gray-400 text-sm">Version: {{version}}</p>
+      <p class="text-right text-gray-400 text-sm">
+        Version: {{version}}
+        <a
+          class="text-blue-400"
+          :href="`https://github.com/violentmonkey/vm-shortcut/commit/${commit}`"
+          v-text="commit"
+        ></a>
+      </p>
       <h2>Triggering a Shortcut</h2>
       <div class="flex mb-2">
         <div class="flex-1">