Kasper Comments - Answer Overflow

Kasper

Posts Comments

SSolidJS

•Created by Kasper on 1/11/2024 in #support

API Proxy in SolidStart

@˞˞˞˞˞˞˞˞˞˞˞˞˞˞˞˞˞˞

2 replies

SSolidJS

•Created by Kasper on 5/21/2023 in #support

Running tests in docker fails, but works outside of docker

Downgrading to node:18.9-alpine3.16 solved the issues.

6 replies

SSolidJS

•Created by Kasper on 5/21/2023 in #support

Running tests in docker fails, but works outside of docker

Compose file:

version: "3.8"
services:
  magicdoor-portal-frontend:
    build:
      context: .
      dockerfile: ./.docker/dev/Dockerfile
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: ["npm", "run", "start", "--", "--host", "0.0.0.0"]

  magicdoor-portal-frontend-tests:
    build:
      context: .
      dockerfile: ./.docker/dev/Dockerfile
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - 4000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: ["npm", "run", "test"]

version: "3.8"
services:
  magicdoor-portal-frontend:
    build:
      context: .
      dockerfile: ./.docker/dev/Dockerfile
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: ["npm", "run", "start", "--", "--host", "0.0.0.0"]

  magicdoor-portal-frontend-tests:
    build:
      context: .
      dockerfile: ./.docker/dev/Dockerfile
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - 4000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: ["npm", "run", "test"]

6 replies

SSolidJS

•Created by Kasper on 2/24/2023 in #support

How to update store with arary

Was correct, i had an issue where my files where not an array but an object map.

2 replies

SSolidJS

•Created by Kasper on 2/20/2023 in #support

Component is not updated when prop is changed

Really loving SolidJS 🙂

34 replies

SSolidJS

•Created by Kasper on 2/20/2023 in #support

Component is not updated when prop is changed

Thank you very much!

34 replies

SSolidJS

•Created by Kasper on 2/20/2023 in #support

Component is not updated when prop is changed

My very basic understanding would say that passing a Accessor would cause less updates as only the parts of the subcomponent that is affected is updated. But i am not sure at all. And i really want to learn the best practices 🙂

34 replies

SSolidJS

•Created by Kasper on 2/20/2023 in #support

Component is not updated when prop is changed

Accessor passing should be fine as when you call the function on it subscribes it self to parent context of where it is used. Or at least that is how i understand it.

34 replies

SSolidJS

•Created by Kasper on 2/20/2023 in #support

Component is not updated when prop is changed

Also is better practices to send the Accessor to sub-component?

34 replies

SSolidJS

•Created by Kasper on 2/20/2023 in #support

Component is not updated when prop is changed

Great that worked. Why do destructing the props break that?

34 replies

SSolidJS

•Created by Kasper on 2/20/2023 in #support

Component is not updated when prop is changed

@._rb sorry for the late reply, what if i have a component without a resources. Such like the one below that is used multiple in places. Some place where the props are static and other where they are dynamic. such as:

interface CategorySelectorProps {
  type?: CategoryType | undefined;
  includeAllOption?: boolean;
  leftExpand?: boolean;
  value: Accessor<number | undefined>;
  onChange: (value: number) => void;
}
const CategorySelector = ({ type, value, onChange, leftExpand, includeAllOption }: CategorySelectorProps) => {
  const { categories, loading, categoryMap } = useCategories();

  const [categoryName, setCategoryName] = createSignal<string | undefined>(undefined);
  const [categoryParent, setCategoryParent] = createSignal<string | undefined>(undefined);
  const [categoriesToDisplay, setCategoriesToDisplay] = createSignal<Category[]>([]);
  const [showSelect, setShowSelect] = createSignal<boolean>(false);

  createEffect(() => {
    if (!categories() || categories().length === 0) {
      setCategoriesToDisplay([]);
      console.log("No categories to display");
      return;
    }

    if (!type) {
      setCategoriesToDisplay(categories());
      console.log("No type specified, displaying all categories");
      return;
    }

    console.log("Displaying categories of type: ", type);
    let filteredCategories = categories().filter((c: Category) => c.type === type);
    setCategoriesToDisplay(filteredCategories);
  });
...
};

interface CategorySelectorProps {
  type?: CategoryType | undefined;
  includeAllOption?: boolean;
  leftExpand?: boolean;
  value: Accessor<number | undefined>;
  onChange: (value: number) => void;
}
const CategorySelector = ({ type, value, onChange, leftExpand, includeAllOption }: CategorySelectorProps) => {
  const { categories, loading, categoryMap } = useCategories();

  const [categoryName, setCategoryName] = createSignal<string | undefined>(undefined);
  const [categoryParent, setCategoryParent] = createSignal<string | undefined>(undefined);
  const [categoriesToDisplay, setCategoriesToDisplay] = createSignal<Category[]>([]);
  const [showSelect, setShowSelect] = createSignal<boolean>(false);

  createEffect(() => {
    if (!categories() || categories().length === 0) {
      setCategoriesToDisplay([]);
      console.log("No categories to display");
      return;
    }

    if (!type) {
      setCategoriesToDisplay(categories());
      console.log("No type specified, displaying all categories");
      return;
    }

    console.log("Displaying categories of type: ", type);
    let filteredCategories = categories().filter((c: Category) => c.type === type);
    setCategoriesToDisplay(filteredCategories);
  });
...
};

At the dynamic location i create the componet like this: <CategorySelector leftExpand={true} type={type()} value={categoryId} onChange={setCategoryId} /> but when type() updates the component is not updated. Is the right approach here to send in type as the Accessor and not just as the value. and then when it is static i need to wrap my static field in a createSignal("my-type")[0]?

34 replies

SSolidJS

•Created by Kasper on 2/20/2023 in #support

Component is not updated when prop is changed

From what i have been able to understand for my googleing is that SolidJS dose not rerender a component when the props change. So am i correct in assuming that i should give the documentId as an Accessor<string | undefined> instead? That works but is it the correct way of doing it?

34 replies

SSolidJS

•Created by Kasper on 2/18/2023 in #support

Avoid Provider nesting

Thanks

4 replies

SSolidJS

•Created by Kasper on 2/18/2023 in #support

Guide for more complex usage of stores

Got it, i really appreciateyour help 🙂

30 replies

SSolidJS

•Created by Kasper on 2/18/2023 in #support

Guide for more complex usage of stores

In that case how would you handle a loading state while it executes, as that is now hidden inside the context? A loading signal on the context itself?

30 replies

SSolidJS

•Created by Kasper on 2/18/2023 in #support

Guide for more complex usage of stores

example is it best practice to make the function itself async, or should it be sync with a async function inside like is done in React

30 replies

SSolidJS

•Created by Kasper on 2/18/2023 in #support

Guide for more complex usage of stores

@._rb do you know if there are any guidelines on how to use async in context function?

30 replies

SSolidJS