feat!(app-vite): auto generate base tsconfig and types

app-vite/bin/quasar.js

@@ -5,6 +5,7 @@ import '../lib/node-version-check.js'
 const commands = [
   'dev',
   'build',
+  'prepare',
   'clean',
   'inspect',
   'describe',
@@ -23,6 +24,7 @@ if (cmd) {
     const mapToCmd = {
       d: 'dev',
       b: 'build',
+      p: 'prepare',
       e: 'ext',
       r: 'run',
       c: 'clean',

app-vite/lib/app-devserver.js

@@ -2,6 +2,7 @@ import { AppTool } from './app-tool.js'
 import { printDevRunningBanner } from './utils/banner.js'
 import { encodeForDiff } from './utils/encode-for-diff.js'
 import { EntryFilesGenerator } from './entry-files-generator.js'
+import { generateTypes } from './types-generator.js'
 
 function getConfSnapshot (extractFn, quasarConf, diffExtractFnMap) {
   return extractFn(quasarConf, diffExtractFnMap).map(item => (item ? encodeForDiff(item) : ''))
@@ -36,6 +37,11 @@ export class AppDevserver extends AppTool {
       quasarConf.ssr.manualPostHydrationTrigger
     ]))
 
+    this.registerDiff('types', quasarConf => ([
+      quasarConf.build.typescript,
+      quasarConf.build.alias
+    ]))
+
     this.registerDiff('viteUrl', quasarConf => ([
       quasarConf.metaConf.APP_URL
     ]))
@@ -63,6 +69,10 @@ export class AppDevserver extends AppTool {
       this.#entryFiles.generate(quasarConf)
     }
 
+    if (this.#diff('types', quasarConf)) {
+      this.#queue(this.#runId, quasarConf, () => generateTypes(quasarConf))
+    }
+
     if (__isRetry !== true) {
       this.#runId++
     }

app-vite/lib/cmd/build.js

@@ -137,9 +137,6 @@ await quasarConfFile.init()
 
 const quasarConf = await quasarConfFile.read()
 
-const { ensureTypesFeatureFlags } = await import('../utils/types-feature-flags.js')
-ensureTypesFeatureFlags(quasarConf)
-
 const { QuasarModeBuilder } = await import(`../modes/${ argv.mode }/${ argv.mode }-builder.js`)
 const appBuilder = new QuasarModeBuilder({ argv, quasarConf })
 
@@ -151,6 +148,9 @@ const { EntryFilesGenerator } = await import('../entry-files-generator.js')
 const entryFiles = new EntryFilesGenerator(ctx)
 entryFiles.generate(quasarConf)
 
+const { generateTypes } = await import('../types-generator.js')
+await generateTypes(quasarConf)
+
 if (typeof quasarConf.build.beforeBuild === 'function') {
   await quasarConf.build.beforeBuild({ quasarConf })
 }

app-vite/lib/cmd/dev.js

@@ -156,9 +156,6 @@ await quasarConfFile.init()
 
 const quasarConf = await quasarConfFile.read()
 
-import { ensureTypesFeatureFlags } from '../utils/types-feature-flags.js'
-ensureTypesFeatureFlags(quasarConf)
-
 if (quasarConf.metaConf.vueDevtools !== false) {
   await startVueDevtools(ctx, quasarConf.metaConf.vueDevtools.port)
 }

app-vite/lib/cmd/help.js

@@ -28,6 +28,7 @@ console.log(`
   Commands
     dev, d        Start a dev server for your App
     build, b      Build your app for production
+    prepare, p    Prepare the app for linting, type-checking, IDE integration, etc.
     clean, c      Clean dev/build cache, /dist folder & entry points
     new, n        Quickly scaffold page/layout/component/... vue file
     mode, m       Add/remove Quasar Modes for your App

app-vite/lib/cmd/mode.js

@@ -44,11 +44,13 @@ if (argv._.length !== 0 && argv._.length !== 2) {
 import { green, gray } from 'kolorist'
 
 import { getCtx } from '../utils/get-ctx.js'
-const ctx = getCtx()
+import { generateTypes } from '../types-generator.js'
 
 async function run () {
   const [ action, mode ] = argv._
 
+  const ctx = getCtx({ mode })
+
   if (![ 'add', 'remove' ].includes(action)) {
     console.log()
     warn(`Unknown action specified (${ action }).`)
@@ -83,9 +85,23 @@ async function run () {
   }
 
   await actionMap[ action ]({ ctx })
+
+  // Ensure types are re-generated accordingly
+  const { QuasarConfigFile } = await import('../quasar-config-file.js')
+  const quasarConfFile = new QuasarConfigFile({
+    ctx,
+    // host and port don't matter for this command
+    port: 9000,
+    host: 'localhost'
+  })
+  await quasarConfFile.init()
+  const quasarConf = await quasarConfFile.read()
+  await generateTypes(quasarConf)
 }
 
 async function displayModes () {
+  const ctx = getCtx()
+
   log('Detecting installed modes...')
 
   const info = []

app-vite/lib/cmd/prepare.js

@@ -0,0 +1,62 @@
+import parseArgs from 'minimist'
+
+import { log } from '../utils/logger.js'
+
+const argv = parseArgs(process.argv.slice(2), {
+  alias: {
+    h: 'help'
+  },
+  boolean: [ 'h' ]
+})
+
+if (argv.help) {
+  console.log(`
+  Description
+    Prepare the app for linting, type-checking, IDE integration, etc.
+    It will generate the relevant files such as '.quasar/tsconfig.json', types files, etc.
+    Running 'quasar dev' or 'quasar build' will automatically handle this for you.
+    Use this command for a lightweight alternative to dev/build. Useful in CI/CD pipelines.
+
+  Usage
+    $ quasar prepare
+
+  Options
+    --help, -h      Displays this message
+  `)
+  process.exit(0)
+}
+
+const { readFileSync } = await import('node:fs')
+
+console.log(
+  readFileSync(
+    new URL('../../assets/logo.art', import.meta.url),
+    'utf8'
+  )
+)
+
+const { getCtx } = await import('../utils/get-ctx.js')
+// ctx doesn't matter for this command
+const ctx = getCtx({
+  mode: 'spa',
+  debug: false,
+  prod: true
+})
+
+const { QuasarConfigFile } = await import('../quasar-config-file.js')
+const quasarConfFile = new QuasarConfigFile({
+  ctx,
+  // host and port don't matter for this command
+  port: 9000,
+  host: 'localhost'
+})
+
+await quasarConfFile.init()
+
+const quasarConf = await quasarConfFile.read()
+
+const { generateTypes } = await import('../types-generator.js')
+await generateTypes(quasarConf)
+
+log('Generated tsconfig.json and types files in .quasar directory')
+log('The app is now prepared for linting, type-checking, IDE integration, etc.')

app-vite/lib/modes/bex/bex-installation.js

@@ -2,7 +2,6 @@ import fs from 'node:fs'
 import fse from 'fs-extra'
 
 import { log, warn } from '../../utils/logger.js'
-import { generateTypesFeatureFlag } from '../../utils/types-feature-flags.js'
 
 export function isModeInstalled (appPaths) {
   return fs.existsSync(appPaths.bexDir)
@@ -23,7 +22,6 @@ export async function addMode ({
   log('Creating Browser Extension source folder...')
 
   fse.copySync(appPaths.resolve.cli('templates/bex/common'), appPaths.bexDir)
-  generateTypesFeatureFlag('bex', appPaths)
 
   const hasTypescript = await cacheProxy.getModule('hasTypescript')
   const format = hasTypescript ? 'ts' : 'default'

app-vite/lib/modes/electron/electron-installation.js

@@ -2,7 +2,6 @@ import fs from 'node:fs'
 import fse from 'fs-extra'
 
 import { log, warn } from '../../utils/logger.js'
-import { generateTypesFeatureFlag } from '../../utils/types-feature-flags.js'
 
 const electronDeps = {
   electron: 'latest'
@@ -37,8 +36,6 @@ export async function addMode ({
     appPaths.electronDir
   )
 
-  generateTypesFeatureFlag('electron', appPaths)
-
   log('Creating Electron icons folder...')
   fse.copySync(
     appPaths.resolve.cli('templates/electron/icons'),

app-vite/lib/modes/pwa/pwa-installation.js

@@ -2,7 +2,6 @@ import fs from 'node:fs'
 import fse from 'fs-extra'
 
 import { log, warn } from '../../utils/logger.js'
-import { generateTypesFeatureFlag } from '../../utils/types-feature-flags.js'
 
 const defaultVersion = '^7.0.0'
 
@@ -58,8 +57,6 @@ export async function addMode ({
     hasEslint === true ? { filter: src => !src.endsWith('/.eslintrc.cjs') } : void 0
   )
 
-  generateTypesFeatureFlag('pwa', appPaths)
-
   log('Copying PWA icons to /public/icons/ (if they are not already there)...')
   fse.copySync(
     appPaths.resolve.cli('templates/pwa-icons'),

app-vite/lib/modes/ssr/ssr-devserver.js

@@ -279,7 +279,7 @@ export class QuasarModeDevserver extends AppDevserver {
   }
 
   async #bootWebserver (quasarConf) {
-    const done = progress(`Booting Webserver...`)
+    const done = progress('Booting Webserver...')
 
     if (this.#webserver !== null) {
       await this.#webserver.close()

app-vite/lib/modes/ssr/ssr-installation.js

@@ -2,7 +2,6 @@ import fs from 'node:fs'
 import fse from 'fs-extra'
 
 import { log, warn } from '../../utils/logger.js'
-import { generateTypesFeatureFlag } from '../../utils/types-feature-flags.js'
 
 export function isModeInstalled (appPaths) {
   return fs.existsSync(appPaths.ssrDir)
@@ -27,8 +26,6 @@ export async function addMode ({
     appPaths.ssrDir
   )
 
-  generateTypesFeatureFlag('ssr', appPaths)
-
   log('SSR support was added')
 }
 

app-vite/lib/quasar-config-file.js

@@ -281,7 +281,14 @@ export class QuasarConfigFile {
       plugins: [
         quasarEsbuildInjectReplacementsPlugin,
         quasarEsbuildVueShimPlugin
-      ]
+      ],
+      logOverride: {
+        // .quasar/tsconfig.json won't be available for the first time executing dev/build/prepare.
+        // So, esbuild will show a warning saying it can't find the `extends` file.
+        // We need to suppress the warning. Otherwise, it will be noisy and cause a temp file to be created.
+        // tsconfig is not really important for the config file itself anyway.
+        'tsconfig.json': 'silent'
+      }
     }
   }
 
@@ -755,6 +762,11 @@ export class QuasarConfigFile {
         assets: appPaths.resolve.src('assets'),
         boot: appPaths.resolve.src('boot'),
         stores: appPaths.resolve.src('stores')
+      },
+
+      typescript: {
+        strict: false,
+        vueShim: false
       }
     }, cfg.build)