Solid Use Versions Save

• Move to biome for format/lint
• Remove all of the API for solid-use/server-value except the useServerValue
  • useServerValue no longer relies on both context and seroval for serialization, and instead utilizes Solid's serializer.
  • useServerValue is also now the default export.
• Fix tree-shaking
• Add solid-use/client-only

• Add solid-use/server-value
• Rework package to use subpackages:
  • atom -> solid-use/atom
  • string -> solid-use/string
  • spread, destructure, omitProps, pickProps -> solid-use/props
  • fetch -> solid-use/fetch
  • Provider API -> solid-use/provider
  • Media Query APIs -> solid-use/media-query
  • useOnlineStatus -> solid-use/online-status
  • usePageVisibility -> solid-use/page-visibility
• Removed Classic Suspense API
  • This API has been broken with the changes in Solid's runWithOwner.
  • This removal also includes solid-use/fetch classic mode
• Fix inconsistent initial server states for DOM-based primitives such as useMediaQuery

This release adds the fetch utility, an idiomatic utility similar to native fetch but with Suspense and reactivity in mind. The utility also has a classic Suspense mode.

This release adds the Classic Suspense, a set of utilities that emulates React's Suspense mechanism. You can read more from the docs

import {
  createClassicResource,
  createClassicSuspense,
  useClassicResource,
  waitForAll,
} from 'solid-use';

const sleep = (timeout) => new Promise((resolve) => {
  setTimeout(resolve, timeout, true);
})

const greeting = createClassicResource(async () => {
  await sleep(2000);
  return 'Hello';
});

const receipient = createClassicResource(async () => {
  await sleep(2000);
  return 'SolidJS';
});

const result = waitForAll([
  greeting,
  receipient,
]);

function Message() {
  return createClassicSuspense(() => {
    const [greetingValue, receipientValue] = useClassicResource(result);

    return <h1>{greetingValue}, {receipientValue}!</h1>
  });
}

function App() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <Message />
    </Suspense>
  );
}