ellers Comments - Answer Overflow

ellers

Posts Comments

SSolidJS

•Created by Erfan on 5/13/2025 in #support

Rendering dynamic components

38 replies

SSolidJS

•Created by Erfan on 5/13/2025 in #support

Rendering dynamic components

To confirm, a button should render inside another button? My 2c is not to put components into signals or stores, but use any old data and then a For loop or other construct to make buttons out of the data.

38 replies

SSolidJS

•Created by ellers on 5/8/2025 in #support

Async Context and Store using route param

Thank you - I'd struggled to understand how createMemo helped in this case!

13 replies

SSolidJS

•Created by ellers on 5/8/2025 in #support

Async Context and Store using route param

Thanks for the detailed answer! Here's where I've got to, which works but I'm really not sure about the use of memo:

export const ProjectProvider: ParentComponent<{ key: string }> = (props) => {
  const projectQuery = createAsync(() =>
    api.projects.project.query({ key: props.key })
  )

  const contextValue = createMemo(() => {
    const data = projectQuery()
    if (data) {
      return makeProjectContext(data)
    }
    return undefined
  })

  return (
    <Suspense fallback={<p>Loading project data...</p>}>
      <Show when={contextValue()} keyed>
        {(ctx) => (
          <ProjectContext.Provider value={ctx}>
            {props.children}
          </ProjectContext.Provider>
        )}
      </Show>
    </Suspense>
  )
}

export const ProjectProvider: ParentComponent<{ key: string }> = (props) => {
  const projectQuery = createAsync(() =>
    api.projects.project.query({ key: props.key })
  )

  const contextValue = createMemo(() => {
    const data = projectQuery()
    if (data) {
      return makeProjectContext(data)
    }
    return undefined
  })

  return (
    <Suspense fallback={<p>Loading project data...</p>}>
      <Show when={contextValue()} keyed>
        {(ctx) => (
          <ProjectContext.Provider value={ctx}>
            {props.children}
          </ProjectContext.Provider>
        )}
      </Show>
    </Suspense>
  )
}

I've noted that the Suspense doesn't work - if I put an artificial delay in the async call, nothing displays at all. I can live with it, but I don't really understand it. Thanks for your comments so far. Any additional insights, particularly about <Suspense> and the memo would be great.

13 replies

SSolidJS

•Created by ellers on 5/8/2025 in #support

Async Context and Store using route param

Thanks for the repy @Madaxen86 ! Re tRPC, it's a good point that I may not need that. I'd used that on a previous project and carried it over. But ... putting that to the side, if I say that the async query function is just a setTimout followed by returning hard-coded data, I can't figure out how to get the result of that into the context. A key point is that the data is held in a store and then manipulated by functions provided in the context, so I'm not concerned with deduping queries here.

13 replies

SSolidJS

•Created by ellers on 5/8/2025 in #support

Async Context and Store using route param

You can see the WIP version of makeProjectContext below, and my confusion how to go from an empty placeholder store to the real data from the API:

export const makeProjectContext = () => {

  // Using placeholder content in here... don't know how to wait for
  // the result of createAsync to put data into the store.
  const [project, updateProject] = createStore<ProjectContextData>({
    key: 'foo',
    name: 'Foo',
    scenes: [{
      kind: 'image-panel',
      label: 'An image',
      img: 'foo.jpg'
    }],
    currentScene: 0,
  })

  const gotoScene = (i: number) => {
    if (i >= 0 && i <= Project.scenes.length) {
      updateProject('currentScene', i)
    }
  }
  const sceneCount = () => Project.scenes.length

  return {
    Project,
    updateProject,
    gotoScene,
    sceneCount,
  } as const
}

export const makeProjectContext = () => {

  // Using placeholder content in here... don't know how to wait for
  // the result of createAsync to put data into the store.
  const [project, updateProject] = createStore<ProjectContextData>({
    key: 'foo',
    name: 'Foo',
    scenes: [{
      kind: 'image-panel',
      label: 'An image',
      img: 'foo.jpg'
    }],
    currentScene: 0,
  })

  const gotoScene = (i: number) => {
    if (i >= 0 && i <= Project.scenes.length) {
      updateProject('currentScene', i)
    }
  }
  const sceneCount = () => Project.scenes.length

  return {
    Project,
    updateProject,
    gotoScene,
    sceneCount,
  } as const
}

13 replies

Gaming

Programming