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.

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

[HtmlToJsx] View logic? F.e., how do we loop through items in an HTML view? #137

Open
trusktr opened this issue Aug 2, 2017 · 2 comments

Comments

@trusktr
Copy link

trusktr commented Aug 2, 2017

The example at http://magic.reactjs.net/htmltojsx.htm is very simple, it just converts static HTML to static JSX.

But that's not very useful on it's own.

How would one write HTML that can loop through a set of items, for example? I'm talking about things like ng-repeat in Angular, or v-for in Vue.

Is there some way to do this? This would be super helpful, because it means a design team could be responsible for owning HTML/CSS, and developers can update the same components with view logic. And HTML/CSS widget library would ship with compiled (or with compilable) templates that are easily usable in React, without React developers having to go and manually copy/pasting HTML/CSS in a way that doesn't scale.

@trusktr trusktr changed the title [HtmlToJsx] How to loop through items in an HTML view? [HtmlToJsx] View logic? F.e., how do we loop through items in an HTML view? Aug 2, 2017
@trusktr
Copy link
Author

trusktr commented Aug 2, 2017

If there isn't such a feature, maybe you can detect JS, and not escape it? f.e.

<div>
  {items.map(i =>
    <div>name: {item.name}</div>
  )}
</div>

and for example if developers take care in writing simple JS on separate lines, then it can at least be somewhat easy for designers to wade over logic and do their design work.

Here's the Vue version, which is easier for a designer to work with:

<div>
    <div v-for="item in items">name: {{item.name}}</div>
</div>

because the logic doesn't affect the markup's HTML structure so much.

@Daniel15
Copy link
Member

It doesn't support anything advanced at the moment. Pull requests are appreciated if you want to implement something.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants