Skip to content

Instantly share code, notes, and snippets.

@afcondon
Last active March 9, 2017 15:47
Show Gist options
  • Save afcondon/68265847902a3232f228b542d9fd296f to your computer and use it in GitHub Desktop.
Save afcondon/68265847902a3232f228b542d9fd296f to your computer and use it in GitHub Desktop.
basic example of providing a purescript function to javascript in a web app

Making a Purescript function available to JS web app

Requirements

  • node / npm installation
  • install bower using npm
  • purescript tools available on your $PATH
  • (fine to just unload the tar.gz into /usr/local/bin or whatever or npm -g install purescript and pulp)

Create a simple program and test it

  • $ mkdir foo; cd foo; pulp init
  • pulp run
  • should see the familiar $ Hello sailor!
  • see footer for other ways of running this program outside of a browser, or...move on to making it a webapp

Create minimal web app

  • $ mkdir dist; cd dist
  • make a minimal index.html in this dist directory
<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
 </head>
 <body>
     <script src="app.js" charset="utf-8"></script>
     <script>
       document.addEventListener('DOMContentLoaded', function () {
           PS.Main.main();
       });
     </script>
  </body>
 </html>

penultimate step: make the app.js referenced above

  • back up in top level dir we use psc-bundle to make browser-ready bundle
  • $ psc-bundle output/**/*.js -m Main > dist/app.js
  • note that we use -m Main to identify a module that we want to include
  • but we don't give psc-bundle a --main Main option: we don't want the mainline called automatically

final step, serve this app

  • it's enough to do $ cd dist; python -m SimpleHTTPServer
  • load page as http://localhost:8000 - you should see the "Hello, sailor!" on the JS console

verify that your main function is callable from console in browser debugger

  • you should be able to do > PS.Main.main() to call this mainline
  • note that currying means you need to call multiparam functions explicitly (> PS.Main.otherfunc(p1)(p2))

FOOTER: bonus points try it in psci and node

  • you can run this tiny program in a Purescript REPL by doing $ pulp psci. You have to import - at a minimum - the Main module which you can simply do as > import Main which allows you to then do > main and see your "Hello, sailor!" logged out.
  • <TBA - how to run this from within a node REPL or script>
@phrrngtn
Copy link

phrrngtn commented Mar 8, 2017

Some notes from my colleague.

Thanks. Very much appreciated. I have got what I need.

A couple of comments.

In index.html, PS.App.main() didn’t work, but PS.Main.main() did . I think the intended behavior is that loading the page displays an empty page and writes a “Hello Sailor!” message to the console.

Requirements should probably list bower. I had to install it

I should know how to import the code and call this function from a node script, and probably can figure it out, but not totally obvious to someone with my level of Node/Javascript skills. I think it would be helpful to add some instructions on that too.

@afcondon
Copy link
Author

afcondon commented Mar 8, 2017

Great comments, thanks.

The PS.App.main() is a failure on my part - changed module name from Main to App for clarity (!) and forgot to mirror here.

i will update with your other comments too, thanks.

@mudont
Copy link

mudont commented Mar 8, 2017

Hi,
Paul's colleague here. Thanks very much for doing this.
I am able to call main and my own test function in node:

$ node

var m=require("./output/Main")
undefined
m.main()
Hello sailor!
{}
m.add23(34)
57

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment