Steps to get going with Haxe 4.0.0 stable and MVCoconut

1

Hi!

Spent some hours trying to get MVCoconut going on Haxe 4 stable.
In case anyone else have the same problems, here’s what I do to get it working.
Please note that this is the state my win-machine 1 november 2019, and things are moving quickly! :slight_smile:

/ Jonas

Compiling coconut.vdom project on Haxe stable 4.0.0

In a blank VSCode haxe project with -lib coconut.vdom added to the build.hxml, I do the standard Lix setup:
> lix scope create
> lix use haxe stable - sets .haxerc version to “4.0.0”

I then install coconut.vdom using

> lix install gh:MVCoconut/coconut.vdom

If using "4.0.0-rc.3 this now compiles for me. For “4.0.0” stable though, I have to do the following:

> lix install gh:MVCoconut/coconut.ui

Now, compilation complains over not finding tink.csss.Parser. So I do the following:

Add -lib tink_csss to the build.hxml, and then run
> lix install gh:haxetink/tink_csss

I also have to run the following to upgrade tink_parse:

> lix install gh:haxetink/tink_parse

Now, a simple coconut hello world app compiles with stable Haxe 4.0.0. :slight_smile:

Adding tink_web

As I want to use the excellent tink_web library to my client (the type safe remoting stuff is just awesome), I do the following:

Add -lib tink_web to the build.hxml, and then run
> lix install gh:haxetink/tink_web

This however downgrades coconut.ui :frowning: , so I have to run the following once more:
> lix install gh:MVCoconut/coconut.ui

Also, the tink_io library has to be updated:
> lix install gh:haxetink/tink_io

Now I can user tink_web in a coconut client \o/ (Juraj style joy).

4 Likes
2

Thanks a lot, I will try to follow your steps! But… but, but, it misses the hello world example?

Ah here it is:

// App.hx
import js.Browser.*;
import coconut.ui.View;
import coconut.Ui.hxx;
using coconut.ui.Renderer;

class App extends View {
  
  static function main() {
    document.getElementById('demo').mount(<App/>);
  }
  
  @:state var count:Int = 0;
  
  function render()
    <button onclick={() -> count++}>
      Click Here! (Clicked {count} times)
    </button>
  ;
}

And while we’re at it the hxml:

-lib coconut.data
-lib coconut.diffing
-lib coconut.ui
-lib coconut.vdom
-lib html-entities
-lib pick.first
-lib tink_anon
-lib tink_core
-lib tink_csss
-lib tink_domspec
-lib tink_hxx
-lib tink_lang
-lib tink_macro
-lib tink_parse
-lib tink_priority
-lib tink_pure
-lib tink_slice
-lib tink_state
-lib tink_svgspec
-lib tink_syntaxhub
-lib xDOM
-main App
-js helloworld.js

Finally some index.html that we will have to open in the browser:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
  <div id='demo'></div>
  <script src="helloworld.js"></script>
</body>
</html>

Surprisingly it worked from the first try!
Thanks again for making this list. I have been wanting to try that coconut for months :slight_smile:

3

Kevin went through the trouble of updating everything on haxelib, meaning you can now do:

haxelib install tink_web
haxelib install coconut.vdom
# or with lix
lix +lib tink_web
lix +lib coconut.vdom

The hxml only needs to contain the top-most dependencies, e.g.:

-lib coconut.vdom
-lib tink_web # if you're using this 
-main App
-js helloworld.js

For future reference: if you’re using lix and struggle to put together the right dependencies for coconut, then the quickest way to move forward is to copy the haxe_libraries from the TodoMVC sample repo (which is usually very close to the current edge) and run lix download.

Well then, I suppose all that’s left for me to say is: have fun :wink:

6 Likes
4

Great news!

Thanks!