💠

import { render } from "solid-js/web";

function App() {
  return <h1>Hello, World!</h1>;
}

render(() => <App />, document.getElementById("root")!);

import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  
  return (
    <button onClick={() => setCount(count() + 1)}>
      Count: {count()}
    </button>
  );
}

// Update patterns
setCount(5);              // Direct value
setCount(prev => prev + 1); // Functional update

import { createSignal, createEffect, onCleanup } from "solid-js";

function Timer() {
  const [count, setCount] = createSignal(0);
  
  createEffect(() => {
    // Runs when count changes
    console.log("Count is", count());
    
    const timer = setInterval(() => setCount(c => c + 1), 1000);
    
    // Cleanup function
    onCleanup(() => clearInterval(timer));
  });
  
  return <div>{count()}</div>;
}

import { createSignal, createMemo } from "solid-js";

function App() {
  const [firstName, setFirstName] = createSignal("John");
  const [lastName, setLastName] = createSignal("Doe");
  
  // Derived/computed value
  const fullName = createMemo(() => {
    return `${firstName()} ${lastName()}`;
  });
  
  return <div>{fullName()}</div>;
}

import { createStore } from "solid-js/store";

function TodoApp() {
  const [state, setState] = createStore({
    todos: [
      { id: 1, text: "Learn Solid", done: false },
      { id: 2, text: "Build app", done: false }
    ],
    filter: "all"
  });
  
  const addTodo = (text: string) => {
    setState("todos", todos => [
      ...todos,
      { id: Date.now(), text, done: false }
    ]);
  };
  
  const toggleTodo = (id: number) => {
    setState("todos", todo => todo.id === id, "done", done => !done);
  };
  
  return (
    <For each={state.todos}>
      {todo => <div onClick={() => toggleTodo(todo.id)}>{todo.text}</div>}
    </For>
  );
}

import { Show, For, Switch, Match } from "solid-js";

function App() {
  const [show, setShow] = createSignal(true);
  const [items] = createSignal(["a", "b", "c"]);
  
  return (
    <>
      {/* Conditional rendering */}
      <Show when={show()} fallback={<p>Hidden</p>}>
        <p>Visible</p>
      </Show>
      
      {/* List rendering */}
      <For each={items()}>
        {(item, index) => (
          <div>{index()}: {item}</div>
        )}
      </For>
    </>
  );
}

import { Switch, Match, Dynamic } from "solid-js";

function App() {
  const [status, setStatus] = createSignal("loading");
  const [component, setComponent] = createSignal(ButtonComponent);
  
  return (
    <>
      {/* Switch/Match */}
      <Switch fallback={<p>Unknown</p>}>
        <Match when={status() === "loading"}>
          <Loading />
        </Match>
        <Match when={status() === "error"}>
          <Error />
        </Match>
        <Match when={status() === "success"}>
          <Content />
        </Match>
      </Switch>
      
      {/* Dynamic component */}
      <Dynamic component={component()} onClick={() => {}} />
    </>
  );
}

import { createResource, Suspense, ErrorBoundary } from "solid-js";

const fetchUser = async (id: number) => {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
};

function UserProfile(props: { userId: number }) {
  const [user, { mutate, refetch }] = createResource(
    () => props.userId,
    fetchUser
  );
  
  return (
    <ErrorBoundary fallback={<div>Error loading user</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <div>{user()?.name}</div>
        <button onClick={refetch}>Refresh</button>
      </Suspense>
    </ErrorBoundary>
  );
}

import { createContext, useContext } from "solid-js";

const ThemeContext = createContext<"light" | "dark">("light");

function ThemeProvider(props: { children: any }) {
  const [theme, setTheme] = createSignal<"light" | "dark">("light");
  
  return (
    <ThemeContext.Provider value={theme()}>
      {props.children}
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button class={theme}>Click me</button>;
}