Quasar framework support

[Akryum]

trafficstars

https://twitter.com/dakoba/status/1532629503138226177

[IlCallo]

Check out this helper we created to extract Quasar config (both for webpack-based and Vite-based CLI): https://github.com/quasarframework/quasar-testing/blob/dev/packages/e2e-cypress/src/helpers/cct-dev-server/index.ts

Let me know if you need further guidance

[HoaiLee]

@IlCallo Is this possible to integrate Histoire with Quasar now?

[Paracelsus-Rose]

Check out this helper we created to extract Quasar config (both for webpack-based and Vite-based CLI): https://github.com/quasarframework/quasar-testing/blob/dev/packages/e2e-cypress/src/helpers/cct-dev-server/index.ts

Let me know if you need further guidance

Not sure exactly how to use this supplied helper to get histoire/quasar working together. Appreciate any insights :-)

[IlCallo]

As far as I can tell, you just need to copy over the config extractor helper in a dedicated file in your project, then return it from your histoire or Vite configuration, if Historie/Vite support an async config to be returned

[Paracelsus-Rose]

Tried for a few hours to get it working, was unable to reproduce a working copy. Would really love to use Histoire on an upcoming project. If anyone could lend some assistance for Quasar2/Vue3 it would be hugely appreciated.

[brnsnt]

I got this working with a few adjustments around the imports. Now i am able to use it in histoire.config.ts directly.

import { defineConfig } from 'histoire';
import { HstVue } from '@histoire/plugin-vue';
import { quasarViteConfig } from './src/quasar-config';

export default defineConfig({
  plugins: [HstVue()],
  vite: quasarViteConfig("@quasar/app-vite"),
});

But histoire dev gives me then the following error:

Error while collecting story /home/.../Button.story.vue:
TypeError: plugin.load.call is not a function
    at Object.load (/home/.../node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39293:50)
    at doTransform (/home/.../node_modules/vite/dist/node/chunks/dep-c9998dc6.js:49976:46)

@IlCallo Any idea on what might be the problem now? Thank you.

[IlCallo]

Not really, all these problems are probably related to how Historie manage and override Quasar configuration We had the same problem with Cypress and we had to dig into their codebase and find the bug in their code, but we don't have time to do it for all the projects

In these cases I'd just try to use historie unminified bundle, then set the debugger or console.log around to understand what's actually happening underneath and what is making Historie fail

In this particular case, that error may be generated in case Historie is treating quasarViteconfig result as a plugin and not a Promise resolving to a plugin, aka it doesn't support async config

I'd suggest to always share a repro with your findings so far, so that other users can pick up from where you came and you can investigate the problem collaboratively

[Akryum]

Could someone post a runnable repro so I can take a look at this? Thanks :pray:

[brnsnt]

I'm deeply sorry for the delay. Was busy week, but got bit further on this.

Demo project is located here https://github.com/brnsnt/quasar-histoire-demo

:pray: Thank you @IlCallo for pointing me in the right direction, it seems it was still an issue with loading the configuration.

I did now load the quasar-vite config in a Histoire Plugin, similar to how it is done for the Nuxt-Plugin, and this seems to load it correctly.

https://github.com/brnsnt/quasar-histoire-demo/blob/main/src/histoire-plugin-quasar.ts

But Quasar Components still can't be used. When I import and install the Quasar Vue Plugin in the setupfile I get the following error.

Error while collecting story /home/brns/git/quasar-histoire/quasar-project/src/components/ExampleComponent.story.vue:
TypeError: Cannot read properties of undefined (reading 'prototype')
    at /home/brns/git/quasar-histoire/quasar-project/node_modules/quasar/dist/quasar.esm.prod.js:7:22681
    at async ViteNodeRunner.directRequest (file:///home/brns/git/quasar-histoire/quasar-project/node_modules/vite-node/dist/client.mjs:251:5)
    at async ViteNodeRunner.cachedRequest (file:///home/brns/git/quasar-histoire/quasar-project/node_modules/vite-node/dist/client.mjs:128:12)
    at async request (file:///home/brns/git/quasar-histoire/quasar-project/node_modules/vite-node/dist/client.mjs:151:16)
    at async /home/brns/git/quasar-histoire/quasar-project/src/histoire.setup.ts:5:31
    at async ViteNodeRunner.directRequest (file:///home/brns/git/quasar-histoire/quasar-project/node_modules/vite-node/dist/client.mjs:251:5)
    at async ViteNodeRunner.cachedRequest (file:///home/brns/git/quasar-histoire/quasar-project/node_modules/vite-node/dist/client.mjs:128:12)
    at async request (file:///home/brns/git/quasar-histoire/quasar-project/node_modules/vite-node/dist/client.mjs:151:16)
    at async /home/brns/git/quasar-histoire/quasar-project/node_modules/@histoire/plugin-vue/dist/bundled/client/server/run.js:3:31
    at async ViteNodeRunner.directRequest (file:///home/brns/git/quasar-histoire/quasar-project/node_modules/vite-node/dist/client.mjs:251:5)