Server side code for facesjs using fast-xml-parser & svg-path-bounding-box

This PR tests out creating a facesjs SVG "server-side", or simply using functions that do not require DOM-aware JS functions like .lastChild, .getAttribute, .childNodes, and mostly importantly, .getBbox

Explanation/Thoughts:

Instead of starting Display by attaching a blank SVG to the DOM and then attaching elements into it, we create a blank JSON object with our SVG metadata.
We'll use this JSON object for the entirety of the process, storing sub-elements inside of it, and then at the end, using XMLBuilder's build function to convert the JSON ➡️ SVG/XML
Inside this JSON we can store child elements, as well as attributes, as a key like "@_width": 400 or "@_d": "M105..."
We read in the SVG elements from svgs & svgs.js the same, but use XMLParser's parse function to convert SVG/XML ➡️ JSON
The really complicated part was calculating bbox, as that is an integral part of facesjs determining where to place elements. I used svg-path-bounding-box to interpret the "d" attributes that stores the actual path of the SVG, and it is able to calculate height, width, minX, maxX, etc. This can then simulate JS DOM's getBbox function

Some basic testing - adding the below code into editor.html where it calls updateDisplay

    console.time('Function performance'); 
    const iterations = 1000; 
    for (let i = 0; i < iterations; i++) {
      updateDisplay();
    }
    console.timeEnd('Function performance');

Server-side version: 1,000 runs, 795ms Existing version: 1,000 runs, 910ms

Other things to think about:

What is bundle size impact?
This function returns an SVG string rather than attaching elements directly to the DOM. If this were to integrate into facesjs, we would have to think about how to switch between server or non-server
Many of the functions are very similar to display.ts, just using XML elements instead of DOM-aware elements. Is it possible to mesh them together? Or use the same code, but make stuff like "getbbox" or "lastChild" be aware of server/non-server setting?

Generated SVG is roughly the same

Generated image is the same Via local dev environment with server_display Generated via zengm.com/facesjs/editor

Sample JSON that would be rendered to SVG

{
  "g": {
    "g": {
      "path": [
        {
          "@_fill": "#89bfd3",
          "@_stroke-width": "2",
          "@_d": "M199.8 82c3.4 0 7.2.6 8.8 1.5 1.6.8 2.9 2 2.9 2.5s.2 1.7.5 2.5c.4 1.3-1.3 1.5-12 1.5s-12.4-.2-12-1.5c.3-.8.4-1.9.3-2.5-.1-.5 1.1-1.6 2.7-2.4 1.5-.9 5.4-1.5 8.8-1.6z",
          "@_class": "s0"
        },
        {
          "@_fill": "#7a1319",
          "@_stroke-width": "6",
          "@_d": "M197.8 90.1c13.3-.1 23 .5 34.6 1.9 8.8 1.1 20.8 3 26.6 4.1 5.8 1.1 15.5 3.3 21.6 5 6 1.6 14.4 4.3 18.7 6 4.2 1.7 10.2 4.5 13.3 6.2 3.1 1.8 7.4 5 9.5 7.2 2.3 2.3 5.3 7.1 7.1 11.3 2 4.7 4 12 5.6 21 1.4 7.5 3.5 17.8 4.7 22.7 1.2 4.9 3.2 11.7 4.3 15 1.2 3.3 3 11.8 4 19 .9 7.2 1.7 17.9 1.7 24 0 6.1-.3 11.8-.7 12.7-.6 1.5-1.1 1.4-4.9-1.1-2.4-1.5-8.9-5.3-14.4-8.4-5.6-3-16.4-8.3-24-11.7-7.7-3.5-20.8-8.6-29.3-11.5-8.4-3-21.8-6.7-29.7-8.4-7.9-1.6-18.6-3.5-23.7-4.1-5.2-.5-15.4-1-22.8-1s-17.6.5-22.8 1c-5.1.6-15.8 2.5-23.7 4.1-7.9 1.7-22 5.7-31.2 8.9s-22.4 8.3-29.2 11.5c-6.9 3.1-17.9 8.6-24.5 12.2-6.6 3.6-13.2 7.4-14.6 8.4-2.3 1.6-2.7 1.7-3.1.4-.3-.8-.5-6.1-.5-11.7 0-5.7.6-15.5 1.3-21.8.8-6.3 1.9-13.5 2.5-16 .7-2.5 2.4-8.3 3.9-13 1.5-4.7 3.8-14.6 5.1-22 1.3-7.4 3.1-16.4 4-20 .9-3.6 2.7-8.9 4.1-11.9 1.4-3 4.3-7.3 6.5-9.5 2.1-2.3 7.3-6 11.5-8.2 4.2-2.3 10.8-5.3 14.8-6.7 4-1.4 11.5-3.7 16.8-5.1 5.3-1.4 13.5-3.3 18.2-4.2 4.7-.9 15.8-2.7 24.5-3.9 11.2-1.6 21.1-2.3 34.2-2.4z"
        },
        {
          "@_fill": "#7a1319",
          "@_stroke-width": "4",
          "@_d": "M69.6 237.7c-6.6 3.6-13.2 7.4-14.7 8.4-2.2 1.6-2.7 1.7-3.1.4-.2-.8-.4-6.1-.4-11.7-.1-5.7.6-15.5 1.3-21.8.7-6.3 1.9-13.5 2.5-16 .6-2.5 2.4-8.3 3.9-13 1.5-4.7 3.8-14.6 5.1-22 0 0 12 72.1 5.4 75.7zM336.8 162c1.3 7.4 3.6 17.3 5.1 22 1.5 4.7 3.2 10.5 3.9 13 .6 2.5 1.7 9.7 2.5 16 .7 6.3 1.3 16.1 1.3 21.8 0 5.6-.2 10.9-.5 11.7-.4 1.3-.8 1.2-3.1-.4-1.4-1-8-4.8-14.6-8.4-6.6-3.6 5.4-75.7 5.4-75.7z"
        },
        {
          "@_fill": "#89bfd3",
          "@_stroke-width": "6",
          "@_d": "M196.2 197c9.2 0 20.8.3 25.9.7 5 .4 13.6 1.5 19.1 2.4 5.6 1 14.4 2.8 19.7 4.1 5.3 1.3 13.7 3.7 18.7 5.2 5 1.6 14.7 5.1 21.6 7.9 6.8 2.7 17 7.3 22.5 10 5.6 2.8 14.9 7.9 20.6 11.2 5.8 3.4 12.4 7.5 14.6 9.2 3.2 2.4 4.1 3.6 4.1 5.6 0 1.6-.7 3.3-1.9 4.2-1.1.9-3.2 1.6-4.8 1.6-2.1 0-5.1-1.4-10.8-5.1-4.3-2.8-13.3-8-19.9-11.6-6.6-3.6-19.3-9.5-28.3-13.1-8.9-3.7-20.6-8-25.9-9.6-5.2-1.5-13.4-3.7-18.2-4.9-4.7-1.1-14.9-2.9-22.5-4-11.3-1.7-17.1-2-30.7-2-13.6 0-19.4.3-30.7 2-7.6 1.1-17.8 2.9-22.5 4-4.8 1.2-13 3.4-18.2 4.9-5.3 1.6-17 5.9-25.9 9.6-9 3.6-21.7 9.5-28.3 13.1-6.6 3.6-15.6 8.8-19.9 11.6-6.3 4.1-8.6 5.1-11.3 5.1-1.8 0-4-.5-4.8-1.2-.8-.6-1.4-2.4-1.4-4 0-2.2.8-3.4 3.8-5.9 2.1-1.8 7.4-5.3 11.7-7.8 4.3-2.5 12.8-7.2 18.9-10.4 6.1-3.2 17.6-8.4 25.5-11.7 7.9-3.2 18.7-7.2 24-8.8 5.3-1.7 14.7-4.2 21.1-5.7 6.3-1.5 17.3-3.6 24.4-4.6 10.3-1.5 16.5-2 29.8-2z"
        }
      ],
      "@_stroke": "#000"
    }
  },
  "@_feature": "accessories"
}

And the XML/SVG it would render as

<g feature="accessories">
    <g transform=" scale(0.8 1) translate(50.000000000000014 0)">
        <g stroke="#000">
            <path fill="#89bfd3" stroke-width="2.2222222222222223" d="M199.8 82c3.4 0 7.2.6 8.8 1.5 1.6.8 2.9 2 2.9 2.5s.2 1.7.5 2.5c.4 1.3-1.3 1.5-12 1.5s-12.4-.2-12-1.5c.3-.8.4-1.9.3-2.5-.1-.5 1.1-1.6 2.7-2.4 1.5-.9 5.4-1.5 8.8-1.6z" class="s0"></path>
            <path fill="#7a1319" stroke-width="6.666666666666666" d="M197.8 90.1c13.3-.1 23 .5 34.6 1.9 8.8 1.1 20.8 3 26.6 4.1 5.8 1.1 15.5 3.3 21.6 5 6 1.6 14.4 4.3 18.7 6 4.2 1.7 10.2 4.5 13.3 6.2 3.1 1.8 7.4 5 9.5 7.2 2.3 2.3 5.3 7.1 7.1 11.3 2 4.7 4 12 5.6 21 1.4 7.5 3.5 17.8 4.7 22.7 1.2 4.9 3.2 11.7 4.3 15 1.2 3.3 3 11.8 4 19 .9 7.2 1.7 17.9 1.7 24 0 6.1-.3 11.8-.7 12.7-.6 1.5-1.1 1.4-4.9-1.1-2.4-1.5-8.9-5.3-14.4-8.4-5.6-3-16.4-8.3-24-11.7-7.7-3.5-20.8-8.6-29.3-11.5-8.4-3-21.8-6.7-29.7-8.4-7.9-1.6-18.6-3.5-23.7-4.1-5.2-.5-15.4-1-22.8-1s-17.6.5-22.8 1c-5.1.6-15.8 2.5-23.7 4.1-7.9 1.7-22 5.7-31.2 8.9s-22.4 8.3-29.2 11.5c-6.9 3.1-17.9 8.6-24.5 12.2-6.6 3.6-13.2 7.4-14.6 8.4-2.3 1.6-2.7 1.7-3.1.4-.3-.8-.5-6.1-.5-11.7 0-5.7.6-15.5 1.3-21.8.8-6.3 1.9-13.5 2.5-16 .7-2.5 2.4-8.3 3.9-13 1.5-4.7 3.8-14.6 5.1-22 1.3-7.4 3.1-16.4 4-20 .9-3.6 2.7-8.9 4.1-11.9 1.4-3 4.3-7.3 6.5-9.5 2.1-2.3 7.3-6 11.5-8.2 4.2-2.3 10.8-5.3 14.8-6.7 4-1.4 11.5-3.7 16.8-5.1 5.3-1.4 13.5-3.3 18.2-4.2 4.7-.9 15.8-2.7 24.5-3.9 11.2-1.6 21.1-2.3 34.2-2.4z"></path>
            <path fill="#7a1319" stroke-width="4.444444444444445" d="M69.6 237.7c-6.6 3.6-13.2 7.4-14.7 8.4-2.2 1.6-2.7 1.7-3.1.4-.2-.8-.4-6.1-.4-11.7-.1-5.7.6-15.5 1.3-21.8.7-6.3 1.9-13.5 2.5-16 .6-2.5 2.4-8.3 3.9-13 1.5-4.7 3.8-14.6 5.1-22 0 0 12 72.1 5.4 75.7zM336.8 162c1.3 7.4 3.6 17.3 5.1 22 1.5 4.7 3.2 10.5 3.9 13 .6 2.5 1.7 9.7 2.5 16 .7 6.3 1.3 16.1 1.3 21.8 0 5.6-.2 10.9-.5 11.7-.4 1.3-.8 1.2-3.1-.4-1.4-1-8-4.8-14.6-8.4-6.6-3.6 5.4-75.7 5.4-75.7z"></path>
            <path fill="#89bfd3" stroke-width="6.666666666666666" d="M196.2 197c9.2 0 20.8.3 25.9.7 5 .4 13.6 1.5 19.1 2.4 5.6 1 14.4 2.8 19.7 4.1 5.3 1.3 13.7 3.7 18.7 5.2 5 1.6 14.7 5.1 21.6 7.9 6.8 2.7 17 7.3 22.5 10 5.6 2.8 14.9 7.9 20.6 11.2 5.8 3.4 12.4 7.5 14.6 9.2 3.2 2.4 4.1 3.6 4.1 5.6 0 1.6-.7 3.3-1.9 4.2-1.1.9-3.2 1.6-4.8 1.6-2.1 0-5.1-1.4-10.8-5.1-4.3-2.8-13.3-8-19.9-11.6-6.6-3.6-19.3-9.5-28.3-13.1-8.9-3.7-20.6-8-25.9-9.6-5.2-1.5-13.4-3.7-18.2-4.9-4.7-1.1-14.9-2.9-22.5-4-11.3-1.7-17.1-2-30.7-2-13.6 0-19.4.3-30.7 2-7.6 1.1-17.8 2.9-22.5 4-4.8 1.2-13 3.4-18.2 4.9-5.3 1.6-17 5.9-25.9 9.6-9 3.6-21.7 9.5-28.3 13.1-6.6 3.6-15.6 8.8-19.9 11.6-6.3 4.1-8.6 5.1-11.3 5.1-1.8 0-4-.5-4.8-1.2-.8-.6-1.4-2.4-1.4-4 0-2.2.8-3.4 3.8-5.9 2.1-1.8 7.4-5.3 11.7-7.8 4.3-2.5 12.8-7.2 18.9-10.4 6.1-3.2 17.6-8.4 25.5-11.7 7.9-3.2 18.7-7.2 24-8.8 5.3-1.7 14.7-4.2 21.1-5.7 6.3-1.5 17.3-3.6 24.4-4.6 10.3-1.5 16.5-2 29.8-2z"></path>
        </g>
    </g>
</g>

zengm-games / facesjs

Server side code for facesjs using fast-xml-parser & svg-path-bounding-box #29