Comments (7)
Oh, I don't do much SVG myself so I didn't notice. Weird, I thought using a flexible type and making IHTMLProp
inherit IProp
would be fine. I need to check how this can be solved.
Can you please open a PR with the other proposed suggestions and we can work from there? Thanks!
from fable-react.
Sure, will do.
In fact, I discover the "casting problem" with Elmish.Bulma but I found it less impactant as it's a library and only me know about the cast. Users don't see it.
from fable-react.
I am closing as it's now fixed in 1.2.0
from fable-react.
This was a PR some time ago but you're right, I've also wondered the same a couple of times. Probably it's the time to fix it. I can think of the following options:
- Comment out all the HTMLProps conflicting with CSSProps (maybe not a good idea)
- Uncomment it and let people prefix Height with
CSSProp
when necessary (as it's done for Width) - Uncomment it but move the CSSProps after HTMLProps so
CSSProp.Height
shadows the HTMLProp version. - Add
RequireQualifiedAccess
attribute to CSSProps (probably not a good idea either as it would break lots of code) - Any other option?
from fable-react.
I would simply uncomment it.
The compiler will be there to help people detect the change and fix it.
Also, we do this change it can also be the right time to add data-
case to avoid people doing !!("data-custom", "value")
from fable-react.
Yeah, you're right, but failures because of shadowed members are very tricky because people don't expect them. I always take a while until I figure them out and there are a couple of issues reported because opening Fable.Import.Browser
shadows the FSharp.Core.Option
module.
About data-
maybe you could do something like this:
let inline Data(key: string, value: obj): IHTMLProp = !!("data-" + key, value)
from fable-react.
Ah yes didn't think about adding this function to my project.
And I understand for the shadowed members, it cool also be a good time to think about improving the user Experience for SVG.
Example of code:
let root model dispatch =
svg [ Style [ CSSProp.Width "100px"
Height "100px" ] :> IProp
ViewBox "0 0 42 42" :> IProp
ClassName "marker" :> IProp ]
[ circle [ Cx !^21.
Cy !^21.
R !^RADIUS
Fill "#fff" ]
[ ]
circle [ Cx !^21.
Cy !^21.
R !^RADIUS
Fill "transparent"
Stroke "#d2d3d4"
StrokeWidth !^3. ]
[ ]
image [ X !^"50%" :> IProp
Y !^"50%" :> IProp
Width !^30. :> IProp
!!("height", "30")
XlinkHref "assets/iconCrusher.png" :> IProp
Style [ TransformOrigin "50% 50%" ] :> IProp ]
[ ] ]
As you can see there is a lot of !^
and also casting :> IProp
.
Usage of !^
is fine to me because it's the type system helping somehow. However casting every line because we used a props declared into the HTMLAtttr
attribute is really annoying and noisy.
from fable-react.
Related Issues (20)
- How to instantiate a custom React Component in Fable? HOT 2
- module.hot.addStatusHandler is not a function HOT 8
- 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
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.