This release is mostly bug fixes. Breaking change for TS users. JSX types no longer pollutes global namespace. This means you need to update your projects to import it.
For users TS 4.1 or above add to your tsconfig to have JSX types in all your TSX files:
"compilerOptions" {
"jsx": "preserve",
"jsxImportSource": "solid-js",
}Or mixing and matching? You can set JSX types per file using the pragma at the top of each file:
/* @jsxImportSource solid-js */You can now import JSX types directly from Solid as neccessary:
import { JSX } from "solid-js";Solid now has streamlined exports for isomorphic development. This means from now on using solid-js/web instead of solid-js/dom. Based on compiler options it will swap out the appropriate packages for web. You should only ever import solid-js, solid-js/h, solid-js/html, and solid-js/web directly in your code.
solid-js/web now exports an isServer field which indicates whether the code is executed for server rendering. This is constant in the respective packages meaning it can allow for powerful treeshaking/dead code elimination in final bundles even when used directly in end user code or 3rd party libraries.
Aliasing solid-js to solid-js/dev in your bundler links in a Dev mode of Solid. It's still a WIP process but it introduces some new APIs. First signals and state (and resources) have the ability to set a name for debug purposes as an options argument.
We also export a serializeGraph method which will serialize all the signals below the executing context in the reactive graph.
Finally there is a new globalThis._$afterUpdate hook that can be assigned that will be called after every render that can be used for tracking purposes.
This is just the start but it is my intention to develop these features to allow for better HMR and DevTools.
Note: If the libraries are not being pulled into your bundle and are treated as external you may need to alias
solid-jstosolid-js/devin your bundler in order to use dev mode.
We now ship the respective DOM expressions code. This makes it much easier to use directly from a CDN like Skypack. You literally can develop with Solid in the old school write it in notepad before npm was a thing sort of way.
<html>
<body>
<script type="module">
import { createSignal, onCleanup } from "https://cdn.skypack.dev/solid-js";
import { render } from "https://cdn.skypack.dev/solid-js/web";
import html from "https://cdn.skypack.dev/solid-js/html";
const App = () => {
const [count, setCount] = createSignal(0),
timer = setInterval(() => setCount(count() + 1), 1000);
onCleanup(() => clearInterval(timer));
return html`<div>${count}</div>`;
};
render(App, document.body);
</script>
</body>
</html>Save this in a text file called "site.html" and double click it and instant Solid in your browser.
New renderToWebStream for synchronous SSR mode. This allows us to stream from things like Cloudflare Workers.
New mutable state primitive. Useful for interopt with other libraries. We can use this potentially for things like Vue/MobX compat. Or when we need to interact with libraries that can't be aware of Solid's reactive system, yet we want to capture updates. It supports getters and setters.
Use with caution as it can promote difficult to reason about code, anti-patterns, and unexpected performance cliffs. Keep in mind Vue and MobX care less about these inefficient patterns since they have a VDOM safety net. We do not. For advanced users only.
const user = createMutable({
firstName: "John",
lastName: "Smith",
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(value) {
const parts = value.split(" ");
batch(() => {
this.firstName = parts[0];
this.lastName = parts[1];
});
}
});
console.log(user.fullName); // John Smith
user.fullName = "Jake Murray";
console.log(user.firstName); // JakeGetters are now wrapped in createMemo and setters in batch. However, this introduces a new limitation that they can only be top level to have this behavior.
You can now use state with assignProps and splitProps helpers.
No longer supporting hydratable DOM SSR in patched(ie... JSDOM) node environments. Use the standard SSR methods instead. Can still run Solid in JSDOM for things like Jest, but can't be used for isomorphic development.
We will now default to using Attributes where possible to be consistent. Solid is aiming to generally reflect the case insensitiveness of HTML. Custom Elements remain the one place that defaults to property setters on Dynamic elements.
While TypeScript 4.2 is yet to be released, we are introduce attr, prop, use and style namespace directives. To allow more expressiveness in binding syntax.
- New
onandonMounthelpers - More performant SSR escaping
- Lazy eval SSR Component props (fix SSR Context API)
- Add support for SSR with Solid Styled Components
- Fix Lit Dom Expressions style in Template tags
- Fix JSX Types
This release makes large changes to the Reactive System. Key changes are deferring createEffect to be after rendering and introducing createComputed do reactive graph updates like loading async data.
In addition the the reactive model brings updates to Suspense and Transitions. Solid now has true concurrent rendering at a granular level. This mechanism does differ from React as it currently only supports a single future.
afterEffects, createDependentEffect, and suspend have been removed as they no longer make sense with the new reactive system timing.
API Changes to support better SSR
Mutable form is no longer a default. It was strangely inconsistent as you could accidentally mutate in immutable forms. No indicator why it should behave differently and work. Increased the size of state for everyone and added performance overhead with additional proxy wrapping. Also it was based on returning undefined meaning function forms could never return undefined to blank a vlue. Solid has changed it into a state setter modifier produce after ImmerJS naming.
// top level
setState(produce(s => (s.name = "John")));
// nested
setState(
"user",
produce(s => (s.name = "John"))
);After writing setDefaults, cloneProps, and about to introduce mergeProps it became clear we can do this all with a single assignProps helper. So the former has been removed and now we have:
// default props
props = assignProps({}, { name: "Smith" }, props);
// clone props
newProps = assignProps({}, props);
// merge props
assignProps(props, otherProps);It follows the same pattern as ES Object.assign adding properties to the first argument and returning it. Except this method copies property descriptors without accessing them to preserve reactivity.
These APIs never had the most obvious naming, borrowing from SRP and digital circuit concepts rather than common english. They are now batch and untrack respectively which better reflect their purpose. These are now deprecated and will be removed in next minor version.
For better automatic hydration support it is prudent to change resource signatures to take functions that return promises rather than promises themselves. This factory function has a lot advantages. This allows the library to decide whether to execute it or not. In certain cases we can choose skipping creating the promise altogether. It also leaves the door open for things like retry.
We use this mechanism to wire up streamed data from the server and automatic data hydration for resources rendered into the page in async SSR.
New experimental support for Suspense aware synchronous, asynchronous, and streaming SSR with hydration, progressive hydration, and automatic isomorphic data serialization. Completely removed what was there before with a simple static generator and more examples, so all existing projects using solid-ssr package will break with this release. This is a much better foundation, and I hope to build better things on top.
For convenience of passing derived values or external reactive expressions through Solid's state initializer you can now add getter's.
const [state, setState] = createState({
firstName: "Jon",
lastName: "Snow",
get greeting() {
return `You know nothing ${state.firstName} ${state.lastName}`;
}
});
return <div>{state.greeting}</div>;Dynamic allows swapping Component dynamically.
// element tag name
const [comp, setComp] = createSignal("h1");
<Dynamic component={comp()} {...otherProps} />;
// Component
setComp(MyComp);ErrorBoundary catches uncaught downstream errors and shows a fallback.
<ErrorBoundary fallback={<div>Something went terribly wrong</div>}>
<MyComp />
</ErrorBoundary>You can now render portals in the head with no additional div element.
Common hard to track issue with Solid is when multiple versions of the library are running on the same page. It breaks reactivity, and is sometimes difficult to notice. Solid now detects if a version has already been loaded at runtime and complains.
Arguably a new feature but Solid now detects computation owners with pending dependency changes when trying to resolve nested computations. In so it will resolve those dependencies first. This fixes a long time issue with conditional processing with not directly related reactive atoms.
Improved TypeScript Types.
A lot of bug fixes, and introduction of string based SSR. Breaking Changes:
- Removal of
forwardRef. Value and function handled by justref. - Change to how TypeScript is managed. Brought all JSX types inside the repo, and improved Component typing.
- Changed default renderer in
solid-ssrto string renderer.
A lot of consolidation in preparation for release candidate
- Big refactor of core reactive system and render list reconciler
- Significantly smaller reducing core by atleast 3kb minified
- Better handling of nested reactive nodes in Fragments
- Update SSR mechanisms, added progressive event hydration, created repo for SSR environment (
solid-ssr) @oncecompiler hint to statically bind values- Better wrapping hueristics for booleans and ternaries in JSX
Breaking Changes
- Removed
transformprop from control flow. Idiomatic approach is to make a HOC for transformations of this nature. - Removed selectWhen/selectEach control flow transforms.
- Changed event system
on____prop to stop differentiating on case. Super confusing.Instead will try to delegate unless unable. Made TypeScript all CamelCase (although technically both forms behave identically)- Removed
modelevent delegation approach. Instead to create bound event use array:onClick={[handler, row.id]}. Inspired by Inferno'slinkEventhelper. - Renamed
eventsprop toonprop - Added
onCaptureprop for capture events
Big changes to experimental features:
- New resource API
createResourceandcreateResourceStateto replaceloadResource. These are built to prioritize read capabilities and simplify implementation. - Support for Async SSR
renderToStringnow returns a promise. Uses Suspense to know when it is done. - Progressive Hydration with code splitting support. Ability to track events and replay as hydration completes to reduce "uncanny valley". Components can be lazily loaded even during hydration. No support for async data on hydration yet, so render it from server and load into state synchronously.
- New error boundary api with
onError. If an error occurs in context or child context the nearest handler/s will be called. - Deprecating the
forcesetStatemodifier as it is confusing.
A lot fixes and new features:
- Suspense improvements:
SuspenseList,useTransition, trigger on read. Update API, and addedreloadand retry capability. Removed need forawaitSuspenseby makingShowandSwitchcontrol flowsSuspenseaware. - Deprecate
selectWhenandselectEach. - Untrack all Components. No more fear of nesting Components in JSX expressions. Top level in a Component will always be inert now.
- Support for safe boolean and logical operators. This allows for the same optimization as the
Showcontrol flow for simple inline JSX conditionals like<div>{state.count > 5 && <MyComp />}</div>. - Support for non-curried operator forms. All operators now support an accessor first form as well as the functional curried form. Ex
map(() => state.list, item => item) - Fix issues with spreading over
childrenprops. - Better Type Definitions.
v0.14.0 brings changes to the render runtime and setState API
- Adds diffing to batched computations to improve update performance
- Supports support for mutable(TypeScript safe)
setStateAPI inspired by Immer. Function setters in Solid now pass a mutable version of state. Modifying will schedule updates. This form must not return a value. It can still be used immutably simply by returning the new value. - Changes how
forceandreconcilehelpers work. They can now be used on nested paths. - Removes support for multi-path
setState.
v0.13.0 contains large changes to the reactive system and compiler.
The main update is to simplify reactivity by removing computation recycling. While this was a useful feature to avoid unnecessary computation nodes, Solid now uses batching as a different approach to get similar results. Most templating libraries can offer breakneck update speeds without fine grained updates. The real cost of these top down approaches is the need to redo structural reconciliation. The current approach is that different computations will be created for each:
- Dynamic insert expression (any expression between tags)
- Spread operator
- JSX template entry point(Top level tag, Fragment, or Component Children)
To aid in performance simple text inserts the textContent binding is now optimized so they can be batched.
In addition there are some improvements to template cloning and SVG handing in SSR.
v0.12.0 contains a breaking change to the reactive rendering system
- Removal of explicit dynamic binding, bindings will default to reactive unless impossible to be so (literal, function declaration, simple variable)
- SVG Camelcase attribute Support
- Prettier now supported!
v0.11.0 continues to add updates to the reactive system as well as some new features:
- Fix reactivity resolution ordering on downstream conditionals
- Add basic (non-namespaced) SVG support
- Add experimental Server Side Rendering and Client Side Hydration capabilities
- Add Suspense aware control flow transformation (
awaitSuspense) - Allow state objects to track functions
- More TypeScript definition improvments and fixes
v0.10.0 makes significant changes to the reactive system. Key updates:
- Fixed synchronicity on all hooks/control flows.
- Adds the ability to use comparators on
createMemo. - Fixes bugs with nested control flows.
- Fixes bugs with Suspense.
- Update Suspense
delayMstomaxDurationto match React. (Usage ofmaxDurationstill experimental)
v0.9.0 makes signifigant changes to underlying reconciler.
- New Control Flow
- Removes Custom Directives
- New Functional Operators
v0.8.0 brings further improvements in reducing bundle size and optimizations in reactivity. New Features:
- Universal loadResource API
- afterEffects hook
- Switch Control Flow
v0.7.0 brings further improvements in tree shaking, Context API including Provide control flow, and suspense helpers for loading Async Components and Data.
This is a breaking change as in order to support this version, Solid has forked S.js the underlying library and now ships with it built in. This means Solid will no longer be compatible other S.js libraries. It is a turning point but enables the powerful new features.
v0.6.0 brings a Tree Shakeable runtime. This means when Solid used with JSX the compiler can intelligently only include the code that is being used.
This is a breaking change in that:
- No longer need to import 'r' and selectWhen and selectEach directives have been moved to solid-js from solid-js/dom. You should not need to import from 'solid-js/dom' directly anymore as your compiled code will do it automatically.
- HyperScript and Lit imports have been made the default import now.. ex:
import html from "solid-js/html";- Tidied up the compiled template code. This should make it much nicer to debug when not minified.
- Add support for multiple renderers (JSX, Tagged Template Literals, HyperScript). Added direct imports or 'solid-js/dom' alternatives 'solid-js/html' and 'solid-js/h'.
- Reorganized dependencies work.
- Add fallbacks for control flow
- Add new Portal Control Flow - This allows nodes to be rendered outside of the component tree with support for satelite ShadowRoots.
- Add new Suspend Control Flow - This renders content to a isolated document and display fallback content in its place until ready. Good for nested Async Data Fetching.
- Default node placeholders to comments (improved text interpolation)
- Added events binding for irregular event names
- Rename API to create__ to be semantically correct
- Added implicit event delegation
- Add support for HyperScript
- Improved data reconciler performance
- Added data reconciler options
- Added optional comparator for signals.
- Removed redundant type checks and extra function calls.
- Changed S.js to a dependency instead of a peer dependency.
- Separated useSignal getter/setters for clearer more consistent API
- Remove operators from core package since are auxilliary with new API.
- Updated JSX Dom Expressions to use new control flow JSX and JSX Fragment support.
- New setState API inspired by Falcor paths to handle ranges.
- Reduction in API to remove State object functions and change to explicit methods.
- Expose reconcile method to do deep differences against immutable data sources (previously automatically done for selectors).
- Removed 'from' operators as limited usefulness with new patterns.
- Large simplifications to remove inconsistency around wrapping and unwrapping values. State values are always wrapped get, and fully unwrapped on set.
- Updated binding syntax. Dynamic expressions are now bound with an inner parenthesis
{( )}js - Removed Immutable State object. May attempt something similar in the future but at this time it wasn't worth the effort trying to attempt both. There are better approaches to Proxy Immutable data structures.