[Samples] Update todoapp sample

kLabz · Oct 14, 2023 · b3653a5 · b3653a5
1 parent e38ec22
commit b3653a5
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 61 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -43,6 +43,6 @@ jobs:
       run: |
         cd samples/todoapp
         haxelib newrepo
-        haxelib dev react ../..
-        haxelib install msignal
+        haxelib dev react-next ../..
+        haxelib install --skip-dependencies --always install.hxml
         haxe build.hxml
diff --git a/samples/docs/install.hxml b/samples/docs/install.hxml
@@ -1,5 +1,4 @@
 -lib HtmlParser:3.3.2
--lib event-types:0.8.0
 -lib js-object:0.0.7
 -lib datetime:3.1.4
 -lib html-entities:1.0.0

diff --git a/samples/todoapp/bin/index.html b/samples/todoapp/bin/index.html
@@ -2,18 +2,12 @@
 <html>
 <head>
 	<title>Todo React</title>
-	<script>
-	if (!Object.assign || typeof Promise === 'undefined') {
-		document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></'+'script>');
-		document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></'+'script>');
-	}
-	</script>
 </head>
 <body>
 	<link rel="stylesheet" href="styles.css"/>
 	<div id="app"></div>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
+	<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 	<script src="index.js"></script>
 </body>
-</html>
+</html>
diff --git a/samples/todoapp/build.hxml b/samples/todoapp/build.hxml
@@ -1,7 +1,7 @@
 -js bin/index.js
 -cp src
 -main Main
--lib react
+-lib react-next
 -lib msignal
 -D react_global
 #-D react_no_inline

diff --git a/samples/todoapp/install.hxml b/samples/todoapp/install.hxml
@@ -0,0 +1,12 @@
+-lib HtmlParser:3.3.2
+-lib js-object:0.0.7
+-lib html-entities:1.0.0
+-lib msignal:1.2.5
+
+-lib tink_macro:1.0.1
+-lib tink_parse:0.4.1
+-lib tink_core:2.1.0
+-lib tink_domspec:0.5.0
+-lib tink_svgspec:0.0.1
+-lib tink_anon:git:[email protected]:haxetink/tink_anon.git#0277e6e
+-lib tink_hxx:git:[email protected]:kLabz/tink_hxx.git#5a01af1
diff --git a/samples/todoapp/src/Main.hx b/samples/todoapp/src/Main.hx
@@ -9,6 +9,7 @@ class Main
 {
 	public static function main()
 	{
-		ReactDOM.render(jsx('<$TodoApp/>'), Browser.document.getElementById('app'));
+		var root = ReactDOMClient.createRoot(Browser.document.getElementById('app'));
+		root.render(jsx('<$TodoApp/>'));
 	}
-}
+}
diff --git a/samples/todoapp/src/view/TodoApp.hx b/samples/todoapp/src/view/TodoApp.hx
@@ -1,5 +1,6 @@
 package view;
 
+import react.ReactRef;
 import react.React;
 import react.ReactComponent;
 import react.ReactMacro.jsx;
@@ -12,56 +13,54 @@ typedef TodoAppState = {
 	items:Array<TodoItem>
 }
 
-typedef TodoAppRefs = {
-	input:InputElement
-}
-
-class TodoApp extends ReactComponentOfStateAndRefs<TodoAppState, TodoAppRefs>
+class TodoApp extends ReactComponentOfState<TodoAppState>
 {
+	var input:ReactRef<InputElement> = React.createRef();
 	var todoStore = new TodoStore();
-	
+
 	public function new(props:Dynamic)
 	{
 		super(props);
-		
+
 		state = { items:todoStore.list };
-		
+
 		todoStore.changed.add(function() {
 			setState({ items:todoStore.list });
 		});
 	}
-	
-	override public function render() 
+
+	override public function render()
 	{
 		var unchecked = state.items.filter(function(item) return !item.checked).length;
-		
+
 		var listProps = { data:state.items };
-		return jsx('
+		return jsx(
 			<div className="app" style={{margin:"10px"}}>
-				<div className="header">
-					<input ref="input" placeholder="Enter new task description" />
-					<button className="button-add" onClick=$addItem>+</button>
-				</div>
+				<form className="header" onSubmit={addItem}>
+					<input ref={input} placeholder="Enter new task description" />
+					<input type="submit" className="button-add" value="+" />
+				</form>
 				<hr/>
-				<$TodoList ref={mountList} {...listProps} className="list"/>
+				<TodoList ref={mountList} {...listProps} className="list" />
 				<hr/>
-				<div className="footer"><b>$unchecked</b> task(s) left</div>
+				<div className="footer"><b>{unchecked}</b> task(s) left</div>
 			</div>
-		');
+		);
 	}
-	
+
 	function mountList(comp:ReactComponent)
 	{
 		trace('List mounted ' + comp.props);
 	}
-	
-	function addItem()
+
+	function addItem(e)
 	{
-		var text = refs.input.value;
-		if (text.length > 0) 
+		e.preventDefault();
+		var text = input.current.value;
+		if (text.length > 0)
 		{
 			TodoActions.addItem.dispatch(text);
-			refs.input.value = "";
+			input.current.value = "";
 		}
 	}
-}
+}
diff --git a/samples/todoapp/src/view/TodoList.hx b/samples/todoapp/src/view/TodoList.hx
@@ -13,36 +13,36 @@ typedef TodoListProps = {
 	?data:Array<TodoItem>
 }
 
-class TodoList extends ReactComponentOfProps<TodoListProps>
+class TodoList extends ReactComponent<TodoListProps>
 {
 	static var defaultProps:TodoListProps = {
 		padding: '10px',
 		className: 'list'
 	}
-	
+
 	public function new(props:TodoListProps)
 	{
 		super(props);
 	}
-	
-	override public function render() 
+
+	override public function render()
 	{
 		var style = {
 			padding: props.padding
 		};
-		
+
 		return jsx('
 			<ul className=${props.className} style=$style onClick=$toggleChecked>
 				${createChildren()}
 			</ul>
 		');
 	}
-	
-	function createChildren() 
+
+	function createChildren()
 	{
 		return [for (entry in props.data) jsx('<TodoListItem key={entry.id} data={entry} padding="5px" />')];
 	}
-	
+
 	function toggleChecked(e:Event)
 	{
 		var node:Element = cast e.target;
@@ -60,26 +60,21 @@ typedef TodoItemProps = {
 	?border:String
 }
 
-class TodoListItem extends ReactComponentOfProps<TodoItemProps>
+class TodoListItem extends ReactComponent<TodoItemProps>
 {
 	var checked:Bool;
-	
+
 	static var defaultProps:TodoItemProps = {
 		padding: '10px',
 		border: 'solid 1px #363'
 	}
-
-	public function new(props:TodoItemProps)
-	{
-		super(props);
-	}
-
-	override public function shouldComponentUpdate(nextProps:TodoItemProps, nextState:Dynamic):Bool 
+
+	override public function shouldComponentUpdate(nextProps:TodoItemProps, nextState:react.Empty):Bool
 	{
 		return nextProps.data.checked != checked;
 	}
-	
-	override public function render() 
+
+	override public function render()
 	{
 		var style = {
 			padding: props.padding,
@@ -94,4 +89,4 @@ class TodoListItem extends ReactComponentOfProps<TodoItemProps>
 			</li>
 		');
 	}
-}
+}