diff --git a/app/srcbak/App.css b/app/srcbak/App.css new file mode 100644 index 0000000..595c765 --- /dev/null +++ b/app/srcbak/App.css @@ -0,0 +1,8 @@ +body { + font-family: Arial; + margin: 0; +} + +h1 { + margin: 10px; +} diff --git a/app/srcbak/App.hx b/app/srcbak/App.hx new file mode 100644 index 0000000..f07af47 --- /dev/null +++ b/app/srcbak/App.hx @@ -0,0 +1,33 @@ +import react.ReactMacro.jsx; +import Webpack.*; +import Root; + + +class App { + static var STYLES = require('./App.css'); + + static public function main() { + new App(); + } + + public function new() { + var root = createRoot(); + + var rootComponent = react.ReactDOM.render(jsx(' + + '), 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; + } +} diff --git a/app/srcbak/Dom.hx b/app/srcbak/Dom.hx new file mode 100644 index 0000000..9585552 --- /dev/null +++ b/app/srcbak/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; + } +} diff --git a/app/srcbak/Root.hx b/app/srcbak/Root.hx new file mode 100644 index 0000000..3f58418 --- /dev/null +++ b/app/srcbak/Root.hx @@ -0,0 +1,53 @@ +import com.Foo; +import components.Header; +import react.ReactMacro.jsx; +import react.ReactComponent; +import react.router.Route; + +typedef RootState = { + route: String, + ?component: react.React.CreateElementType +} + +class Root extends react.ReactComponentOfState { + + public function new() { + super(); + state = { route:'' }; + } + + override function componentDidMount() { + switch (state.route) { + default: + Webpack.load(Foo).then(function(_) { + setState(cast { component:Foo }); + }); + } + } + function yeet(){ + //state.route="yeet"; + //trace(this.props.location.pathname); + trace(state); + } + + override function render() { + return jsx(' +
+
+

Hello Haxe + Webpack + React

+ ${renderContent()} +
+ '); + } + + function renderContent() { + if (state.component == null) + return jsx(' + Loading... + '); + else + return jsx(' + + '); + } +} diff --git a/app/srcbak/bundles/MyBundle.hx b/app/srcbak/bundles/MyBundle.hx new file mode 100644 index 0000000..24ed933 --- /dev/null +++ b/app/srcbak/bundles/MyBundle.hx @@ -0,0 +1,12 @@ +import react.ReactComponent; +import react.router.Route.RouteRenderProps; + +@:expose('default') +class MyBundle extends ReactComponentOfProps { + // If you want to execute code when this bundle is _first_ loaded: + public static function onLoad() { + // ... + } + + // ... +} \ No newline at end of file diff --git a/app/srcbak/com/Foo.css b/app/srcbak/com/Foo.css new file mode 100644 index 0000000..2bce033 --- /dev/null +++ b/app/srcbak/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; +} \ No newline at end of file diff --git a/app/srcbak/com/Foo.hx b/app/srcbak/com/Foo.hx new file mode 100644 index 0000000..d8d7ea4 --- /dev/null +++ b/app/srcbak/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(' +
+ ${CONFIG.hello}! +

${CONFIG.yeet}!

+
+ Let\'s do some HRM guys
+
+ '); + } +} diff --git a/app/srcbak/com/Foo2.hx b/app/srcbak/com/Foo2.hx new file mode 100644 index 0000000..60006e6 --- /dev/null +++ b/app/srcbak/com/Foo2.hx @@ -0,0 +1,23 @@ +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(' +
+ ${CONFIG.hello}! +
+ Let\'s do some HRM guys
+
+ '); + } +} diff --git a/app/srcbak/com/bug.png b/app/srcbak/com/bug.png new file mode 100644 index 0000000..2d5fb90 Binary files /dev/null and b/app/srcbak/com/bug.png differ diff --git a/app/srcbak/components/Header.css b/app/srcbak/components/Header.css new file mode 100644 index 0000000..e69de29 diff --git a/app/srcbak/components/Header.hx b/app/srcbak/components/Header.hx new file mode 100644 index 0000000..e8b8963 --- /dev/null +++ b/app/srcbak/components/Header.hx @@ -0,0 +1,20 @@ +package components; + +import react.ReactMacro.jsx; +import react.ReactComponent; +import Webpack.*; + +class Header extends ReactComponent{ + static var STYLES = require('./Header.css'); + public function yeet(){ + trace(props); + props.foo(); + } + override function render() { + return jsx(' +
+ +
+ '); + } +} \ No newline at end of file diff --git a/app/srcbak/config.json b/app/srcbak/config.json new file mode 100644 index 0000000..bc5024e --- /dev/null +++ b/app/srcbak/config.json @@ -0,0 +1,4 @@ +{ + "hello": "This is an asynchronous module" , + "yeet": "yote" +}