I am trying to call Aframe web components in Rescript React, The elements are available as a-scene, a-box.
Unfortunately, Rescript compiler doesn’t create those elements [throws "I’m not sure what to parse here when looking at “-”]. Whats the best way to create custom elements.
The usual escape recipe seems to work, e.g.
<\"a-scene" key="0"> React.null </\"a-scene">
But it’s obviously not perfect and supposed to be solved at some point, see this issue: https://github.com/rescript-lang/syntax/issues/164
1 Like
There’s a bug in formatter which purge away escpaing in jsx.
note that escpaing should be last resort to prevent name clashing etc.
had some discussion with @rickyvetter to add this on next react release.
In the meantime you can do something like this:
external unsafeObjToDomProps: Js.t<{..}> => ReactDOM.domProps = "%identity"
@variadic @module("react")
external createDOMElementVariadic: (
string,
~props: ReactDOM.domProps=?,
array<React.element>,
) => React.element = "createElement"
module AmpImgLightbox = {
@react.component
let make = (~id: string, ~layout: string) => {
let props = {"id": id, "layout": layout}->unsafeObjToDomProps
createDOMElementVariadic("amp-image-lightbox", ~props, [])
}
}
3 Likes
Thanks @amiralies . I figured the formatter bug and hopefully it will be fixed at some point of time. I have similar approach to your solutions like
module ReactElement = {
@react.component
let make = (
~tag: string,
~props: option<ReactDOM.domProps>=?,
~children: option<React.element>=?,
) => {
let children_ = switch children {
| Some(child) => child
| None => React.null
}
let props_ = switch props {
| Some(sentProps) => sentProps
| None => ReactDOM.domProps()
}
React.createElementVariadic(ReactDOM.stringToComponent(tag), props_, [children_])
}
}
2 Likes