Broken reactivity from props

Does createResource not refetch if used like so?

export default function Icon(props: IconifyIconProps) {
    const [local, rest] = splitProps(props, ["icon"]);
    const [data] = createResource(() => getIcon(local.icon));

export default function Icon(props: IconifyIconProps) {
    const [local, rest] = splitProps(props, ["icon"]);
    const [data] = createResource(() => getIcon(local.icon));

12 Replies

ⱼ ₒ ₑOP•3mo ago

I have an instance that uses a signal based value like so

<Icon
    class="size-5/6"
    icon={isVisible(userVisibility)
      ? "mdi:eye-outline"
      : "mdi:eye-off-outline"
    }
/>

<Icon
    class="size-5/6"
    icon={isVisible(userVisibility)
      ? "mdi:eye-outline"
      : "mdi:eye-off-outline"
    }
/>

(using the signal in place no function makes 0 diff) If I'm being honest I moved this component to its own package and the compiler literally breaks like half of solid's features but I can't find anything about bundling for solid so I slimmed down and still somehow something so simple is broken

REEEEE•3mo ago

You have to read the icon in the first argument of createResource and do the fetching in the second So it would be like this instead

const [data] = createResource(() => local.icon, () => getIcon(local.icon));

const [data] = createResource(() => local.icon, () => getIcon(local.icon));

This is for when you want the resource to rerun based on some signal(s)

ⱼ ₒ ₑOP•3mo ago

I thought I saw something similar to that but I was doing it incorrectly, thanks However somehow this approach still does not work I can only assume by now that however I am compiling / bundling my solid component, that is breaking it?

REEEEE•3mo ago

Could be. If you're able to reproduce it without the bundling either in the playground or in your project, then it could be something else

ⱼ ₒ ₑOP•3mo ago

Yeah even with createAsync it doesn't work, so I think it's the bundler but I have no clue how to change Rollup... Here is the repository if anyone can help with this. Thanks! rip

Brendonovich•3mo ago

I'd be curious to see what isVisible and userVisibility are, the package itself looks fine. On another note, have you seen https://github.com/unplugin/unplugin-icons ?

GitHub

GitHub - unplugin/unplugin-icons: 🤹 Access thousands of icons as...

🤹 Access thousands of icons as components on-demand universally. - unplugin/unplugin-icons

ⱼ ₒ ₑOP•3mo ago

I did actually but I prefer the way that my component works Just a personal preference I would want to have the option for, mainly small projects Also allows more dynamic usecaes that approach does not.

danchez•3mo ago

Hey @ⱼ ₒ ₑ any luck with your problem? If you want, happy to hop on a video chat where we can pair on it

ⱼ ₒ ₑOP•3mo ago

Sorry for the late response but I decided I'll just have to delay this project Even with slimming down it seemed to still cause crazy bugs, and even when I just used tsc to transpile I couldn't get it to work so I just bit the bullet and started to use unplugin-icons It's really a shame because I keep running into times I would love to have a component like this but oh well Thanks for offering though.

Madaxen86•3mo ago

So I did this yesterday and it works:

import { createSignal } from "solid-js";
import Icon from "../../../src";
import { Suspense } from "solid-js/web";
export default function Home() {
  const [toggle, setToggle] = createSignal(false);
  return (
    <main>
      <h1>Hello world!</h1>
      <button onClick={() => setToggle((toggle) => !toggle)}>Toggle</button>
      <Suspense>
        <Icon icon={toggle() ? "mdi:eye-outline" : "mdi:eye-off-outline"} />
      </Suspense>
    </main>
  );
}

import { createSignal } from "solid-js";
import Icon from "../../../src";
import { Suspense } from "solid-js/web";
export default function Home() {
  const [toggle, setToggle] = createSignal(false);
  return (
    <main>
      <h1>Hello world!</h1>
      <button onClick={() => setToggle((toggle) => !toggle)}>Toggle</button>
      <Suspense>
        <Icon icon={toggle() ? "mdi:eye-outline" : "mdi:eye-off-outline"} />
      </Suspense>
    </main>
  );
}

So probably there's an issue with isVisible(userVisibility)as Brendonovic mentioned.

ⱼ ₒ ₑOP•3mo ago

You're just pulling from src and not compiling it though right? I would expect that to work I don't really care so much about compilation it's just that I don't know how to have a proper exported package otherwise

Madaxen86•3mo ago

Yes, imported directly from src.

Gaming

Programming

Broken reactivity from props

Did you find this page helpful?