Is it possible to supply options to the Quasar App Extension?

[infinite-system]

I am developing an App Extension which requires some options passed down to it from the main application, to make the resolution of dynamic imports available properly from within the quasar extension that I am making.

The dynamic import must resolve to the directories relative to the main project, not relative to the node_modules/extension-folder/src, for that the dynamic import function has to be specified I presume manually by the user of App Extension like:

Hypothetical line below:
Vue.use(Extension, { options: function dynamicImportFunction() { return () => import(`src/${component}.vue`) } })

How can I implement such a process in Quasar, as the App Extension is loaded in the background by Quasar itself, I do not see an exposed API where I can modify this.

Without proper resolutions of dynamic imports used by my package, my package becomes half useless and impossible to make.

How would you go about solving such a problem?

I am relatively new to Vue and Quasar, so am I missing something obvious here?

[infinite-system]

I semi solved the problem, by installing my extension as quasar-ui-x extension instead of through quasar-app-extension-x, and then manually doing the boot function like this:

import { boot } from 'quasar/wrappers'
import VuePlugin, { smartImport } from 'quasar-ui-x'

export default boot(({ app }) => {
  app.use(VuePlugin, {
    __importer__: function(){ 
       return smartImport(component => {
         return () => import(`src/${component}.vue`)
       })
    })
  })
})

In package.json I had to add 2 packages

 "vite-plugin-dynamic-import": "^1.2.3",
 "vite-plugin-dynamic-import-module": "^0.2.1",

Also in quasar.config.js I had to add:

const dynamicImport = require('vite-plugin-dynamic-import').default
...

 vitePlugins: [
        ....,
        dynamicImport()
  ]

It worked! By supplying the dynamic import function from this Quasar application scope it made it resolve correctly both on dev and build.

Is there a way to do through the quasar-app-extension-x?

That double layering of 2 packages to create an extension (quasar-ui-x, quasar-app-extension-x), is it really necessary? Cause in this case it prevents this being able to be done, when I do it through quasar-app-extension-x it doesn't have access to the global scope to do the dynamic import properly.

But still the benefits of install, and prompt scripts exists in that layering. Can someone explain why there are 2 layers instead of 1 for App Extensions, it makes it cumbersome to develop Quasar extensions cause you have to track 2 packages simultaneously.

Can this process be simplified? I think it would make Quasar top of the line product and inspire more people to make extensions for this amazing framework.

[smolinari]

Out of curiosity, can you explain the purpose of the app extension you are trying to create? We've never had anyone mention needing both the UI and normal app ext kits in one extension, so this seems pretty niche and also a reason to understand your goals.

Scott

[infinite-system]

Isn't that how it works? Or maybe I don't understand from the docs, you need quasar-app-extension-x and inside there is a dependency for the quasar-ui-x extension, so when you install quasar-app-extension-x through the quasar ext install x it installs quasar-app-extension-x not quasar-ui-x, quasar-ui-x is wrapped around with quasar-app-extension-x. Is that not the architecture?

Or am I getting it wrong?

My extension is a library, but currently it has only 3 components, the main one is wrapper around QDialog, to unify ($q.dialog and the QDialog extension) it into one API and it also integrate the QDialog with the router, the other one is a special RouterLink wrapper, to be able to close QDialogs correctly when in router mode keeping track of the router history correctly.

[smolinari]

You don't need the AE kit to create a UI AE, if all you are doing is adding UI components. But, it sounds like you are doing more than just adding components, so ok, you might need a regular AE too. But, you could use a regular AE to install your UI AE AFAIK. I haven't done it myself. Maybe someone with more experience can chime in.

What is a "QDialog extension" btw?

Scott

[infinite-system]

QDialog is the modal dialog for Quasar, there is a plugin and a component.

I am using 'quasar-ui-x' separately now and it works, but I started off with the UI Kit extension that comes with quasar, and that is how it was setup there, 2 layers one containing another.

My App Extension, makes it seemless to pass down a component inside the dialog and pass props into the component as well, reactively both via template tags and via code, using the same code.

[smolinari]

So, you meant the QDialog plugin and not an extension, correct? Just making sure. And, the QDialog itself allows for integrating a component to customize the dialog. You know about that too right? I don't think there is a need to "combine" the component QDialog and the plugin into one. That is what I'm trying to get at.

Scott

[infinite-system]

Yes, sorry. No I found the component options in there quite limited, if you implement custom you lose all the features and have to implement them manually, in my app extension, $q.dialog is used as wrapper so changing options on the fly is a breeze. Initially it was just as an excercise project to learn Vue and Quasar that turned into App Extension, also to learn App Extension building, it implements all features of $q.dialog and component passing is simplified, component inside is just a plain any component, not the specific one in the manual with all the ins and outs of QDialog, as I am satisfied with majority of options already implemented in QDialog.

It's not as simple as you say, and very useful automatic implementation for routing, it can be plugged directly into the routes with options of QDialog + component you want to display.

Anyway, that's besides the point of my concerns in this thread though!

[smolinari]

Sounds interesting. I'm not experienced enough with AEs to give you any further tips. Maybe ... @hawkeye64 might have some time to have a look through your thoughts and give some tips?

Scott