search

markknol / coconut.bootstrap

Bootstrap for Haxe/Coconut.ui
https://haxe.stroep.nl/coconut-bootstrap/
18 stars 2 forks source link

Missing Components #2

Open markknol opened 4 years ago

markknol commented 4 years ago

If you wants to contribute, please mention which one you are working on in the comments.

How to create a component

  1. Clone the repo, run yarn, open project in VSCode. You should be able to run/compile project now (use build.hxml).
  2. Look at how it should be rendered in official documentation and what kind of properties the component could get https://getbootstrap.com/docs/4.4/components/alerts/
  3. Check as reference how react-bootstrap does the implementation and interaction https://react-bootstrap.netlify.app/components/alerts/ (there are links to its sources there too)
  4. Build the coconut component 🚀 You can look at Jumbotron to see a simple component, look at Dropdown to see component with typed children and some interaction
  5. Add your component it in the test website source test/website/Main.hx.
  6. Run yarn dev to start the webserver. open http://localhost:7070/in your browser to see the website and test your component.
  7. Done? Make a pull request!
T1mL3arn commented 4 years ago

I'd like to try, if there is working autocompletion for Haxe code and html tags. Last time I tried coconut, autocompletion in VSCode was bad: it was either very slowly or did not work at all. Emmet commands for html tags in haxe code didn't work too. Even compilation was not good. I had to use a trick with stack depth (mentioned here https://github.com/MVCoconut/coconut.ui/issues/44#issuecomment-526096617) raising its value for every compilation.

markknol commented 4 years ago

No unfortunately there is no completion inside render strings for html tags. It's because this isn't actual html, nor jsx, so might require specialized vscode plugin. While I like to have completion for code as much as possible too, I haven't found this an issue yet. Also for this library you don't have to write too much fancy html. Hope you can help!

T1mL3arn commented 4 years ago

Actually, it is possible to enable emmet support for haxe files.

  1. F1
  2. Open Settings JSON
  3. Add this setting and save 
    "emmet.includeLanguages": {
    "haxe": "html"
}

Also, why use html strings if there is a way to not? Non-string markup gets some syntax coloring and it is more readable.

back2dos commented 4 years ago

Also, why use html strings if there is a way to not?

Because inline markup is an experimental feature that may be drastically changed or even removed from Haxe.

Non-string markup gets some syntax coloring and it is more readable.

It gets incorrect syntax highlighting. In <div class="foo" data-enabled /> you get the following:

In short, it's nonsense. You can get decent highlighting using https://github.com/jeremyfa/haxe-xmlgrammar