12

I know that using Elm components ("modules"? still learning parlance) within React is an established pattern with libraries like react-elm-components, but is there a way to do the inverse?

e.g., something like this is possible:

Top-level React App
 -> React layout/component
    -> Elm components

But what about this:

Top-level Elm App
  -> Elm layout/components
     -> React components

If it is possible, is the 'elm-at-the-bottom' pattern superior? Trying to reason why there doesn't seem to be literature on it & that's a possible explanation.

Brandon
  • 7,736
  • 9
  • 47
  • 72

3 Answers3

11

Don't do that. The whole point of Elm is hexagonal design. Elm is intended to function as a closed system, one in which the evils of JS cannot penetrate. This is why embedding Elm in JS is first class, and you are having such trouble finding the inverse. The idea of embedding React into Elm is to hand over the value of Elm's determinism and assurances. You might as well not use Elm at all.

If you really just want to do functional programming in the browser and use React components with the Elm architecture, check out PureScript PUX. PUX is designed for that use-case and is going to give you better results than hacking Elm to do things Elm was specifically designed to prevent.

If my comments are a non-starter for you I can offer the following advice for being evil in this way, without being toooo evil.

First, you can accomplish this with ports. Write your Elm application to fire events on a port to JavaScript when you want to render your react component. Then render the react component inside of the Elm Dom space, in the standard way with JavaScript.

Second (this is the closest to doing it properly you are going to get), you can write this using Elm Native modules. This will require you to learn Elm's undocumented runtime, and write code that interacts with it. What you will do is write a custom Html element in Elm's low level system, that rendered React inside itself and manages re-rendering.

Good luck!

Fresheyeball
  • 29,567
  • 20
  • 102
  • 164
  • 1
    I'm not sure this answer is still as valid, given that the NoRedInk folk are talking up the power of Elm with web components. React may not be a web standard but the idea of little pockets of stateful components within an Elm page is no longer a no-no – Simon H Jul 05 '17 at 18:39
  • This is a response to react. Web components are a separate topic. – Fresheyeball Jul 05 '17 at 18:58
4

As pointed out, this doesn't work as-is because of onload, but may help someone else looking for something similar

You can always render a React component--'til you get around to rewriting it ;)--inside an Elm node. The trick is going to be mounting it. Shooting from the hip: it'd be a little hacky (and a bit expensive with a Json.Encode.encode and JSON.parse since you have to get the data out of Elm and into a consumable JS format for the component), but assuming you have ThatComponent, React, and ReactDOM on the window object you could try something along the lines of

import Html exposing (Html, div)
import Html.Attributes as Attr exposing (attribute)
import Json.Encode as Encode exposing (Value)


reactComponent : String -> (a -> Value) -> a -> Html msg
reactComponent componentName encoder data =
    let
        jsonProps : String
        jsonProps =
            Encode.encode 0 <| encoder data

        -- a script to load the React component on `this` which is
        -- the `div` element in this case.
        onLoad : String
        onLoad =
            String.join ""
                [ "javascript:"
                , "window.ReactDOM.render("
                , "window.React.createElement(window[\""
                , componentName
                , "\"], JSON.parse("
                , jsonProps
                , ")), this)"
                ]
    in
        div [ attribute "onload" onLoad ] []

What you will have though is a problem with it maintaining its own state--which is obviously bad and runs against the Elm architecture (but you probably know that and want to reuse something pre-built). You can use ports to send in data back in, but you'd want to wrap that reactComponent in Html.Lazy.lazy3 so it doesn't rerender itself (which is why you'd send in both the encoder and data separately).

toastal
  • 1,056
  • 8
  • 16
  • 1
    thanks @toastal--between your analysis & the other answer's advice, it sounds like this might be quixotic at best--though tapping into the giant React ecosystem is a pretty tempting payoff. Maybe I'll take you up once I finish the Elm newbie tutorials ;) But more likely I'll just suck-it-up and do some component rewriting--probably a great learning exp. – Brandon Dec 29 '16 at 03:32
  • 1
    I don't believe this works, since apparently div does not support `onload` https://stackoverflow.com/questions/22159476/simple-javascript-not-working-div-onload-alerthi – Christopher Armstrong May 25 '17 at 20:28
2

I've been trying to do the same. I took a popular React date picker and started by interoperating via ports. It's still work in progress but does work

import React from 'react';
import ReactDOM from 'react-dom';

import * as Datetime from 'react-datetime'

function datepicker(d, cb) {
    return requestAnimationFrame( () => {
        ReactDOM.render(Welcome(d, (res) => {
            cb(res);
        }), document.getElementById('reactDate'));            
    });
}

function Welcome(initialdate, cb) {
  return (
      <div>
         <h1>{initialdate}</h1>
         <Datetime onChange={cb} value={initialdate} />
     </div>
  );
}

export default datepicker;

Then my ports code looks like

import datepicker from './reactDPPort.jsx';
elm.ports.trigger.subscribe( (s) => {
    datepicker(s, res => app.ports.toElm.send(res.toString()));
});
Simon H
  • 20,332
  • 14
  • 71
  • 128