quasar

1
process.env.BABEL_ENV = 'production'
2

3
const path = require('node:path')
4
const fse = require('fs-extra')
5
const { build: esBuild } = require('esbuild')
6

7
const { version } = require('../package.json')
8

9
const buildConf = require('./build.conf')
10
const buildUtils = require('./build.utils')
11
const prepareDiff = require('./prepare-diff')
12

13
const vueNamedImportsCode = (() => {
14
  /**
15
   * We could infer this automatically by reading and parsing each
16
   * file for vue imports, but the runtime cost is too high and we
17
   * want to achieve the best possible performance while building.
18
   *
19
   * Unfortunately, esbuild does not have an option to tell
20
   * anything about what the named imports are from the target file.
21
   *
22
   * Add all the vue imports from the UI code to the list below
23
   * otherwise the build will fail with the following error:
24
   *   No matching export in "Search for vueNamedImportsCode in /ui/build :vue"
25
   */
26
  const namedImports = [
27
    'h',
28
    'ref', 'computed', 'watch',
29
    'isRef', 'toRaw', 'unref', 'reactive', 'shallowReactive',
30
    'nextTick',
31
    'onActivated', 'onDeactivated',
32
    'onBeforeMount', 'onMounted',
33
    'onBeforeUnmount', 'onUnmounted',
34
    'onBeforeUpdate', 'onUpdated',
35
    'inject', 'provide',
36
    'getCurrentInstance',
37
    'markRaw',
38
    'Transition', 'TransitionGroup', 'KeepAlive', 'Teleport',
39
    'useSSRContext',
40
    'withDirectives',
41
    'vShow',
42
    'defineComponent', 'createApp'
43
  ].join(',')
44

45
  return { contents: `const { ${ namedImports } } = window.Vue;export { ${ namedImports } };` }
46
})()
47

48
const umdTempFilesList = []
49
const umdTargetAssetRE = /\.mjs$/
50
process.on('exit', () => {
51
  umdTempFilesList.forEach(file => {
52
    fse.removeSync(file)
53
  })
54
})
55

56
const rootFolder = path.resolve(__dirname, '..')
57
const resolve = file => path.resolve(rootFolder, file)
58

59
const quasarEsbuildPluginUmdGlobalExternals = {
60
  name: 'quasar:umd-global-externals',
61
  setup (build) {
62
    const namespace = 'Search for vueNamedImportsCode in /ui/build '
63
    build.onResolve({ filter: /^vue$/ }, (args) => ({
64
      path: args.path,
65
      namespace
66
    }))
67

68
    build.onLoad(
69
      { filter: /.*/, namespace },
70
      () => vueNamedImportsCode
71
    )
72
  }
73
}
74

75
const builds = [
76
  // client entry-point used by @quasar/vite-plugin for DEV only
77
  // (has flags untouched; required to replace them)
78
  {
79
    format: 'esm',
80
    define: {
81
      __QUASAR_VERSION__: `'${ version }'`,
82
      __QUASAR_SSR_SERVER__: 'false'
83
    },
84
    entryPoints: [
85
      resolve('src/index.dev.js')
86
    ],
87
    outfile: resolve('dist/quasar.esm.js')
88
  },
89

90
  // client prod entry-point that is not used by Quasar CLI,
91
  // but pointed to in package.json > module;
92
  // (no flags; not required to replace them)
93
  {
94
    format: 'esm',
95
    minify: true,
96
    define: {
97
      __QUASAR_VERSION__: `'${ version }'`,
98
      __QUASAR_SSR__: 'false',
99
      __QUASAR_SSR_SERVER__: 'false',
100
      __QUASAR_SSR_CLIENT__: 'false',
101
      __QUASAR_SSR_PWA__: 'false'
102
    },
103
    entryPoints: [
104
      resolve('src/index.prod.js')
105
    ],
106
    outfile: resolve('dist/quasar.esm.prod.js')
107
  },
108

109
  // SSR server prod entry-point
110
  // (no flags; not required to replace them)
111
  {
112
    format: 'cjs',
113
    platform: 'node',
114
    minify: true,
115
    define: {
116
      __QUASAR_VERSION__: `'${ version }'`,
117
      __QUASAR_SSR__: 'true',
118
      __QUASAR_SSR_SERVER__: 'true',
119
      __QUASAR_SSR_CLIENT__: 'false',
120
      __QUASAR_SSR_PWA__: 'false'
121
    },
122
    entryPoints: [
123
      resolve('src/index.ssr.js')
124
    ],
125
    outfile: resolve('dist/quasar.cjs.prod.js')
126
  },
127

128
  // UMD dev entry
129
  {
130
    format: 'iife',
131
    define: {
132
      __QUASAR_VERSION__: `'${ version }'`,
133
      __QUASAR_SSR__: 'false',
134
      __QUASAR_SSR_SERVER__: 'false',
135
      __QUASAR_SSR_CLIENT__: 'false',
136
      __QUASAR_SSR_PWA__: 'false'
137
    },
138
    entryPoints: [
139
      resolve('src/index.umd.js')
140
    ],
141
    outfile: resolve('dist/quasar.umd.js'),
142
    plugins: [ quasarEsbuildPluginUmdGlobalExternals ]
143
  },
144

145
  // UMD prod entry
146
  {
147
    format: 'iife',
148
    minify: true,
149
    define: {
150
      __QUASAR_VERSION__: `'${ version }'`,
151
      __QUASAR_SSR__: 'false',
152
      __QUASAR_SSR_SERVER__: 'false',
153
      __QUASAR_SSR_CLIENT__: 'false',
154
      __QUASAR_SSR_PWA__: 'false'
155
    },
156
    entryPoints: [
157
      resolve('src/index.umd.js')
158
    ],
159
    outfile: resolve('dist/quasar.umd.prod.js'),
160
    plugins: [ quasarEsbuildPluginUmdGlobalExternals ]
161
  }
162
]
163

164
function genConfig (opts) {
165
  return {
166
    platform: 'browser',
167
    packages: 'external',
168
    target: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ],
169
    bundle: true,
170
    banner: {
171
      js: buildConf.banner
172
    },
173
    write: false,
174
    ...opts
175
  }
176
}
177

178
function build (builds) {
179
  const promiseList = builds.map(genConfig)
180
    .map(esbuildConfig => {
181
      return esBuild(esbuildConfig).then(result => {
182
        if (result.errors.length !== 0 || result.warnings.length !== 0) {
183
          buildUtils.logError(`Errors encountered for ${ esbuildConfig.entryPoints[ 0 ] }`)
184
          process.exit(1)
185
        }
186

187
        return buildUtils.writeFile(
188
          esbuildConfig.outfile,
189
          result.outputFiles[ 0 ].text,
190
          esbuildConfig.minify === true
191
        )
192
      })
193
    })
194

195
  return Promise
196
    .all(promiseList)
197
    .catch(err => {
198
      console.error(err)
199
      buildUtils.logError('Errors encountered during the esbuild compilation. Exiting...')
200
      process.exit(1)
201
    })
202
}
203

204
function addUmdAssets (builds, type, injectName) {
205
  const files = fse.readdirSync(resolve(type))
206

207
  files.forEach(file => {
208
    if (umdTargetAssetRE.test(file) === false) return
209

210
    const name = file
211
      .substring(0, file.length - 4)
212
      .replace(/-([a-zA-Z])/g, g => g[ 1 ].toUpperCase())
213

214
    const inputCode = fse.readFileSync(resolve(`${ type }/${ file }`), 'utf-8')
215
    const tempFile = resolve(`dist/${ type }/temp.${ file }`)
216

217
    umdTempFilesList.push(tempFile)
218

219
    fse.writeFileSync(
220
      tempFile,
221
      inputCode.replace('export default ', `window.Quasar.${ injectName }.${ name } = `),
222
      'utf-8'
223
    )
224

225
    builds.push({
226
      format: 'iife',
227
      minify: true,
228
      entryPoints: [
229
        tempFile
230
      ],
231
      outfile: addExtension(resolve(`dist/${ type }/${ file }`), 'umd.prod')
232
    })
233
  })
234
}
235

236
function addExtension (filename, ext = 'prod') {
237
  const insertionPoint = filename.lastIndexOf('.')
238
  const suffix = filename.slice(insertionPoint)
239
  return `${ filename.slice(0, insertionPoint) }.${ ext }${ suffix === '.mjs' ? '.js' : suffix }`
240
}
241

242
const runBuild = {
243
  async full () {
244
    require('./build.transforms').generate({ compact: true })
245
    require('./build.icon-sets').generate()
246

247
    addUmdAssets(builds, 'lang', 'lang')
248
    addUmdAssets(builds, 'icon-set', 'iconSet')
249

250
    build(builds)
251

252
    const api = await require('./build.api').generate({ compact: true })
253

254
    require('./build.vetur').generate({ api, compact: true })
255
    require('./build.web-types').generate({ api, compact: true })
256

257
    const quasarLangIndex = await require('./build.lang').generate()
258
    require('./build.types').generate({ api, quasarLangIndex })
259
  },
260

261
  async types () {
262
    prepareDiff('dist/types/index.d.ts')
263

264
    const api = await require('./build.api').generate()
265

266
    const quasarLangIndex = await require('./build.lang').generate()
267
    require('./build.types').generate({ api, quasarLangIndex })
268
  },
269

270
  async api () {
271
    await prepareDiff('dist/api')
272
    require('./build.api').generate()
273
  },
274

275
  async vetur () {
276
    await prepareDiff('dist/vetur')
277

278
    const api = await require('./build.api').generate({ compact: true })
279
    require('./build.vetur').generate({ api })
280
  },
281

282
  async webtypes () {
283
    await prepareDiff('dist/web-types')
284

285
    const api = await require('./build.api').generate({ compact: true })
286
    require('./build.web-types').generate({ api })
287
  },
288

289
  async transforms () {
290
    await prepareDiff('dist/transforms')
291
    require('./build.transforms').generate()
292
  }
293
}
294

295
module.exports = function (subtype) {
296
  if (runBuild[ subtype ] === void 0) {
297
    console.log(` Unrecognized subtype specified: "${ subtype }".`)
298
    console.log(` Available: ${ Object.keys(runBuild).join(' | ') }\n`)
299
    process.exit(1)
300
  }
301

302
  runBuild[ subtype ]()
303
}
304