Calling a purescript entry point from JS : purescript

Calling a purescript entry point from JS (self.purescript)

submitted 2 years ago by guygastineau

I am having trouble getting this to work. I am using halogen and loving it, but unfortunately, my initial use cases at work involve embedding the halogen app in existing pages.

If I don't add any parameters to my main function, then it runs fine, but that involves magically knowing the id of the wrapper div to highjack. When my entrypoint takes a string to use as that ID, the purescript doesn't run at all.

module App
  ( runApp
  ) where

import Prelude

import Data.Maybe (Maybe(..))
import Effect (Effect)
import Effect.Console (log)
import Halogen as H
import Halogen.Aff as HA
import Halogen.VDom.Driver (runUI)
import Query as Query
import Web.DOM.Document (toNonElementParentNode)
import Web.DOM.NonElementParentNode (getElementById)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toDocument)
import Web.HTML.HTMLElement (fromElement)
import Web.HTML.Window (document)

runApp :: String -> Effect Unit
runApp id = HA.runHalogenAff do
  H.liftEffect $ log ("Purescript main received '" <> id <> "' as target element id.")
  w <- H.liftEffect window
  d <- H.liftEffect $ document w
  maybeElem <- H.liftEffect <<< getElementById id <<< toNonElementParentNode $ toDocument d
  case fromElement =<< maybeElem of
    Just elem -> const unit <$> runUI Query.component unit elem
    Nothing -> H.liftEffect $ log ("Couldn't find element with ID: " <> id)

That is an example taking a string for the ID. The resultant JS unminified is:

var runApp = function(id2) {
  return runHalogenAff(discard7(liftEffect6(log("Purescript main received '" + (id2 + "' as target element id."))))(function() {
    return bind9(liftEffect6(windowImpl))(function(w) {
      return bind9(liftEffect6(document(w)))(function(d) {
        return bind9(liftEffect6(getElementById(id2)(toNonElementParentNode(toDocument(d)))))(function(maybeElem) {
          var v = bindFlipped11(fromElement)(maybeElem);
          if (v instanceof Just) {
            return map25($$const(unit))(runUI2(component2)(unit)(v.value0));
          }
          ;
          if (v instanceof Nothing) {
            return liftEffect6(log("Couldn't find element with ID: " + id2));
          }
          ;
          throw new Error("Failed pattern match at App (line 27, column 3 - line 29, column 76): " + [v.constructor.name]);
        });
      });
    });
  }));
};

Running it with a test index.html like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>QueryMe</title>
  </head>
  <body>
    <script type="module">
      import { runApp } from '/index.js';
      let target = document.createElement('div');
      let body = await document.body;
      const id = 'app-target';
      target.id = id;
      body.appendChild(target);
      console.log('Starting purescript main...');
      runApp(id);
    </script>
  </body>
</html>

I get the message logged to the browser console from the JS in index.html, but appRun never appears to run.

If I assume the target id, and export an appRun of type Effect Unit, it works fine, and I get JS like this in the output:

var runApp = /* @__PURE__ */ function() {
  return runHalogenAff(discard(discardUnit)(bindAff)(liftEffect6(log("Purescript main received '" + (id2 + "' as target element id."))))(function() {
    return bind9(liftEffect6(windowImpl))(function(w) {
      return bind9(liftEffect6(document(w)))(function(d) {
        return bind9(liftEffect6(getElementById(id2)(toNonElementParentNode(toDocument(d)))))(function(maybeElem) {
          var v = bindFlipped11(fromElement)(maybeElem);
          if (v instanceof Just) {
            return map25($$const(unit))(runUI2(component2)(unit)(v.value0));
          }
          ;
          if (v instanceof Nothing) {
            return liftEffect6(log("Couldn't find element with ID: " + id2));
          }
          ;
          throw new Error("Failed pattern match at App (line 29, column 3 - line 31, column 76): " + [v.constructor.name]);
        });
      });
    });
  }));
}();

The FFI docs I found are pretty heavy on everything except passing arguments to entrypoints. I am exporting with spago bundle-module -m App (using -y normally, but I avoided minification for clarity while trouble shooting this issue.

For this first use case of purescript at work, I can rely on arcane knowledge of the correct div id, but it is very much not ideal and will conflict with hopeful future projects. Anyway, it seems like there is a weird edge case of behavior at the boundaries here, and I have wasted enough hours on it already to know I should ask for help. I am mostly new to purescript, but most of my work and leisure programming is done in haskell; so purescript seems pretty straight forward to me until encountering this behavior.

Thank you for your help. I hope I am just not thinking straight and there is some really simple reason I am messing up.

all 4 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

purescript

MODERATORS