In January of 2022, the SolidJS team announced the release of Solid v1.3 with the headline “Spice must flow.” This new release is a big one, because it brings many new features to the table, most notably an overall improvement to server-side rendering (SSR).
According to the author, some of the features in this release are experimental, and some other features have been deprecated to facilitate future releases. This is important because as Solid and its community continues growing, more improvements will be made over time, and laying a foundation to facilitate future releases is key.
In this article, we will explore the details of the Solid v1.3 release, including new feature releases, improvements, and bug fixes.
What’s a new version release without some new features? Solid v1.3 comes with new features to increase its capabilities and improve both the developer experience and end user experience alike. We’ll go over a few of them in this section.
Solid v1.3 adds support for HTML streaming, which dramatically improves the start-to-load time of your Solid application. For applications that have cached results, or when a user experiences slow internet connection, they no longer have to see placeholder content while waiting for the application to finish loading up; as soon as the HTML is available it is streamed and inserted in the browser.
This feature comes ready with the renderToStream
API, which is designed to handle both Node.js and web-writable streams. Both Node and web platforms also have the pipe
and pipeTo
APIs, respectively, which let the user choose when to insert the content in the stream (either immediately, onCompleteAll
, or onCompleteShell
).
According to the Solid documentation:
onCompleteShell
fires when synchronous rendering is complete before writing the first flush to the stream out to the browser.onCompleteAll
is called when all server suspense boundaries have settled.
// node const stream = renderToStream(() => <App />).pipe(res); // web const stream = renderToStream(() => <App />).pipeTo(writable);
Solid v1.3 comes with support for error handling for synchronous rendering and errors that happen with resource resolution. This feature is available for all render methods, renderStream
, renderToString
, and renderToStringAsync
. This feature is helpful in the overall sense of developer experience, which is one of the best ways to increase adoption among the developer community.
createReaction
reactive primitiveThe createReaction
primitive is useful to separate tracking from re-execution. This primitive registers a side effect that runs the first time the expression (wrapped by the returned tracking function) is notified of a change. The track
function must be called to track again.
Consider this piece of code:
const [s, set] = createSignal("start"); const track = createReaction(() => console.log("something")); // next time s changes run the reaction track(() => s()); set("end"); // "something" set("final"); //no-op as reaction only runs on first update, need to call track again
Though it is experimental, this is quite an interesting feature, as it lets you use third-party reactive libraries in Solid. Yes, you heard that right: you have the ability to use third-party reactive libraries of your choice, such as Vuex, MobX, or Kairo, in your Solid applications.
Consider the code block below:
import { Reaction, makeAutoObservable } from "mobx"; import { enableExternalSource } from "solid-js"; import { render } from "solid-js/web"; let id = 0; enableExternalSource((fn, trigger) => { const reaction = new Reaction(`externalSource@${++id}`, trigger); return { track: x => { let next; reaction.track(() => (next = fn(x))); return next; }, dispose: () => { reaction.dispose(); } }; }); class Timer { secondsPassed = 0; constructor() { makeAutoObservable(this); } increase() { this.secondsPassed += 1; } reset() { this.secondsPassed = 0; } } // component driven directly off MobX function App() { const timer = new Timer(); setInterval(() => { timer.increase(); }, 1000); return <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>; } render(() => <App />, document.getElementById("app"));
First, you have to import the features you need from whatever third party library you choose to use. In this case, it’s the MobX library we’re using, and we’re importing the action
and makeAutoObservable
features from it.
Next, we’re importing the enableExternalSource
function from the Solid core library. We then declare the function with its parameters and go ahead to use the MobX library like we usually would.
Existing feature improvements that have taken place in this recent Solid release (all in a bid to improve the already great developer experience) include the following:
Solid v1.3 comes packed with significantly better types.
When you build for production, along with minifying and combining JavaScript files, you generate a source map to hold information about the original files. Source maps are a way to keep client-side code more readable and debuggable, even after minifying all of the source code and assets. Better source maps means a better developer experience.
Besides the new feature additions and improvements, this new release of Solid did not leave out bug fixes. The following bugs were squashed with the release of v1.3:
<html>
on hydration from documentcreateSelector
preload
on lazy components to always be a promiseIn this article, we have gone over the new features, existing feature improvements, and bug fixes that have been implemented in the release of Solid v1.3.
Solid continues to improve on its features, speed, and developer experience with frequent updates and releases. With features and capabilities on par with the competition, it’s safe to say that the only thing stopping Solid’s massive adoption is the size of its community, which is also growing at a steady rate.
For further reading, you can go through the release notes on GitHub.
There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.
LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.
LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — start monitoring for free.
Install LogRocket via npm or script tag. LogRocket.init()
must be called client-side, not
server-side
$ npm i --save logrocket // Code: import LogRocket from 'logrocket'; LogRocket.init('app/id');
// Add to your HTML: <script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script> <script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowJavaScript’s Date API has many limitations. Explore alternative libraries like Moment.js, date-fns, and the new Temporal API.
Explore use cases for using npm vs. npx such as long-term dependency management or temporary tasks and running packages on the fly.
Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.
Build a real-time image background remover in Vue using Transformers.js and WebGPU for client-side processing with privacy and efficiency.