Merge props / wrap components #23
Comments
|
The way Union is used in the DOM modules is a little bit of a hack which could make this difficult to do. Essentially, it leaves one of the two inputs to Union completely unused, so the compiler is free to assume anything it wants to about it. This works in the DOM module where the implementation is in FFI, but that argument is completely unusable within PureScript. You could maybe accomplish this with an unsafeCoerce though.. maybe in your call to |
|
I just ran into this. Did anyone find a better way? |
|
This is what I get after cleaning up the inferred type for @codingedgar's original example. It seems to work as intended without needing import Prelude
import Effect (Effect)
import Prim.Row (class Nub, class Union)
import React.Basic.DOM as DOM
import React.Basic.DOM.Generated (Props_video)
import React.Basic.Hooks (Component)
import React.Basic.Hooks as React
import Record (merge)
-- These are the attributes that are pre-supplied by the `mkLoading` wrapper
type DefaultAttrs =
( autoPlay :: Boolean
, children :: Array React.JSX
, className :: String
, height :: String
, loop :: Boolean
, muted :: Boolean
, playsInline :: Boolean
)
mkLoading
:: forall attrs attrs_ extras unioned
. Union attrs attrs_ Props_video
=> Union extras DefaultAttrs unioned
=> Nub unioned attrs
=> Component (Record extras)
mkLoading = do
React.component "Loading" \extras -> React.do
pure
( DOM.video
( merge extras
{ autoPlay: true
, loop: true
, muted: true
, playsInline: true
, height: "24"
, className: "loading"
, children:
[ DOM.source
{ type: "video/webm"
, src: "./assets/loader.webm"
}
, DOM.source
{ type: "video/mp4"
, src: "./assets/loader.mp4"
}
]
}
)
) |
|
Maybe another option, if you don't want to declare the mkLoadingWithDefaults
:: forall attrs attrs_ extras defaults unioned
. Union attrs attrs_ Props_video
=> Union extras defaults unioned
=> Nub unioned attrs
=> Record defaults
-> Component (Record extras)
mkLoadingWithDefaults defaults = do
React.component "Loading" \extras ->
pure (DOM.video (merge extras defaults))
mkLoading = mkLoadingWithDefaults
{ autoPlay: true
, loop: true
, muted: true
, playsInline: true
, height: "24"
, className: "loading"
, children:
[ DOM.source
{ type: "video/webm"
, src: "./assets/loader.webm"
}
, DOM.source
{ type: "video/mp4"
, src: "./assets/loader.mp4"
}
]
} |
Hi, 👋
This is more of a PureScript question than anything else, but still figured this is the best place to make it
How can I merge props like in js?
but in PS
This is a type error
Thank a lot for your time and this lib ✨
The text was updated successfully, but these errors were encountered: