quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.74k stars 3.5k forks source link

why can't it be realized that hmr without need of manual refresh? #14732

Open heavenkiller2018 opened 1 year ago

heavenkiller2018 commented 1 year ago

What happened?

when I have created an browser extension project with Quasar BEX Mode, I have to reload the builded extension files everytime I made some modification to the app, this work is very tiring and tedious!also inefficient!

What did you expect to happen?

HMR just like a general Vue app, the result should be rendered immediately once the modification is finished. I have found an excellent starter template which can do it.

perhaps you could study how it realize such HMR and migrate it to Quasar, because withou HMR, it's very hard to develop an BEX application!

Reproduction URL

https://stackblitz.com/edit/quasarframework-vfcnwa

How to reproduce?

[[What is a Browser Extension | Quasar Framework](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction)](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction)

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

BEX Mode

Platforms/Browsers

Chrome

Quasar info output

❯ quasar info

Operating System - Linux(5.15.0-50-generic) - linux/x64
NodeJs - 18.12.0

Global packages
  NPM - 8.19.2
  yarn - 1.22.15
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.10.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.1.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.41 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - 2.0.23 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.26.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - ubuntu
  enp1s0 - 192.168.8.101
  docker0 - 172.17.0.1


### Relevant log output

_No response_

### Additional context

_No response_
pbkompasz commented 1 year ago

HMR only works in Firefox. See here.

heavenkiller2018 commented 1 year ago

but firefox doesn't support manifest v3:

error msg is showed in firefox

There was an error during the temporary add-on installation.
Error details

Unsupported manifest version: 3
heavenkiller2018 commented 1 year ago

besides, in chrome, if the background.ts is modified , I have to delete, and then reinstall the extension to put this change into effect. It's very very tedious relative to HMR. even it's better than this if only need to be reloaded but reinstalled. Is there any solution to this?

pbkompasz commented 1 year ago

If background.ts is in src-bex directory than you shouldn't have to reinstall the extension every time. There should be a reload button (docs).

heavenkiller2018 commented 1 year ago

now the situation is that I have to reload the extension if I have changed files in src, and reinstall if in src-bex. The anticipated behavior should be that clicking refresh(F5) is only needed if files in src is changed, and only reloading if files in src-bex.

the following is an example:

I writed a mark code in background.ts

console.count('background.ts:outer bexBackground🎯');
export default bexBackground(() => {
...
}

after install the extension

image

then, I changed the mark code to:

console.count('background.ts:outer bexBackground1`🎯');

then, I only reloaded the extension (of course, after the recompilation is completed).

it has proved that the change didn't work, still output the before code image

the new code taked no effect until the extension was reinstalled: image

so, now when I'm developing an bex with quasar, I have to reinstall the developed extension again and again. so tediously! It's aweful!

why? who can explain it?