Feature: using webpack instead of wro

src/main/java/com/opengroupe/cloud/saas/util/React.java

@@ -1,50 +0,0 @@
-package com.opengroupe.cloud.saas.util;
-
-import java.io.InputStream;
-import java.io.InputStreamReader;
-import java.io.Reader;
-import java.util.List;
-
-import javax.script.ScriptEngineManager;
-import javax.script.ScriptException;
-
-import com.opengroupe.cloud.saas.domain.Comment;
-
-import jdk.nashorn.api.scripting.NashornScriptEngine;
-
-public class React {
-
-    private ThreadLocal<NashornScriptEngine> engineHolder = new ThreadLocal<NashornScriptEngine>() {
-        @Override
-        protected NashornScriptEngine initialValue() {
-            NashornScriptEngine nashornScriptEngine = (NashornScriptEngine) new ScriptEngineManager().getEngineByName("nashorn");
-            try {
-                nashornScriptEngine.eval(read("static/js/nashorn-polyfill.js"));
-                nashornScriptEngine.eval(read("META-INF/resources/webjars/react/0.14.7/react.min.js"));
-                nashornScriptEngine.eval(read("META-INF/resources/webjars/marked/0.3.2/marked.js"));
-//                nashornScriptEngine.eval(read("classpath:static/js/react-bootstrap.js"));
-//                nashornScriptEngine.eval(read("classpath:static/js/comments.js"));
-                nashornScriptEngine.eval(read("static/js/app.js"));
-                nashornScriptEngine.eval(read("static/js/app.render.js"));
-            } catch (ScriptException e) {
-                throw new RuntimeException(e);
-            }
-            return nashornScriptEngine;
-        }
-    };
-
-    public  String renderCommentBox(List<Comment> comments) {
-        try {
-            Object html = engineHolder.get().invokeFunction("renderServer", comments);
-            return String.valueOf(html);
-        }
-        catch (Exception e) {
-            throw new IllegalStateException("failed to render react component", e);
-        }
-    }
-
-    private Reader read(String path) {
-        InputStream in = getClass().getClassLoader().getResourceAsStream(path);
-        return new InputStreamReader(in);
-    }
-}

src/main/java/com/opengroupe/cloud/saas/web/ViewController.java

@@ -24,10 +24,8 @@ public class ViewController {
 	@Bean
 	JavaScriptEngine nashornEngine() {
 		return new JavaScriptEngine().polyfillToNashorn()
-				.loadFromClassPath("META-INF/resources/webjars/react/0.14.7/react.min.js")
-				.loadFromClassPath("META-INF/resources/webjars/marked/0.3.2/marked.js")
-				.loadFromClassPath("static/js/app.js")
-				.loadFromClassPath("static/js/app.render.js");
+				.loadFromClassPath("static/js/vendors.bundle.js")
+				.loadFromClassPath("static/js/app.bundle.js");
 	}
 	
 	@Autowired

src/main/resources/static/js/app.jsx

@@ -1,5 +1,10 @@
 'use strict';
 
+var React		= require('react'),
+	ReactDOM	= require('react-dom'),
+	marked		= require('marked'),
+	$			= require('jquery');
+
 var Comment = React.createClass({
 	rawMarkup: function() {
 		var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
@@ -57,6 +62,7 @@ var CommentForm = React.createClass({
 		);
 	}
 });
+
 var CommentBox = React.createClass({
 	getInitialState: function() {
 		return {data: this.props.data || []};
@@ -120,4 +126,11 @@ var CommentList = React.createClass({
 			</div>
 		)
 	}
-});
+});
+
+module.exports = {
+	CommentBox: CommentBox,
+	CommentList: CommentList,
+	CommentForm: CommentForm,
+	Comment: Comment
+};

src/main/resources/static/js/app.render.jsx

@@ -1,4 +1,14 @@
-var renderClient = function (comments) {
+"use strict";
+
+var React			= require('react'),
+	ReactDOM		= require('react-dom'),
+	ReactDOMServer	= require('react-dom/server'),
+	CommentBox		= require('./app.jsx').CommentBox;
+
+
+require('bootstrap/dist/css/bootstrap.css');
+
+global.renderClient = function (comments) {
     var data = comments || [];
     ReactDOM.render(
 		<CommentBox data={data} url="/api/comments" pollInterval={2000}/>,
@@ -6,9 +16,10 @@ var renderClient = function (comments) {
 	);
 };
 
-var renderServer = function (comments) {
+global.renderServer = function (comments) {
     var data = Java.from(comments);
-    return React.renderToString(
+    return ReactDOMServer.renderToString(
     	<CommentBox data={data} url="/api/comments" pollInterval={2000} />
     );
-};
+};
+

src/main/resources/static/js/nashorn-polyfill.js

@@ -1,6 +1,8 @@
-var global = this;
+var global = window = this;
 
-var console = {};
-console.debug = print;
-console.warn = print;
-console.log = print;
+var console = {
+	debug: print,
+	warn: print,
+	log: print,
+	error: print
+};

src/main/resources/static/js/vendors.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var React		= require('react'),
+	ReactDOM	= require('react-dom'),
+	$			= require('jquery');
+
+require('bootstrap/dist/css/bootstrap.css');

src/main/resources/templates/index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head lang="en">
-<meta charset="UTF-8" />
-<title>Comments channel</title>
-<link rel="stylesheet" href="/css/react-bootstrap.css" />
-<link rel="stylesheet" href="/css/comments.css" />
+	<meta charset="UTF-8" />
+	<title>Comments channel</title>
+	<link rel="stylesheet" href="/css/vendors.bundle.js.css" />
+	<link rel="stylesheet" href="/css/comments.css" />
 </head>
 <body>
 
@@ -16,10 +16,8 @@
 
 	<div th:replace="fragments/footer"></div>
 
-	<script src="/js/react-bootstrap.js"></script>
-	<script src="/js/comments.js"></script>
-	<script src="/js/app.js"></script>
-	<script src="/js/app.render.js"></script>
+	<script src="/js/vendors.bundle.js"></script>
+	<script src="/js/app.bundle.js"></script>
 	<script th:inline="javascript">
         var initialData = JSON.parse(/*[[${data}]]*/ '[]');
         renderClient(initialData);

src/main/wro/wro.properties

@@ -1,8 +0,0 @@
-debug=true
-# Available processors : http://wro4j.readthedocs.org/en/stable/AvailableProcessors/
-#preProcessors=lessCssImport
-#postProcessors=less4j,cssMin
-# explicitly invalidates the cache each 5 seconds
-cacheUpdatePeriod=1
-# check for changes each 5 seconds and invalidates the cache only when a change is detected
-resourceWatcherUpdatePeriod=1

src/main/wro/wro.xml

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<groups xmlns="http://www.isdc.ro/wro">
-	<group name="react-bootstrap">
-		<css>webjar:bootstrap/@bootstrap.version@/css/bootstrap.css</css>
-		
-		<js>webjar:jquery/@jquery.version@/jquery.js</js>
-		<js>webjar:react/@react.version@/react-with-addons.js</js>
-		<js>webjar:react/@react.version@/react-dom.js</js>
-	</group>
-	
-	<group name="comments">
-		<css>file:src/main/resources/static/css/comments.css</css>
-		
-		<js>webjar:marked/@marked-lib.version@/marked.js</js>
-	</group>
-</groups>