snorbi Comments - Answer Overflow

Topics

snorbi

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

Error during navigation

The <Show> component uses a condition whether the page should be displayed at all (by validating parameters in the URL), or redirected to a fallback page using a <Navigate>. Maybe this is not the best solution for redirecting to another page based on a condition?

6 replies

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

Error during navigation

It seems I found it by experimenting and commenting out navigation-related code fragments. It took a long time 😦 I had <Navigate> components inside the fallback parameter of Show components on the problematic pages. Removing the <Navigate> fallbacks solved the problem.

6 replies

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

Error during navigation

I just don't find any determinism in its behaviour 😦 Sometimes it works but most of the times it throws the above error. The pages are fairly complex, so I cannot extract a minimal reproducer easily 😦

6 replies

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

Calling a JSX event handler explicitly

I didn't know this trick with Omit, it is nice, thanks 🙂

7 replies

•Created by Md Shehab on 2/6/2025 in #support

Third party authentication

Auth.js has SolidJS support: https://authjs.dev/reference/solid-start It supports OAuth: https://authjs.dev/getting-started/authentication/oauth (Please note: I have not used it, I have only read about it.)

4 replies

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

Related components

Thanks a lot! 🙏 I should learn more from existing code 🥹

3 replies

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

Access ref in child component when using forwarding refs

Thanks @peerreynders for the detailed explanation. I will pass listeners instead, it is a much more clean solution 🙂

6 replies

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

Access ref in child component when using forwarding refs

I'm a bit lost how refs work 😦 What I try to achieve is to create a component which wraps various children 3-4 components deep, and to propagate the ref of the deepest component to the top level component. It is something like:

ValidatingInputFieldWithLabel
├─ InputFieldWithLabel
│  ├─ Label
│  └─ InputField
│     └─ <input>
└─ ValidationDisplay

ValidatingInputFieldWithLabel
├─ InputFieldWithLabel
│  ├─ Label
│  └─ InputField
│     └─ <input>
└─ ValidationDisplay

(I know it is not ideal from an "encapsulation" viewpoint. I have other ideas how to solve the problem but I'm very curious whether it is possible to propagate refs "upwards".) What I would like is to know the ref of the <input> at the level of ValidatingInputFieldWithLabel, so I can add event listeners to the <input>. What is the best solution? Besides, can someone explain what is the magic behind the ref feature? Until now I thought I understand it but now I'm a bit confused, e.g. how can I know that it is a simple Element or a Function? Or should I always check it at runtime in my custom components? Thanks.

6 replies

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

Access ref in child component when using forwarding refs

It works, thanks!

6 replies

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

Reactive context in built-in components

Thanks 🤯 I hope I will understand these one day 🥹 😆

9 replies

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

Reactive context in built-in components

Maybe I found them? https://github.com/solidjs/solid/blob/fff8aed62b4bff78a0016c3c08ba644652ccac18/packages/solid/src/render/flow.ts#L102 😄 This is rocket science 😄

9 replies

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

Reactive context in built-in components

Ohh, thanks. Then I looked at the wrong files, I was interested in the reactive variants... 😕

9 replies

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

How to extract common reactive code?

Thanks a lot for the detailed answer! 🙂

11 replies

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

How to extract common reactive code?

Thanks, I created this cute function 🤩

export function useCurrentTimeMinutePrecision(): Accessor<DateTime> {
  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))

  return currentTime
}

export function useCurrentTimeMinutePrecision(): Accessor<DateTime> {
  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))

  return currentTime
}

And it seems to work 😄

11 replies

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

How to extract common reactive code?

Wdym with this?

I mean that somehow prevent it to be called from a non-reactive context. Is there for example, some Typescript typing "trick" that can check it at compile-time? Or isn't it that simple? 🙂

11 replies

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

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

Thanks @mdynnl for looking into it. I don't understand the "ternaries" part deep enough but it is good to hear that createMemo() is the good solution here 🙂 (Although it does not seem to solve the warning in case of your example, it solves it in my code.)

17 replies

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

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

Thanks @peerreynders , I refactored my code to use undefined instead of null. I have a Java/Kotlin background, so I used null out of reflex 🙂

17 replies

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

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

I have created a complete example: https://playground.solidjs.com/anonymous/e0fc8d1e-cfc8-4774-9d5e-ef9068494c00 For some reason I cannot run it in the playground (it is the first time I use it 🥲 ) but I hope it helps (I'm unable to include here because it is too long). Running it locally on my PC, first I select a value from the first dropdown, then the warning is issued when I select a value from the second dropdown. Thanks again for looking into it.

17 replies

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

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

untrack() does not solve the issue, the warning still arises... So I must do something incorrectly, as @Andreas Roth suggested 😦 The code is something like this:

export type Binding<T> = {
    get: () => T
    set(value: T): void
}

export function createBinding<T>(getter: () => T, setter: (value: T) => void): Binding<T | null> {
    return { get: getter, set: setter }
}

...

export type ComboboxProps<T extends NonNullable<any>> = JSX.SelectHTMLAttributes<HTMLSelectElement> & {
    binding: Binding<T | null>
    values: T[]
}

...

export function Combobox<T extends NonNullable<any>>(props: ComboboxProps<T>): JSX.Element {
    ...

    let ref: HTMLSelectElement | undefined

    const values = () => props.values // <-- using `createMemo(() => props.values)` solves the warning

    const handleChange = () => {
        const value = ref!.value
        props.binding.set(value != null && value != "" ? values().filter(e => keyProvider(e) == value)[0] : null) // <-- The warning is issued at this line; it is interesting that `props.binding` does not cause a warning
    }

    onMount(() => ref!.addEventListener("input", handleChange))
    onCleanup(() => ref!.removeEventListener("input", handleChange))

    return (
        <select ref={ref} ...>
            ...
        </select>
    );
}

export type Binding<T> = {
    get: () => T
    set(value: T): void
}

export function createBinding<T>(getter: () => T, setter: (value: T) => void): Binding<T | null> {
    return { get: getter, set: setter }
}

...

export type ComboboxProps<T extends NonNullable<any>> = JSX.SelectHTMLAttributes<HTMLSelectElement> & {
    binding: Binding<T | null>
    values: T[]
}

...

export function Combobox<T extends NonNullable<any>>(props: ComboboxProps<T>): JSX.Element {
    ...

    let ref: HTMLSelectElement | undefined

    const values = () => props.values // <-- using `createMemo(() => props.values)` solves the warning

    const handleChange = () => {
        const value = ref!.value
        props.binding.set(value != null && value != "" ? values().filter(e => keyProvider(e) == value)[0] : null) // <-- The warning is issued at this line; it is interesting that `props.binding` does not cause a warning
    }

    onMount(() => ref!.addEventListener("input", handleChange))
    onCleanup(() => ref!.removeEventListener("input", handleChange))

    return (
        <select ref={ref} ...>
            ...
        </select>
    );
}

And the usage is something like:

function CheckoutPage() {
  ...
  const [selectedPaymentOption, setSelectedPaymentOption] = createSignal<PaymentOption | null>(null)
  ...
  return (
    ...
      <Combobox binding={createBinding(selectedPaymentOption, setSelectedPaymentOption)} values={<<a bit more complex filtering/mapping based on a Signal>>} ... />
    ...
  )

function CheckoutPage() {
  ...
  const [selectedPaymentOption, setSelectedPaymentOption] = createSignal<PaymentOption | null>(null)
  ...
  return (
    ...
      <Combobox binding={createBinding(selectedPaymentOption, setSelectedPaymentOption)} values={<<a bit more complex filtering/mapping based on a Signal>>} ... />
    ...
  )

Thanks. Ps.: I'm relatively new in both TypeScript/Javascript and SolidJS

17 replies

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

Passing Component in props

I go with your recommendation, I'm too beginner for a more generic solution 🙂 Thanks,

5 replies