Ryan Posts - Answer Overflow

Ryan

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

Prevent a route component from running before the old routes `onCleanup` runs

When I move from one page to another with the router, the flow seems to be: on PageA -> trigger move to PageB -> PageB component function runs -> PageA cleanup runs The issue I am running into in the PageA and PageB use a common store and on the cleanup of PageA, the store is reset however because it run after PageB's component function runs, it is reseting stuff the PageB it setting up. Is there a way to avoid this issue to make sure PageA's cleanup never runs before the next router it loaded?

1 replies

SSolidJS

•Created by Ryan on 7/22/2023 in #support

How to stop VS Code from erroring with `Cannot find name 'React'.ts(2304)`?

VS Code is complaining with Cannot find name 'React'.ts(2304) but I am not using React at all. I have both of these in my ts config:

    "jsx": "preserve",
    "jsxImportSource": "solid-js",

    "jsx": "preserve",
    "jsxImportSource": "solid-js",

How to I avoid this issue in VS Code?

4 replies

SSolidJS

•Created by Ryan on 3/17/2023 in #support

CreateEffect has infinite loop

So I am having an infinite loop issue with an effect that I am trying to figure out how to handle without having to resort to createReaction() since I find those are less than ideal to work with but maybe that is the only SingleInFormAutoShowOptions. I have this code:

createEffect(() => {
  setValue('fieldName', 'field value');
});

createEffect(() => {
  setValue('fieldName', 'field value');
});

Now the problem with this is the setValue() internally sets whether or not the fieldName has been "touched" and to do that, I need to get the existing touched fields to add the new one to and since that gets the touched fields, that causes the effect to run over and over again. Is there a better way to handle this?

6 replies

SSolidJS

•Created by Ryan on 1/22/2023 in #support

Creating a generic based component

Most of the examples I see for typing components look like this:

interface MyComponentProps {
  // ...
}

const MyComponent: ParentComponent<MyComponentProps> = (props) => {
  // ...
};

interface MyComponentProps {
  // ...
}

const MyComponent: ParentComponent<MyComponentProps> = (props) => {
  // ...
};

The problem is that with this pattern, I am not sure how I would go about creating a typescript generic based component. For example, in React I would normally do:

interface MyComponentProps<TData> {
  data: TData;
  // ...
}

const MyComponent = <TData,>(props: MyComponentProps<TData>) => {
  // ...
};

interface MyComponentProps<TData> {
  data: TData;
  // ...
}

const MyComponent = <TData,>(props: MyComponentProps<TData>) => {
  // ...
};

While it seems like I can do the above in SolidJS, props in this case not longer has children as a prop (and I can't do props: ParentComponent<MyComponentProps<TData>> as that causes other typing errors). Is there a standard way of creating a typescript generic based component in SolidJS or do I need to explicitly define children in the props type?

5 replies

SSolidJS

•Created by Ryan on 1/20/2023 in #support

How to handler this standard ReactJS pattern?

In React, I would normally do something like this:

<For each={autoCompleteStore.options}>
  {(option, optionIndex) => {
    const isHighlighted = optionIndex() === autoCompleteStore.focusedOptionIndex;

    return (
      <div
        data-id={`item${isHighlighted ? ' highlighted-item' : ''}`}
        class={classnames(styles.renderedItem, { [styles.highlightedItem]: isHighlighted })}
        onMouseEnter={() => onMouseEnterOption(optionIndex())}
        onMouseDown={() => selectValue(option)}
        role="button"
        tabIndex={-1}
      >
        {option.display}
      </div>
    );
  }}
</For>

<For each={autoCompleteStore.options}>
  {(option, optionIndex) => {
    const isHighlighted = optionIndex() === autoCompleteStore.focusedOptionIndex;

    return (
      <div
        data-id={`item${isHighlighted ? ' highlighted-item' : ''}`}
        class={classnames(styles.renderedItem, { [styles.highlightedItem]: isHighlighted })}
        onMouseEnter={() => onMouseEnterOption(optionIndex())}
        onMouseDown={() => selectValue(option)}
        role="button"
        tabIndex={-1}
      >
        {option.display}
      </div>
    );
  }}
</For>

Now with SolidJS since the function itself only runs once, this does not work and I am trying to figure out what the SolidJS / reactive pattern would be. Since I don't want to duplicate the code to check it is it highlighted for cleanliness, would the best practice for something like this be:

const isFocusedOption = (optionIndex: number) => {
  return autoCompleteStore.focusedOptionIndex === optionIndex;
};

// ...

<For each={autoCompleteStore.options}>
  {(option, optionIndex) => {
    return (
      <div
        data-id={`item${isFocusedOption(optionIndex()) ? ' highlighted-item' : ''}`}
        class={classnames(styles.renderedItem, { [styles.highlightedItem]: isFocusedOption(optionIndex()) })}
        onmouseenter={() => onMouseEnterOption(optionIndex())}
        onmousedown={() => selectValue(option)}
        role="button"
        tabindex={-1}
      >
        {option.display}
      </div>
    );
  }}
</For>

const isFocusedOption = (optionIndex: number) => {
  return autoCompleteStore.focusedOptionIndex === optionIndex;
};

// ...

<For each={autoCompleteStore.options}>
  {(option, optionIndex) => {
    return (
      <div
        data-id={`item${isFocusedOption(optionIndex()) ? ' highlighted-item' : ''}`}
        class={classnames(styles.renderedItem, { [styles.highlightedItem]: isFocusedOption(optionIndex()) })}
        onmouseenter={() => onMouseEnterOption(optionIndex())}
        onmousedown={() => selectValue(option)}
        role="button"
        tabindex={-1}
      >
        {option.display}
      </div>
    );
  }}
</For>

3 replies

Gaming

Programming