Early performance testing of the `inline_asset_content` filter

test-case.liquid

{% comment %}
  Findings: 
    - The filter works really good as far as I can tell
    - Need to test with a bunch of SVGs (only one maybe hardly stress the performance) with effective caching
    - If you use the SVG multiple times, do not hesitate to store the markup in a variable instead of using the filter multiple times
    
  First batch : One SVG / no filter piped to the markup / 50k iterations
    - Case #1, #2 and #3: around 350ms (no significant difference)
    - Case #4: around 2500ms+

  Second batch : One SVG / piping ( | replace: '<svg', '<svg style="border: 1px solid red;"' ) to the markup / 50k iterations
    - Case #1: Untouched as far as I can tell (regarding batch #1)
    - Case #2 and #3: around 1500ms+
    - Case #4: around 5000ms+
{% endcomment %}

{% liquid
  capture test_case
    case section.settings.test_case
      when 1
        # Test #1: "inline_asset_content" filter, one-time use
        echo 'First case' | append: '<br>'

        assign svg_markup = 'svg-test.svg' | inline_asset_content 
        for i in (1..section.settings.iteration_count)
          echo svg_markup
        endfor

      when 2
        # Test #2: "inline_asset_content" filter, multiple uses
        echo 'Second case' | append: '<br>'

        for i in (1..section.settings.iteration_count)
          assign svg_markup = 'svg-test.svg' | inline_asset_content | replace: '<svg', '<svg style="border: 1px solid red;"'
          echo svg_markup
        endfor

      when 3
        # Test #3: svg library snippet, one-time use
        echo 'Third case' | append: '<br>'

        capture svg_markup
          render 'mx-svg-library', svg: 'test'
        endcapture

        for i in (1..section.settings.iteration_count)
          echo svg_markup | replace: '<svg', '<svg style="border: 1px solid red;"'
        endfor

      when 4
        # Test #4: svg library snippet, multiple uses
        echo 'Fourth case' | append: '<br>'

        for i in (1..section.settings.iteration_count)
          capture svg_markup
            render 'mx-svg-library', svg: 'test'
          endcapture
          echo svg_markup | replace: '<svg', '<svg style="border: 1px solid red;"'
        endfor
    endcase
  endcapture
%}

<div class="mx-test-section">{{ test_case }}</div>

<style>
  .mx-test-section {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.15rem;
    width: 100%;
  }
  .mx-test-section svg {
    width: 1rem;
    height: 1rem;
  }
</style>

{% schema %}
{
  "name": "Template section",
  "tag": "section",
  "class": "mx-section shopify-section--test-section",
  "settings": [
    {
      "type": "range",
      "id": "test_case",
      "label": "Test case",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 1
    },
    {
      "type": "number",
      "id": "iteration_count",
      "label": "Iteration count",
      "default": 50000
    }
  ]
}
{% endschema %}