markknol/coconut.md Secret

## coconut.md

      
    Raw
  

              coconut.md
            
          
    Use Haxe / coconut.mvc from scratch

Prerequisites


install yarn https://yarnpkg.com
install vscode https://code.visualstudio.com/
install haxe support for vscode https://marketplace.visualstudio.com/items?itemName=nadako.vshaxe
install lix support for vscode https://marketplace.visualstudio.com/items?itemName=lix.lix

Installation

Create a new project directory somewhere, open commandline here
yarn init

yarn add lix
yarn lix scope create
yarn lix use haxe stable
yarn lix install github:MVCoconut/coconut.vdom
md src
md bin

(If the project doesn't compile, copy/paste the content haxe_libraries folder from the todomvc example to yours and run yarn lix download)
Create build.hxml
-cp src
-lib coconut.vdom
-main Main
-dce full
-D analyzer-optimize
-D js_es=6
-js bin/main.js
Create bin/index.html
<!DOCTYPE>
<html>
<head>
 <meta charset="utf8" />
 <title>Hello coconut</title>
</head>
<body>
 <script src="main.js"></script>
</body>
</html>
Create src/Main.hx
package;

import coconut.data.*;
import coconut.ui.*;
import coconut.Ui.hxx;
import tink.state.*;
import js.Browser.*;

using tink.CoreApi;

class Main {
	static function main() {
		coconut.ui.Renderer.mount(
			cast document.body.appendChild(document.createDivElement()), hxx('<Root />')
		);
	}
}

class Root extends View {
	@:state var items:List<Item> = null;

	function add() {
		items = items.append(new Item({id: window.prompt("name")}));
	}

	function remove(id:String) {
		items = items.filter(function(i) return i.id != id);
	}

	function render() '
		<div>
			<button onclick=${add}>Add item</button>
			<ul>
				<for ${i in items}>
					<li>${i.id} <button onclick=${remove(i.id)}>x</button></li>
				</for>
			</ul>
		</div>
	';
}

class Item implements Model {
	@:constant var id:String;
}
Open Visual Studio Code


File > Open folder > Select your new project folder
Build the project: Press CTRL-SHIFT-B > select build.hxml
Open the project: open bin/index.html in your browser, preferably using some webserver.


You're ready to create cool stuff now

Make production build

Minify sources

Since we use ES6 output we need to use terser instead of uglify (from NPM) but we can use the uglify library from Haxelib.

Add dependencies
yarn add terser
yarn lix install haxelib:uglifyjs


Append to your build.hxml:
-lib uglifyjs
-D uglifyjs_overwrite
-D uglifyjs_bin=node_modules/.bin/terser 
--no-traces

if you go back to development, you could temporary add -D uglifyjs_disable
In vscode, compile again


Ship it!