thesamsterau Comments - Answer Overflow

thesamsterau

•Created by Eve on 12/30/2024 in #support

How to type the context from the docs example

Thank you, I am beginning to understand how the typing works. I have a question: can I use SolidJS stores inside a context? I have tried but cannot seem to get past the TypeScript errors. Here is my attempt: https://playground.solidjs.com/anonymous/0375fc53-4580-46fa-b409-546982454524

 Uncaught TypeError: Cannot read properties of undefined (reading 'randomize')

 Uncaught TypeError: Cannot read properties of undefined (reading 'randomize')

17 replies

SSolidJS

•Created by Eve on 12/30/2024 in #support

How to type the context from the docs example

While that takes care of the error in value, there's another error when I try to use the context. Please take a look at your playground. I want to use Context in a typesafe way, but it feels like I am missing some knowledge.

17 replies

SSolidJS

•Created by Eve on 12/30/2024 in #support

How to type the context from the docs example

Here's the playground: https://playground.solidjs.com/anonymous/8b3a8f18-f97d-444a-aa9b-4071dcbc3431

17 replies

SSolidJS

•Created by Eve on 12/30/2024 in #support

How to type the context from the docs example

  return (
    <CounterContext.Provider value={counter}>
      {props.children}
    </CounterContext.Provider>
  );

  return (
    <CounterContext.Provider value={counter}>
      {props.children}
    </CounterContext.Provider>
  );

value is erroring with:

Type '(Accessor<number> | { increment(): void; decrement(): void; })[]' is not assignable to type '[Accessor<number>, { increment: () => void; decrement: () => void; }]'.
  Target requires 2 element(s) but source may have fewer.(2322)
signal.d.ts(493, 5): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & { value: CounterContextProps | undefined; } & { children: Element; }'

Type '(Accessor<number> | { increment(): void; decrement(): void; })[]' is not assignable to type '[Accessor<number>, { increment: () => void; decrement: () => void; }]'.
  Target requires 2 element(s) but source may have fewer.(2322)
signal.d.ts(493, 5): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & { value: CounterContextProps | undefined; } & { children: Element; }'

17 replies

SSolidJS

•Created by Eve on 12/30/2024 in #support

How to type the context from the docs example

What am I doing wrong?

17 replies

SSolidJS

•Created by Eve on 12/30/2024 in #support

How to type the context from the docs example

Here is my attempt:

import { render } from "solid-js/web";
import {
  createSignal,
  createMemo,
  createContext,
  useContext,
  ParentProps,
} from "solid-js";

const CounterContext = createContext();

export function CounterProvider(props: ParentProps) {
  const [count, setCount] = createSignal(0);
  const counter = [
    count,
    {
      increment() {
        setCount((prev) => prev + 1);
      },
      decrement() {
        setCount((prev) => prev - 1);
      },
    },
  ];
  return (
    <CounterContext.Provider value={counter}>
      {props.children}
    </CounterContext.Provider>
  );
}

function useCounterContext() {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error("can't find CounterContext");
  }
  return context;
}

function Counter() {
  const {counter: [count, { increment, decrement }]
  } = useCounterContext(); // Error: Property 'counter' does not exist on type '{}'.

  ...
  return (
    <>
      ...
    </>
  );
}

render(
  () => (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  ),
  document.getElementById("app")!,
);

import { render } from "solid-js/web";
import {
  createSignal,
  createMemo,
  createContext,
  useContext,
  ParentProps,
} from "solid-js";

const CounterContext = createContext();

export function CounterProvider(props: ParentProps) {
  const [count, setCount] = createSignal(0);
  const counter = [
    count,
    {
      increment() {
        setCount((prev) => prev + 1);
      },
      decrement() {
        setCount((prev) => prev - 1);
      },
    },
  ];
  return (
    <CounterContext.Provider value={counter}>
      {props.children}
    </CounterContext.Provider>
  );
}

function useCounterContext() {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error("can't find CounterContext");
  }
  return context;
}

function Counter() {
  const {counter: [count, { increment, decrement }]
  } = useCounterContext(); // Error: Property 'counter' does not exist on type '{}'.

  ...
  return (
    <>
      ...
    </>
  );
}

render(
  () => (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  ),
  document.getElementById("app")!,
);

17 replies

SSolidJS

•Created by Eve on 12/30/2024 in #support

How to type the context from the docs example

Hello, I hope you don't mind me piggy-backing on this discussion. I am trying to use Context in TypeScript but I can't seem to figure out how to keep the compiler happy.

17 replies

Gaming

Programming