Starting from Elm, how do I add flags to PureScript app

Help
#1

I have figured out how to add a PureScript example as content to a Ruby on Rails app.

I only had to disable turbo
in app/views/layouts/application.html.erb
and place the Purescript app in the public folder.

In the past, I was playing with Elm and had some success, but I can not figure out how to do the Elm equivalent of Flags.
https://guide.elm-lang.org/interop/flags

Is it possible to have flags in PureScript?

Or, how do I call the PureScript app from a JavaScript fragment to get something similar to flags?

#2

I’m not sure what you’re trying to do exactly, but you want to follow the same pattern you’re using to load your Elm app:

<script src="<%= "#{js_filename}?#{js_mtime}" %>"></script>
<script>
 var app = Elm.UiExperiment.init({ node: document.getElementById('elm'),
                                   flags: <%= raw JSON.generate flag_data %>
 })
 // you can use ports and stuff here
</script>

You can do something like this to load your PureScript app (adapt accordingly):

<script type="module">
  import { main } from './output/Client.Main/index.js';
  main("hello")();
</script>

Then on the PureScript side:

main :: String -> Effect Unit
main startupMessage = do
  log ("[CLIENT] Booting up with message: " <> startupMessage)
  HA.runHalogenAff do
    body <- HA.awaitBody
    runUI component unit body

Which should print in your js console:

[CLIENT] Booting up with message: hello

You can then pass that param to your Halogen app or otherwise as needed.

#3

Thank you.

The answer was not what I expected, but from this point, I can figure out how to pass JSON as a startup message and do something useful with it.

#4

How do i pass it to halogen component?

#5

Instead of initializing your top component with unit, you can pass it the input you want.

Then, that input will become accessible via your initialState function which you can then use to set up you app state (the “model” in Elm’s terms)

It’s documented here :

https://purescript-halogen.github.io/purescript-halogen/guide/02-Introducing-Components.html#input

Also, you most probably want to target a specific id, rather than override the body content, I forgot to mention that in my first message.

#6

No, it’s not documented. At the moment, it is not helpful.

If I manage to finish it and we compare it against the documentation, then maybe I will be able to show what is wrong with the existing examples.

#7

There is some progress

Now I can pass information from main to the component.

With the unit in the examples it was not easy to find how to pass the arguments.
To make matters worse, in the component

passing the flag data to construct the initial state is not easy.
I can not figure out the correct function signature and the error messages were confusing.

How do I clean it up and fix the component signature?

And going back to my original question, in main how do I detect the configuration data that I can pass to the component?

#8

I got the final bit of the solution.

I will have a break now, and later I will try to show an example halogen project with flags.

#9

So in conclusion,

I have the HTML tag with configuration data

I read the data and pass it to Halogen Component

initialize the component

and show the data

#10

Another approach I’ve used for this is to make an FFI module that reads a config from something in window scope, and then just write the config in a script tag with the relevant config above the app entry point import.

It’s much more convenient, but less refined than the reading-it-from-data-attributes approach - it loses the level of safety you have by failing if the config isn’t present or any of the values are of the wrong type, etc.

Something like this:

Config.purs

module App.Config where

import Effect (Effect)
  
type Config =
  { apiEndpoint :: String
  , apiKey :: String
  , countStart :: Int
  }
  
foreign import getConfig :: Effect Config

Config.js

export const getConfig = () => window.__myAppConfig;

HTML snippet

<script type="text/javascript">
  window.__myAppConfig = {
    apiEndpoint: "http://example.com/api/", 
    apiKey: "qwerty", 
    countStart: 6
  }
</script>
<script type="text/javascript" src="main.js"></script>
#11

But how do I change the config after the app is compiled and deployed?
How do I dynamically give different configurations to different users? How do I interact with a legacy application? Going to a full-page pureScript app is not always possible.

#12

The point of what I was demonstrating there is that the config values are defined outside of the PureScript app, in the HTML of the page that is including the app - I assume whatever you’re rendering the HTML with can just as easily print values in a block of javascript in a <script> tag as it can print values in attributes of a tag?

As for how you’d interact with a legacy app, all I can say to that is “it depends”. :smile:

Coming from Elm you’re perhaps expecting a prescribed way to do most things, but as I’m sure you’ve noticed by now, that philosophy is not shared by PureScript. There are some opinionated libraries, but for the most part you’re just dealing with pieces that you’re free to combine as you see fit. Some things just fit together without any particular effort, sometimes you’ll have to patch things together using the lower level libraries that give you access to features of the runtime environment (as in, browser/node/etc), and very occasionally it might be best to just use the FFI (although that usually means we’re missing a library offering some low level functionality).

So for some of the questions you’re asking, if you ask yourself how you might do it if you were just writing plain JavaScript, whatever answer you have for that is potentially an option for how to do it in PureScript… just with types, and an Effect monad.

#13

So the answer is: there is no answer but countless possibilities, and PS can handle them.

Am I understanding you correctly?

#14

In your OP you’re asking how to do something like Elm’s flags in purescript. Does this relate to the later question on getting values from HTML attributes?

This seems to depart further and futher from Purescript (and Elm and Javascript).

#15

Never mind, we do not understand one another. I have found the solution to my problem, along with examples that work for me. Perhaps after seeing the example, you will see what I mean.

#16

You should just try different approaches and accomplish your goal, eventually you will better understand how things work with Purescript and what works best for you. What you are asking is straigforward, but there are mutiple ways to do this, and it relates more to general web app configuration regardless of the actual language used to build it.