<html>
  <head>
    <title>Performance Example</title>
    <link href="style.css" rel="stylesheet" />    
  </head>
  <body>
    <h2>Performance</h2>
    <pre id="output"></div>
    <script src='../dist/text_marker.js'></script>
    <script src='./performance.js'></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        let rules = [
          textMarker.keyword('Lorem', 'LWORD'),
          textMarker.range('amet', 'AWORD'),
          textMarker.range('vitae', 'VWORD'),
          textMarker.range('id', 'IWORD'),
          textMarker.block({ open: '*', close: '*' }, 'BOLD'),
          textMarker.block({ open: '_', close: '_' }, 'UNDERLINE'),
        ];
        let testcount = 100;
        let tokens;
        let sum = 0;
        let text = window.largeText;

        for (let i = 0; i < testcount; i++) {
          performance.mark('parse-start');
          tokens = textMarker.parse( text, rules);
          performance.mark('parse-end');
          performance.measure('parse', 'parse-start', 'parse-end');
        }

        performance.getEntriesByName('parse').forEach((timing) => {
          sum += timing.duration;
        });
        
        let output = ''; 
        output += `Parsing ${text.length} characters\n`;
        output += `Average over ${testcount} times: ${sum / testcount} ms\n`;
        output += `Total token found: ${countTokens(tokens)}\n`;
        output += `Meta Data: ${JSON.stringify(metadata)}\n`;
        output += `${JSON.stringify(tokens, null, '  ')}\n`;

        document.getElementById('output').innerText = output;
      });
    </script>
  </body>
</html>