fix: use v-text rather than v-html (#100)

This commit is contained in:
Daniel Roe 2022-05-07 18:58:08 +01:00 committed by GitHub
parent 434afa4351
commit f3804f2839
3 changed files with 5 additions and 4 deletions

View File

@ -23,7 +23,7 @@ export const DevRenderingPlugin = () => {
const messages = JSON.parse(await fsp.readFile(r(page, 'messages.json'), 'utf-8'))
return template(contents, {
interpolate: /{{([\s\S]+?)}}/g
interpolate: /{{{?([\s\S]+?)}?}}/g
})({
messages: { ...genericMessages, ...messages }
})

View File

@ -69,7 +69,7 @@ export const RenderPlugin = () => {
// Serialize into a js function
const jsCode = [
`const _messages = ${JSON.stringify({ ...genericMessages, ...messages })}`,
`const _render = ${template(html, { variable: '__var__', interpolate: /{{([\s\S]+?)}}/g }).toString().replace('__var__', '{ messages }')}`,
`const _render = ${template(html, { variable: '__var__', interpolate: /{{{?([\s\S]+?)}?}}/g }).toString().replace('__var__', '{ messages }')}`,
'const _template = (messages) => _render({ messages: { ..._messages, ...messages } })'
].join('\n').trim()
@ -79,7 +79,8 @@ export const RenderPlugin = () => {
.replace(/messages\./g, '')
.replace(/<script[^>]*>([\s\S]*?)<\/script>/g, '')
.replace(/<a href="(\/[^"]*)"([^>]*)>([\s\S]*)<\/a>/g, '<NuxtLink to="$1"$2>\n$3\n</NuxtLink>')
.replace(/>{{\s*(\w+?)\s*}}<\/[\w-]*>/g, ' v-html="$1" />')
.replace(/>{{\s*(\w+?)\s*}}<\/[\w-]*>/g, ' v-text="$1" />')
.replace(/>{{{\s*(\w+?)\s*}}}<\/[\w-]*>/g, ' v-html="$1" />')
// We are not matching <link> <script> and <meta> tags as these aren't used yet in nuxt/ui
// and should be taken care of wherever this SFC is used
const title = html.match(/<title.*?>([\s\S]*)<\/title>/)?.[1].replace(/{{([\s\S]+?)}}/g, (r) => {

View File

@ -20,7 +20,7 @@
<h1 class="text-6xl sm:text-8xl font-medium mb-6">{{ messages.statusCode }}</h1>
<p class="text-xl sm:text-2xl font-light mb-8 leading-tight">{{ messages.description }}</p>
<div class="bg-white rounded-t-md bg-black/5 dark:bg-white/10 flex-1 overflow-y-auto h-auto">
<pre class="text-xl font-light leading-tight z-10 p-8">{{ messages.stack }}</pre>
<pre class="text-xl font-light leading-tight z-10 p-8">{{{ messages.stack }}}</pre>
</div>
</body>
</html>