This release is about refining the the APIs as we approach the our release candidate for 1.0. And moving from master to main.
Breaking Changes
Resource API
Minor difference to allow the first argument to be optional and support more features in the future. New full signature is:
export function createResource<T, U>(
fn: U | false | (() => U | false),
fetcher: (k: U, getPrev: () => T | undefined) => T | Promise<T>,
options?: { initialValue?: T }
): ResourceReturn<T>;3rd argument is now an options object instead of just the initial value. This breaking. But this also allows the first argument to be optional for the non-tracking case. Need a promise that only loads once? Don't have need to re-use the fetcher. Do this:
const [data] = createResource(
async () => (await fetch(`https://someapi.com/info`)).json()
);on/onCapture
These are an escape hatch for unusual events. Previously these were custom attributes but now they are namespaced like:
<div on:someUnusualEvent={e => console.log(e.target)} />change main field to be node
Now that we are supporting SSR for legacy(non-ESM) systems I need to use the main field to indicate a node env. We will be using the "browser" field for the client build in Solid. This straight up breaks Jest which doesn't respect that. I've created solid-jest to handle this.
https://github.com/ryansolid/solid-jest
New Features
Namespace Types
Types added for Namespace attributes. You probably won't need most of these because they are for more advanced usage. However to use them you need to extend the JSX Namespace:
declare module "solid-js" {
namespace JSX {
interface Actions { // use:____
}
interface ExplicitProperties { // prop:____
}
interface ExplicitAttributes { // attr:____
}
interface CustomEvents { // on:____
}
interface CustomCaptureEvents { // oncapture:____
}
}
}Lazy component preload
Lazy components now have a preload function so you can pre-emptively load them.
const LazyComp = lazy(() => import("./some-comp"))
// load ahead of time
LazyComp.preload();Error Boundary reset
Error boundaries now have the ability to reset themselves and try again. It is the second argument to the fallback.
<ErrorBoundary fallback={(err, reset) => {
if (count++ < 3) return reset();
return "Failure";
}}><Component /></ErrorBoundary>