Eve Posts - Answer Overflow

Eve

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

How to type the context from the docs example

Using the example from here I'm trying to get it working in TS, but TS doesn't seem to understand <CounterContext.Provider and throws all kinds of errors. Does anyone know how to make this work?

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

const CounterContext = createContext<number>(0);

export function CounterProvider(props: ParentProps & { initialCount?: number }) {
  const [count, setCount] = createSignal(props.initialCount || 0);
  const counter = [
    count,
    {
      increment() {
        setCount(prev => prev + 1);
      },
      decrement() {
        setCount(prev => prev - 1);
      }
    }
  ];

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

export function useCounter() { return useContext(CounterContext); }

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

const CounterContext = createContext<number>(0);

export function CounterProvider(props: ParentProps & { initialCount?: number }) {
  const [count, setCount] = createSignal(props.initialCount || 0);
  const counter = [
    count,
    {
      increment() {
        setCount(prev => prev + 1);
      },
      decrement() {
        setCount(prev => prev - 1);
      }
    }
  ];

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

export function useCounter() { return useContext(CounterContext); }

4 replies

SSolidJS

•Created by Eve on 10/22/2024 in #support

Why does this loop infinitely

The following code calls serverFunc endlessly

export default function Test() {
  const [people, setPeople] = createStore([
    { id: '19' },
    { id: '11' },
  ]);

  const serverFunc = async (id: string): Promise<string> => {
    'use server';
    console.log('running serverFunc');
    return 'Not Found';
  };

  return (
    <For each={people}>
      {(person, index) => {
        return (
          <div>
            {index() + 1}: {person.id}
            <span>{createAsync(() => serverFunc(person.id))()}</span>
          </div>
        );
      }}
    </For>
  );
}

export default function Test() {
  const [people, setPeople] = createStore([
    { id: '19' },
    { id: '11' },
  ]);

  const serverFunc = async (id: string): Promise<string> => {
    'use server';
    console.log('running serverFunc');
    return 'Not Found';
  };

  return (
    <For each={people}>
      {(person, index) => {
        return (
          <div>
            {index() + 1}: {person.id}
            <span>{createAsync(() => serverFunc(person.id))()}</span>
          </div>
        );
      }}
    </For>
  );
}

But if I change it to

      <For each={people}>
        {(person, index) => {
          const response = createAsync(() => serverFunc(person.id));
          return (
            <div>
              {index() + 1}: {person.id}
              <span>{response()}</span>
            </div>
          );
        }}
      </For>

      <For each={people}>
        {(person, index) => {
          const response = createAsync(() => serverFunc(person.id));
          return (
            <div>
              {index() + 1}: {person.id}
              <span>{response()}</span>
            </div>
          );
        }}
      </For>

it no longer loops. The two should be functionally identical. So why does the IIFE cause an infinite loop?

6 replies

SSolidJS

•Created by Eve on 10/15/2024 in #support

unwrap doesn't seem to do anything

6 replies

Gaming

Programming