Strange Posts - Answer Overflow

Strange

•Created by Strange on 4/15/2024 in #support

Refs to children elements?

Quick one. Could have multiple answers. I have a passthrough component that renders two children elements in a specific layout. I want to grab refs to these two child elements. Currently the way that I am rendering these two child elements are just by props.children[0] and props.children[1], but that doesn't give me a slot to stick a couple of refs in them. How would I go about doing that?

26 replies

SSolidJS

•Created by Strange on 4/15/2024 in #support

Stores, context, & reactivity

Hey crew, got another question for y'all I have the following code:

export function MemoryProvider(props: { children: JSX.Element }) {
  const audioContext = new window.AudioContext();
  const masterAnalyser = audioContext.createAnalyser();

  const [panelsStore, setPanelsStore] = createStore({
    panels: [] as PanelFunction[]
  });

  const memory = {
    audioContext,
    masterAnalyser,

    panels: panelsStore.panels, // This line is the problem
    addPanel(NewPanel: PanelFunction) {
      console.log("Adding a panel...");
      return setPanelsStore("panels", panelsStore.panels.length, () => NewPanel);
    },
    removePanel(OldPanel: PanelFunction) {
      console.log("Removing a panel...");
      return setPanelsStore("panels", panelsStore.panels.filter((panel) => panel !== OldPanel));
    },

    mousePosition: useMousePosition()
  };

  return (
    <MemoryContext.Provider value={memory}>
      {props.children}
    </MemoryContext.Provider>
  );
}

export function MemoryProvider(props: { children: JSX.Element }) {
  const audioContext = new window.AudioContext();
  const masterAnalyser = audioContext.createAnalyser();

  const [panelsStore, setPanelsStore] = createStore({
    panels: [] as PanelFunction[]
  });

  const memory = {
    audioContext,
    masterAnalyser,

    panels: panelsStore.panels, // This line is the problem
    addPanel(NewPanel: PanelFunction) {
      console.log("Adding a panel...");
      return setPanelsStore("panels", panelsStore.panels.length, () => NewPanel);
    },
    removePanel(OldPanel: PanelFunction) {
      console.log("Removing a panel...");
      return setPanelsStore("panels", panelsStore.panels.filter((panel) => panel !== OldPanel));
    },

    mousePosition: useMousePosition()
  };

  return (
    <MemoryContext.Provider value={memory}>
      {props.children}
    </MemoryContext.Provider>
  );
}

And I am getting a warning from solid lint (reactivity) stating that panelsStore.panels should be wrapped in a useEffect or used inside of JSX or else the updates will be ignored. I'm not entirely sure what to do here, because the memory object is being passed into the value for the context provider.

13 replies

SSolidJS

•Created by Strange on 4/14/2024 in #support

Passing JSX around: Computations created outside a `createRoot` or `render` will never be disposed

Alright folks, buckle in because this is a long one. I've done some research through this channel already, searching for computations created outside a first, and the closest thread to my problem is <#1176430732827172874> this one. This user is doing something similar to what I'm doing- I'm storing JSX elements in an array in a store in a context, and I'm just posting to that array every time a button is clicked, creating a new element each time the button is clicked. I then have a <For> component which will go through and render each of those components. This works fine! However I am running up against an odd bug that I truly do not know how to solve. Trying to then access the context fails within these generated components, telling me that the context is undefined. Additionally, trying to create refs to elements within these elements fail. I have a couple of guesses as to why this is the case: 1. The components that I am generating dynamically do not have owners since they were created "out of scope" (i.e. at the click of a button). And without an owner, my guess is that solid doesn't know where the context is or what the current values of the context are with no frame of reference. Unfortunately, with my current pattern, I have no idea how to set the owner of these generated components manually. 2. As a react-first dev, Solid has a couple of oddities such as this. This type of pattern is possible in react because at the end of the day, elements in react are just a bunch of objects. Solid, to my understanding has a compiler, and this changes things. I'll see if I can post a minimally reproducible environment, but this codebase is large and complicated it may take me a while to reproduce the exact bug I'm experiencing.

12 replies

Gaming

Programming