Fexelitche
Fexelitche
SSolidJS
Created by Fexelitche on 11/26/2024 in #support
Mass Normalization of Props
Hi all, I find myself in the situation of wanting to provide non-reactive alternatives for some component props, i.e. allowing other devs to provide any of
interface SomeProps {
foo?: Accessor<T> | T; // Accessor<T> | T | undefined
}
interface SomeProps {
foo?: Accessor<T> | T; // Accessor<T> | T | undefined
}
Currently, I've done this manually by; for any property x, of type T (literal), x = () => T. Which in code is a whole lot of if statements.
Now, I could see how this could be a generic utility function - with support for providing defaults too, so does this exist already? I'm aware of mergeProps, but that isn't exactly what I'm looking for. I'm also (now at least), aware of the babel pre-processing plugin, which seems handy enough, but I recon a function like the one described above would be pretty useful overall for allowing greater flexibility for all component props. Plugin or not.
31 replies
SSolidJS
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