diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..86c445f --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015", "react"] +} diff --git a/.gitignore b/.gitignore index 0c1f172..8d73cf2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ .classpath .project .settings +node_modules src/main/resources/static/js/.module-cache src/test/resources/static/js/compiled src/test/resources/static/js/.module-cache diff --git a/package.json b/package.json new file mode 100644 index 0000000..cea00cc --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "catalog-ui", + "version": "1.0.0", + "description": "BFF demo", + "dependencies": { + "bootstrap": "^3.3.6", + "jquery": "^2.2.2", + "marked": "^0.3.5", + "react": "^0.14.7", + "react-dom": "^0.14.7" + }, + "devDependencies": { + "babel-core": "^6.7.4", + "babel-loader": "^6.2.4", + "babel-preset-es2015": "^6.6.0", + "babel-preset-react": "^6.5.0", + "css-loader": "^0.23.1", + "extract-text-webpack-plugin": "^1.0.1", + "file-loader": "^0.8.5", + "postcss-loader": "^0.8.2", + "style-loader": "^0.13.1", + "url-loader": "^0.5.7", + "webpack": "^1.12.2", + "webpack-dev-server": "^1.14.1" + }, + "scripts": { + "dev": "webpack-dev-server --hot --inline --devtool eval --progress --colors --content-base build --port 9999", + "dev-build": "webpack -d --display-modules", + "watch": "webpack --watch -d" + } +} diff --git a/pom.xml b/pom.xml index ac85a69..0d3f2f7 100644 --- a/pom.xml +++ b/pom.xml @@ -24,15 +24,6 @@ true jazzhub opensaas - - 2.4.1 - 3.2.0 - - 3.3.6 - 2.2.1 - 0.14.7 - 0.3.2-1 - 0.3.2 @@ -57,27 +48,6 @@ spring-boot-devtools true - - - org.webjars - bootstrap - ${bootstrap.version} - - - org.webjars - jquery - ${jquery.version} - - - org.webjars - react - ${react.version} - - - org.webjars - marked - ${marked.version} - @@ -88,105 +58,48 @@ + + com.github.eirslett + frontend-maven-plugin + 0.0.29 + + ${project.build.directory} + + + + install node and npm + + install-node-and-npm + + + v5.6.0 + 3.7.1 + + + + npm install + + npm + + + install + + + + + npm + + generate-resources + + run-script dev-build + + + + org.springframework.boot spring-boot-maven-plugin - - com.fizzed - fizzed-watcher-maven-plugin - 1.0.6 - - - - - src/main/resources/static/js/bundle - src/main/resources/static/js/jsx - - false - src/main/resources/static/js - - - src/main/resources/static/css/bundle - false - src/main/resources/static/css - - - src/main/wro - - - - process-resources - - - - - - maven-resources-plugin - - - - copy-resources - validate - - copy-resources - - - ${basedir}/target/wro - - - src/main/wro - true - - - - - - - - uk.co.codezen - react-jsxtransformer-maven-plugin - 1.0 - - - Compile resources - process-resources - - compile - - - jsx - - ${project.basedir}/src/main/resources/static/js - - - ${project.build.directory}/classes/static/js - - - - - - - ro.isdc.wro4j - wro4j-maven-plugin - 1.7.9 - - - process-resources - - run - - - - - ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory - ${project.build.directory}/classes/static/css - ${project.build.directory}/classes/static/js - ${project.build.directory}/wro/wro.xml - ${project.basedir}/src/main/wro/wro.properties - - org.apache.maven.plugins @@ -212,49 +125,6 @@ --> - - - - - org.eclipse.m2e - lifecycle-mapping - 1.0.0 - - - - - - ro.isdc.wro4j - wro4j-maven-plugin - [1.7.9,) - - jshint - run - - - - - - - - - uk.co.codezen - react-jsxtransformer-maven-plugin - [1.0,) - - compile - - - - - - - - - - - - diff --git a/src/main/java/com/opengroupe/cloud/saas/util/React.java b/src/main/java/com/opengroupe/cloud/saas/util/React.java deleted file mode 100644 index dc29e00..0000000 --- a/src/main/java/com/opengroupe/cloud/saas/util/React.java +++ /dev/null @@ -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 engineHolder = new ThreadLocal() { - @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 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); - } -} \ No newline at end of file diff --git a/src/main/java/com/opengroupe/cloud/saas/web/ViewController.java b/src/main/java/com/opengroupe/cloud/saas/web/ViewController.java index f75b9e4..109c599 100644 --- a/src/main/java/com/opengroupe/cloud/saas/web/ViewController.java +++ b/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 diff --git a/src/main/resources/static/js/app.jsx b/src/main/resources/static/js/app.jsx index 2702ac4..6e7c8bb 100644 --- a/src/main/resources/static/js/app.jsx +++ b/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({ ) } -}); \ No newline at end of file +}); + +module.exports = { + CommentBox: CommentBox, + CommentList: CommentList, + CommentForm: CommentForm, + Comment: Comment +}; \ No newline at end of file diff --git a/src/main/resources/static/js/app.render.jsx b/src/main/resources/static/js/app.render.jsx index a9cb5e8..3e24166 100644 --- a/src/main/resources/static/js/app.render.jsx +++ b/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( , @@ -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( ); -}; \ No newline at end of file +}; + diff --git a/src/main/resources/static/js/nashorn-polyfill.js b/src/main/resources/static/js/nashorn-polyfill.js index e95fea7..0ccc16a 100644 --- a/src/main/resources/static/js/nashorn-polyfill.js +++ b/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; \ No newline at end of file +var console = { + debug: print, + warn: print, + log: print, + error: print +}; \ No newline at end of file diff --git a/src/main/resources/static/js/vendors.js b/src/main/resources/static/js/vendors.js new file mode 100644 index 0000000..a226980 --- /dev/null +++ b/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'); \ No newline at end of file diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index deb88d8..948d526 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -1,10 +1,10 @@ - -Comments channel - - + + Comments channel + + @@ -16,10 +16,8 @@
- - - - + +