Rescript React Webcomponents

1

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.

2

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
3

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
4

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_])
  }
}
1 Like