search

baryshev / ect

Fastest JavaScript template engine with embedded CoffeeScript syntax
http://ectjs.com
MIT License
626 stars 70 forks source link

fixing output indentation #14

Closed szinya closed 11 years ago

szinya commented 11 years ago

Taking the output formatting forward I made this:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, World!</title>
    </head>
    <body>
        <header>
            <h1>
    Page title line 1
    Page title line 2
</h1>
<h2>
    <span>Subtitle line 1</span>
<span>Subtitle line 2</span>
</h2>
        </header>
        <section>
            <div>
    <p>Page content line 1</p>
<p>Page content line 2</p>
</div>
        </section>
        <section>
            redefined side1 content line1
redefined side1 content line2
        </section>
        <section>
            side2 content line 1
side2 content line 2
        </section>
        <footer>
            <p>Footer content 1</p>
<p>Footer content 2</p>
        </footer>
    </body>
</html>

into this:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, World!</title>
    </head>
    <body>
        <header>
            <h1>
                Page title line 1
                Page title line 2
            </h1>
            <h2>
                <span>Subtitle line 1</span>
                <span>Subtitle line 2</span>
            </h2>
        </header>
        <section>
            <div>
                <p>Page content line 1</p>
                <p>Page content line 2</p>
            </div>
        </section>
        <section>
            redefined side1 content line1
            redefined side1 content line2
        </section>
        <section>
            side2 content line 1
            side2 content line 2
        </section>
        <footer>
            <p>Footer content 1</p>
            <p>Footer content 2</p>
        </footer>
    </body>
</html>

It works by prefixing each line in every include's and content's content with the original tag's indentation. This way one can author all the partials with 0 initial indentation and every command tag can be placed correctly in the document flow.

baryshev commented 11 years ago

.replace is a very heavy operation that impact perfomance for a several times.

Simple benchmark:

Without .replace:

  Escaped   : 2407ms
  Unescaped : 162ms
  Total     : 2569ms

With .replace:

  Escaped   : 5384ms
  Unescaped : 3054ms
  Total     : 8438ms

And it not solving all indentation problems. You can see it with example.js.

I know that indentation in result html is not ideal, but it fast. In most cases result indentation does not matter. For other caces i reccomend to use external html beautifiers like this.