fix: precompile template urls at build time + bs5 btn on agenda loading screen (ietf-tools#4679)

NGPixel · web-flow · commit 0c920b0a2994 · 2022-11-01T11:51:33.000-05:00
* fix: precompile template urls at build time + bs5 btn on agenda loading screen

* fix: add back url store changes
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/@rollup-pluginutils-npm-5.0.2-6aa9d0ddd4-edea15e543.zip b/.yarn/cache/@rollup-pluginutils-npm-5.0.2-6aa9d0ddd4-edea15e543.zip
diff --git a/.yarn/cache/@types-estree-npm-1.0.0-eddde5b631-910d97fb70.zip b/.yarn/cache/@types-estree-npm-1.0.0-eddde5b631-910d97fb70.zip
diff --git a/client/agenda/AgendaDetailsModal.vue b/client/agenda/AgendaDetailsModal.vue
@@ -152,6 +152,7 @@ import {
 } from 'naive-ui'
 
 import { useAgendaStore } from './store'
+import { getUrl } from '../shared/urls'
 
 // PROPS
 
@@ -205,10 +206,22 @@ const eventDetails = computed(() => {
     title: props.event.type === 'regular' ? `${props.event.groupName} (${props.event.acronym})` : props.event.name,
     showAgenda: props.event.flags.showAgenda,
     materialsUrl: materialsUrl,
-    detailsUrl: `/meeting/${agendaStore.meeting.number}/session/${props.event.acronym}/`,
-    tarUrl: `/meeting/${agendaStore.meeting.number}/agenda/${props.event.acronym}-drafts.tgz`,
-    pdfUrl: `/meeting/${agendaStore.meeting.number}/agenda/${props.event.acronym}-drafts.pdf`,
-    notepadUrl: `https://notes.ietf.org/notes-ietf-${agendaStore.meeting.number}-${props.event.type === 'plenary' ? 'plenary' : props.event.acronym}`,
+    detailsUrl: getUrl('meetingDetails', {
+      meetingNumber: agendaStore.meeting.number,
+      eventAcronym: props.event.acronym
+    }),
+    tarUrl: getUrl('meetingMaterialsTar', {
+      meetingNumber: agendaStore.meeting.number,
+      eventAcronym: props.event.acronym
+    }),
+    pdfUrl: getUrl('meetingMaterialsPdf', {
+      meetingNumber: agendaStore.meeting.number,
+      eventAcronym: props.event.acronym
+    }),
+    notepadUrl: getUrl('meetingNotes', {
+      meetingNumber: agendaStore.meeting.number,
+      eventAcronym: props.event.type === 'plenary' ? 'plenary' : props.event.acronym
+    })
   }
 })
 
diff --git a/client/agenda/AgendaFilter.vue b/client/agenda/AgendaFilter.vue
@@ -60,7 +60,7 @@ n-drawer(v-model:show='state.isShown', placement='bottom', :height='state.drawer
                 )
                 template(#trigger)
                   span.badge BoF
-                span #[a(href='https://www.ietf.org/how/bofs/', target='_blank') Birds of a Feather] sessions (BoFs) are initial discussions about a particular topic of interest to the IETF community.
+                span #[a(:href='getUrl(`bofDefinition`)', target='_blank') Birds of a Feather] sessions (BoFs) are initial discussions about a particular topic of interest to the IETF community.
 </template>
 
 <script setup>
@@ -77,6 +77,7 @@ import {
 } from 'naive-ui'
 
 import { useAgendaStore } from './store'
+import { getUrl } from '../shared/urls'
 
 // STORES
 
diff --git a/client/agenda/AgendaMobileBar.vue b/client/agenda/AgendaMobileBar.vue
@@ -31,7 +31,8 @@ import {
 } from 'naive-ui'
 
 import { useAgendaStore } from './store'
-import { useSiteStore } from '../shared/store';
+import { useSiteStore } from '../shared/store'
+import { getUrl } from '../shared/urls'
 
 // MESSAGE PROVIDER
 
@@ -64,11 +65,11 @@ function downloadIcs (key) {
   let icsUrl = ''
   if (agendaStore.pickerMode) {
     const sessionKeywords = agendaStore.scheduleAdjusted.map(s => s.sessionKeyword)
-    icsUrl = `/meeting/${agendaStore.meeting.number}/agenda.ics?show=${sessionKeywords.join(',')}`
+    icsUrl = `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}?show=${sessionKeywords.join(',')}`
   } else if (agendaStore.selectedCatSubs.length > 0) {
-    icsUrl = `/meeting/${agendaStore.meeting.number}/agenda.ics?show=${agendaStore.selectedCatSubs.join(',')}`
+    icsUrl = `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}?show=${agendaStore.selectedCatSubs.join(',')}`
   } else {
-    icsUrl = `/meeting/${agendaStore.meeting.number}/agenda.ics`
+    icsUrl = `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}`
   }
   if (key === 'subscribe') {
     window.location.assign(`webcal://${window.location.host}${icsUrl}`)
diff --git a/client/agenda/AgendaQuickAccess.vue b/client/agenda/AgendaQuickAccess.vue
@@ -120,7 +120,8 @@ import {
 } from 'naive-ui'
 
 import { useAgendaStore } from './store'
-import { useSiteStore } from '../shared/store';
+import { useSiteStore } from '../shared/store'
+import { getUrl } from '../shared/urls'
 
 // MESSAGE PROVIDER
 
@@ -181,11 +182,11 @@ function downloadIcs (key) {
   let icsUrl = ''
   if (agendaStore.pickerMode) {
     const sessionKeywords = agendaStore.scheduleAdjusted.map(s => s.sessionKeyword)
-    icsUrl = `/meeting/${agendaStore.meeting.number}/agenda.ics?show=${sessionKeywords.join(',')}`
+    icsUrl = `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}?show=${sessionKeywords.join(',')}`
   } else if (agendaStore.selectedCatSubs.length > 0) {
-    icsUrl = `/meeting/${agendaStore.meeting.number}/agenda.ics?show=${agendaStore.selectedCatSubs.join(',')}`
+    icsUrl = `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}?show=${agendaStore.selectedCatSubs.join(',')}`
   } else {
-    icsUrl = `/meeting/${agendaStore.meeting.number}/agenda.ics`
+    icsUrl = `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}`
   }
   if (key === 'subscribe') {
     window.location.assign(`webcal://${window.location.host}${icsUrl}`)
diff --git a/client/agenda/AgendaScheduleList.vue b/client/agenda/AgendaScheduleList.vue
@@ -202,6 +202,7 @@ import AgendaDetailsModal from './AgendaDetailsModal.vue'
 
 import { useAgendaStore } from './store'
 import { useSiteStore } from '../shared/store'
+import { getUrl } from '../shared/urls'
 
 // MESSAGE PROVIDER
 
@@ -275,14 +276,20 @@ const meetingEvents = computed(() => {
           id: `lnk-${item.id}-tar`,
           label: 'Download meeting materials as .tar archive',
           icon: 'file-zip',
-          href: `/meeting/${agendaStore.meeting.number}/agenda/${item.acronym}-drafts.tgz`,
+          href: getUrl('meetingMaterialsTar', {
+            meetingNumber: agendaStore.meeting.number,
+            eventAcronym: item.acronym
+          }),
           color: 'brown'
         })
         links.push({
           id: `lnk-${item.id}-pdf`,
           label: 'Download meeting materials as PDF file',
           icon: 'file-pdf',
-          href: `/meeting/${agendaStore.meeting.number}/agenda/${item.acronym}-drafts.pdf`,
+          href: getUrl('meetingMaterialsPdf', {
+            meetingNumber: agendaStore.meeting.number,
+            eventAcronym: item.acronym
+          }),
           color: 'red'
         })
       }
@@ -291,7 +298,10 @@ const meetingEvents = computed(() => {
           id: `lnk-${item.id}-note`,
           label: 'Notepad for note-takers',
           icon: 'journal-text',
-          href: `https://notes.ietf.org/notes-ietf-${agendaStore.meeting.number}-${item.type === 'plenary' ? 'plenary' : item.acronym}`,
+          href: getUrl('meetingNotes', {
+            meetingNumber: agendaStore.meeting.number,
+            eventAcronym: item.type === 'plenary' ? 'plenary' : item.acronym
+          }),
           color: 'blue'
         })
       }
@@ -404,7 +414,10 @@ const meetingEvents = computed(() => {
               id: `lnk-${item.id}-rec`,
               label: 'Session recording',
               icon: 'film',
-              href: `https://www.meetecho.com/ietf${agendaStore.meeting.number}/recordings#${item.acronym.toUpperCase()}`,
+              href: getUrl('meetingMeetechoRecordings', {
+                meetingNumber: agendaStore.meeting.number,
+                eventAcronym: item.acronym.toUpperCase()
+              }),
               color: 'purple'
             })
           }
diff --git a/client/shared/urls.js b/client/shared/urls.js
@@ -0,0 +1,18 @@
+/**
+ * DO NOT add the urls here directly. Edit the urls.json file instead.
+ * The urls are automatically precompiled into the variable below at build time.
+ */
+const urls = { /* __COMPILED_URLS__ */ }
+
+/**
+ * Get an URL and replace tokens with provided values.
+ *
+ * @param {string} key The key of the URL template to use.
+ * @param {Object} [tokens] An object of tokens to replace in the URL template.
+ * @returns {string} URL with tokens replaced with the provided values.
+ */
+export const getUrl = (key, tokens = {}) => {
+  if (!key) { throw new Error('Must provide a key for getUrl()') }
+  if (!urls[key]) { throw new Error('Invalid getUrl() key') }
+  return urls[key](tokens)
+}
diff --git a/client/shared/urls.json b/client/shared/urls.json
@@ -0,0 +1,9 @@
+{
+  "bofDefinition": "https://www.ietf.org/how/bofs/",
+  "meetingCalIcs": "/meeting/{meetingNumber}/agenda.ics",
+  "meetingDetails": "/meeting/{meetingNumber}/session/{eventAcronym}/",
+  "meetingMaterialsPdf": "/meeting/{meetingNumber}/agenda/{eventAcronym}-drafts.pdf",
+  "meetingMaterialsTar": "/meeting/{meetingNumber}/agenda/{eventAcronym}-drafts.tgz",
+  "meetingMeetechoRecordings": "https://www.meetecho.com/ietf{meetingNumber}/recordings#{eventAcronym}",
+  "meetingNotes": "https://notes.ietf.org/notes-ietf-{meetingNumber}-{eventAcronym}"
+}
diff --git a/dev/vite-plugins/precompile-lodash-templates.js b/dev/vite-plugins/precompile-lodash-templates.js
@@ -0,0 +1,30 @@
+import { createFilter } from '@rollup/pluginutils'
+import template from 'lodash/template'
+import transform from 'lodash/transform'
+import fs from 'fs/promises'
+
+export default function precompileLodashTemplates(options = {}) {
+  const filter = createFilter(options.include, options.exclude)
+  return {
+    name: 'precompile-lodash-templates',
+    enforce: 'pre',
+    async transform(code, id) {
+      if (!filter(id)) { return }
+
+      const jsonPath = `${id}on`
+      const urls = JSON.parse(await fs.readFile(jsonPath, { encoding: 'utf8' }))
+
+      const interpolate = /{([\s\S]+?)}/g
+      const compiledUrls = transform(urls, (result, value, key) => {
+        result.push(`"${key}": ${template(value.replaceAll('{', '{data.'), { interpolate, variable: 'data' }).source.replace('function(obj)', '(obj) =>')}`)
+      }, [])
+
+      console.info(code.replace('/* __COMPILED_URLS__ */', compiledUrls.join(',\n')))
+
+      return {
+        code: code.replace('/* __COMPILED_URLS__ */', compiledUrls.join(',\n')),
+        map: null
+      }
+    }
+  }
+}
diff --git a/ietf/templates/meeting/agenda.html b/ietf/templates/meeting/agenda.html
@@ -74,25 +74,13 @@
     right: 0;
     z-index: 1000000000;
 }
-
-#app-loading-footer > a {
-    text-decoration: none;
-    font-weight: 500;
-    font-size: .9em;
-    color: #0aa2c0;
-    display: inline-block;
-    padding: 8px 16px;
-    background-color: #F9F9F9;
-    border-radius: 5px;
-    margin-bottom: 12px;
-}
 {% endblock %}
 {% block content %}
     {% origin %}
     <div id="app"></div>
     <div id="app-loading">
         <div id="app-loading-footer">
-            <a href="/meeting/{{ meetingData.meetingNumber }}/agenda.txt">Switch to text-only version &#11166;</a>
+            <a class="btn btn-light text-muted mb-3" href="/meeting/{{ meetingData.meetingNumber }}/agenda.txt"><small>Switch to text-only version &#11166;</small></a>
         </div>
     </div>
 {% endblock %}
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "@parcel/transformer-sass": "2.7.0",
     "@percy/cli": "1.11.0",
     "@percy/cypress": "3.1.2",
+    "@rollup/pluginutils": "5.0.2",
     "@vitejs/plugin-vue": "3.1.2",
     "@vue/test-utils": "2.1.0",
     "browserlist": "latest",
diff --git a/vite.config.js b/vite.config.js
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import { resolve } from 'path'
 import vue from '@vitejs/plugin-vue'
 import servePreviewAssets from './dev/vite-plugins/serve-preview-assets'
+import precompileLodashTemplates from './dev/vite-plugins/precompile-lodash-templates'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode }) => {
@@ -19,7 +20,12 @@ export default defineConfig(({ command, mode }) => {
     },
     cacheDir: '.vite',
     plugins: [
-      vue()
+      vue(),
+      precompileLodashTemplates({
+        include: [
+          '**/shared/urls.js'
+        ]
+      })
     ],
     publicDir: 'ietf/static/public',
     server: {
diff --git a/yarn.lock b/yarn.lock
@@ -1668,6 +1668,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/pluginutils@npm:5.0.2":
+  version: 5.0.2
+  resolution: "@rollup/pluginutils@npm:5.0.2"
+  dependencies:
+    "@types/estree": ^1.0.0
+    estree-walker: ^2.0.2
+    picomatch: ^2.3.1
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: edea15e543bebc7dcac3b0ac8bc7b8e8e6dbd46e2864dbe5dd28072de1fbd5b0e10d545a610c0edaa178e8a7ac432e2a2a52e547ece1308471412caba47db8ce
+  languageName: node
+  linkType: hard
+
 "@sidvind/better-ajv-errors@npm:^2.0.0":
   version: 2.0.0
   resolution: "@sidvind/better-ajv-errors@npm:2.0.0"
@@ -1703,6 +1719,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/estree@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@types/estree@npm:1.0.0"
+  checksum: 910d97fb7092c6738d30a7430ae4786a38542023c6302b95d46f49420b797f21619cdde11fa92b338366268795884111c2eb10356e4bd2c8ad5b92941e9e6443
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
@@ -7114,6 +7137,7 @@ browserlist@latest:
     "@percy/cli": 1.11.0
     "@percy/cypress": 3.1.2
     "@popperjs/core": 2.11.6
+    "@rollup/pluginutils": 5.0.2
     "@vitejs/plugin-vue": 3.1.2
     "@vue/test-utils": 2.1.0
     bootstrap: 5.2.2
