Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support SolidStart & Astro #1377

Open
wakaztahir opened this issue Oct 26, 2023 · 1 comment
Open

Support SolidStart & Astro #1377

wakaztahir opened this issue Oct 26, 2023 · 1 comment
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided platform: ssr 🛠️ Issue related to SSR

Comments

@wakaztahir
Copy link

wakaztahir commented Oct 26, 2023

I created a fork of linaria with a different name "xqp" I want to use it in my project which uses SolidJS

I know that Linaria works with SolidJS & SolidJS with server side streaming, However that's not enough

  • Linaria doesn't work with SolidStart & probably with updated Astro, because they use server side streaming, They extract HTML from components and strip javascript which is delivered separately as you might know i.e Islands Architecture

  • This pull request is open and hasn't been merged into main feat(solid): initial draft implementation #1096

So I set out to solve these issues in my own fork and did these things

  • I got feat(solid): initial draft implementation #1096 working with latest versions of SolidJS and Astro
  • I got feat(solid): initial draft implementation #1096 working with latest SolidJS and Astro versions
  • I also managed to make SolidJS work with server side rendering with babel-preset-solid with SSR options ["babel-preset-solid", { generate : "ssr", hydratable : true }]
  • I also had to add babel-preset-solid into transform options presets, So I had to provide transform options object parameter in vite plugin options and then to transform services and get the object and put it in transform options
  • I also had to exclude extensions which were empty, so had to add extension != "" This is because /@solid-refresh was going inside readFileAsync and cause File Not found

Then instead of merging this into main, I merged main into this branch, I made it work after some effort, I could probably do it all again and merge this pull request back into main and create it here but I think it would be ignored since the above pull request has been ignored

Currently I am encountering issues like import.meta.hot cannot be used outside a module, which is being put in by solid plugin, My best guess is these must be evaluated and babel is not evaluating them, I have turned on softErrors for this to work for now as traversing the tree to remove these is hard.
Also reactivity doesn't work when using linaria with solid, don't know why which is a big issue, #1096 (comment)

My Request is that These issues should be fixed and SolidStart & Astro should be supported with server side rendering without a single issue

Here's my build commit https://github.com/Qinetik/xqp/tree/db3ff2e924d2c7815402836b275fd1fac1b2da56

@wakaztahir wakaztahir added bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided needs: triage 🏷 Issue needs to be checked and prioritized labels Oct 26, 2023
@github-actions github-actions bot added platform: ssr 🛠️ Issue related to SSR and removed needs: triage 🏷 Issue needs to be checked and prioritized labels Oct 26, 2023
@shiro
Copy link

shiro commented Nov 1, 2023

I'm currently trying to use linaria in my solid start project and got it to run (somewhat), here's some of my observations:

  1. the linaria vite plugin runs after solid start (prob. a good thing for perf.) so it has to work with the files already transformed by solid (and other user babel plugins), this causes some eval issues (i.e. solid refresh)

I used a custom babel plugin that I pass to linaria to remove things that cause eval errors from the AST (certain import, solid refresh function calls, solid function calls, etc.). It's very fragile, but I guess this will improve as linaria shaker gets better?

  1. ENOENT error with Vite in dev mode #1246 pops up constantly (it's an unresolved issue on vite's side) and goes away after restarting the server (and waiting for the recompile) only to pop up again when navigating to another lazy component on the page that hasn't compiled yet.

I guess we have to wait for vitejs/vite#14493 to get fixed for this one...

  1. production build often fails with Module 001234 is disposed (maybe Error on build using webpack and linaria v5: module is disposed #1352), it always happens when compiling the server bundle, client always works for me... I made sure that linaria is not evaluating any server files.

No clue, just re-run build until it works... Probably more likely to happen with bigger code-bases so builds have a smaller chance of succeeding.

  1. There's currently no styled.something support for solid in linaria, but adding it shouldn't be too hard as the previous PR gets very close, just needs some adjustments to not lose reactivity.

Just use css or patch up the solid styled support PR.

Would really love to see the issues fixed and solid start getting first-class support, although they are currently moving over to vinxi as the base, so not sure if the linaria vite plugin will be sufficient or if a separate nitro integration is required for it to work in production builds... (based on the example it looks sufficient)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided platform: ssr 🛠️ Issue related to SSR
Projects
None yet
Development

No branches or pull requests

2 participants