Comments (9)
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):
- expand the snippet you want in
index.html
- refine the layout directly within
index.html
- use @bentayloruk extension and define view function of Elmish component
- reset
index.html
- 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.
Related Issues (20)
- React Server Components integration HOT 2
- Can't figure out how to wrap my view with a Higher Order Component HOT 4
- JsInterop helper for wrapping a higher order component HOT 2
- Can't reference React in Fable HOT 2
- Fable.ReactServer.cssProp very slow HOT 4
- Add Custom DU to DOMAttr HOT 1
- FunctionComponent.Lazy and SSR HOT 1
- Update samples to Fable 3
- ReactDOM.hydrate is no longer supported in React 18 HOT 17
- Can't update shared state passed with useContext? HOT 3
- Q: Use ReactElement import member for Storybook HOT 3
- Missing 'open' from Fable.React.Props? HOT 2
- Last Fable.React upgrade breaks my code HOT 7
- Publish source files from Fable.React.Types and Fable.ReactDom.Types to nuget HOT 5
- Fable.React version 8 depends on React.Dom gte 18 lt 19 according to femto
- Add Pointer Events HOT 3
- Why is useCallback not implemented? HOT 3
- How to obtain a component ref in a function component? HOT 5
- FunctionComponent.Of functions cache breaks reusable code HOT 1
- voidEl breaks with: $ELEMENT is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fable-react.