Parse bug for multiline tag
davidaq opened this issue · comments
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!