Build in
sunlight.

1import { $component, $query, $rpcQuery } from "sol";2import * as v from "valibot";34export const websiteMessage = $rpcQuery(5  "website-message",6  { schema: v.tuple([]) },7  async () => ({ message: "Validated on the Sol server." }),8);910const Counter = $component(function Counter() {11  let count = 0;12  const doubled = count * 2;13  const serverMessage = $query({14    queryKey: ["website", "message"],15    query: websiteMessage,16    enabled: false,17  });1819  return (20    <>21      <button onClick={() => count++}>{count} / {doubled}</button>22      <button onClick={() => void serverMessage.refetch({ suspense: false })}>23        {serverMessage.isFetching ? "Calling server…" : "Call named RPC"}24      </button>25      {serverMessage.data && <p>{serverMessage.data.message}</p>}26    </>27  );28});

1import { $component } from "sol";23const SolarList = $component(function SolarList() {4  let items = [{ id: 1, label: "Static template", ready: true }];56  return <ul>{items.map(item => (7    <li key={item.id}>8      <button onClick={() => item.ready = !item.ready}>9        {item.ready ? "Ready" : "Draft"} — {item.label}10      </button>11    </li>12  ))}</ul>;13});

1import { $component, $form } from "sol";2import * as v from "valibot";34const Email = v.object({5  email: v.pipe(v.string(), v.email("Enter a valid email.")),6});78const Signup = $component(function Signup() {9  const form = $form({10    schema: v.parser(Email),11    defaultValues: { email: "" },12  }, values => console.log(values));1314  return <form $form={form}>15    <input name="email" $bind={form.values.email} />16    <button>Join</button>17  </form>;18});