Merge pull request #1 from rbrastad/serverside-es6

Serverside es6

README.md

@@ -23,7 +23,7 @@ All react files is in src -> resources -> assets -> app
 All SASS files is in src -> resources -> assets -> scss
 
 ### Transpiling and bundling on change
-React and sass files needs to be transpiled and compiled when developed. Transpiling, compiling and bundling is done with webpack.  
+React and sass files needs to be transpiled and compiled when developed. Transpiling, compiling and bundling of assets is done with webpack. Babel transpiles ES6 files.
 
 To enable onchange transpiling, compiling and bundling in developer mode:
 
@@ -36,16 +36,27 @@ To enable onchange transpiling, compiling and bundling in developer mode:
 Livereload is by default enabled when running "dev". Changes done to sass or react files will automatically force a refresh in the web browser.   
 The files needed for livereload is automatically added to the javascript bundle in dev mode. 
 
+!! Currently you need to do a change in scss or react files after the tasks is started to add livereload to the bundle created.
+
 ## Compatibility
 
 | Version       | XP version |
 | ------------- | ---------- |
+| 0.4.0         | 6.9.0      |
 | 0.3.0         | 6.9.0      |
 | 0.2.0         | 6.9.0      |
 | 0.1.0         | 6.9.0      |
 
 ## Changelog
 
+### 0.4.0
+
+* Added ES6 transpiling for serverside javascript files.
+* Added minifying of assets bundle for build task 
+* Added gulp for watching for changes in ES6 files and jsx files.
+* Added ES6 example service whoami and library auth  
+
+
 ### 0.3.0
 
 * Added AssetImage component for loading images from assets folder on server.

build.gradle

@@ -12,18 +12,15 @@ buildscript {
 
     dependencies {
         classpath "com.enonic.xp:gradle-plugin:${xpVersion}"
-        classpath "com.eriwen:gradle-css-plugin:2.14.0"
         classpath "com.moowork.gradle:gradle-node-plugin:1.1.1"
     }
 }
 
-
+apply plugin: 'com.enonic.xp.app'
+apply plugin: 'com.moowork.node'
 apply plugin: 'com.moowork.gulp'
 apply plugin: 'maven'
-apply plugin: 'com.enonic.xp.app'
-apply plugin: 'css'
 apply plugin: 'idea'
-apply plugin: 'com.moowork.node'
 
 app {
     name = project.appName
@@ -65,11 +62,20 @@ node {
     download = true
 }
 
+task dev(type: GulpTask, dependsOn: 'installGulp') {
+    args = ["--color", "--gulpfile", "gulpfile.js","watch"]
+}
+
+task gulp_build(type: GulpTask, dependsOn: 'installGulp') {
+    description = 'Build for production using gulp'
+    args = ["--color", "--gulpfile", "gulpfile.js"]
+}
+
 task webpack(type: NodeTask) {
     script = file('node_modules/webpack/bin/webpack.js')
 }
 
-task dev(type: NodeTask) {
+task webpackDev(type: NodeTask) {
     script = file('node_modules/webpack/bin/webpack.js')
     args = [
             "--config",
@@ -78,9 +84,8 @@ task dev(type: NodeTask) {
 
 }
 
-dev.dependsOn 'npmInstall'
+installGulp.dependsOn 'npmInstall'
 dev.dependsOn 'build'
 
-webpack.dependsOn 'npmInstall'
-
-build.dependsOn 'webpack'
+build.dependsOn 'gulp_build'
+build.mustRunAfter 'gulp_build'

gradle.properties

@@ -6,4 +6,4 @@ projectName = app.coreui.starter
 appName = no.rbrastad.enonic.starter.coreui
 displayName = Core UI Starter
 xpVersion = 6.9.0
-version = 0.3.0
+version = 0.4.0

gulpfile.js

@@ -0,0 +1,68 @@
+
+'use strict';
+
+// Folder variables
+var srcSite = 'src/main/resources';
+var buildSite = 'build/resources/main';
+var srcAssetsApp = srcSite + '/assets/**/*';
+var srcES6 = srcSite + '/**/*.es6';
+var buildAssets = buildSite + '/assets/dist';
+
+var gulp = require('gulp');
+var babel = require('gulp-babel');
+var gulpWebpack = require('webpack-stream');
+var plumber = require('gulp-plumber');
+
+gulp.task('default',['babel', 'webpack']);
+
+gulp.task('webpack', function() {
+    return gulp
+        .src( srcAssetsApp )
+        .pipe(plumber({
+            handleError: function (err) {
+                console.log(err);
+                this.emit('end');
+            }
+        }))
+        .pipe(gulpWebpack(require('./webpack.config.js')))
+        .pipe(gulp.dest(buildAssets));
+});
+
+
+gulp.task('webpack-dev', function() {
+    return gulp
+        .src( srcAssetsApp )
+        .pipe(plumber({
+            handleError: function (err) {
+                console.log(err);
+                this.emit('end');
+            }
+        }))
+        .pipe(gulpWebpack(require('./webpack-dev.config.js')))
+        .pipe(gulp.dest(buildAssets));
+});
+
+
+gulp.task('babel', () => {
+    return gulp.src( srcES6 )
+        .pipe(plumber({
+            handleError: function (err) {
+                console.log(err);
+                this.emit('end');
+            }
+        }))
+        .pipe(babel({
+            presets: [
+                ['es2015', {'modules': false}]
+            ]
+        }))
+        .pipe(gulp.dest( buildSite ));
+});
+
+
+gulp.task('watch', function() {
+    gulp.watch( srcES6 , ['babel']);
+    gulp.watch( srcAssetsApp , ['webpack-dev']);
+});
+
+

package.json

@@ -6,6 +6,8 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "chart.js": "^2.4.0",
     "css-loader": "^0.28.0",
+    "gulp-babel": "^6.1.2",
+    "gulp-plumber": "^1.1.0",
     "node-sass": "^4.5.2",
     "react": "^15.4.2",
     "react-addons-css-transition-group": "^15.4.2",
@@ -18,8 +20,9 @@
     "reactstrap": "^4.1.1",
     "sass-loader": "^6.0.3",
     "style-loader": "^0.16.1",
-    "webpack": "^1.14.0",
-    "webpack-livereload-plugin": "^0.11.0"
+    "webpack": "^1.15.0",
+    "webpack-livereload-plugin": "^0.11.0",
+    "webpack-stream": "^3.2.0"
   },
   "dependencies": {
     "babel-changed": "^7.0.0",
@@ -40,6 +43,6 @@
     "react-router": "^3.0.2",
     "reactstrap": "^4.1.1",
     "url-loader": "^0.5.8",
-    "webpack": "^1.14.0"
+    "webpack": "^1.15.0"
   }
 }

src/main/resources/assets/app/views/Dashboard/Dashboard.jsx

@@ -339,7 +339,7 @@ class Dashboard extends Component {
                     <a className="dropdown-item" href="#">Action</a>
                     <a className="dropdown-item" href="#">Another action</a>
                     <a className="dropdown-item" href="#">Something else here</a>
-                  </div>
+                  </div>z
                 </div>
                 <h4 className="mb-0">9.823</h4>
                 <p>Members online</p>

src/main/resources/lib/auth.es6

@@ -0,0 +1,18 @@
+import {
+ getUser,
+ getProfile,
+ getMemberships
+} from '/lib/xp/auth';
+
+export function whoami() {
+    let user = getUser({
+        includeProfile : true
+    });
+
+    let whoami = {
+     user,
+    "memberships" : getMemberships( user.key )
+    };
+
+    return whoami;
+}

src/main/resources/services/whoami/whoami.es6

@@ -0,0 +1,7 @@
+import {whoami} from '/lib/auth';
+
+function get(request) {
+    return  { body: whoami()};
+}
+
+exports.get = get;

src/main/resources/services/whoami/whoami.xml

@@ -0,0 +1,5 @@
+<service>
+    <allow>
+        <principal>role:system.authenticated</principal>
+    </allow>
+</service>

src/main/resources/site/site.xml

@@ -7,5 +7,4 @@
   <name>Runar Brastad</name>
   <url>https://github.com/rbrastad</url>
 </vendor>
-
 </site>

webpack-dev.config.js

@@ -7,13 +7,13 @@ var paths = {
     appSrc: 'src/main/resources/assets/app',
     app: 'build/resources/main/assets/app',
     appDistPath: 'build/resources/main/assets/dist',
-    scssSrc: 'src/main/resources/assets/scss/style.scss',
+    scssSrc: 'src/main/resources/assets/scss/style.scss'
 };
 
 module.exports = {
     entry: {
         app: path.join(__dirname, paths.appSrc),
-        style: path.join(__dirname, paths.scssSrc)
+        style: path.join(__dirname, paths.scssSrc),
     },
     resolve: {
         root: [
@@ -38,11 +38,11 @@ module.exports = {
             },
             {
                 test: /\.scss$/,
-                loader: ExtractTextPlugin.extract(
+                loader:  ExtractTextPlugin.extract(
                     "style",
                     "css!sass")
             },
-            { test: /\.css$/, loader: "style-loader!css-loader" },
+            { test: /\.css$/, loader: "css-loader" },
             { test: /\.png$/, loader: "url-loader?limit=100000" }
         ]
     },