quasar/vite-plugin/src/vue-transform.js at dev · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import autoImportData from 'quasar/dist/transforms/auto-import.json'
import importTransformation from 'quasar/dist/transforms/import-transformation.js'

import { importQuasarRegex } from './js-transform.js'

export const vueTransformRegex = /\.vue(\?vue&type=template&lang.js)?$/

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.replace(/v-/g, '')}"\\)`, 'g')
const lengthSortFn = (a, b) => b.length - a.length

export function vueTransform (content, autoImportComponentCase) {
  const importList = []
  const importMap = {}

  const compList = []
  const dirList = []

  const reverseMap = {}

  let code = content
    .replace(
      importQuasarRegex,
      (_, match) => match.split(',')
        .map(identifier => {
          const data = identifier.split(' as ')
          const importName = data[0].trim()
          const importAs = data[1] !== void 0
            ? data[1].trim()
            : importName

          importMap[importName] = importAs
          return `import ${importAs} from '${importTransformation(importName)}';`
        })
        .join('')
    )
    .replace(compRegex[autoImportComponentCase], (_, match) => {
      const name = autoImportData.importName[match]
      const reverseName = match.replace(/-/g, '_')

      if (importMap[name] === void 0) {
        importList.push( 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.replace(/-/g, '_')

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

      dirList.push(reverseName)
      return ''
    })

  if (importList.length === 0) {
    return code
  }

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

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

  const codePrefix = importList
    .map(name => `import ${name} from '${importTransformation(name)}'`)
    .join(`;`)

  return codePrefix + ';' + code
}