anthy Posts - Answer Overflow

anthy

•Created by anthy on 10/11/2024 in #support

How to use `cache.set`?

Tried as in the playground but that doesnt seem to do anything - https://playground.solidjs.com/anonymous/f7508168-0c32-46a0-8f3d-9731ce03d6e1

1 replies

SSolidJS

•Created by anthy on 10/10/2024 in #support

Input type="reset" clears out wrapped inputs

If the native input element is wrapped in a solid component, <input type="reset" /> does not reset it back to its initial value but clears it out. https://playground.solidjs.com/anonymous/0a32e8f4-fab8-4583-a9a0-32e73e0a837a

8 replies

SSolidJS

•Created by anthy on 9/9/2024 in #support

Retrigger fetcher in createResource on store change

https://playground.solidjs.com/anonymous/52b7a9be-3fe1-406a-8941-a3d0a4959bfe As in the example, if the source argument is the whole store the fetcher in createResource wont run. How can I make it re-run if any of the store's values change

6 replies

SSolidJS

•Created by anthy on 9/6/2024 in #support

Inconsistent prop logging between playground and local setup

When I run this code in the playground https://playground.solidjs.com/anonymous/4f22d50d-c034-42c4-8bc5-4b643a06731d the console logs:

Receiver
{staticProp: 'Hello', message: 'Hello'}

Receiver
{staticProp: 'Hello', message: 'Hello'}

Which is correct. But when I run the same exact code with vite from a local setup it prints:

Receiver
{staticProp: 'Hello'}

Receiver
{staticProp: 'Hello'}

Why is that? Using Solid 1.8.22

3 replies

SSolidJS

•Created by anthy on 9/6/2024 in #support

How to use preloaded data

The solid router docs do not give any example on how to use the data returned from the preload function - https://github.com/solidjs/solid-router?tab=readme-ov-file#preload-functions I don't want to use any wrappers such as cache. In the preload function I'm just doing a fetch call. I access the data as a component prop. It comes as a promise. How do I display that data in the component?

23 replies

SSolidJS

•Created by anthy on 2/20/2024 in #support

How do I use solid router in the solid playground?

I added solid router to the importmap, but whenever trying to import something it says “Cannot find module ‘@solidjs/router’ or it’s corresponding type declarations”

10 replies

SSolidJS

•Created by anthy on 2/24/2023 in #support

Is it possible to have generic children for a generic component?

I'm trying to create a type-safe form, with a generic component. I pass a generic type argument to the parent component and I want it's children to derive that generic type. Here's my attempt:

import { render } from "solid-js/web";
import { children, Component, JSX } from "solid-js";

interface MyForm {
  firstName: string;
  lastName: string;
  age: number;
}

function Input<T extends { name: string }>(props: T) {
  return <input name={props.name} />
}

function Form<T>(props: { children: Component<{ name: keyof T }>[] }) {
    // I'm a beginner, I'm not sure if I'm using this helper correctly, but let's not focus on that
    const c = children(() => props.children.map(child => child())); // child is not a function

    return (
        <form>
          {c()}
        </form>
    );
}

function Example() {
  return (
    <Form<MyForm>>
      <Input name="firstName" /> {/* OK */}
      <Input name="qwe" /> {/* error! */}
    </Form>
  );
}

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

import { render } from "solid-js/web";
import { children, Component, JSX } from "solid-js";

interface MyForm {
  firstName: string;
  lastName: string;
  age: number;
}

function Input<T extends { name: string }>(props: T) {
  return <input name={props.name} />
}

function Form<T>(props: { children: Component<{ name: keyof T }>[] }) {
    // I'm a beginner, I'm not sure if I'm using this helper correctly, but let's not focus on that
    const c = children(() => props.children.map(child => child())); // child is not a function

    return (
        <form>
          {c()}
        </form>
    );
}

function Example() {
  return (
    <Form<MyForm>>
      <Input name="firstName" /> {/* OK */}
      <Input name="qwe" /> {/* error! */}
    </Form>
  );
}

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

Form is a generic component that receives MyForm type parameter and should only accept such children which name props of are keys of MyForm. The above code errors out in few places. I know that traditionally children should be of type JSX.Element but Elements are not callable. I remember having issues trying to do that in React, I'm not sure if it's possible

19 replies

Gaming

Programming