added project files

app/src/App.css

@@ -0,0 +1,15 @@
+body {
+    font-family: Arial;
+	margin: 0;
+}
+
+h1 {
+	/* margin: 10px; */
+}
+
+main{
+	margin: 20px;
+	background-color: #eee;
+	min-height: 300px;
+	padding: 10px;
+}

app/src/App.hx

@@ -0,0 +1,43 @@
+import react.ReactMacro.jsx;
+import react.router.ReactRouter;
+import react.router.BrowserRouter;
+import react.router.Route;
+import react.router.Switch;
+import react.router.bundle.Bundle;
+import Webpack.*;
+import Root;
+
+
+class App {
+    static var STYLES = require('./App.css');
+    static var Rewt = ReactRouter.withRouter(Root);
+    static public function main() {
+        new App();
+    }
+
+    public function new() {
+        var root = createRoot();
+
+        var rootComponent = react.ReactDOM.render(jsx('
+            <$BrowserRouter>
+                <$Switch>
+                    <$Rewt/>
+                </$Switch>
+            </$BrowserRouter>
+
+        '), root);
+
+        #if debug
+        ReactHMR.autoRefresh(rootComponent);
+        #end
+    }
+
+    function createRoot() {
+        var current = js.Browser.document.getElementById('root');
+        if (current != null) return current;
+        current = Dom.div();
+        current.id = 'root';
+        Dom.body().appendChild(current);
+        return current;
+    }
+}

app/src/Dom.hx

@@ -0,0 +1,16 @@
+class Dom {
+    static var TEMP = js.Browser.document.createDivElement();
+
+    inline static public function div() {
+        return js.Browser.document.createDivElement();
+    }
+
+    inline static public function html(html: String) {
+        TEMP.innerHTML = html;
+        return TEMP.firstElementChild;
+    }
+
+    inline static public function body() {
+        return js.Browser.document.body;
+    }
+}

app/src/Root.hx

@@ -0,0 +1,83 @@
+import com.Foo;
+import com.Foo2;
+import components.Header;
+import components.HomeContent;
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import react.React.CreateElementType;
+import react.router.ReactRouter;
+import react.router.Route.RouteRenderProps;
+import react.router.Route;
+
+
+private typedef RootState = {
+    route: String,
+    ?component: react.React.CreateElementType
+}
+
+private typedef RootProps = {
+	> RouteRenderProps,
+}
+
+class Root extends react.ReactComponentOf<RootProps,RootState> {
+
+    public function new() {
+        super();
+        state = { route:'' };
+    }
+
+    override function componentDidMount() {
+        trace("wattfak");
+		switch (state.route) {
+			default:
+				Webpack.load(Foo).then(function(_) {
+                    setState(cast { component:Foo });
+                    trace("foo");
+				});
+		}
+    }
+    function yeet(){
+        //state.route="yeet";
+        //trace(state);
+        //setState({route:"yeetnt"});
+    }
+
+    override function render() {
+        return jsx('
+            <div>
+                <Header/>
+                <!--Current path is ${props.location.pathname} and component is ${state.route}-->
+                <!--${renderContent()}-->
+                <main>
+                    <$Route exact="true" path="/">
+                        <HomeContent/>
+                    </$Route>
+                    <$Route path="/projects">
+                        <h1>Projects</h1>
+                    </$Route>
+                    <$Route path="/links">
+                        <h1>Links</h1>
+                    </$Route>
+                    <$Route path="/gameservers">
+                        <h1>Game Servers</h1>
+                        <p></p>
+                    </$Route>
+                </main>
+            </div>
+        ');
+    }
+
+    function renderContent() {
+        if(state.route != props.location.pathname){
+            state.route = props.location.pathname;
+        }
+        if (state.component == null)
+            return jsx('
+                <span>Loading...</span>
+            ');
+        else
+            return jsx('
+                <state.component />
+        ');
+    }
+}

app/src/bundles/MyBundle.hx

@@ -0,0 +1,12 @@
+import react.ReactComponent;
+import react.router.Route.RouteRenderProps;
+
+@:expose('default')
+class MyBundle extends ReactComponentOfProps<RouteRenderProps> {
+    // If you want to execute code when this bundle is _first_ loaded:
+    public static function onLoad() {
+        // ...
+    }
+
+    // ...
+}

app/src/com/Foo.css

@@ -0,0 +1,14 @@
+.foo {
+    margin: 10px;
+    padding: 10px;
+    background: #eee;
+}
+
+.foo .yeah {
+    margin-top: 20px;
+}
+
+.foo .yeah p {
+    margin: 0;
+    border-bottom: solid 1px red;
+}

app/src/com/Foo.hx

@@ -0,0 +1,27 @@
+package com;
+
+import react.ReactComponent;
+import react.ReactMacro.jsx;
+import Webpack.*;
+
+class Foo extends ReactComponent {
+
+    static var STYLES = require('./Foo.css');
+    static var IMG = require('./bug.png');
+    static var CONFIG = require('../config.json');
+
+    public function yeet(){
+        trace(state);
+    }
+
+    override function render() {
+        return jsx('
+            <div className="foo">
+                <img src=$IMG/> ${CONFIG.hello}!
+                <p onClick=${yeet}> ${CONFIG.yeet}!</p>
+                <hr/>
+                Let\'s do some HRM guys<br/>
+            </div>
+        ');
+    }
+}

app/src/com/Foo2.hx

@@ -0,0 +1,24 @@
+package com;
+
+import react.ReactComponent;
+import react.ReactMacro.jsx;
+import Webpack.*;
+
+class Foo2 extends ReactComponent {
+
+    static var STYLES = require('./Foo.css');
+    static var IMG = require('./bug.png');
+    static var CONFIG = require('../config.json');
+
+
+    override function render() {
+        return jsx('
+            <div className="foo2">
+                nooo
+                <img src=$IMG/> ${CONFIG.hello}!
+                <hr/>
+                Let\'s do some HRM guys<br/>
+            </div>
+        ');
+    }
+}

app/src/components/Header.css

@@ -0,0 +1,14 @@
+header {
+    margin: 10px;
+    padding: 10px;
+    background: #eee;
+}
+header nav a{
+    margin-right: 10px;
+}
+.selected{
+    color:red;
+}
+.logo{
+    font-size: 3vw;
+}

app/src/components/Header.hx

@@ -0,0 +1,36 @@
+package components;
+
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import Webpack.*;
+import react.router.NavLink;
+
+class Header extends ReactComponent{
+    static var STYLES = require('./Header.css');
+    public function yeet(){
+        props.foo();
+    }
+    override function render() {
+        return jsx('
+            <header>
+                <div className="logo">
+                    subsonics
+                </div>
+                <nav>
+                    <$NavLink exact="true" to="/" activeClassName="selected">
+                        Home
+                    </NavLink>
+                    <$NavLink to="/links" activeClassName="selected">
+                        Links
+                    </NavLink>
+                    <$NavLink to="/projects" activeClassName="selected">
+                        Projects
+                    </NavLink>
+                    <$NavLink to="/gameservers" activeClassName="selected">
+                        Game Servers
+                    </NavLink>
+                </nav>
+            </header>
+        ');
+    }
+}

app/src/components/HomeContent.hx

@@ -0,0 +1,22 @@
+package components;
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import js.Browser;
+import Webpack.*;
+
+class HomeContent extends ReactComponent {
+
+    static var STYLES = require('./HomeContent.css');
+
+    public function yeet(){
+        trace(state);
+    }
+
+    override public function render() {
+        return jsx('
+            <p onClick=${yeet}>
+                kak
+            </p>
+        ');
+    }
+}

app/src/components/MainRouter.hx

@@ -0,0 +1,34 @@
+package components;
+
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import react.router.BrowserRouter;
+import react.router.Route;
+import react.router.Switch;
+import react.router.bundle.Bundle;
+
+class MainRouter extends ReactComponent {
+    override public function render() {
+        return jsx('
+            <$BrowserRouter>
+                <$Switch>
+                    <!-- Using default loader component (`<div className="loader" />`) -->
+                    <!-- and default error component (`<div className="error" />`) -->
+                    <!-- /!\\ Warning: your component should have the `@:expose("default")` meta -->
+                    <!-- See example below in "Bundle initialization code" -->
+                    <$Route
+                        path="/bundle1"
+                        component=${Bundle.load(first.FirstBundle)}
+                    />
+
+                    <!-- Using custom loader and/or error component -->
+                    <!-- The error component will get an `error` prop with the load error as `Dynamic` -->
+                    <$Route
+                        path="/bundle2"
+                        component=${Bundle.load(second.SecondBundle, CustomLoader, CustomError)}
+                    />
+                </$Switch>
+            </$BrowserRouter>
+        ');
+    }
+}

app/src/config.json

@@ -0,0 +1,4 @@
+{
+    "hello": "This is an asynchronous module" ,
+    "yeet": "yote"
+}