No examples of DOM manipulation using Browser.DOM
lukemcdo opened this issue · comments
It's not intuitive how I should create a DOM element of a certain type using Fable. I'd like to see an example of this in the samples.
Updating an existing sample to demonstrate this would be nice. The basic canvas example could be modified to create the canvas before using it, as one possible solution to this issue.
Edit: it looks like the "advanced" example uses unbox. Further examples of creating things like nodelists and such would be welcome.
Yes, it's not very popular because normally Fable users prefer a more declarative style as with React. There's no particular Fable-way to manipulate the DOM you can just use the Browser APIs through the Fable.Browser.Dom bindings as you would do in JS (casting may be required sometimes). For examples, you could check Sutil which is a rendering library for Fable that manipulates the DOM, for example here: https://github.com/davedawkins/Sutil/blob/80b54124ffd86bc7e9a05d4ba88b05c52feadc3a/src/Sutil/Styling.fs#L68-L75
Gonna be honest I'm only just understanding that Elmish probably is what I want to use, but I'm also definitely not refactoring to use it quite yet.
Regardless, it feels weird that Browser.Dom.HTMLSomeElement.Create() exists but doesn't do what a beginner would expect. As someone transitioning from plain javascript, I'd like to see the correct way documented a little better.
In a few situations, bindings can differ a bit from what JS looks like. When two interfaces are used to represent (as it's normally done in the Browser bindings for "historical" reasons), Create denotes the constructor by convention (as interfaces cannot be built directly). The trick is to remember the "native" JS methods normally start with lowercase :) You can read more about calling JS code from F# with Fable here: https://fable.io/docs/communicate/js-from-fable.html