Merge pull request #11 from westlywright/2.0

Rancher 2.0 & Ember 3.3 Compatability Updates

component/component.js

@@ -1,68 +1,71 @@
-/* v----- Do not change anything between here
- *       (the DRIVERNAME placeholder will be automatically replaced during build) */
-define('ui/components/node-driver/driver-%%DRIVERNAME%%/component', ['exports', 'ember', 'shared/components/node-driver/driver-%%DRIVERNAME%%/component'], function (exports, _ember, _component) {
-  exports['default'] = _component['default'];
-});
+/*!!!!!!!!!!!Do not change anything between here (the DRIVERNAME placeholder will be automatically replaced at buildtime)!!!!!!!!!!!*/
+
+import NodeDriver from 'shared/mixins/node-driver';
+
+const LAYOUT;
+const computed     = Ember.computed;
+const get          = Ember.get;
+const set          = Ember.set;
+const alias        = Ember.computed.alias;
+const service      = Ember.inject.service;
+const defaultRadix = 10;
+const defaultBase  = 1024;
+
+export default Ember.Component.extend(NodeDriver, {
+  /*!!!!!!!!!!!DO NOT CHANGE END!!!!!!!!!!!*/
+  driverName: '%%DRIVERNAME%%',
+  config:     alias('model.%%DRIVERNAME%%Config'),
+  app:        service(),
+
+  init() {
+    /*!!!!!!!!!!!DO NOT CHANGE START!!!!!!!!!!!*/
+    // This does on the fly template compiling, if you mess with this :cry:
+    const decodedLayout = window.atob(LAYOUT);
+    const template      = Ember.HTMLBars.compile(decodedLayout, {
+      moduleName: 'nodes/components/driver-interoutevdc/template'
+    });
+    set(this,'layout', template);
+
+    this._super(...arguments);
+    /*!!!!!!!!!!!DO NOT CHANGE END!!!!!!!!!!!*/
 
-define('shared/components/node-driver/driver-%%DRIVERNAME%%/component', ['exports', 'ember', 'shared/mixins/node-driver', 'shared/components/node-driver/driver-%%DRIVERNAME%%/template'], function (exports, _ember, _uiMixinsDriver, _template) {
-/* ^--- And here */
+    const config = get(this, 'globalStore').createRecord({
+      type:       '%%DRIVERNAME%%Config',
+      cpuCount:   2,
+      memorySize: 2048,
+    });
 
-  // You can put embmer object here
-  var computed = Ember.computed;
-  var get = Ember.get;
-  var set = Ember.set;
-  var alias = Ember.computed.alias;
+    set(this, 'model.%%DRIVERNAME%%Config', config);
 
-/* v----- Do not change anything between here
- *       (the DRIVERNAME placeholder will be automatically replaced during build) */
-  exports['default'] = _ember['default'].Component.extend(_uiMixinsDriver['default'], {
-    layout: _template.default,
-    driverName: '%%DRIVERNAME%%',
-    config: alias('model.%%DRIVERNAME%%Config'),
-/* ^--- And here */
+  },
 
-    // Write your component here, starting with setting 'model' to a machine with your config populated
-    bootstrap: function() {
-      let config = get(this, 'globalStore').createRecord({
-        type: '%%DRIVERNAME%%Config',
-        cpuCount: 2,
-        memorySize: 2048,
-      });
+  // Add custom validation beyond what can be done from the config API schema
+  validate() {
+    // Get generic API validation errors
+    this._super();
 
-      set(this, 'model.%%DRIVERNAME%%Config', config);
-    },
+    var errors = get(this, 'errors')||[];
 
-    // Add custom validation beyond what can be done from the config API schema
-    validate() {
-      // Get generic API validation errors
-      this._super();
-      var errors = get(this, 'errors')||[];
-      if ( !get(this, 'model.name') ) {
-        errors.push('Name is required');
-      }
+    if ( !get(this, 'model.name') ) {
+      errors.push('Name is required');
+    }
 
-      // Add more specific errors
+    // Add more specific errors
 
-      // Check something and add an error entry if it fails:
-      if ( parseInt(get(this, 'config.memorySize'),10) < 1024 )
-      {
-        errors.push('Memory Size must be at least 1024 MB');
-      }
+    // Check something and add an error entry if it fails:
+    if ( parseInt(get(this, 'config.memorySize'), defaultRadix) < defaultBase ) {
+      errors.push('Memory Size must be at least 1024 MB');
+    }
 
-      // Set the array of errors for display,
-      // and return true if saving should continue.
-      if ( get(errors, 'length') )
-      {
-        set(this, 'errors', errors);
-        return false;
-      }
-      else
-      {
-        set(this, 'errors', null);
-        return true;
-      }
-    },
+    // Set the array of errors for display,
+    // and return true if saving should continue.
+    if ( get(errors, 'length') ) {
+      set(this, 'errors', errors);
+      return false;
+    } else {
+      set(this, 'errors', null);
+      return true;
+    }
 
-    // Any computed properties or custom logic can go here
-  });
+  },
 });

component/rexport.js

@@ -0,0 +1 @@
+export { default } from 'nodes/components/driver-%%DRIVERNAME%%/component';

component/template.hbs

@@ -56,4 +56,4 @@
 
   {{!-- This component shows the Create and Cancel buttons --}}
   {{save-cancel save="save" cancel="cancel"}}
-</section>
+</section>

gulpfile.js

@@ -3,12 +3,11 @@ const gulp        = require('gulp');
 const clean       = require('gulp-clean');
 const gulpConcat  = require('gulp-concat');
 const gulpConnect = require('gulp-connect');
-const emCompiler  = require('ember-source/dist/ember-template-compiler');
-const htmlbars    = require('gulp-htmlbars-compiler');
-const wrapAmd     = require('gulp-wrap-amd');
 const replace     = require('gulp-replace');
+const babel       = require('gulp-babel');
 const argv        = require('yargs').argv;
 const pkg         = require('./package.json');
+const fs          = require('fs');
 
 const NAME_TOKEN  = '%%DRIVERNAME%%';
 
@@ -31,62 +30,98 @@ gulp.task('watch', function() {
   gulp.watch(['./component/*.js', './component/*.hbs', './component/*.css'], ['build']);
 });
 
-gulp.task('server', ['build', 'watch'], function() {
-  return gulpConnect.server({
-    root: [DIST],
-    port: process.env.PORT || 3000,
-    https: false
-  });
-});
-
 gulp.task('clean', function() {
-  return gulp.src([DIST, TMP], {read: false})
+  return gulp.src([`${DIST}*.js`, `${DIST}*.css`, `${DIST}*.hbs`, `${TMP}*.js`, `${TMP}*.css`, `${TMP}*.hbs`,], {read: false})
   .pipe(clean());
 });
 
-gulp.task('js', function() {
+gulp.task('assets', ['styles'], function() {
+  return gulp.src(ASSETS+'*')
+  .pipe(gulp.dest(DIST));
+});
+
+gulp.task('build', ['compile']);
+
+gulp.task('babel', ['assets'], function() {
+
+  const opts = {
+    "presets": [
+      ["env", {
+        "targets": {
+          "browsers": ["> 1%"]
+        }
+      }]
+    ],
+    "plugins": [ "add-module-exports",
+                 [ "transform-es2015-modules-amd", {"noInterop": true,} ]
+               ],
+    "moduleId": `nodes/components/driver-${DRIVER_NAME}/component`,
+    "comments": false
+  };
+
+  let hbs = fs.readFileSync(`${BASE}template.hbs`);
+
+  hbs = Buffer.from(hbs).toString('base64');
+
   return gulp.src([
-    BASE + '*.js'
+    `${BASE}component.js`
   ])
-  .pipe(replace(NAME_TOKEN, DRIVER_NAME))
-  .pipe(gulpConcat('component.js',{newLine: ';\n'}))
-  .pipe(gulp.dest(TMP));
+    .pipe(replace('const LAYOUT;', `const LAYOUT = "${ hbs }";`))
+    .pipe(babel(opts))
+    .pipe(gulpConcat(`component.js`,{newLine: ';\n'}))
+    .pipe(gulp.dest(TMP));
 });
 
-gulp.task('css', function() {
+gulp.task('rexport', ['babel'], function() {
+  const rexpOpts = {
+    "presets": [
+      ["env", {
+        "targets": {
+          "browsers": ["> 1%"]
+        }
+      }]
+    ],
+    "plugins": [ "add-module-exports",
+                 [ "transform-es2015-modules-amd", {"noInterop": true,} ]
+               ],
+    "moduleId": `ui/components/driver-${DRIVER_NAME}/component`
+  }
+
   return gulp.src([
-    BASE + '**.css'
+    `${BASE}rexport.js`
   ])
-  .pipe(replace(NAME_TOKEN, DRIVER_NAME))
-  .pipe(gulpConcat('component.css',{newLine: ';\n'}))
-  .pipe(gulp.dest(DIST));
+    .pipe(replace(NAME_TOKEN, DRIVER_NAME))
+    .pipe(babel(rexpOpts))
+    .pipe(gulpConcat(`rexport.js`,{newLine: ';\n'}))
+    .pipe(gulp.dest(TMP));
 });
 
-gulp.task('assets', function() {
-  return gulp.src(ASSETS+'*')
-  .pipe(gulp.dest(DIST));
+gulp.task('compile', ['rexport'], function() {
+  return gulp.src([
+    `${TMP}**.js`
+  ])
+    .pipe(gulpConcat(`component.js`,{newLine: ';\n'}))
+    .pipe(gulp.dest(DIST));
+});
+
+
+gulp.task('styles', ['clean'], function() {
+  return gulp.src([
+    BASE + '**.css'
+  ])
+    .pipe(replace(NAME_TOKEN, DRIVER_NAME))
+    .pipe(gulpConcat(`component.css`,{newLine: ';\n'}))
+    .pipe(gulp.dest(DIST));
 });
 
-gulp.task('compiled', ['js'], function() {
-  return gulp.src(BASE +'**/*.hbs')
-  .pipe(replace(NAME_TOKEN, DRIVER_NAME))
-  .pipe(htmlbars({compiler: emCompiler}))
-  .pipe(wrapAmd({
-    deps: ['exports'],
-    params: ['exports'],
-    moduleRoot: 'component/',
-    modulePrefix: 'shared/components/node-driver/driver-' + DRIVER_NAME + '/'
-  }))
-  .pipe(replace(
-    "return Ember.TEMPLATES['template']", 'exports["default"]'
-  ))
-  .pipe(gulpConcat('template.js'), {newLine: ';\n'})
-  .pipe(gulp.dest(TMP));
+gulp.task('server', ['build', 'watch'], function() {
+  return gulpConnect.server({
+    root: [DIST],
+    port: process.env.PORT || 3000,
+    https: false,
+  });
 });
 
-gulp.task('build', ['compiled','css','assets'], function() {
-  return gulp.src([`${TMP}/*.js`])
-  .pipe(gulpConcat('component.js',{newLine: ';\n'}))
-  .pipe(gulp.dest(DIST))
-  .pipe(gulpConnect.reload());
+gulp.task('watch', function() {
+  gulp.watch(['./component/*.js', './component/*.hbs', './component/*.css'], ['build']);
 });