import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
    a: string;
};
export function routeData() {
    console.log("getting route data");
    return createServerData$(async () => {
        await sleep(2000);
        const t: Test = { a: "hello" };
        return t;
    });
}

export default () => {
    // const params = useParams();
    const data = useRouteData<typeof routeData>();
    data(); // <== Page won't update unless call data here.
    return (
        <Show when={!data.loading} fallback={<div>loading...</div>}>
            <div>test-page</div>
            <pre>{data()?.a}</pre>
        </Show>
    );
};

import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
    a: string;
};
export function routeData() {
    console.log("getting route data");
    return createServerData$(async () => {
        await sleep(2000);
        const t: Test = { a: "hello" };
        return t;
    });
}

export default () => {
    // const params = useParams();
    const data = useRouteData<typeof routeData>();
    data(); // <== Page won't update unless call data here.
    return (
        <Show when={!data.loading} fallback={<div>loading...</div>}>
            <div>test-page</div>
            <pre>{data()?.a}</pre>
        </Show>
    );
};

// Works 
export type ArtistProps = {
  id: number;
  name: string;
  genre: string;
};
... setter({ id: 1, "Kiss", "Rock "})

// Works 
export type ArtistProps = {
  id: number;
  name: string;
  genre: string;
};
... setter({ id: 1, "Kiss", "Rock "})

// Doesn't work
export type ArtistProps = {
  constructor (readonly id: number, name: string, genre: string) {}
};
... setter(new {1, "Kiss", "Rock"})

// Doesn't work
export type ArtistProps = {
  constructor (readonly id: number, name: string, genre: string) {}
};
... setter(new {1, "Kiss", "Rock"})

type Album = {
    id: string;
    artist: string;
    rating?: number
    // etc. 
}

type Album = {
    id: string;
    artist: string;
    rating?: number
    // etc. 
}

const [collection, setCollection] = createStore<Album[]>([]);

const [collection, setCollection] = createStore<Album[]>([]);

// theme-provider.tsx
import {
  createContext,
  useContext,
  ParentComponent,
  createSignal,
} from "solid-js";

const defaultTheme = "light";

export type ThemeContextValue = [get: string, set: (theme: string) => void];
const ThemeContext = createContext<ThemeContextValue>([
  defaultTheme,
  (theme: string) => {},
]);

export const ThemeProvider: ParentComponent<{
  theme?: string;
}> = (props) => {
  const [theme, setter] = createSignal(defaultTheme);
  const setTheme = (val: string) => {
    console.log("ThemeProvider: setTheme", val);
    setter(val);
  };

  return (
    // Note: if I put el here and bind to theme value,      // it is reactive when called using setter from         // child comp, so seems everything is working here.
    <ThemeContext.Provider value={[theme(), setTheme]}>
      {props.children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

// theme-provider.tsx
import {
  createContext,
  useContext,
  ParentComponent,
  createSignal,
} from "solid-js";

const defaultTheme = "light";

export type ThemeContextValue = [get: string, set: (theme: string) => void];
const ThemeContext = createContext<ThemeContextValue>([
  defaultTheme,
  (theme: string) => {},
]);

export const ThemeProvider: ParentComponent<{
  theme?: string;
}> = (props) => {
  const [theme, setter] = createSignal(defaultTheme);
  const setTheme = (val: string) => {
    console.log("ThemeProvider: setTheme", val);
    setter(val);
  };

  return (
    // Note: if I put el here and bind to theme value,      // it is reactive when called using setter from         // child comp, so seems everything is working here.
    <ThemeContext.Provider value={[theme(), setTheme]}>
      {props.children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);