Skip to content

@quasar/app-vite-v2.0.0-rc.1

Pre-release
Pre-release
Compare
Choose a tag to compare
@rstoenescu rstoenescu released this 16 Nov 12:41
· 205 commits to dev since this release
@quasar/app-vite-v2.0.0-rc.1
fd49d89

New

  • feat(app-vite): new BEX mode (read the dedicated section below)
  • feat(app-vite): Upgrade to Vite 6
  • feat(app-vite): warmup client side
  • feat(app-vite): use Vite 6 Environment API for SSR
  • feat(app-vite): enhance AE detection; support for "exports" field in their package.json
  • feat(app-vite): new alias -> #q-app which replaces the old quasar/wrappers imports
  • feat(app-vite): auto generate base tsconfig and types
  • feat(app-vite): force exit after build is done, except for Windows when spawning an external tool
  • feat(app-vite): new CLI cmd -> "prepare"

Fixes

  • fix(app-vite): turn off ws on SSR mode for server-side
  • fix(app-vite): BEX -> enforce hmr protocol+host+port to avoid ws connection fail then fallback
  • fix(app-vite): replace legacy server.hot with server.ws
  • fix(app-vite): correctly use server.ws payload

New BEX mode

There are quite a few improvements:

  • The BEX mode now has HMR (hot module reload)!!! (Chrome only)
  • Completely rewrote & redesigned the Quasar Bridge to allow for:
    • Sending/receiving messages directly between any part of your bex (app, content scripts, background)
    • Ability to skip using the bridge altogether
    • Error handling for sending & receiving messages through the bridge
    • Better handling of internal resources to avoid memory leaks (there were some edge cases in the previous implementation)
    • Debug mode (where all the bridge communication will be outputted to the browser console)
    • Breaking changes highlights: background & content scripts initialization of the bridge; bride.on() calls when responding; bridge.send() calls
    • The bridge is now available throughout the App in /src/ (regardless of the file used: boot files, router init, App.vue, any Vue component, ...) by accessing the $q object or window.QBexBridge
  • One single manifest file from which both chrome & firefox ones can be extracted.
  • Automatically infer the background script file & the content script files from the BEX manifest file.
  • Ability to compile other js/ts files as well that you might need to dynamically load/inject.
  • No more 3s delay when opening the popup.
  • The "dom" script support was removed. Simply move your logic from there into one of your content scripts.
  • New, easier API for the background/content scripts.

There are a few breaking changes as well for the BEX mode and we will not post them here. Please refer to the Quasar CLI (with Vite) > "Upgrade guide" in the docs. (Wait for the docs PWA to get updated or force it)

Auto-generated tsconfig and types

This feature provides benefits for both JS and TS users.

We are now auto-generating tsconfig file in .quasar/tsconfig.json, instead of providing a static preset(@quasar/app-vite/tsconfig-preset). We are also generating some declaration files(.d.ts) files in .quasar. Thanks to these changes:

  • quasar.config file > build > alias is automatically linked to tsconfig. So, you will automatically get IntelliSense in your editor without having to update any other place. So, you can remove related parts from your tsconfig or uninstall plugins like vite-tsconfig-paths.
  • You won't be seeing extra .d.ts files lying around in your project. This also means they can be updated under the hood in the future without you having to follow any manual upgrade steps.
  • (JavaScript-only) The tsconfig options are non-strict by default. So, if you decide to migrate your project to TypeScript, you will have an easier time. You can opt-in to strict behaviors later when you have more time for code quality improvements.
  • (TypeScript-only) Capacitor dependencies are now properly linked to the project’s TypeScript configuration. That means you won’t have to install dependencies twice, once in /src-capacitor and once in the root folder. So, you can remove the Capacitor dependencies from the root package.json file or undo any relevant tsconfig changes. From now on, installing Capacitor dependencies only in the /src-capacitor folder will be enough.
  • (TypeScript-only) tsconfig options have been revisited and modernized.
  • (TypeScript-only) You can programmatically update your tsconfig file via quasar.config file > build > typescript > extendTsConfig

If your project is not using TypeScript, see the breaking changes section below. It should be sufficient.

If your project is using TypeScript, there are a few breaking changes regarding this topic. Some of the important ones are mentioned in the breaking changes section below. But, for the full list of breaking changes, please refer to the Quasar CLI (with Vite) > "Upgrade guide" in the docs. (Wait for the docs PWA to get updated or force it) If you omit the other steps, your app will likely fail to build or will miss out on some features.

Breaking changes

  • The types feature flag files will now be auto-generated in the .quasar folder. So, you must delete them:
  # Method: rimraf through npx (cross-platform)
  # in project folder root:
  $ npx rimraf -g ./src*/*-flag.d.ts ./src/quasar.d.ts ./src/shims-vue.d.ts
  $ quasar prepare

  # Method: Unix-like (Linux, macOS)
  # in project folder root:
  $ rm ./src*/*-flag.d.ts ./src/quasar.d.ts ./src/shims-vue.d.ts
  $ quasar prepare

  • We have deprecated all the imports coming from quasar/wrappers. You can still use them, but we highly recommend switching to the new #q-app/wrappers, as shown below:

    - import { configure } from 'quasar/wrappers'
+ import { defineConfig } from '#q-app/wrappers'

- import { boot } from 'quasar/wrappers'
+ import { defineBoot } from '#q-app/wrappers'

- import { preFetch } from 'quasar/wrappers'
+ import { definePreFetch } from '#q-app/wrappers'

- import { route } from 'quasar/wrappers'
+ import { defineRouter } from '#q-app/wrappers'

- import { store } from 'quasar/wrappers'
+ import { defineStore } from '#q-app/wrappers'

- import { ssrMiddleware } from 'quasar/wrappers'
+ import { defineSsrMiddleware }from '#q-app/wrappers'

- import { ssrCreate } from 'quasar/wrappers'
+ import { defineSsrCreate } from '#q-app/wrappers'

- import { ssrListen } from 'quasar/wrappers'
+ import { defineSsrListen } from '#q-app/wrappers'

- import { ssrClose } from 'quasar/wrappers'
+ import { defineSsrClose } from '#q-app/wrappers'

- import { ssrServeStaticContent } from 'quasar/wrappers'
+ import { defineSsrServeStaticContent } from '#q-app/wrappers'

- import { ssrRenderPreloadTag } from 'quasar/wrappers'
+ import { defineSsrRenderPreloadTag } from '#q-app/wrappers'

  • Update your /jsconfig.json file (for JS projects) or /tsconfig.json file (for TS projects) to the following. Yes, it contains tsconfig in it for non-TS projects as well and it's correct.

    {
  "extends": "./.quasar/tsconfig.json"
}

  • You can add it as a postinstall script to make sure it's run after installing the dependencies. This would be helpful when someone is pulling the project for the first time. This will generate the feature flags and the .quasar/tsconfig.json files.

    {
  "scripts": {
    "postinstall": "quasar prepare"
  }
}

Donations

Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider the following:

Assets 2
Loading