Translate HTML to Fable.React about fable-react HOT 9 CLOSED

I tried out the extension from @bentayloruk and it does a great job already. I used it in conjunction with the Bulma VS Code snippets.

The following workflow feels great (assuming the SAFE BookStore sample):

1. expand the snippet you want in index.html
2. refine the layout directly within index.html
3. use @bentayloruk extension and define view function of Elmish component
4. reset index.html
5. wire up logic for component

This enables an almost seamless transition from prototype to production code. I think this approach (and using Bulma - making it the B-SAFE stack 😄) should be communicated for on-boarding since nothing generates a better feeling of accomplishment than the ability to generate great looking pages right from the start.

One thing that could be improved would be a prompt for module prefixes to use before generating F# code, i.e. if somebody wants to use the following style:

module R = Fable.Helpers.React
module P = Fable.Helpers.React.Props

And there are some little bugs here and there. Sometimes the generated F# code is not properly indented and needs some manual corrections.

Afaik @bentayloruk 's extension is not written with Fable right? Maybe we could do a relaunch for Fable 2.0. I might try to get my head into VS Code plugin development next week ...

from fable-react.

@bentayloruk : if there is a newer VSIX than the one I downloaded from your repo that would be great!

@alfonsogarciacaro : I might give it a shot. I never wrote a VS Code plugin though, but the problem does not sound too complicated. I try out the one from @bentayloruk and see how that works and where there might be still some problems. If I get stuck somehow, I would appreciate some help from you guys 😃

Personally I don't think that the code emitted by the tool needs to be perfect in the first place. I think a lot of people who use Fable and the SAFE stack for the first time (like me) are likely to start from some HTML template or CSS framework and it would allow for fast prototyping and a even better on-boarding experience (I can't stress enough how great it already is) Thanks for your help so far!

from fable-react.

Thank you a lot Maxime.
Currently I'm evaluating Bulma and a template based on Materialize with a lot of relatively small HTML-crafted components, so it should do the trick for that job. I think for this prototyping kind of stuff it can be super nice.

Of course you are right that thinks will get messy with very large HTML.

from fable-react.

@kfrie my hacked up fork of HTML to Elm, that @MangelMaxime refers to, is not perfect, but it can get you a fair way along the road of converting HTML. If you'd like me to dig out a build you can install in VS Code, let me know.

from fable-react.

This has been included in Ionide and there is also an online version here

from fable-react.

In the past someone made a quick prototype of this available here.

From a personal, point of view I know that people love this kind of plugins/feature but there are problems. In general, the plugin will generate the code but it will not necessarily follow your own code convention so you would need to fix it and on really big view it can big hard.

And this plugins is working as long as you don't use project like Fulma to generate your view.

from fable-react.

Yes, @bentayloruk's repo is a good way to start 👍 I understand @MangelMaxime's concerns but I think this is still a good a idea, it's been discussed in the past. I just haven't had time to work on it. If you want to give it a go @kfrie we'll help you with that!

The tool doesn't need to be perfect. Probably just copying the tags and the class name will save a lot of work, for example when copying Bulma samples directly from HTML.

Tip: in Fable.React 2.0 beta you can also use Class instead of ClassName for the class name.

from fable-react.

@kfrie hah, I forgot I'd linked that! I think that was the latest.

from fable-react.

@kfrie glad you're up and running!

You're right about the extension not being in Fable. The extension is a hard fork of this and was hacked just enough to work for my need at the time. It could be a lot better, but I'm working with Fulma at the moment and have no plans to do any work on the plugin.

from fable-react.