zishh Posts - Answer Overflow

zishh

•Created by zishh on 11/10/2023 in #support

Custom signal for observable props parameter - Reactivity issue

have library which contains objects with observable properties. To make this work with solid I want to create a custom signal which triggers the reactive functionality. Basically something like this: https://playground.solidjs.com/anonymous/749a49e0-da6f-465b-995a-947e7d6bbdf9 Changing the observable value (by clicking the "Update" button) works fine. But the observable itself can change also change (by clicking the "Reset" button) and because props.observable is not called in a tracked context, we lose reactivity i.e. updates no longer have a visible effect. So I understand why this is happening but I do not know what the best way to solve this looks like. I thought about passing a function which returns the observable to createCustomSignal instead of the value itself. But I do not know what the implementation of createCustomSignal would then look like such that it can track changes. Any ideas how to make this work?

5 replies

SSolidJS

•Created by zishh on 11/6/2023 in #support

CRUD App - Suggestion for Utility Functionality

Hey there! I'm developing an app which contains mostly CRUD functionality using typescript + solid. But contrary to all examples I've found on the web, there are a lot of details which have to be handled e.g. client-side validation before saving the data; handling of server-side validation responses; failure handling in general, ... So while my setup works, it feels like there is boilerplate which is repeated for every type. So what I thought might make sense is to create a helper like createCrudResource which already has a save, load, a signal for the current value, ... Does something like this make sense? Is there some article and/or open source project which shows a solution for this problem?

1 replies

SSolidJS

•Created by zishh on 9/12/2023 in #support

Best Practices for Unrepresentable Intermediate State

Hello, I am looking for some opinions regarding best practice in the following situation. Lets say I have a model which contains properties and some of those properties can only exist in tandem e.g. blood pressure which are usually two values. To encode this in the model the two properties are grouped into an optional property.

interface SomeModel {
  a: string;
  b?: {
    b1: string;
    b2: string;
  };
}

interface SomeModel {
  a: string;
  b?: {
    b1: string;
    b2: string;
  };
}

If I want to create a custom component which can be used to create such a model instance, I want to have three input elements. The component props would look like this:

interface SomeComponentProps {
  value: SomeModel;
  onChange: (value: SomeModel | undefined) => void;
}

interface SomeComponentProps {
  value: SomeModel;
  onChange: (value: SomeModel | undefined) => void;
}

As soon as I input b1 or b2 I run in a case in which the model is invalid because only one of the two b-values exist. That's fine as an intermediate state but how do I represent this? I could add an extra callback onValidationFailure and call that. But then I have this weird state in which the state in the application does not reflect the state of the UI. So I would assume that I should also call onChange(undefined) because we do not have a valid instance at this point in time. The issue is that this would break the two-way data binding because the value is updated with undefined and all input elements are cleared. The other option would be to use two different models. So I have one for persistency and one which can represent all intermediate states. This results in a lot of boilerplate. I hope my issue became kind of clear. How is this invalid intermediate state, which can not be represented by the "normal" model, handled in the components?

32 replies

SSolidJS

•Created by zishh on 4/10/2023 in #support

Constraining input element not working

I want to constraint the values of some input element but I seem to have a misunderstanding of the update cycle of solid. Example:

const [value, setValue] = createSignal("");
return (
  <div>
    <div>{value()}</div>
    <input
      type="text"
      value={value()}
      oninput={e => setValue(e.currentTarget.value.substring(0, 5))}
    />
  </div>
)

const [value, setValue] = createSignal("");
return (
  <div>
    <div>{value()}</div>
    <input
      type="text"
      value={value()}
      oninput={e => setValue(e.currentTarget.value.substring(0, 5))}
    />
  </div>
)

The value displayed in the div is constrained to 5 characters but in the input itself I can keep writing as long as I want. What I noticed is that this behavior changes depending on whether the cursor in the input is at the end or somewhere else. If it is not at the end it is correctly clipped. Can someone explain this behavior? I would have expected that the input gets its updated value from the signal after the oninput handler ran.

13 replies

Gaming

Programming