Comments (5)
Thanks a lot @cmeeren and @MangelMaxime for the input. I agree with both of you really, especially this
There are some drawbacks. IMHO Feliz should not make users think too much about where stuff is - @cmeeren
and
know what they can or cannot use as an attribute for an HTML element - @MangelMaxime
I really want to minimize the number of places someone has to look for things, if users are used to go for prop
as their first guess, then I would rather put stuff there even it doesn't make sense 100% it will makes things so much simpler and if there is a better solution we will definitely hear it.
I am wrapping up the issue for the stable release, let's close this one and come back to it when deemed necessary
from feliz.
Interesting idea, it definitely makes sense for 3rd party libraries but I am not sure it fits in Feliz, I don't have a concrete example for why that is, maybe because I am unfamiliar with how the UI code will end up or because I will "have to think" too much about each I want to use. For now, let's keep the issue open, maybe people have something to say about it :)
from feliz.
In general, I think people know what they can or cannot use as an attribute for an HTML element.
Doing this kind of API asks a lot of effort, for example this is what is done for:
- Fable.ReactLeaflet for this library it was ok to do and maintain because there isn't that much code and I generated most of it from Fable.Leaflet which was also generated from a
d.ts
definition - Fulma for this one it was a pain to do because I had to read all the documentation pages + the source code in order to port the props.
The difference between Feliz and my examples, is that in theory the API don't change often because of the "slow" evolution of the HTML language.
Also, this kind of API can lead to a more verbose code even if this probably mean going from
Html.div [
prop.class "test"
]
to
Div.div [
div.class "test"
]
// or
Html.div [
div.class "test"
]
from feliz.
Yes, the last example is what I mean - I see no benefit to having each component in its own class.
The attributes that are truly global could go under prop
to avoid excessive duplication.
Here's a bit more complete example (from the top of my head):
Html.div [
prop.class "formWrapper"
prop.children [
Html.form [
prop.children [
Html.input [
prop.class "emailInput"
input.name "email"
input.type.email
input.autoComplete "email"
input.autoFocus true
input.value model.Email
input.onChange (SetEmail >> dispatch)
]
Html.input [
prop.class "rememberMe"
input.name "rememberMe"
input.type.checkbox
input.value model.RememberMe
input.onChange (SetRememberMe >> dispatch)
]
Html.button [
button.disabled (model.Email = "")
button.type.submit
]
]
]
]
]
The key benefit is increased ability to guide the user to correctness.
There are some drawbacks. IMHO Feliz should not make users think too much about where stuff is. With the above syntax, props are in either props
or in <name of current component>
, which I think is OK, but not 100% optimal since the user might not know which, and might have many "misses" in e.g. input
before checking props
. Also, it's all for nothing if users
know what they can or cannot use as an attribute for an HTML element
as @MangelMaxime said.
Again, I'm not sure that this is the best solution, but I'm not sure it isn't, either. At the moment I'm leaning slightly in favor of just keeping everything in props
.
from feliz.
An inbetween solution could be to have all "enum" props defined separately to only surface allowed values for a specific element.
Related: #45.
from feliz.
Related Issues (20)
- Feedback on missing docs for newcomers HOT 1
- ReactComponentAttribute for props list HOT 2
- Q: Documentation on breaking changes in 2.6? [WAS Updating Feliz.UseListener to Feliz 2.6.0] HOT 4
- CSS overflow-anchor property HOT 1
- Error with Feliz 2.7 HOT 2
- Making UseElmish's dispatch function stable
- Feliz.Markdown escapeHtml doesn't seem to work HOT 1
- UseElmish: Failed to resolve import "use-sync-external-store/shim" HOT 3
- `react-markdown` removes the `escapeHtml` property HOT 1
- Clarification and Potential Improvement on PR #480 useEffectOnce behavior HOT 5
- Expanding Feliz.Rechart HOT 3
- Component created with a forwardRef that has generic type parameters loses state HOT 2
- "Directory import use-sync-external-store\shim is not supported" in UseElmish.fs.js HOT 2
- Use with Elmish documentation is lacking integration HOT 2
- Enhance Handling of F# Record Types as Props in ReactComponent Attribute HOT 4
- Explore if Feliz.CompilerPlugin can support POJO made using `[<ParamObject>]`
- prop.pattern produces invalid html HOT 4
- React 19 HOT 4
- Svg attribute `fill-rule` missing
- Update tests and move to github actions [Contributions Welcome]
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 feliz.