DannyBoy
DannyBoy
PostsComments
SSolidJS
Created by DannyBoy on 2/24/2024 in #support
SolidJS Universal - How does the method of tree creation get chosen?
Oooh this is interesting. Is this the output from solid babel?
12 replies
SSolidJS
Created by DannyBoy on 2/24/2024 in #support
SolidJS Universal - How does the method of tree creation get chosen?
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
12 replies
SSolidJS
Created by DannyBoy on 2/24/2024 in #support
SolidJS Universal - How does the method of tree creation get chosen?
and checking the git history of the universal.js file I sent above, it hasn't been changed in >2 years
12 replies
SSolidJS
Created by DannyBoy on 2/24/2024 in #support
SolidJS Universal - How does the method of tree creation get chosen?
Hi sorry I am using what is packaged in solidjs version 1.8.7
12 replies
SSolidJS
Created by DannyBoy on 2/24/2024 in #support
SolidJS Universal - How does the method of tree creation get chosen?
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 😛
12 replies