What’s new in SolidJS v1.3?

Introduction

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.

New feature releases

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.

HTML streaming

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);

Error boundaries on the server

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 primitive

The 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

External sources

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.

Feature improvements

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:

Better TypeScript support

Solid v1.3 comes packed with significantly better types.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Better source maps

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.

Bug fixes

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:

• Browser extensions modifying the head element, breaking hydration
• Reinserting <html> on hydration from document
• Over-executing on multiselect with createSelector
• Event delegation conflicting with document event listeners
• Self-owning source infinite recursion
• Faulty tree splitting for hydration in client-only render
• Return type of preload on lazy components to always be a promise
• Compile error with leading whitespace after opening tags when generating SSR

Conclusion

In 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.

Are you adding new JS libraries to build new features or improve performance? What if they’re doing the opposite?

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.