snorbi Posts - Answer Overflow

snorbi

•Created by snorbi on 2/22/2025 in #support

Handling loading state

What is the correct way to implement a component that depends on state loaded asynchronously? The component function is executed only once, so I guess that I have to create all effects and memos during that single execution. My problem is that because the used data may still be loading, my code is full of null-checks. It is a top-level component (like a bookmarkable page of an SPA), so I cannot "hoist up" its state. Thanks.

3 replies

SSolidJS

•Created by snorbi on 2/11/2025 in #support

Error during navigation

6 replies

SSolidJS

•Created by snorbi on 2/6/2025 in #support

Calling a JSX event handler explicitly

How can I call an event handler explicitly?

const handleFocus = (e: FocusEvent) => {
        // perform some operation

        props.onFocus?.(e)
    }

const handleFocus = (e: FocusEvent) => {
        // perform some operation

        props.onFocus?.(e)
    }

It gives the compilation error:

This expression is not callable. Not all constituents of type 'FocusEventHandlerUnion<HTMLInputElement, FocusEvent>' are callable. Type 'BoundEventHandler<HTMLInputElement, FocusEvent, FocusEventHandler<HTMLInputElement, FocusEvent>>' has no call signatures.

Is it safe to simply check if it is a function, or not that simple? Thanks

7 replies

SSolidJS

•Created by snorbi on 2/5/2025 in #support

Related components

How would you implement a <Form> and <ValidatedField> component?

<Form>
  <ValidedField ... />
  <ValidedField ... />
</Form>

<Form>
  <ValidedField ... />
  <ValidedField ... />
</Form>

Where e.g. you could force the validation of all nested ValidatedField components, and e.g. make the first one with errors focused? What is the recommended way to implement such relations between components? How can components "know about each other", especially about their parent? Is this always implemented by using context and props? For example can I pass a "parent component context object" to the nested components where they can register themselves dynamically? Thanks.

3 replies

SSolidJS

•Created by snorbi on 2/4/2025 in #support

Reactive context in built-in components

I've looked into the source code of the core components, like: https://github.com/solidjs/solid/blob/fff8aed62b4bff78a0016c3c08ba644652ccac18/packages/solid/src/server/rendering.ts#L291 My question is: why are these components reactive at all? :] I mean they seem to be simple JS functions, their code is not wrapped by the usual "reactive context" providers like JSX, createMemo(), etc. Thanks.

9 replies

SSolidJS

•Created by snorbi on 2/4/2025 in #support

Access ref in child component when using forwarding refs

I would like to use a forwarding ref as described in https://docs.solidjs.com/concepts/refs#forwarding-refs but also access the ref in the child component itself, like:

// Child component
function Canvas(props) {
  let anotherRef // <-- how to assign this?
  onMount(() => anotherRef.addEventListener('click', ...))
  return (
    <div className="canvas-container">
      <canvas ref={props.ref} /> {/* Assign the ref to the canvas element */}
    </div>
  )

// Child component
function Canvas(props) {
  let anotherRef // <-- how to assign this?
  onMount(() => anotherRef.addEventListener('click', ...))
  return (
    <div className="canvas-container">
      <canvas ref={props.ref} /> {/* Assign the ref to the canvas element */}
    </div>
  )

Is it possible?

6 replies

SSolidJS

•Created by snorbi on 2/4/2025 in #support

Lots of separate requests when using lucide-solid during devmode

I tried to use lucide-solid, and it works as expected. My problem is that it downloads each icon JSX file separately during development, slowing down the initial page load, and completely "ruining" the Network view:

...
arrow-down-circle.jsx    304    script    aliases.ts:138    145 B    591 ms
arrow-left-circle.jsx    304    script    aliases.ts:141    145 B    591 ms
...

...
arrow-down-circle.jsx    304    script    aliases.ts:138    145 B    591 ms
arrow-left-circle.jsx    304    script    aliases.ts:141    145 B    591 ms
...

Is there a way to load all icons at once during development? I tried some recommendations like

    optimizeDeps: {
        include: ["lucide-solid"],
    }

    optimizeDeps: {
        include: ["lucide-solid"],
    }

but none worked. Thanks.

5 replies

SSolidJS

•Created by snorbi on 1/26/2025 in #support

How to extract common reactive code?

I have some common code that I want to use in multiple components, like:

  const [currentTime, setCurrentTime] = createSignal(getCurrentTimeMinutePrecision())

  let timer: NodeJS.Timer
  onMount(() => {
    timer = setInterval(() => {
      const now = getCurrentTimeMinutePrecision()
      if (!now.equals(currentTime())) {
        setCurrentTime(getCurrentTimeMinutePrecision())
      }
    }, 1_000)
  })
  onCleanup(() => clearInterval(timer))

  const [currentTime, setCurrentTime] = createSignal(getCurrentTimeMinutePrecision())

  let timer: NodeJS.Timer
  onMount(() => {
    timer = setInterval(() => {
      const now = getCurrentTimeMinutePrecision()
      if (!now.equals(currentTime())) {
        setCurrentTime(getCurrentTimeMinutePrecision())
      }
    }, 1_000)
  })
  onCleanup(() => clearInterval(timer))

What is the correct way to refactor this code fragment to a separate function and use it from multiple components? Can I just simply extract it as is, and return the Signal (or only the Accessor in case of my example)? E.g. what would happen if I call this from inside an effect? Can I somehow prevent it to be called from an ordinary function? Thanks.

11 replies

SSolidJS

•Created by snorbi on 1/21/2025 in #support

Solving "computations created outside ..." using `createMemo() ?`

I got the following warning because I used props.values in my event handling code:

computations created outside a createRoot or render will never be disposed

I have read the docs and some additional info (like https://github.com/solidjs/solid/issues/2130). The warning is gone when I simply wrap the props.values access in a createMemo():

const values = createMemo(() => props.values)

const values = createMemo(() => props.values)

My question is: is it a good solution? If yes, then why the props accessors are not functions themselves (like props.values()instead of the current props.values) so they would always return a "fresh" value? Thanks.

17 replies

SSolidJS

•Created by snorbi on 11/29/2024 in #support

Passing Component in props

I try to generalize the following fragment:

<div>
  <div><label for="nameField">Name</label></div>
  <div><input id="nameField" ref={nameFieldRef} autocomplete="name" required /></div>
</div>

<div>
  <div><label for="nameField">Name</label></div>
  <div><input id="nameField" ref={nameFieldRef} autocomplete="name" required /></div>
</div>

where my component would apply the same ID for the <label> and the <input> but also the <input> would come as a parameter in props. Something like this - except that it does not work 😄

interface FieldWithLabelProps {
  id: string
  ref: HTMLInputElement
  label: string
  field: JSX.Element <--- How to narrow down to permit only <input>?
}

const FieldWithLabel: Component<FieldWithLabelProps> = (props) => {
  return (
    <div>
      <div><label for={props.id}>{props.label}</label></div>
      <div>{props.field}</div> <--- How to apply "id" attribute and props.ref to props.field?
    </div>
  )
}

interface FieldWithLabelProps {
  id: string
  ref: HTMLInputElement
  label: string
  field: JSX.Element <--- How to narrow down to permit only <input>?
}

const FieldWithLabel: Component<FieldWithLabelProps> = (props) => {
  return (
    <div>
      <div><label for={props.id}>{props.label}</label></div>
      <div>{props.field}</div> <--- How to apply "id" attribute and props.ref to props.field?
    </div>
  )
}

And call it like:

<FieldWithLabel id="nameField" ref={nameFieldRef} label="Name" field={<input autocomplete="name" required />} />

<FieldWithLabel id="nameField" ref={nameFieldRef} label="Name" field={<input autocomplete="name" required />} />

Thanks.

5 replies

SSolidJS

•Created by snorbi on 11/21/2024 in #support

Rendering <input>s in <For>

How can I reference a dynamic number of <input>s to read their value? Thanks.

6 replies

SSolidJS

•Created by snorbi on 11/12/2024 in #support

Handling <input>

Is this a correct way to handle <input> fields? <input onInput={e => setUserName(e.target.value)} value={userName()} /> Or should I use a ref instead and read the field value when it is needed? Is there a concept of "controlled input" in solidjs? Or only "uncontrolled input"? Thanks.

6 replies

SSolidJS

•Created by snorbi on 11/6/2024 in #support

Is this a correct implementation? :)

I'm new to both JSX and Solid. Is this a correct implementation or can it be simplified?

const NavLink = (props) => {
  const [_, restProps] = splitProps(props, ["href", "children"]);
  return <a href={UrlPrefix + props.href} {...restProps}>{props.children}</a>;
}

const NavLink = (props) => {
  const [_, restProps] = splitProps(props, ["href", "children"]);
  return <a href={UrlPrefix + props.href} {...restProps}>{props.children}</a>;
}

The goal is to render a <a> with a customized href prop, rendering the children, while passing all other props unmodified. Thanks.

3 replies

SSolidJS

•Created by snorbi on 11/3/2024 in #support

Reactive array transformation

What is the correct way to make the result of a filtering+mapping operation on an array reactive?

  return store.productTreeData
    .filter(e => e.parentId == parentId)
    .map(e => {
      const children = ...
      return { productTreeItem: e, children: children.length > 0 ? children : null };
    });

  return store.productTreeData
    .filter(e => e.parentId == parentId)
    .map(e => {
      const children = ...
      return { productTreeItem: e, children: children.length > 0 ? children : null };
    });

What should I write instead of the object literal? What I would like to do is to refactor some code to separate functions but the result to remain "reactive". Thanks.

6 replies

SSolidJS

•Created by snorbi on 11/3/2024 in #support

Display HTML entity

How can I display a text containing HTML entities? <div>{props.text}</div> displays the source code version of the entity. Thanks.

2 replies

Gaming

Programming