real reactive ui

Makefile

@@ -1,20 +1,27 @@
-BIN_NAME := Haxe.lua
-MINIFYD_NAME := Haxe.min.lua
+BUNDLE_NAME = bundle.lua
+HAXE_NAME = haxe.lua
+MINIFYD_NAME := bundle.min.lua
 BUILD_DIR := build
 HAXE_FLAGS = -D webconsole
+POLYFILLED_NAME = bundle.polyfill.lua
+POLYFILL_SRC = src/polyfill.lua
 
-BIN_PATH := $(BUILD_DIR)/$(BIN_NAME)
+HAXE_PATH := $(BUILD_DIR)/$(HAXE_NAME)
 MIN_PATH := $(BUILD_DIR)/$(MINIFYD_NAME)
+POLYFILL_PATH := $(BUILD_DIR)/$(POLYFILLED_NAME)
 
 all: clean $(MIN_PATH)
 
 build: $(MIN_PATH)
 
-$(BIN_PATH): $(shell find src -name '*.hx')
+$(HAXE_PATH): $(shell find src -name '*.hx')
 	haxe build.hxml $(HAXE_FLAGS)
 
-$(MIN_PATH): $(BIN_PATH)
-	node minify.js $@
+$(MIN_PATH): $(POLYFILL_PATH)
+	node minify.js $(POLYFILL_PATH) $@
+
+$(POLYFILL_PATH): $(POLYFILL_SRC) $(HAXE_PATH)
+	cat $(POLYFILL_SRC) $(HAXE_PATH) > $@
 
 deps: package.json build.hxml
 	haxelib install all --always && yarn install

build.hxml

@@ -2,8 +2,10 @@
 --main Startup
 
 --library cctweaked:git:https://git.kapelle.org/niklas/cctweaked-haxelib.git
+--library tink_core
 
 --dce full
 
---lua build/Haxe.lua 
+--lua build/haxe.lua 
 -D lua-vanilla
+-D lua-ver 5.1

minify.js

@@ -1,10 +1,10 @@
 const fs = require("fs");
 const luamin = require("luamin");
 
-const haxeOutput = fs.readFileSync("build/Haxe.lua",{encoding:"utf8"});
+const haxeOutput = fs.readFileSync(process.argv[2] ?? "build/Haxe.min.lua",{encoding:"utf8"});
 
 const minified  = luamin.minify(haxeOutput);
 
-fs.writeFileSync(process.argv[2] ?? "build/Haxe.min.lua",minified);
+fs.writeFileSync(process.argv[3] ?? "build/Haxe.min.lua",minified);
 
 console.log("minified lua");

src/Startup.hx

@@ -1,3 +1,4 @@
+import lib.ui.Observable;
 import lib.ui.TextElement;
 import lib.ui.ReactiveUI;
 import kernel.Log;
@@ -36,13 +37,20 @@ class Startup {
 
 	static function exampleUI() {
 		var context = WindowManager.instance.createNewContext();
-		var ui = new ReactiveUI(context);
 
-		ui.render([
-			new TextElement("Hello world"),
-			new TextElement("Hello world",Green,Red),
+		var text = new Observable("Hello world");
+
+		var ui = new ReactiveUI(context,[
+			new TextElement(text),
+			new TextElement(text,Green,Red),
 		]);
 
+		ui.render();
+		
+		context.clickSignal.on(data -> {
+			text.set("Holla mundo");
+		});
+
 		WindowManager.instance.focusContextToOutput(context,"main");
 	}
 }

src/lib/ui/IElement.hx

@@ -1,7 +1,9 @@
 package lib.ui;
 
+using tink.CoreApi;
 import util.Vec.Vec2;
 
 interface IElement {
     public function render(bounds: Vec2<Int>): Canvas;
+    public var changed(default, null):Signal<Noise>;
 }

src/lib/ui/Observable.hx

@@ -0,0 +1,28 @@
+package lib.ui;
+
+using tink.CoreApi;
+
+class Observable<T> {
+    private var value: T;
+    private var callbacks: CallbackList<T> = new CallbackList(true);
+
+    public function new(value: T) {
+        this.value = value;
+    }
+
+    public function set(value: T) {
+        if (value != this.value){
+            this.value = value;
+            callbacks.invoke(value);
+        }
+    }
+
+    public function get(): T {
+        return value;
+    }
+
+    public function subscribe(callback: Callback<T>):CallbackLink {
+        callback.invoke(value);
+        return callbacks.add(callback);
+    }
+}

src/lib/ui/ReactiveUI.hx

@@ -7,12 +7,20 @@ import kernel.ui.WindowContext;
 
 class ReactiveUI {
 	private final context:WindowContext;
+	private final children:Array<IElement>;
 	
-	public function new(context: WindowContext) {
+	public function new(context: WindowContext,children: Array<IElement>) {
 		this.context = context;
+		this.children = children;
+
+		for(child in children){
+			child.changed.handle(v -> {
+				render();
+			});
+		}
 	}
 
-	public function render(children: Array<IElement>) {
+	public function render() {
 		var size = context.getSize();
 
 		var screen = renderChildren(children,size);

src/lib/ui/TextElement.hx

@@ -1,26 +1,42 @@
 package lib.ui;
 
-import kernel.Log;
+using tink.CoreApi;
+
 import util.Color;
 import util.Vec.Vec2;
 import util.MathI;
 
 class TextElement implements IElement {
-    private final text:String;
+    public var changed(default, null):Signal<Noise>;
+    private var changedTrigger:SignalTrigger<Noise>;
+    
+    private final text: Observable<String>;
     private final bg:Color;
     private final fg:Color;
 
-    public function new(text: String,?background: Color = Black,?textColor: Color = White) {
+    public function new(text: Observable<String>,?background: Color = Black,?textColor: Color = White) {
+
+        setupTrigger();
+
         this.text = text;
         this.bg = background;
         this.fg = textColor;
+
+        this.text.subscribe(value -> {
+            this.changedTrigger.trigger(null);
+        });
+    }
+
+    private function setupTrigger() {
+        changedTrigger = Signal.trigger();
+        changed = changedTrigger.asSignal();
     }
 
 	public function render(bounds: Vec2<Int>):Canvas {
 		var rtn = new Canvas();
 
-        for (i in 0...MathI.min(Math.floor(text.length / bounds.x) + 1,bounds.y)){
-			var line = (text.substr(i * bounds.x,bounds.x));
+        for (i in 0...MathI.min(Math.floor(text.get().length / bounds.x) + 1,bounds.y)){
+			var line = (text.get().substr(i * bounds.x,bounds.x));
             for (char in 0...line.length) {
                 rtn.set({x: char,y: i},{textColor: fg,char: line.charAt(char),bg: bg});
             }

src/lib/ui/VSplitLayout.hx

@@ -1,18 +0,0 @@
-package lib.ui;
-
-import util.Vec.Vec2;
-import kernel.ui.TermBuffer.Pixel;
-
-class VSplitLayout implements IElement{
-    
-    public function new(childrenLeft: Array<IElement>,childrenRight: Array<IElement>) {
-        
-    }
-
-	public function render(bounds:Vec2<Int>):Canvas {
-		var boundsLeft: Vec2<Int> = { x: Math.ceil(bounds.x / 2), y: bounds.y};
-		var boundsRight: Vec2<Int> = { x: Math.floor(bounds.x / 2), y: bounds.y};
-		
-		return null;
-	}
-}

src/polyfill.lua

@@ -0,0 +1,22 @@
+-- Polyfill require function
+_G.require = function (module)
+    -- Polyfill luv package
+    if module == "luv" then
+        local module = {}
+        local metatable = {
+            __index = function(t, i) 
+                -- Polyfill gettimeofday
+                if i == "gettimeofday" then
+                    return function ()
+                        local mil = os.epoch()
+                        return mil / 1000, mil
+                    end
+                else
+                    print("ERROR: Tell a dev to implement: " .. i)
+                end
+             end
+        }
+        setmetatable(module, metatable)
+        return module
+    end
+end