@quasar/app-webpack/lib/utils/html-template.js

Quasar Framework App CLI with Webpack

const compileTemplate = require('lodash/template.js')
const { minify } = require('html-minifier-terser')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const { HtmlTransformPlugin } = require('../plugins/webpack.html-transform.js')

const absoluteUrlRE = /^(https?:\/\/|\/|data:)/i
const ssrInterpolationsRE = /{{([\s\S]+?)}}/g

const htmlStartTagRE = /(<html[^>]*)(>)/i
const headStartTagRE = /(<head[^>]*)(>)/i
const headStartRE = /(<head[^>]*>)/i
const headEndRE = /(<\/head>)/i
const bodyStartTagRE = /(<body[^>]*)(>)/i
const bodyStartRE = /(<body[^>]*>)/i

const entryPointMarkup = '<!-- quasar:entry-point -->'
const attachMarkup = '<div id="q-app"></div>'

module.exports.entryPointMarkup = entryPointMarkup
module.exports.attachMarkup = attachMarkup

function injectPublicPath(html, publicPath) {
  return html.replace(
    /(href|src)\s*=\s*(['"])(.+)(['"])/gi,
    (_, att, pre, val, post) =>
      absoluteUrlRE.test(val.trim()) === true
        ? `${att}=${pre}${val}${post}`
        : `${att}=${pre}${publicPath + val}${post}`
  )
}

function injectSsrRuntimeInterpolation(html) {
  return html
    .replace(htmlStartTagRE, (found, start, end) => {
      let matches

      matches = found.match(/\sdir\s*=\s*['"]([^'"]*)['"]/i)
      if (matches) {
        start = start.replace(matches[0], '')
      }

      matches = found.match(/\slang\s*=\s*['"]([^'"]*)['"]/i)
      if (matches) {
        start = start.replace(matches[0], '')
      }

      return `${start} {{ ssrContext._meta.htmlAttrs }}${end}`
    })
    .replace(
      headStartTagRE,
      (_, start, end) => `${start}${end}\n{{ ssrContext._meta.headTags }}`
    )
    .replace(
      headEndRE,
      (_, tag) => `{{ ssrContext._meta.endingHeadTags || '' }}${tag}`
    )
    .replace(bodyStartTagRE, (found, start, end) => {
      let classes = '{{ ssrContext._meta.bodyClasses }}'

      const matches = found.match(/\sclass\s*=\s*['"]([^'"]*)['"]/i)

      if (matches) {
        if (matches[1].length > 0) {
          classes += ` ${matches[1]}`
        }
        start = start.replace(matches[0], '')
      }

      return `${start} class="${classes.trim()}" {{ ssrContext._meta.bodyAttrs }}${end}{{ ssrContext._meta.bodyTags }}`
    })
}

function injectPwaTags(html, quasarConf) {
  const { publicPath } = quasarConf.build
  const { pwaManifest } = quasarConf.htmlVariables
  const { useCredentialsForManifestTag, injectPwaMetaTags, manifestFilename } =
    quasarConf.pwa

  let headTags = `\n<link rel="manifest" href="${publicPath}${manifestFilename}"${useCredentialsForManifestTag === true ? ' crossorigin="use-credentials"' : ''}>`

  if (injectPwaMetaTags === true) {
    headTags +=
      (pwaManifest.theme_color !== void 0
        ? `\n<meta name="theme-color" content="${pwaManifest.theme_color}">` +
          `<link rel="mask-icon" href="${publicPath}icons/safari-pinned-tab.svg" color="${pwaManifest.theme_color}">`
        : '') +
      '\n<meta name="mobile-web-app-capable" content="yes">' +
      '\n<meta name="apple-mobile-web-app-status-bar-style" content="default">' +
      (pwaManifest.name !== void 0
        ? `\n<meta name="apple-mobile-web-app-title" content="${pwaManifest.name}">`
        : '') +
      `\n<meta name="msapplication-TileImage" content="${publicPath}icons/ms-icon-144x144.png">` +
      '\n<meta name="msapplication-TileColor" content="#000000">' +
      `\n<link rel="apple-touch-icon" href="${publicPath}icons/apple-icon-120x120.png">` +
      `\n<link rel="apple-touch-icon" sizes="152x152" href="${publicPath}icons/apple-icon-152x152.png">` +
      `\n<link rel="apple-touch-icon" sizes="167x167" href="${publicPath}icons/apple-icon-167x167.png">` +
      `\n<link rel="apple-touch-icon" sizes="180x180" href="${publicPath}icons/apple-icon-180x180.png">`
  } else if (typeof injectPwaMetaTags === 'function') {
    headTags += injectPwaMetaTags({ publicPath, pwaManifest })
  }

  return html.replace(headStartRE, (_, tag) => `${tag}${headTags}`)
}

async function transformHtml({ html, quasarConf, renderSsrPwaOffline }) {
  const { ctx } = quasarConf

  // should be dev only
  if (quasarConf.metaConf.vueDevtools !== false) {
    const { host, port } = quasarConf.metaConf.vueDevtools
    const nonce =
      ctx.mode.ssr === true
        ? "{{ ssrContext.nonce ? ' nonce=\"' + ssrContext.nonce + '\"' : '' }}"
        : ''

    const scripts =
      `<script${nonce}>window.__VUE_DEVTOOLS_HOST__='${host}';window.__VUE_DEVTOOLS_PORT__='${port}';</script>` +
      `\n<script src="http://${host}:${port}"></script>`

    html = html.replace(headEndRE, (_, tag) => `${scripts}\n${tag}`)
  }

  if (ctx.mode.cordova) {
    html = html.replace(
      bodyStartRE,
      (_, tag) => `${tag}\n<script src="cordova.js"></script>`
    )
  } else if (ctx.mode.pwa) {
    html = injectPwaTags(html, quasarConf)
  }

  html = html.replace(
    entryPointMarkup,
    renderSsrPwaOffline !== true && ctx.mode.ssr
      ? '<div id="q-app">{{ ssrContext._meta.runtimePageContent }}</div>{{ ssrContext._meta.afterRuntimePageContent }}'
      : attachMarkup
  )

  if (quasarConf.build.publicPath) {
    html = injectPublicPath(html, quasarConf.build.publicPath)
  }

  if (quasarConf.build.minify) {
    const minifyOpts = { ...quasarConf.build.htmlMinifyOptions }

    if (ctx.mode.ssr) {
      minifyOpts.ignoreCustomFragments = [ssrInterpolationsRE]
    }

    html = await minify(html, minifyOpts)
  }

  return html
}

module.exports.injectWebpackHtml = function injectWebpackHtml(
  webpackChain,
  quasarConf,
  templateParam = quasarConf.htmlVariables
) {
  const { appPaths } = quasarConf.ctx
  const renderSsrPwaOffline = quasarConf.ctx.mode.ssr && quasarConf.ctx.mode.pwa

  const filename =
    renderSsrPwaOffline === true
      ? quasarConf.ssr.pwaOfflineHtmlFilename
      : quasarConf.build.htmlFilename

  webpackChain.plugin('html-webpack').use(HtmlWebpackPlugin, [
    {
      filename,
      template: appPaths.resolve.app(quasarConf.sourceFiles.indexHtmlTemplate),
      minify: false, // important! we'll do it ourselves later in transformHtml()
      templateParameters: templateParam,
      chunksSortMode: 'none',
      publicPath: quasarConf.build.publicPath,
      inject: true,
      cache: true
    }
  ])

  webpackChain
    .plugin('html-addons')
    .use(HtmlTransformPlugin, [
      html => transformHtml({ html, quasarConf, renderSsrPwaOffline })
    ])
}

module.exports.getSsrHtmlTemplateFn = async function getSsrHtmlTemplateFn(
  template,
  quasarConf
) {
  const compiled = compileTemplate(template)

  let html = compiled(quasarConf.htmlVariables)

  html = injectSsrRuntimeInterpolation(html)
  html = await transformHtml({ html, quasarConf })

  return compileTemplate(html, {
    interpolate: ssrInterpolationsRE,
    variable: 'ssrContext'
  })
}