search

histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.16k stars 186 forks source link

Quasar framework support #105

Open Akryum opened 2 years ago

Akryum commented 2 years ago

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

IlCallo commented 2 years ago

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 commented 1 year ago

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

Paracelsus-Rose commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 left and you can investigate the problem collaboratively

Akryum commented 1 year ago

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

brnsnt commented 1 year ago

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)
MarlonVictor commented 1 year ago

I made a simple example of using histoire together with quasar and it returns this error. I really want to use it with quasar, please help me 🙏

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


Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
    at formatError (file:///home/projects/quasarframework-cmamo7/node_modules/vite/dist/node/chunks/dep-689425f3.js:39080:46)
    at TransformContext.error (file:///home/projects/quasarframework-cmamo7/node_modules/vite/dist/node/chunks/dep-689425f3.js:39076:19)
    at TransformContext.transform (file:///home/projects/quasarframework-cmamo7/node_modules/vite/dist/node/chunks/dep-689425f3.js:58300:22)
    at async Object.transform (file:///home/projects/quasarframework-cmamo7/node_modules/vite/dist/node/chunks/dep-689425f3.js:39317:30)
    at async doTransform (file:///home/projects/quasarframework-cmamo7/node_modules/vite/dist/node/chunks/dep-689425f3.js:50043:29)```
patrickmonteiro commented 1 year ago

I would love to use histoire with quasar, but it seems the integration still doesn't work.

onexdata commented 1 year ago

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

Any update on this? It sounds like from this comment, the Historie team is assuming this is a bug in Quasar without checking to see if it's true and is officially leaving it to the Quasar community to try and figure out... It looks like the Quasar community is trying but unable to find out the issue. While we're familiar with Quasar, we aren't familiar with Historie as we're trying to use it but can't, and certainly not even in the same universe of familiarity as the Historie devs are. Some help or insight into Historie and how it's doing things seems not only helpful, but required for Historie to ever support Quasar.

Quasar is the No. 2 UI kit in Vue, and Historie is a UI tool for Vue. It would seem Historie would want to work with Quasar.

Is it really fair for the Historie team to say to anyone asking why Historie doesn't work with a major Vue platform "this is probably a problem with that platform, so, you figure it out." ?

What are the chances that Historie has no implementation issues or bugs, and it's always the other platforms?

Even if that actually is true, is it a healthy stance to take? Quasar is a mjaor pillar in Vue, and Historie is a Vue tool. Is it possible we can get help so we can adopt and love Historie too? Or is the Quasar community a minority or maginalized demographic in Historie leadership's eyes?

Heartnett commented 11 months ago

I'm facing a similar issue, but my setup is Nuxt + Quasar + Vue Macros + Histoire.

patrickmonteiro commented 7 months ago

Almost 2 years later and no update on this?

jclaveau commented 7 months ago

Almost 2 years later and no update on this?

A part of the job is in the scope of the Quasar team for Quasar v3: https://github.com/orgs/quasarframework/projects/2/views/1?pane=issue&itemId=5779563

IlCallo commented 7 months ago

We actually expose a dedicated config for testing in new app-vite and app-webpack packages major version (currently in beta), but it's still an async function, due to how Quasar config works:

Usage example: https://github.com/quasarframework/quasar-testing/blob/498e6ec46a3f9f88a3f60901fa62cdf8eb4fc02c/packages/e2e-cypress/src/helpers/cct-dev-server/index.ts#L143-L145