Comments (5)
Given that IHTMLProp has the same "problem", I was wondering if there was any thought given to removing the interfaces altogether and combining HTMLAttr+DOMAttr+Prop into one big DU so it could also have a homogeneous list type. Maybe other downsides though.
Anyway I made a computation expression to coerce the yielded types so I'm not even that bothered by this anymore. It's more syntax up front but better than casting every yield IMO. It's a suitable workaround for me so it's fine if we want to close this and not mess with it for now.
type CompatibleList<'a>() =
member x.Yield(item:'a) : 'a list = List.singleton item
member x.YieldFrom(expr:'a list) : 'a list = expr
member x.Combine(left:'a list, right:'a list) : 'a list = List.append left right
member x.Delay(fn:unit -> 'a list) : 'a list = fn()
member x.Zero() : 'a list = List.empty<'a>
member x.For(expr:'b seq, fn:'b -> 'a list) : 'a list = expr |> Seq.toList |> List.collect fn
let cssprops = CompatibleList<ICSSProp>()
let htmlprops = CompatibleList<IHTMLProp>()
let view model =
div <| htmlprops {
yield Id "view"
yield Style <| cssprops {
yield Margin 0
yield Padding 0
}
} <| [
span [] [ str "hello" ]
]
from fable-react.
There MUST be a reason... I just don't remember what it is, let me check 😅 BTW, you can use upcast
instead of unbox
, which is type safe and it'll be also erased in JS code. But I acknowledge it's still annoying.
from fable-react.
Ah, thanks for type-safe upcast
tip, that's a little better since I'm adding the yields anyway and don't have to repeat the type. Plus it also works with e.g. IHTMLProp list
. 👍 I guess ICSSProp was probably modeled like IHTMLProp but ended up with only one implementer.
from fable-react.
Your guess is probably right. I had a look at the source and I don't remember why I exactly did it like that 😅
Maybe it was a simpler way to solve the top-down order in F#, but we can use module rec
or and
for that. I'm ok with removing ICSSProp
👍
from fable-react.
IIRC DOMAttr and HTMLAttr had to be separated because SVG elements accept the former but not the latter.
from fable-react.
Related Issues (20)
- 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
- FunctionComponent.Of functions cache breaks reusable code HOT 1
- voidEl breaks with: $ELEMENT is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. HOT 3
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.