workflow: include commit link in template explorer

packages/global.d.ts

@@ -2,6 +2,7 @@
 declare var __DEV__: boolean
 declare var __JSDOM__: boolean
 declare var __BROWSER__: boolean
+declare var __COMMIT__: string
 
 // Feature flags
 declare var __FEATURE_OPTIONS__: boolean

packages/template-explorer/src/options.ts

@@ -11,6 +11,14 @@ const App = {
   setup() {
     return () => [
       h('h1', `Vue 3 Template Explorer`),
+      h(
+        'a',
+        {
+          href: `https://github.com/vuejs/vue-next/tree/${__COMMIT__}`,
+          target: `_blank`
+        },
+        `@${__COMMIT__}`
+      ),
       h('div', { id: 'options' }, [
         // mode selection
         h('span', { class: 'options-group' }, [

packages/template-explorer/style.css

@@ -19,6 +19,7 @@ body {
 h1 {
   font-size: 18px;
   display: inline-block;
+  margin-right: 15px;
 }
 
 #options {
@@ -30,10 +31,15 @@ h1 {
   margin-right: 30px;
 }
 
-#header span, #header label, #header input {
+#header span, #header label, #header input, #header a {
   display: inline-block;
 }
 
+#header a {
+  font-weight: 600;
+  color: rgb(101, 163, 221);
+}
+
 #header .label {
   font-weight: bold;
 }

rollup.config.js

@@ -133,6 +133,7 @@ function createConfig(output, plugins = []) {
 
 function createReplacePlugin(isProduction, isBunlderESMBuild, isBrowserBuild) {
   return replace({
+    __COMMIT__: `"${process.env.COMMIT}"`,
     __DEV__: isBunlderESMBuild
       ? // preserve to be handled by bundlers
         `process.env.NODE_ENV !== 'production'`

scripts/build.js

@@ -29,6 +29,7 @@ const formats = args.formats || args.f
 const devOnly = args.devOnly || args.d
 const prodOnly = !devOnly && (args.prodOnly || args.p)
 const buildAllMatching = args.all || args.a
+const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
 ;(async () => {
   if (!targets.length) {
     await buildAll(allTargets)
@@ -60,11 +61,16 @@ async function build(target) {
     [
       '-c',
       '--environment',
-      `NODE_ENV:${env},` +
-        `TARGET:${target}` +
-        (formats ? `,FORMATS:${formats}` : ``) +
-        (args.types ? `,TYPES:true` : ``) +
-        (prodOnly ? `,PROD_ONLY:true` : ``)
+      [
+        `COMMIT:${commit}`,
+        `NODE_ENV:${env}`,
+        `TARGET:${target}`,
+        formats ? `FORMATS:${formats}` : ``,
+        args.types ? `TYPES:true` : ``,
+        prodOnly ? `PROD_ONLY:true` : ``
+      ]
+        .filter(_ => _)
+        .join(',')
     ],
     { stdio: 'inherit' }
   )

scripts/dev.js

@@ -22,10 +22,19 @@ const { targets, fuzzyMatchTarget } = require('./utils')
 const args = require('minimist')(process.argv.slice(2))
 const target = args._.length ? fuzzyMatchTarget(args._)[0] : 'vue'
 const formats = args.formats || args.f
+const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
 
 execa(
   'rollup',
-  ['-wc', '--environment', `TARGET:${target},FORMATS:${formats || 'global'}`],
+  [
+    '-wc',
+    '--environment',
+    [
+      `COMMIT:${commit}`,
+      `TARGET:${target}`,
+      `FORMATS:${formats || 'global'}`
+    ].join(',')
+  ],
   {
     stdio: 'inherit'
   }