RATIU5 Posts - Answer Overflow

RATIU5

Explore posts from servers

•Created by RATIU5 on 10/15/2024 in #support

How do I run an effect every change except initialization?

I need to run an effect every subsequent change of a signal's value. I just need to skip the first initialization of the signal. I found this answer https://stackoverflow.com/a/78283918 and I implemented it, but it's not triggering on any updates.

const [value, setValue] = createSignal(props.defaultValue ?? 0);
createEffect(
  on(
    value,
    (val) => {
      console.log(val); // Should log when the value changes, but not on initialization
    },
    { defer: true },
  ),
);

const [value, setValue] = createSignal(props.defaultValue ?? 0);
createEffect(
  on(
    value,
    (val) => {
      console.log(val); // Should log when the value changes, but not on initialization
    },
    { defer: true },
  ),
);

5 replies

SSolidJS

•Created by RATIU5 on 10/12/2024 in #support

Solid.js does not render children in a `<For>` loop correctly

Take a look at my component code:

type CartProps = {
  cartIcon: JSX.Element;
  trashIcon: JSX.Element;
};

const Cart: Component<CartProps> = (props) => {
  const cartItems = useStore(cartItemsStore);

  return (
    <Sheet>
      <SheetTrigger class="relative">
        {props.cartIcon}
        {cartItems().length > 0 && (
          <div class="absolute top-1 right-1 -mt-2 -mr-2 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
            {cartItems().reduce((acc, item) => acc + item.quantity, 0)}
          </div>
        )}
      </SheetTrigger>
      <SheetContent>
        <For each={cartItems()}>
          {(item) => (
            <div class="w-full p-2 flex justify-between">
              <div class="grid grid-flow-col gap-4">
                <p class="grid-cols-1">{item.title}</p>
                <p class="grid-cols-1 text-neutral-600">x{item.quantity}</p>
              </div>
              <div>
                {/* problem is happening here */}
                <button class="text-neutral-500">{props.trashIcon}</button>
              </div>
            </div>
          )}
        </For>
      </SheetContent>
    </Sheet>
  );
};

type CartProps = {
  cartIcon: JSX.Element;
  trashIcon: JSX.Element;
};

const Cart: Component<CartProps> = (props) => {
  const cartItems = useStore(cartItemsStore);

  return (
    <Sheet>
      <SheetTrigger class="relative">
        {props.cartIcon}
        {cartItems().length > 0 && (
          <div class="absolute top-1 right-1 -mt-2 -mr-2 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
            {cartItems().reduce((acc, item) => acc + item.quantity, 0)}
          </div>
        )}
      </SheetTrigger>
      <SheetContent>
        <For each={cartItems()}>
          {(item) => (
            <div class="w-full p-2 flex justify-between">
              <div class="grid grid-flow-col gap-4">
                <p class="grid-cols-1">{item.title}</p>
                <p class="grid-cols-1 text-neutral-600">x{item.quantity}</p>
              </div>
              <div>
                {/* problem is happening here */}
                <button class="text-neutral-500">{props.trashIcon}</button>
              </div>
            </div>
          )}
        </For>
      </SheetContent>
    </Sheet>
  );
};

The props.trashIcon is only rendering once in this loop for the last item only. How can I get it to render for every element? I've tried everything I could think of like making it a safe child and wrapping it in functions and nothing has worked. Is this possible or a bug?

28 replies

SSolidJS

•Created by RATIU5 on 3/25/2023 in #support

How can I skip the first effect run with createEffect?

I have a createEffect hook that runs when my signal does. Awesome. What I don't want, is for the effect to run when the initial signal value is set. I tried the following without success:

const [getVal, setVal] = createSignal("initial");

let firstEffectHasRun = false;
createEffect(() => {
  if (firstEffectHasRun) {
    console.log("Boom!");
  } else {
    firstEffectHasRun = true;
  }
});

const [getVal, setVal] = createSignal("initial");

let firstEffectHasRun = false;
createEffect(() => {
  if (firstEffectHasRun) {
    console.log("Boom!");
  } else {
    firstEffectHasRun = true;
  }
});

I don't get why this doesn't work since firstEffectHasRun should be cached since it's used within the callback.

5 replies

SSolidJS

•Created by RATIU5 on 1/4/2023 in #support

Reading localstorage theme value before rendering components not working

I'm setting up a theme toggle. It can successfully set the theme in localstorage. When loading a specific theme from storage, there is a brief "flash" of the default theme before converting to the desired theme. Here is the function that loads the theme from localstorage. It's being loaded within the <Head/> tag from Solid Start.

function themeScript() {
  try {
    if (localStorage.theme === "dark" || (!("theme" in localStorage) 
        && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
      document.documentElement.classList.add("dark");
      document.querySelector('meta[name="theme-color"]')
        ?.setAttribute("content", "#0B1120");
    } else {
      document.documentElement.classList.remove("dark");
    }
  } catch (_) {}
  return <></>;
}

function themeScript() {
  try {
    if (localStorage.theme === "dark" || (!("theme" in localStorage) 
        && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
      document.documentElement.classList.add("dark");
      document.querySelector('meta[name="theme-color"]')
        ?.setAttribute("content", "#0B1120");
    } else {
      document.documentElement.classList.remove("dark");
    }
  } catch (_) {}
  return <></>;
}

The script always seems to run before the components but I'm not sure why I still get the flash. Is this a bug?

12 replies

SSolidJS

•Created by RATIU5 on 12/31/2022 in #support

Small preload script after document load but before page load

I'm trying to port the theme toggle from tailwindcss.com to Solid.js. I'm getting stuck at this part. The following script:

try {
  if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
    document.documentElement.classList.add("dark");
    document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#0B1120");
  } else {
    document.documentElement.classList.remove("dark");
  }
} catch (_) {}

try {
  if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
    document.documentElement.classList.add("dark");
    document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#0B1120");
  } else {
    document.documentElement.classList.remove("dark");
  }
} catch (_) {}

needs to load after the base document loads in order to read localstorage but before the page elements load to prevent a theme change flash. (See the tailwind implementation https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/pages/_document.js) I tried adding a script inside the Head tags from Solid.js like this:

<script innerHTML={`console.log("test");`} />

<script innerHTML={`console.log("test");`} />

But it didn't work and I got no log in the console. Could anyone point me to the direction to add a custom script at this point in the page render?

5 replies

Gaming

Programming