-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix Vite issues with SolidStart (#16052)
Fixes #16045 This PR fixes two Vite issues found with SolidStart: - SolidStart seems to emit an empty HTML chunk (where the content is literally just `/`) with _no pathname_. Since we use the path to generate an `id` for HTML chunks, this would currently cause a crash. This was reported in #16045 - While testing the fix for the above, we also found that hot reloading was not working in SolidStart since `4.0.0-alpha.22`. After doing some bisecting we found that this is happening as SolidStart has the same module ID in different servers and we were invalidating the root when we shouldn't. After trying to restructure this code so that it only cleans up the root when it is _no longer part of any server_, we noticed some other compatibility issues with Nuxt and SvelteKit. It seems that the safest bet is to no longer update a root at all during rebuilds in the SSR step. This makes `invalidateAllRoots` a function that only notifiers the servers about a change which is conceptually also less confusing. ## Test plan - Added an integration test for SolidStart dev mode - Manually tested the dev mode across all Vite based templates in https://github.com/philipp-spiess/tailwindcss-playgrounds: Astro, Nuxt, Remix, Solid, SvelteKit, and Vue. --------- Co-authored-by: Robin Malfait <[email protected]>
- Loading branch information
1 parent
2242941
commit c09bb5e
Showing
3 changed files
with
120 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import { candidate, css, fetchStyles, js, json, retryAssertion, test, ts } from '../utils' | ||
|
|
||
| const WORKSPACE = { | ||
| 'package.json': json` | ||
| { | ||
| "type": "module", | ||
| "dependencies": { | ||
| "@solidjs/start": "^1", | ||
| "solid-js": "^1", | ||
| "vinxi": "^0", | ||
| "@tailwindcss/vite": "workspace:^", | ||
| "tailwindcss": "workspace:^" | ||
| } | ||
| } | ||
| `, | ||
| 'jsconfig.json': json` | ||
| { | ||
| "compilerOptions": { | ||
| "jsx": "preserve", | ||
| "jsxImportSource": "solid-js" | ||
| } | ||
| } | ||
| `, | ||
| 'app.config.js': ts` | ||
| import { defineConfig } from '@solidjs/start/config' | ||
| import tailwindcss from '@tailwindcss/vite' | ||
| export default defineConfig({ | ||
| vite: { | ||
| plugins: [tailwindcss()], | ||
| }, | ||
| }) | ||
| `, | ||
| 'src/entry-server.jsx': js` | ||
| // @refresh reload | ||
| import { createHandler, StartServer } from '@solidjs/start/server' | ||
| export default createHandler(() => ( | ||
| <StartServer | ||
| document={({ assets, children, scripts }) => ( | ||
| <html lang="en"> | ||
| <head>{assets}</head> | ||
| <body> | ||
| <div id="app">{children}</div> | ||
| {scripts} | ||
| </body> | ||
| </html> | ||
| )} | ||
| /> | ||
| )) | ||
| `, | ||
| 'src/entry-client.jsx': js` | ||
| // @refresh reload | ||
| import { mount, StartClient } from '@solidjs/start/client' | ||
| mount(() => <StartClient />, document.getElementById('app')) | ||
| `, | ||
| 'src/app.jsx': js` | ||
| import './app.css' | ||
| export default function App() { | ||
| return <h1 class="underline">Hello world!</h1> | ||
| } | ||
| `, | ||
| 'src/app.css': css`@import 'tailwindcss';`, | ||
| } | ||
|
|
||
| test( | ||
| 'dev mode', | ||
| { | ||
| fs: WORKSPACE, | ||
| }, | ||
| async ({ fs, spawn, expect }) => { | ||
| let process = await spawn('pnpm vinxi dev', { | ||
| env: { | ||
| TEST: 'false', // VERY IMPORTANT OTHERWISE YOU WON'T GET OUTPUT | ||
| NODE_ENV: 'development', | ||
| }, | ||
| }) | ||
|
|
||
| let url = '' | ||
| await process.onStdout((m) => { | ||
| let match = /Local:\s*(http.*)\//.exec(m) | ||
| if (match) url = match[1] | ||
| return Boolean(url) | ||
| }) | ||
|
|
||
| await retryAssertion(async () => { | ||
| let css = await fetchStyles(url) | ||
| expect(css).toContain(candidate`underline`) | ||
| }) | ||
|
|
||
| await retryAssertion(async () => { | ||
| await fs.write( | ||
| 'src/app.jsx', | ||
| js` | ||
| import './app.css' | ||
| export default function App() { | ||
| return <h1 class="underline font-bold">Hello world!</h1> | ||
| } | ||
| `, | ||
| ) | ||
|
|
||
| let css = await fetchStyles(url) | ||
| expect(css).toContain(candidate`underline`) | ||
| expect(css).toContain(candidate`font-bold`) | ||
| }) | ||
| }, | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters