Maciek50322
Maciek50322
PostsComments
SSolidJS
Created by KiaClouth on 10/14/2024 in #support
How to reduce undefined judgments
I mean in every context that executes after onMount (in which you set the engine) you are guarenteed to have not null engine(), so you can write engine()!.dispose() Also if you don't like the ! you can do 
const e = engine();
if (e) {
  e.scene = {}
}
const e = engine();
if (e) {
  e.scene = {}
}
19 replies
SSolidJS
Created by KiaClouth on 10/14/2024 in #support
How to reduce undefined judgments
Well when you want to use the engine inside jsx, then Show can do it the way I used it above. Inside onMount and createEffect it's guaranteed that refs will not be nulls (if they are actually used / mounted).
19 replies
SSolidJS
Created by KiaClouth on 10/14/2024 in #support
How to reduce undefined judgments
You can do something like that with <Show> https://playground.solidjs.com/anonymous/759ff1d4-b587-4a1c-b14f-375556f39642 when you pass the function to <Show>'s children, you get the argument of accessor to truthy when value
19 replies
SSolidJS
Created by jrainearwills on 10/13/2024 in #support
`createContext`, What's the point?
You can pass the component state to children, without knowing which ones will need / use this state, I used it like here: 
function DraggableNodesArea(props) {
  const [zoom, setZoom] = createSignal(1);
  return (
    <NodesAreaContext.Provider
      value={{
        zoom,
      }}
    >
      {props.children}
    </NodesAreaContext.Provider>
  );
}

function DraggableNode(props) {
  const areaInfo = useContext(NodesAreaContext);
  return (
    ...
  );
}

function App() {
  return (
    <DraggableNodesArea>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
    </DraggableNodesArea>
  );
}
function DraggableNodesArea(props) {
  const [zoom, setZoom] = createSignal(1);
  return (
    <NodesAreaContext.Provider
      value={{
        zoom,
      }}
    >
      {props.children}
    </NodesAreaContext.Provider>
  );
}

function DraggableNode(props) {
  const areaInfo = useContext(NodesAreaContext);
  return (
    ...
  );
}

function App() {
  return (
    <DraggableNodesArea>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
      <DraggableNode x={...} y={...}/>
    </DraggableNodesArea>
  );
}
Global state for this DraggableNodesArea doesn't really make sense here. I use the zoom to properly change nodes' x and y. If I were to retrieve the zoom (which is controlled by DraggableNodesArea) outside to App just to pass them as props to DraggableNode is just more mess, and the DraggableNodesArea is reusable - you can have multiple "tree" states instead of one global
5 replies
SSolidJS
Created by Guillaume on 9/21/2024 in #support
Proxy error
If you want to pass control to the function caller, you can do something like that: 
const changeConfig: SetStoreFunction<Config> = (...configNextSetterArgs: any[]) => {
  batch(() => {
    (setState as any)("config", ...configNextSetterArgs);
    setState(produce(state => {
      state.victories = 0;
      state.losses = 0;
      state.isRunning = false;
      const graph = getGraph(state);
      state.machine = graphToMachine(graph, state.config.ballsPerColor);
    }))
  })
}
const changeConfig: SetStoreFunction<Config> = (...configNextSetterArgs: any[]) => {
  batch(() => {
    (setState as any)("config", ...configNextSetterArgs);
    setState(produce(state => {
      state.victories = 0;
      state.losses = 0;
      state.isRunning = false;
      const graph = getGraph(state);
      state.machine = graphToMachine(graph, state.config.ballsPerColor);
    }))
  })
}
I added ...configNextSetterArgs: any[], (setState as any), because typescript can't match the types for SetStoreFunction, probably because it's quite complex
5 replies
SSolidJS
Created by Guillaume on 9/21/2024 in #support
Proxy error
I see that you use changeConfig different ways 
changeConfig(c => setGraphType(c, e.currentTarget.value))
...
changeConfig(produce(conf => {
  (conf.graphType as KingType).width = Number(e.currentTarget.value);
}))
changeConfig(c => setGraphType(c, e.currentTarget.value))
...
changeConfig(produce(conf => {
  (conf.graphType as KingType).width = Number(e.currentTarget.value);
}))
the changeConfig already uses produce, I think using produce second time inside is the thing that breaks?
5 replies
SSolidJS
Created by Danielius on 8/3/2024 in #support
memo is rerun but any side effects subscribed are'nt reran
as suggested https://discord.com/channels/722131463138705510/958428791124951050/1269900932259381290 maybe these two sandboxes take different priorities in packages if duplication of dependencies is the case
61 replies
SSolidJS
Created by Danielius on 8/3/2024 in #support
memo is rerun but any side effects subscribed are'nt reran
that's really weird. I'll check it locally later
61 replies
SSolidJS
Created by Danielius on 8/3/2024 in #support
memo is rerun but any side effects subscribed are'nt reran
the inverse
61 replies
SSolidJS
Created by Danielius on 8/3/2024 in #support
memo is rerun but any side effects subscribed are'nt reran
So createWritableMemo just doesn't work at all in playground https://playground.solidjs.com/anonymous/ccb67468-0581-4d36-a7c9-0ee5cbac4e4a
61 replies
SSolidJS
Created by Danielius on 8/3/2024 in #support
memo is rerun but any side effects subscribed are'nt reran
Yeah so that's weird, playground even though having newest version works differently than just copied code. And checked that it isn't about the issue above
61 replies
SSolidJS
Created by Danielius on 8/3/2024 in #support
memo is rerun but any side effects subscribed are'nt reran
There was an issue with createWritableMemo https://github.com/solidjs-community/solid-primitives/issues/633 but it's resolved, so maybe you don't have latest version?
61 replies
SSolidJS
Created by gerard on 8/1/2024 in #support
Pass props from Component to props.children
with the children api I linked you can change only html properties, not the props of function component
10 replies
SSolidJS
Created by gerard on 8/1/2024 in #support
Pass props from Component to props.children
If you only want to change class of the Child, which returns the html element, you can change it no problem with this: https://docs.solidjs.com/reference/component-apis/children like here https://www.solidjs.com/tutorial/props_children Also what's stopping you from doing: 
function Parent (props) {
  // here control props of Child however you want
  return <div>
    <Child />
  </div>
}
function Parent (props) {
  // here control props of Child however you want
  return <div>
    <Child />
  </div>
}
10 replies
SSolidJS
Created by J on 7/20/2024 in #support
Question Relating to Arrays
Note that with createMutable lots of setting and getting signals is implicit, and you can create infinite loop with 
createEffect(() => {
  array[0].x += 1;
});
createEffect(() => {
  array[0].x += 1;
});
Infinite loop happens, because array[0].x += 1; is shorthand for array[0].x = array[0].x + 1; and so on the left side we have implicit setter, and on right side we have implicit getter, that means the effect is subscribed to array[0].x getter, but also it triggers change with setter array[0].x = on the same entry, and because setter triggers getter, effect runs again after it sets new value
22 replies
SSolidJS
Created by J on 7/20/2024 in #support
Question Relating to Arrays
Previously I created copies of array to let setters know that the value actually changed (because solid performs equality check on each set by default - this can be avoided with signal's options by doing) 
const [value, setValue] = createSignal(123, { equals: false })
const [value, setValue] = createSignal(123, { equals: false })
With this { equals: false }, everywhere value() is used, it will be triggered on setValue even if the previous value is the same
22 replies
SSolidJS
Created by J on 7/20/2024 in #support
Question Relating to Arrays
I think you are looking for createMutable 
const array = createMutable([
  { id: 1, x: 5 },
  { id: 2, x: 4 },
  { id: 3, x: 6 },
])

createEffect(() => {
    console.log(array)
});

// triggers effect
array.splice(1, 1);
const array = createMutable([
  { id: 1, x: 5 },
  { id: 2, x: 4 },
  { id: 3, x: 6 },
])

createEffect(() => {
    console.log(array)
});

// triggers effect
array.splice(1, 1);
It uses proxies to perform any operation on object / it's properties, but also has it's own pitfalls
22 replies
SSolidJS
Created by J on 7/20/2024 in #support
Question Relating to Arrays
This seems to be the simplest way, not sure for which "best" you look for
22 replies
SSolidJS
Created by J on 7/20/2024 in #support
Question Relating to Arrays
Both ways are valid, one might argue about performance but it's really dependent on use case & if you track each element separately or if you track whole array
22 replies
SSolidJS
Created by J on 7/20/2024 in #support
Question Relating to Arrays
You can, so with swapping values above example would be something like that 
const [array, setArray] = createStore([
  { id: 1, x: 5 },
  { id: 2, x: 4 },
  { id: 3, x: 6 },
])
const onIndexClick = (idx) => {
  const length = array.length;
  batch(() => {
    for (let i = idx; i < length - 1; i++) {
      setArray(i, array[i + 1]);
    }
    setArray("length", length - 1);
  })
}
const [array, setArray] = createStore([
  { id: 1, x: 5 },
  { id: 2, x: 4 },
  { id: 3, x: 6 },
])
const onIndexClick = (idx) => {
  const length = array.length;
  batch(() => {
    for (let i = idx; i < length - 1; i++) {
      setArray(i, array[i + 1]);
    }
    setArray("length", length - 1);
  })
}
22 replies