Qwik Framework Support

[reemardelarosa]

Is your feature request related to a problem? Please describe. Please create support for qwik framework.

Describe the solution you'd like Qwik is a new kind of web framework that can deliver instant loading web applications at any size or complexity. Your sites and apps can boot with about 1kb of JS (regardless of application complexity), and achieve consistent performance at scale.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

[fwouts]

I was wondering when someone would ask for this :)

No plans for this just yet (Svelte will likely come first), but let's see how many upvotes this issue gets!

I will see if I can take this opportunity to document how to create a new framework plugin for Preview.js, so it can be implemented by the community.

[reemardelarosa]

@fwouts I want to contribute for Qwik Framework. Do you have a guide on how to implement it?

[fwouts]

Hey @reemardelarosa, give me a few days to write some docs :) In the meantime, you can find the implementation for each framework in frameworks/ (e.g. frameworks/solid and frameworks/svelte).

[fwouts]

Hey @reemardelarosa, just a heads-up that I'm actively working on a guide.

For context, the current process to add a new framework is pretty annoying (even for myself) so I've been building better tooling to test framework plugin integration in isolation. It should be ready within a few weeks.

[fwouts]

WIP branch: https://github.com/fwouts/previewjs/tree/qwik

[wmertens]

@fwouts that wip branch looks good, what is still left to do? Looks like you need to upgrade the qwik example app to v1.2.0 and improve the detection logic, correct?

[fwouts]

@wmertens There's a lot of work left, in fact the hard part is ahead:

• component detection: see the current todo at https://github.com/fwouts/previewjs/compare/main...qwik#diff-f2996d92163bce74a5a366eee6b80e22d85b9bb98318271c367ef42c9cbfb812R26
• component analysis (i.e. inferring prop types in the analyze() function)
• adding tests for everything (unit tests for component detection & analysis, Playwright tests for everything, smoke tests with a few real apps, see https://github.com/fwouts/previewjs/tree/main/framework-plugins/react/tests for a good example)

[wmertens]

Can you figure out what the types of functions are from code parsing?

In Qwik, all real components are created with component$(renderFn) (defined here). So all components are results of those calls. The props type of a component is Parameters<renderFn>[0].

Can previewjs do that sort of type analysis?

If you can find all those calls, you have a very large portion covered. You'd only be missing Lite Components which are plain functions, but those could maybe be tagged with comments? In any case, component$ components will be the most used by far, I don't think supporting Lite Components is a priority.

[fwouts]

Yes, Preview.js can definitely do that sort of type analysis, using the TypeScript Compiler API as it does for other frameworks :)

The problem is just resourcing. I spent two years working on Preview.js, but I've recently had to take a real job that actually pays money, so I cannot spend as much time building new features. Adding support for a new framework also implies more maintenance work over the long term, which I'm hesitant about when it doesn't have a big community (yet).

You're welcome to send a few PRs though, that would change the equation! This is how Preact support happened.

[wmertens]

Will take a look! Absolutely understand, dev tooling is not a great job pay-wise :-(

I'll see how preact does it, or do you have pointers to better examples in the code?

[fwouts]

Preact and Solid are likely the simplest examples you'll find.