quasarframework/quasar @quasar/app-webpack-v4.0.0-rc.1 on GitHub

New

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

Fixes

fix(app-webpack): turn off ws on SSR mode for server-side
fix(app-webpack): BEX -> enforce hmr protocol+host+port to avoid ws connection fail then fallback
fix(app-webpack): replace legacy server.hot with server.ws
fix(app-webpack): correctly use server.ws payload
fix(app-webpack): webpack aliases from quasar.config > build > alias were not fully taken into account

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)

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
  # in project folder root:
  $ npx rimraf -g ./**/*-flag.d.ts ./src/quasar.d.ts ./src/shims-vue.d.ts
  $ quasar prepare

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

  # Method: Windows (CMD)
  # in project folder root:
  $ del /s *-flag.d.ts ./src/quasar.d.ts ./src/shims-vue.d.ts
  $ quasar prepare

  # Method: Windows (PowerShell)
  # in project folder root:
  $ Remove-Item -Recurse -Filter *-flag.d.ts
  $ Remove-Item 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: