jmp Posts - Answer Overflow

jmp

•Created by jmp on 7/5/2023 in #support

Using SolidJS Playground in custom docs

I'd like to use the solidjs playground for interactive documentation of my library. (Should I use sandpack instead?) I noticed that an old version of solid-repl has been published to npm, but it hasn't been updated in a year. Meanwhile solid-playground seems to be chugging along, but it's not published. How can I use solidjs playground (or an equivalent live code editor) for my documentation? Thanks in advance!

4 replies

SSolidJS

•Created by jmp on 7/1/2023 in #support

What's the best way to make a docs website?

I'm building a SolidJS library and want to make a simple docs website for it. I'm hoping to leverage an existing library (not necessarily specific to Solid) for the scaffolding so I can focus on writing the contents of the docs. What do people recommend currently? Docusaurus? Vitepress? If so, how do I go about using Solid with these libraries? Thanks!

1 replies

SSolidJS

•Created by jmp on 6/24/2023 in #support

Coordinating Signals in a Layout System

Hi all, I'm trying to implement a layout system in SolidJS that works similarly to mobile frameworks like Jetpack Compose and SwiftUI. In my system, you write things like this:

<Parent>
  <Child1 />
  <Child2 />
</Parent>

<Parent>
  <Child1 />
  <Child2 />
</Parent>

And each of those components internally calls a special <Layout> component, e.g.:

const Parent = (props) => {
  const layout = ...
  const paint = ...

  return <Layout layout={layout} paint={paint}>
           {props.children}
         </Layout>
}

const Parent = (props) => {
  const layout = ...
  const paint = ...

  return <Layout layout={layout} paint={paint}>
           {props.children}
         </Layout>
}

Layout roughly looks like this:

const Layout = (props) => {
  const [scenegraph, { getBBox, updateBBox, createNode }] = useScenegraph();

  createNode(props.id);

  createEffect(() => {
     const bbox = props.layout(scenegraph[props.id].children);
     updateBBox(bbox);
  });

  return <Dynamic component={props.paint} {...scenegraphArgs} />
}

const Layout = (props) => {
  const [scenegraph, { getBBox, updateBBox, createNode }] = useScenegraph();

  createNode(props.id);

  createEffect(() => {
     const bbox = props.layout(scenegraph[props.id].children);
     updateBBox(bbox);
  });

  return <Dynamic component={props.paint} {...scenegraphArgs} />
}

Note that props.layout should be idempotent so I can safely call it more than once, even though it sets signals inside updateBBox. I need to cache/memoize props.layout since it is expensive to compute. According to the docs, it sounds like I shouldn't use createMemo since layout does have side effects. The problem I'm having is that in Parent's layout function, it needs to ensure that its children's layout functions have been run so their bboxes are up to date. E.g.:

(children) => {
  const child0BBox = getBBox(children[0]); // getBBox needs to ensure that children[0]'s layout function has been run at this point
  ...
}

(children) => {
  const child0BBox = getBBox(children[0]); // getBBox needs to ensure that children[0]'s layout function has been run at this point
  ...
}

The problem is that the parent effect runs before the child effect. What's the best way to accomplish ensure that the child layout is up to date when getBBox is called? Thanks!

33 replies

Gaming

Programming