Missing Components

[markknol]

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

• Figures
• Accordion
• Carousel
• Forms
• Input Group
• Modal
• Navs (in progress)
• Navbar
• Overlays
• Popovers
• Tabs
• Tooltips
• Toasts

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]

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 MVCoconut/coconut.ui#44 (comment)) raising its value for every compilation.

[markknol]

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]

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]

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:

• class is a keyword
• - is an operator
• div, data and enabled are identifiers

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