Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML comment spacing disrupts rendering #45

Closed
jbmonroe opened this issue May 18, 2017 · 2 comments
Closed

HTML comment spacing disrupts rendering #45

jbmonroe opened this issue May 18, 2017 · 2 comments
Labels
bug
Milestone
v0.10.0

Comments

@jbmonroe
Copy link

I wanted to write a small tutorial for the team here, and added some HTML comments.

<!DOCTYPE html>
<html>
<head>
    <title>T-Shirt</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="./t-shirt.css">
</head>
<body>
    <div class="content">
        All the narrow columns have editable content; simply click on an item to edit it.
        <p>The T-shirt columns accept either upper- or lower-case input, limited to s, m, l, xl, and xxl.</p>
        <p>The story points column accepts any number, but rounds up to the next value that would be appropriate for planning poker.  Anything larger than 100 becomes 100.</p>
    </div>
    <div class="present" id="app"><!-- Moon will be told that this is the div that requires rendering -->
        <table>
            <tr>
                <th>Story</th><th>Effort</th><th>Value</th><th>Points</th>
            </tr>
            <tr m-for="item in {{stories}}"><!-- See tshirt.js -->
                <td class="story" m-html="{{item.story}}"></td>
                <td class="work"><input data-type="work" size="4" value="{{item.work}}"></td>
                <td class="value"><input data-type="value" size="4" value="{{item.value}}"></td>
                <td class="points"><input data-type="points" size="4" value="{{item.points}}"></td>
            </tr><!-- Moon will stop the rendering loop here -->
            <tr>
                <td class="story">Scores</td>
                <td class="work result" id="work"></td>
                <td class="value result" id="value"></td>
                <td class="points result" id="points"></td>
            </tr>
        </table>
    </div>
    <script src="./Loader.js"></script>
    <script src="./tshirt.js"></script>
</body>
</html>

This works as expected.
expected

Then I tried it with a space separating the angle brackets for the "see tshirt.js" comment:

<!DOCTYPE html>
<html>
<head>
    <title>T-Shirt</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="./t-shirt.css">
</head>
<body>
    <div class="content">
        All the narrow columns have editable content; simply click on an item to edit it.
        <p>The T-shirt columns accept either upper- or lower-case input, limited to s, m, l, xl, and xxl.</p>
        <p>The story points column accepts any number, but rounds up to the next value that would be appropriate for planning poker.  Anything larger than 100 becomes 100.</p>
    </div>
    <div class="present" id="app"><!-- Moon will be told that this is the div that requires rendering -->
        <table>
            <tr>
                <th>Story</th><th>Effort</th><th>Value</th><th>Points</th>
            </tr>
            <tr m-for="item in {{stories}}"> <!-- See tshirt.js -->
                <td class="story" m-html="{{item.story}}"></td>
                <td class="work"><input data-type="work" size="4" value="{{item.work}}"></td>
                <td class="value"><input data-type="value" size="4" value="{{item.value}}"></td>
                <td class="points"><input data-type="points" size="4" value="{{item.points}}"></td>
            </tr><!-- Moon will stop the rendering loop here -->
            <tr>
                <td class="story">Scores</td>
                <td class="work result" id="work"></td>
                <td class="value result" id="value"></td>
                <td class="points result" id="points"></td>
            </tr>
        </table>
    </div>
    <script src="./Loader.js"></script>
    <script src="./tshirt.js"></script>
</body>
</html>

The results were unexpected:
unexpected
I don't recall any explicit advice in the docs about being careful with HTML comments, but I certainly could have missed something.
@jbmonroe
Copy link
Author

Let me follow up by saying that production code should never go out with casually-visible comments in it, so a proper dev stack would make sure they're removed--but just in case someone forgets....

@kbrsh
Copy link
Owner

kbrsh commented May 18, 2017 •
edited

Hey, you're right, this is a bug in Moon. It has already been fixed in v0.10.0, which will be released soon, I'm aiming for Friday 😄

I made a demo of the issue (being fixed) with a development build of v0.10.0.

If I could get the data used in your demo, I could provide you with a working version that will work with v0.10.0.

I just have to update the docs, as some of the syntax and scoping has changed. For example, all directives will now be rendered as if they were in a mustache:

<div id="app">
  <h1 style="color: {{color}}" m-if="condition">Condition is {{condition}}</h1>
</div>

As you can see, the directive uses a syntax as if it were inside of a mustache, and a normal attribute uses mustache syntax. Along with this, mustaches will be able to have a valid Javascript expression. (That's right! Moon has a built in Javascript tokenizer that can analyze dependencies, in ~100 bytes!)

You will be able to do something like:

<div id="app">
  <h1>{{num * 10}}</h1>
</div>

By the way, Moon will remove all comments that are parsed, so if you open Developer Tools, you'll see the comment be removed.

@kbrsh kbrsh closed this as completed May 18, 2017
@kbrsh kbrsh added the bug label May 18, 2017
@kbrsh kbrsh added this to the v0.10.0 milestone May 18, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
v0.10.0
Development

No branches or pull requests
2 participants
@jbmonroe @kbrsh