Fexelitche Posts - Answer Overflow

Fexelitche

•Created by Fexelitche on 10/10/2024 in #support

Is there a hook for causing a reactive update manually?

As the title says. Context: I have some operations in a derived reactive primitive, where the current way to cause the update is to reallocate a lot of memory. In this derived primitive I do have a lot more knowledge about the data being manipualted compared to what the base version is working with, so if there was a manual way to trigger an update, I could optimize a lot.

2 replies

SSolidJS

•Created by Fexelitche on 10/9/2024 in #support

How do one test a custom primitives?

Hi, I made an extension atop createStore for arrays as I use them a lot, and to provide some useful api for mutating it correctly. (I found general store use for this a little messy) The question is - how do I test if reactivity is preserved? More specifically, I have this test, which currently fails because the createEffect does not trigger and I don't quite know whether the test is wrong, or the implementation is (it could be both): The test

  it('should be reactive', () => {
    createRoot((dispose) => {
      const store = createArrayStore<{ id: number }>();
      let effectCount = 0;
      createEffect(() => {
        store.get();
        effectCount++;
      });

      store.add({ id: 1 });
      expect(effectCount).toBe(1); // Initial effect + one for the add

      store.mutateElement({ id: 1 }, (el) => ({ ...el, id: 2 }));
      expect(effectCount).toBe(2);

      dispose();
    });
  });

  it('should be reactive', () => {
    createRoot((dispose) => {
      const store = createArrayStore<{ id: number }>();
      let effectCount = 0;
      createEffect(() => {
        store.get();
        effectCount++;
      });

      store.add({ id: 1 });
      expect(effectCount).toBe(1); // Initial effect + one for the add

      store.mutateElement({ id: 1 }, (el) => ({ ...el, id: 2 }));
      expect(effectCount).toBe(2);

      dispose();
    });
  });

A subset of the code:

export function createArrayStore<T extends object>(initValue?: T[]): ArrayStore<T> {
    const [currentValue, setStore] = createStore<T[]>(initValue ?? []);
    return {
        get: () => currentValue,
        set: setStore,
        add: (value: T) => {
            setStore(prev => [...prev, value]);
            return () => { //Returns a function for removing the element again
                setStore(prev => prev.filter((v) => v !== value));
            };
        },
        ...
   }
}

export function createArrayStore<T extends object>(initValue?: T[]): ArrayStore<T> {
    const [currentValue, setStore] = createStore<T[]>(initValue ?? []);
    return {
        get: () => currentValue,
        set: setStore,
        add: (value: T) => {
            setStore(prev => [...prev, value]);
            return () => { //Returns a function for removing the element again
                setStore(prev => prev.filter((v) => v !== value));
            };
        },
        ...
   }
}

62 replies

SSolidJS

•Created by Fexelitche on 10/9/2024 in #support

Are component props reactive?

Hi, I've used solid for some time now, and just need some clarification on how props are handled in regards to the reactivity graph. My question can be boiled down to: If a give a prop the value of some Accessor (propName={accessor()}) - will the sub component always update based on where and how that prop is used in the sub component? Similarly, if I give a prop, which changes state, but isn't given as a signal accessed through the Accessor, will this update the sub component? Also, what is the convention for passing props? As signals, or as actual values, which may or may not come from a signal?

11 replies

SSolidJS

•Created by Fexelitche on 10/4/2024 in #support

Why can I return a function from onMount?

Quick question: I'm allowed to (as in "TypeScript allows me to") return a function from the function I declare inside onMount. The docs does not comment on this (https://docs.solidjs.com/reference/lifecycle/on-mount), so what does it do? When is the returned function run? Example:

    onMount(() => {
        const subscriptionID = props.plexer.subscribe(PLAYER_MOVE_EVENT, (event) => {
            if (
                event.playerID === props.backend.localPlayer.id
                && event.locationID === props.colonyLocation.locationID
            ) {
                setUserIsHere(true);
            }
        });

        return () => {
            props.plexer.unsubscribe(subscriptionID);
        }
    })

    onMount(() => {
        const subscriptionID = props.plexer.subscribe(PLAYER_MOVE_EVENT, (event) => {
            if (
                event.playerID === props.backend.localPlayer.id
                && event.locationID === props.colonyLocation.locationID
            ) {
                setUserIsHere(true);
            }
        });

        return () => {
            props.plexer.unsubscribe(subscriptionID);
        }
    })

15 replies

SSolidJS

•Created by Fexelitche on 9/26/2024 in #support

Multiplayer in SolidJS

Hi, More of a theoretical question, than a practical one: How would one best handle various amounts of async messages from a single websocket connection using the solidjs reactivity graph? As how this case is different a chat room - not really. However any message needs to be made available to any amount of "listeners" within the same dom (so a lot of passing an Accessor to a signal around potentially), and there is also a performance requirement. So it would be nice if any handlers of some event did so in a defferred fashion - as to not have the ui stutter or accidentally handling events linearly rather than concurrently. Also, I admit I havn't investigated WebWorkers much, would it be possible to dispatch a pool of those for handling events? And is SolidJS able to handle potentially parrallel updates to the graph? Any input is appreciated. 😄

9 replies

Gaming

Programming