altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse source 
* fix: precompile template urls at build time + bs5 btn on agenda loading screen

* fix: add back url store changes
This commit is contained in:
Nicolas Giard 2022-11-01 12:51:33 -04:00 committed by GitHub
parent 69c0f4da04
commit 0c920b0a29
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 172 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
.pnp.cjs generated
View file

@ -46,6 +46,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@percy/cli", "npm:1.11.0"],\
["@percy/cypress", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:3.1.2"],\
["@popperjs/core", "npm:2.11.6"],\
["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.0.2"],\
["@vitejs/plugin-vue", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:3.1.2"],\
["@vue/test-utils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:2.1.0"],\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.2"],\
@ -2148,6 +2149,31 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["@rollup/pluginutils", [\
["npm:5.0.2", {\
"packageLocation": "./.yarn/cache/@rollup-pluginutils-npm-5.0.2-6aa9d0ddd4-edea15e543.zip/node_modules/@rollup/pluginutils/",\
"packageDependencies": [\
["@rollup/pluginutils", "npm:5.0.2"]\
],\
"linkType": "SOFT"\
}],\
["virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.0.2", {\
"packageLocation": "./.yarn/__virtual__/@rollup-pluginutils-virtual-ca58d3a074/0/cache/@rollup-pluginutils-npm-5.0.2-6aa9d0ddd4-edea15e543.zip/node_modules/@rollup/pluginutils/",\
"packageDependencies": [\
["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.0.2"],\
["@types/estree", "npm:1.0.0"],\
["@types/rollup", null],\
["estree-walker", "npm:2.0.2"],\
["picomatch", "npm:2.3.1"],\
["rollup", null]\
],\
"packagePeers": [\
"@types/rollup",\
"rollup"\
],\
"linkType": "HARD"\
}]\
]],\
["@sidvind/better-ajv-errors", [\
["npm:2.0.0", {\
"packageLocation": "./.yarn/cache/@sidvind-better-ajv-errors-npm-2.0.0-3531bddef9-12b0d87855.zip/node_modules/@sidvind/better-ajv-errors/",\
@ -2200,6 +2226,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["@types/estree", [\
["npm:1.0.0", {\
"packageLocation": "./.yarn/cache/@types-estree-npm-1.0.0-eddde5b631-910d97fb70.zip/node_modules/@types/estree/",\
"packageDependencies": [\
["@types/estree", "npm:1.0.0"]\
],\
"linkType": "HARD"\
}]\
]],\
["@types/istanbul-lib-coverage", [\
["npm:2.0.4", {\
"packageLocation": "./.yarn/cache/@types-istanbul-lib-coverage-npm-2.0.4-734954bb56-a25d7589ee.zip/node_modules/@types/istanbul-lib-coverage/",\
@ -8544,6 +8579,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@percy/cli", "npm:1.11.0"],\
["@percy/cypress", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:3.1.2"],\
["@popperjs/core", "npm:2.11.6"],\
["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.0.2"],\
["@vitejs/plugin-vue", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:3.1.2"],\
["@vue/test-utils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:2.1.0"],\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.2"],\

BIN
.yarn/cache/@rollup-pluginutils-npm-5.0.2-6aa9d0ddd4-edea15e543.zip vendored Normal file
View file

Binary file not shown.

BIN
.yarn/cache/@types-estree-npm-1.0.0-eddde5b631-910d97fb70.zip vendored Normal file
View file

Binary file not shown.

21
client/agenda/AgendaDetailsModal.vue
View file

@ -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
})
}
})

3
client/agenda/AgendaFilter.vue
View file

@ -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

9
client/agenda/AgendaMobileBar.vue
View file

@ -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}`)

9
client/agenda/AgendaQuickAccess.vue
View file

@ -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}`)

21
client/agenda/AgendaScheduleList.vue
View file

@ -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'
})
}

18
client/shared/urls.js Normal file
View file

@ -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)
}

9
client/shared/urls.json Normal file
View file

@ -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}"
}

30
dev/vite-plugins/precompile-lodash-templates.js Normal file
View file

@ -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
}
}
}
}

14
ietf/templates/meeting/agenda.html
View file

@ -74,25 +74,13 @@ body {
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 %}

1
package.json
View file

@ -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",

8
vite.config.js
View file

@ -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: {

24
yarn.lock
View file

@ -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