report() - Node children respecting original node children order

[rubberbandage]

Hi,

I'm curious if there was any way to configure the output of the children from the report function to respect the order of the nodes of an svg.

I use svgi as an intermediary layer to pull out the svg data to do the following; merging ThemeProvider color in, generating named TS definitions for each svg icon, and a few other things that is not important for this request

Up until now I've only handled single layer svg's using path, however, I now have a new requirement of different elements, and I'm getting svgs show up incorrectly.

To get my point across, I have an example below which replicates the same issue.

I currently have an svg described by:

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="48" height="48" fill="yellow"/>
    <circle cx="24" cy="24" r="24" fill="red"/>
    <rect x="16" y="16" width="16" height="16" fill="blue"/>
</svg>

Which produces the following svg

const SVGI = require('svgi');
const { nodes } = new SVGI('filepath/to/test.svg').report();
console.log(nodes);

{
  type: 'svg',
  category: 'containers',
  properties: {
    width: '48',
    height: '48',
    viewBox: '0 0 48 48',
    fill: 'none',
    xmlns: 'http://www.w3.org/2000/svg'
  },
  children: [
    {
      type: 'rect',
      category: 'shapes',
      properties: [Object],
      children: []
    },
    {
      type: 'rect',
      category: 'shapes',
      properties: [Object],
      children: []
    },
    {
      type: 'circle',
      category: 'shapes',
      properties: [Object],
      children: []
    }
  ]
}

However, the rects have been grouped to the top, and produces the following shape

Is there a way for the children to be as such:

{
      type: 'rect',
      category: 'shapes',
      properties: [Object],
      children: []
    },
    {
      type: 'circle',
      category: 'shapes',
      properties: [Object],
      children: []
    },
    {
      type: 'rect',
      category: 'shapes',
      properties: [Object],
      children: []
    }

Thank you,

Using [email protected]

[Angelmmiguel]

Hello @rubberbandage,

Thank you for such a detailed issue! I couldn’t check the code yet, but the issue you’re describing seems to be a bug on SVGI. It should respect the original order of the nodes.

I need to take a look at the code to understand the root cause. I will try to fix it and push a new patch version before the end of the next week 😄.

[rubberbandage]

Thank you for the fast response @Angelmmiguel

I'm not in any rush but looking forward to the change :) Saves some quick hacks and merging data after the fact

[Angelmmiguel]

I found the issue @rubberbandage 😄. The #47 PR should fix it. I will bump some libraries before pushing the new version too.

[Angelmmiguel]

@rubberbandage I just released v1.1.2. In the end, I created a separate v1.1 branch to include only this fix. The main branch already has some changes on the SVGI API (towards v2.0).

Please, it would be great if you can try the new version and confirm it works for your use case :).

Thank you!

[rubberbandage]

Sorry about the delay in my response, I was off sick for a few days @Angelmmiguel

I was a little behind - with 1.1.0, but I've bumped the version of svgi to 1.1.2 and the changes are reflected;

Thank you very much.

[Angelmmiguel]

No worries! Hope you're feeling great now 😄.

Thank you for confirming it.