SolidJS•10mo ago

SolidJS Universal - How does the method of tree creation get chosen?

I'm currently using SolidJS universal in order to dynamically create multiple trees of nodes as the primary tree is being built so that there is no need for traversal for every insertNode(). These other trees skip nodes that are in the primary tree, but still need to connect to nodes that are higher/lower in the tree, if that makes sense. The trouble that I ran into was that in some cases (i.e. shallow trees), the tree is being created in a breadth-first approach. In other cases (i.e. wide/deep trees), the tree is being created in a depth-first approach. This makes it much more complex to know if nodes are being added bottom-up or top-down, and was wondering if there's a way to configure this, or know if there's a way of figuring out which method will be chosen. Thanks!

7 Replies

DannyBoyOP•10mo ago

Just to give an HTML example for better understanding, this tree will be created in a depth-first method:

<div>
  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div>
    <img />
  </div>
</div>

+div
+div
+p
+p
+p
p->div
p->div
p->div
div->div
+div
+img
img->div
div->div

<div>
  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div>
    <img />
  </div>
</div>

+div
+div
+p
+p
+p
p->div
p->div
p->div
div->div
+div
+img
img->div
div->div

This next example will be created in a breadth-first method:

<div>
  <div>
    <img />
  </div>
  <p></p>
</div>

+div
+div
+img
+p
div->div
p->div
img->div

<div>
  <div>
    <img />
  </div>
  <p></p>
</div>

+div
+div
+img
+p
div->div
p->div
img->div

I took a look into dom-expressions/universal (https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/universal.js) and the complexity deterred me a little bit 😛

apollo79•10mo ago

34444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Sorry, my cat... 🙀🤣 I never thought that this would actually happen

Birk Skyum•10mo ago

which solid-universal repository are you using?

DannyBoyOP•10mo ago

Hi sorry I am using what is packaged in solidjs version 1.8.7 and checking the git history of the universal.js file I sent above, it hasn't been changed in >2 years I took a look at the dom-expressions package again and was trying to work out exactly what it was doing as it calls the component functions, and I'm wondering if it has anything to do with how the tree is split into different components. If I move these elements from 3 Component into 1, the behavior changes:

const MyComponent = () => {
  return (
    <div>
      <Button1 />
      <Button2 />
    </div>
  );
};

const Button1 = () => {
  return (
    <div>
      <p />
      <p />
      <p />
    </div>
  );
}

const Button2 = () => {
  return (
    <div>
      <img />
    </div>
  );
}

const MyComponent = () => {
  return (
    <div>
      <Button1 />
      <Button2 />
    </div>
  );
};

const Button1 = () => {
  return (
    <div>
      <p />
      <p />
      <p />
    </div>
  );
}

const Button2 = () => {
  return (
    <div>
      <img />
    </div>
  );
}

This tree forms the same way as the first html tree sample I shared (depth first). 1 component:

const MyComponent = () => {
  return (
    <div>
      <div>
        <p />
        <p />
        <p />
      </div>
      <div>
        <img />
      </div>
    </div>
  );
};

const MyComponent = () => {
  return (
    <div>
      <div>
        <p />
        <p />
        <p />
      </div>
      <div>
        <img />
      </div>
    </div>
  );
};

this component forms in a breadth-first approach:

+div
+div
+p
+p
+p
+div
+img
div->div
div->div
p->div
p->div
p->div
img->div

+div
+div
+p
+p
+p
+div
+img
div->div
div->div
p->div
p->div
p->div
img->div

mdynnl•10mo ago

https://playground.solidjs.com/anonymous/e852440d-e23f-41a3-83c6-71ae8766f4f3 check the output tab with universal rendering checked although it's essentially the same for other modes

DannyBoyOP•10mo ago

Oooh this is interesting. Is this the output from solid babel?

mdynnl•10mo ago

yes babel-plugin-jsx-dom-expressions which is used in babel-preset-solid

Gaming

Programming

SolidJS Universal - How does the method of tree creation get chosen?