🐞 Patch Changes
- #13323
80926faThanks @ematipico! - Updatesesbuildandviteto the latest to avoid false positives audits warnings caused byesbuild.
@astrojs/solid-js
🐞 Patch Changes
- #12887
ea603aeThanks @louisescher! - Adds a warning message when multiple JSX-based UI frameworks are being used without either theincludeorexcludeproperty being set on the integration.
- #12887
🐞 Patch Changes
- #12364
9fc2ab8Thanks @jdtjenkins! - Handles checking Svelte 5 component functions to avoid processing them as Solid components
- #12364
🐞 Patch Changes
- #11998
082f450Thanks @johannesspohr! - Fix view transition state persistence
- #11998
🍿 Minor Changes
-
#11234
4385bf7Thanks @ematipico! - Adds a new function calledaddServerRendererto the Container API. Use this function to manually store renderers inside the instance of your container.This new function should be preferred when using the Container API in environments like on-demand pages:
import type { APIRoute } from 'astro';import { experimental_AstroContainer } from 'astro/container';import reactRenderer from '@astrojs/react/server.js';import vueRenderer from '@astrojs/vue/server.js';import ReactComponent from '../components/button.jsx';import VueComponent from '../components/button.vue';// MDX runtime is contained inside the Astro coreimport mdxRenderer from 'astro/jsx/server.js';// In case you need to import a custom rendererimport customRenderer from '../renderers/customRenderer.js';export const GET: APIRoute = async (ctx) => {const container = await experimental_AstroContainer.create();container.addServerRenderer({ renderer: reactRenderer });container.addServerRenderer({ renderer: vueRenderer });container.addServerRenderer({ renderer: customRenderer });// You can pass a custom name toocontainer.addServerRenderer({name: 'customRenderer',renderer: customRenderer,});const vueComponent = await container.renderToString(VueComponent);return await container.renderToResponse(Component);};
-
🍿 Minor Changes
-
#11144
803dd80Thanks @ematipico! - The integration now exposes a function calledgetContainerRenderer, that can be used inside the Container APIs to load the relative renderer.import { experimental_AstroContainer as AstroContainer } from 'astro/container';import ReactWrapper from '../src/components/ReactWrapper.astro';import { loadRenderers } from 'astro:container';import { getContainerRenderer } from '@astrojs/react';test('ReactWrapper with react renderer', async () => {const renderers = await loadRenderers([getContainerRenderer()]);const container = await AstroContainer.create({renderers,});const result = await container.renderToString(ReactWrapper);expect(result).toContain('Counter');expect(result).toContain('Count: <!-- -->5');});
-
🍿 Minor Changes
-
#10937
7179930Thanks @florian-lefebvre! - Adds adevtoolsoptionYou can enable the official Solid Devtools while working in development mode by setting
devtools: truein yoursolid()integration config and addingsolid-devtoolsto your project dependencies:Terminal window npm install solid-devtools# yarn add solid-devtools# pnpm add solid-devtoolsimport { defineConfig } from 'astro/config';import solid from '@astrojs/solid-js';export default defineConfig({integrations: [solid({ devtools: true })],});
-
🍿 Minor Changes
-
#10689
683d51a5eecafbbfbfed3910a3f1fbf0b3531b99Thanks @ematipico! - Deprecate support for versions of Node.js older thanv18.17.1for Node.js 18, older thanv20.0.3for Node.js 20, and the complete Node.js v19 release line.This change is in line with Astro’s Node.js support policy.
-
🐞 Patch Changes
- #9355
2e4d110a876efc4ddcdeda403259317d1cbb742dThanks @marvin-j97! - Upgradesvite-plugin-solidto^2.8.0
- #9355
✨ Major Changes
-
#6791
37021044dd4382a9b214f89b7c221bf1c93f3e7dThanks @patdx! - Render SolidJS components usingrenderToStringAsync.This changes the renderer of SolidJS components from
renderToStringtorenderToStringAsync. It also injects the actual SolidJS hydration script generated bygenerateHydrationScript, so thatSuspense,ErrorBoundaryand similar components can be hydrated correctly.The server render phase will now wait for Suspense boundaries to resolve instead of always rendering the Suspense fallback.
If you use the APIs
createResourceorlazy, their functionalities will now be executed on the server side, not just the client side.This increases the flexibility of the SolidJS integration. Server-side components can now safely fetch remote data, call async Astro server functions like
getImage()or load other components dynamically. Even server-only components that do not hydrate in the browser will benefit.It is very unlikely that a server-only component would have used the Suspense feature until now, so this should not be a breaking change for server-only components.
This could be a breaking change for components that meet the following conditions:
- The component uses Suspense APIs like
Suspense,lazyorcreateResource, and - The component is mounted using a hydrating directive:
client:loadclient:idleclient:visibleclient:media
These components will now first try to resolve the Suspense boundaries on the server side instead of the client side.
If you do not want Suspense boundaries to be resolved on the server (for example, if you are using createResource to do an HTTP fetch that relies on a browser-side cookie), you may consider:
- changing the template directive to
client:onlyto skip server side rendering completely - use APIs like isServer or
onMount()to detect server mode and render a server fallback without using Suspense.
- The component uses Suspense APIs like
-
🐞 Patch Changes
-
#9482
72b26daf694b213918f02d0fcbf90ab5b7ebc31fThanks @natemoo-re! - Improves compatability with the Qwik adapter -
#9479
1baf0b0d3cbd0564954c2366a7278794fad6726eThanks @sarah11918! - Updates README
-
🐞 Patch Changes
- #8365
a525d5db1Thanks @ryansolid! - Fix hydration in Solid renderer
- #8365