t7

t7 copied to clipboard

I have an example react component written as so:

class Todos extends Component {
    render() {
        const { todos, dispatch } = this.props;
        return jsx`
            <div>
                ${todos.map((todoItem, index) => jsx`
                    <TodoItem
                        key=${index}
                        data=${todoItem}
                        dispatch=${action => dispatch({
                            type: 'LIST_OPERATE_ITEM',
                            index,
                            action,
                        })}
                    />
                `)}
                <button
                    onClick=${() => dispatch({ type: 'LIST_INSERT' })}
                >
                    Add
                </button>
            </div>
        `;
    }
}

This will cast an error "Expected corresponding t7 closing tag for 'button'." Everything works fine if I write the button openning tag in one line, or if the button is self closed. For instance I can change the button part as below and everything works:

                <button
                    onClick=${() => dispatch({ type: 'LIST_INSERT' })}
                    children="Add"
                />

@davidaq I wonder if this is because the > is on a new line. Can you try with it on the same line as above? I'm super bogged down with work on Inferno (OSS is demanding :P) at the moment, but once I get some time I'll delve into this and get a fix out.

I've given some try and here's my conclussion about the case: In non-self closing tags, error occur when the first attribute is not in the same line with the opening tag name.

// These type of lining and indent would work
<button className="primary"
               onClick=${someFunction}>
    button text
</button>
<button className="primary"
               onClick=${someFunction}
>
    button text
</button>

// This would cause an error
<button
    className="primary"
    onClick=${someFunction}
>
    button text
</button>

During the test, I found another parsing problem with self-closing tags. There must be an extra space before /> when the last attribute has a calculated value.

 // Cause error
 <button onClick=${someFunction}/>

 // Fine, if there's extra space before />
 <button onClick=${someFunction} />
 // Fine, if the last attribute has literal string value
 <button onClick=${someFunction} className="primary"/>

BTW, t7 is awesome, I'm totally attracted to the idea of making the precompile process optional when using virtual-dom driven frameworks such as React. It makes it so easy to draft out fast prototypes or fiddling with tutorial examples. This repo deserves more popularity.

@davidaq On consideration, there should be the flexibility to have both with and without a space. If you ever feel like contributing to the project, that would be an awesome PR :) Thanks for using t7 btw!