diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 20bdb40..619e884 100644 --- 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 index 36f2c4f..e0e4baa 100644 --- 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 index 034ebd1..6060a7d 100644 --- a/samples/todoapp/bin/index.html +++ b/samples/todoapp/bin/index.html @@ -2,18 +2,12 @@ Todo React -
- - + + - \ No newline at end of file + diff --git a/samples/todoapp/build.hxml b/samples/todoapp/build.hxml index 0029d0a..61213f1 100644 --- 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 new file mode 100644 index 0000000..08343c8 --- /dev/null +++ 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:git@github.com:haxetink/tink_anon.git#0277e6e +-lib tink_hxx:git:git@github.com:kLabz/tink_hxx.git#5a01af1 diff --git a/samples/todoapp/src/Main.hx b/samples/todoapp/src/Main.hx index 27837ea..06cfded 100644 --- 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/>')); } -} \ No newline at end of file +} diff --git a/samples/todoapp/src/view/TodoApp.hx b/samples/todoapp/src/view/TodoApp.hx index e1ed28e..1e16f65 100644 --- 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 } -typedef TodoAppRefs = { - input:InputElement -} - -class TodoApp extends ReactComponentOfStateAndRefs +class TodoApp extends ReactComponentOfState { + var input:ReactRef = 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(
-
- - -
+
+ + +
- <$TodoList ref={mountList} {...listProps} className="list"/> +
-
$unchecked task(s) left
+
{unchecked} task(s) left
- '); + ); } - + 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 = ""; } } -} \ No newline at end of file +} diff --git a/samples/todoapp/src/view/TodoList.hx b/samples/todoapp/src/view/TodoList.hx index 2e0edcc..57b9274 100644 --- a/samples/todoapp/src/view/TodoList.hx +++ b/samples/todoapp/src/view/TodoList.hx @@ -13,36 +13,36 @@ typedef TodoListProps = { ?data:Array } -class TodoList extends ReactComponentOfProps +class TodoList extends ReactComponent { 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('
    ${createChildren()}
'); } - - function createChildren() + + function createChildren() { return [for (entry in props.data) jsx('')]; } - + function toggleChecked(e:Event) { var node:Element = cast e.target; @@ -60,26 +60,21 @@ typedef TodoItemProps = { ?border:String } -class TodoListItem extends ReactComponentOfProps +class TodoListItem extends ReactComponent { 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 '); } -} \ No newline at end of file +}