quasar: Quasar plugin config property is typed incorrectly
Discussed in https://github.com/quasarframework/quasar/discussions/16045
<div type='discussions-op-text'>Originally posted by ghiscoding July 5, 2023
I have global configs defined for Quasar and that used to work properly before updating (mostly because the config property of QuasarPluginOptions was set to any so we could provide anything we wanted really)
So considering this global config
const quasarOptions: Partial<QuasarPluginOptions> = {
// Quasar plugins
plugins: {
Dialog,
Notify,
},
config: {
/* Notify defaults */
notify: {
position: 'top',
timeout: 2500,
},
},
};
const app = createApp(App);
app.use(Quasar, quasarOptions)
this no longer work and tells me what notify is not a known property of QuasarPluginOptions and seem to be caused by this PR #15945
Type ‘{ notify: { position: string; timeout: number; textColor: string; actions: { icon: string; color: string; }[]; }; loading: { spinner: ComponentConstructor<QSpinnerClock>; … 4 more …; customClass: string; }; }’ is not assignable to type ‘QuasarUIConfiguration’. Object literal may only specify known properties, and ‘notify’ does not exist in type ‘QuasarUIConfiguration’.ts(2322) plugin.d.ts(13, 3): The expected type comes from property ‘config’ which is declared here on type ‘Partial<QuasarPluginOptions>’
I am not expecting any errors since even the documentation still mentions the same way to configure the global configs
https://quasar.dev/quasar-plugins/notify#installation
Am I doing something wrong or is that a Regression Bug?</div>
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 1
- Comments: 17 (8 by maintainers)
Commits related to this issue
- fix(ui): define both UI and quasar.config file compatible types in quasarConfOptions (fix: #16046) (#16213) * fix: define both UI and quasar.config file compatible types in quasarConfOptions * fea... — committed to quasarframework/quasar by yusufkandemir 10 months ago
- fix(ui): correctly augment QuasarUIConfiguration type (fix: #16046) — committed to maiolica/quasar by yusufkandemir a year ago
@yusufkandemir
There are subtle differences between quasar.config.js usage and the UI code (eg. a boot file). For quasar.config.js we are running under a Node context, so we can’t directly supply Components or action handlers (onClick etc). This is due to how the config is serialized and then used in the UI. As an example, config > notify > spinner must be a String in quasar.config.js which Quasar CLI detects and writes UI code for it (converts the String to a Component import in the UI space). Now, for the UI space, user is supposed to specify a Component directly (he/she imports it manually and supplies it as config > notify > spinner), which is exactly what the CLI does under the hood.
There are also other Quasar plugins which have different config, based on where you are specifying it (quasar.config.js or UI space). Example: the “actions” that you pushed. You can’t specify the “handler” in quasar.config.js because that’s a Function and cannot be serialized when injected into the UI space.
As a general rule of thumb, it is really a bad idea to import anything UI related in the Node context of quasar.config.js (Components, Functions, etc). Can you focus on solving this, please? Make a diff between what the typings were before your main/first PR (because they were done correctly) and what they are now and implement a way to differentiate the things I mentioned above. Unfortunately, all Quasar plugins should be reviewed (which is where the diff will help).
@ghiscoding #16102