@quasar/vite-plugin/src/vue-transform.js

Vite plugin for Quasar Framework

import { loadAutoImportData } from './auto-import-data.js'
import {
  importTransformation,
  mapQuasarImports,
  removeQuasarImports
} from './js-transform.js'

let transformState
function useTransformState() {
  if (transformState !== void 0) {
    return transformState
  }

  const autoImportData = loadAutoImportData()

  const compRegex = {
    kebab: new RegExp(
      `_resolveComponent\\("${autoImportData.regex.kebabComponents}"\\)`,
      'g'
    ),
    pascal: new RegExp(
      `_resolveComponent\\("${autoImportData.regex.pascalComponents}"\\)`,
      'g'
    ),
    combined: new RegExp(
      `_resolveComponent\\("${autoImportData.regex.components}"\\)`,
      'g'
    )
  }

  const dirRegex = new RegExp(
    `_resolveDirective\\("${autoImportData.regex.directives.replaceAll('v-', '')}"\\)`,
    'g'
  )

  transformState = {
    autoImportData,
    compRegex,
    dirRegex
  }
  return transformState
}

const lengthSortFn = (a, b) => b.length - a.length

export function vueTransform(content, autoImportComponentCase, useTreeshaking) {
  const { autoImportData, compRegex, dirRegex } = useTransformState()

  const importSet = new Set()
  const importMap = {}

  const compList = []
  const dirList = []

  const reverseMap = {}
  const jsImportTransformed = useTreeshaking
    ? mapQuasarImports(content, importMap)
    : removeQuasarImports(content, importMap, importSet, reverseMap)

  let code = jsImportTransformed
    .replace(compRegex[autoImportComponentCase], (_, match) => {
      const name = autoImportData.importName[match]
      const reverseName = match.replaceAll('-', '_')

      if (importMap[name] === void 0) {
        importSet.add(name)
        reverseMap[reverseName] = name
      } else {
        reverseMap[reverseName] = importMap[name]
      }

      compList.push(reverseName)
      return ''
    })
    .replace(dirRegex, (_, match) => {
      const name = autoImportData.importName['v-' + match]
      const reverseName = match.replaceAll('-', '_')

      if (importMap[name] === void 0) {
        importSet.add(name)
        reverseMap[reverseName] = name
      } else {
        reverseMap[reverseName] = importMap[name]
      }

      dirList.push(reverseName)
      return ''
    })

  if (compList.length !== 0) {
    const list = compList.sort(lengthSortFn).join('|')
    code = code
      .replaceAll(new RegExp(`const _component_(${list}) = `, 'g'), '')
      .replaceAll(
        new RegExp(`_component_(${list})`, 'g'),
        (_, match) => reverseMap[match]
      )
  }

  if (dirList.length !== 0) {
    const list = dirList.sort(lengthSortFn).join('|')
    code = code
      .replaceAll(new RegExp(`const _directive_(${list}) = `, 'g'), '')
      .replaceAll(
        new RegExp(`_directive_(${list})`, 'g'),
        (_, match) => reverseMap[match]
      )
  }

  if (importSet.size === 0) {
    return code
  }

  const importList = [...importSet]
  const codePrefix = useTreeshaking
    ? importList
        .map(name => `import ${name} from '${importTransformation(name)}'`)
        .join(';')
    : `import {${importList.join(',')}} from 'quasar'`

  return codePrefix + ';' + code
}