From d650baab6d368c9bdd268cbd2c1b35da72c1904e Mon Sep 17 00:00:00 2001 From: Eric Hulburd Date: Tue, 1 Mar 2016 13:39:47 -0600 Subject: [PATCH] use react templates loader --- client/config/development/templates.js | 18 +++---- client/config/development/webpack.js | 3 ++ client/dashboard/about/about.rt.js | 5 -- client/dashboard/energy/energy.rt.js | 20 -------- client/dashboard/energy/graph/graph.rt.js | 5 -- client/dashboard/energy/table/table.rt.js | 12 ----- client/dashboard/house/house.rt.js | 48 ------------------ client/dashboard/layout/layout.rt.js | 23 --------- client/dashboard/power/graph/graph.rt.js | 5 -- client/dashboard/power/power.rt.js | 18 ------- client/dashboard/power/table/table.rt.js | 12 ----- gulpfile.babel.js | 11 ---- package.json | 1 + server/lib/tasks/react_template_compile.js | 58 ---------------------- spec/client/dashboard/models/house.test.js | 1 - 15 files changed, 13 insertions(+), 227 deletions(-) delete mode 100644 client/dashboard/about/about.rt.js delete mode 100644 client/dashboard/energy/energy.rt.js delete mode 100644 client/dashboard/energy/graph/graph.rt.js delete mode 100644 client/dashboard/energy/table/table.rt.js delete mode 100644 client/dashboard/house/house.rt.js delete mode 100644 client/dashboard/layout/layout.rt.js delete mode 100644 client/dashboard/power/graph/graph.rt.js delete mode 100644 client/dashboard/power/power.rt.js delete mode 100644 client/dashboard/power/table/table.rt.js delete mode 100644 server/lib/tasks/react_template_compile.js diff --git a/client/config/development/templates.js b/client/config/development/templates.js index 5068f77..22203d5 100644 --- a/client/config/development/templates.js +++ b/client/config/development/templates.js @@ -3,15 +3,15 @@ import fs from 'fs'; -import aboutRt from './../../dashboard/about/about.rt.js'; -import houseRt from './../../dashboard/house/house.rt.js'; -import layoutRt from './../../dashboard/layout/layout.rt.js'; -import energyRt from './../../dashboard/energy/energy.rt.js'; -import energyGraphRt from './../../dashboard/energy/graph/graph.rt.js'; -import energyTableRt from './../../dashboard/energy/table/table.rt.js'; -import powerRt from './../../dashboard/power/power.rt.js'; -import powerGraphRt from './../../dashboard/power/graph/graph.rt.js'; -import powerTableRt from './../../dashboard/power/table/table.rt.js'; +import aboutRt from './../../dashboard/about/about.rt'; +import houseRt from './../../dashboard/house/house.rt'; +import layoutRt from './../../dashboard/layout/layout.rt'; +import energyRt from './../../dashboard/energy/energy.rt'; +import energyGraphRt from './../../dashboard/energy/graph/graph.rt'; +import energyTableRt from './../../dashboard/energy/table/table.rt'; +import powerRt from './../../dashboard/power/power.rt'; +import powerGraphRt from './../../dashboard/power/graph/graph.rt'; +import powerTableRt from './../../dashboard/power/table/table.rt'; const TEMPLATES = { about: aboutRt, diff --git a/client/config/development/webpack.js b/client/config/development/webpack.js index 7540872..87af036 100644 --- a/client/config/development/webpack.js +++ b/client/config/development/webpack.js @@ -23,6 +23,9 @@ module.exports = { }, { test: /\.json$/, loader: 'json' + }, { + test: /\.rt/, + loader: "react-templates-loader" } ] }, diff --git a/client/dashboard/about/about.rt.js b/client/dashboard/about/about.rt.js deleted file mode 100644 index 0c32ab8..0000000 --- a/client/dashboard/about/about.rt.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; -export default function () { - return React.createElement('div', { 'id': 'about' }, React.createElement('div', { 'className': 'panel panel-default' }, React.createElement('div', { 'className': 'panel-heading' }, 'About'), React.createElement('div', { 'className': 'panel-body' }, React.createElement('p', {}, 'This is a Spike bundle prototype using the following lirbaries:'), React.createElement('ul', {}, React.createElement('li', {}, 'React'), React.createElement('li', {}, 'React Templates'), React.createElement('li', {}, 'React Router'), React.createElement('li', {}, 'LokiJs - persisting API calls to indexedDb'), React.createElement('li', {}, 'Webpack - hot mode developing and app bundling'), React.createElement('li', {}, 'Babel - ES6 transpiler')), React.createElement('p', {}, 'The demo app consists of a dataset of 10 houses and 10 years of randomly generated power consumption and production at 15 minute intervals. You can toggle between different houses and time periods to compare and contrast the dataset.'), React.createElement('p', {}, 'Select a house below to get started.')))); -}; \ No newline at end of file diff --git a/client/dashboard/energy/energy.rt.js b/client/dashboard/energy/energy.rt.js deleted file mode 100644 index 056e626..0000000 --- a/client/dashboard/energy/energy.rt.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; -export default function () { - return React.createElement('div', { 'id': 'energy_view' }, this.state.loading_energy_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n Retrieving energy data...\n ') : null, this.props.view === 'graph' ? React.createElement('div', {}, React.createElement('h4', {}, 'Select Data'), React.createElement('div', { - 'className': 'btn-group', - 'role': 'group' - }, React.createElement('button', { - 'data-param': 'graph_attr', - 'data-value': 'consumption', - 'className': _.keys(_.pick({ active: this.state.graph_attr === 'consumption' }, _.identity)).join(' ') + ' ' + 'btn btn-primary', - 'onClick': this.setAttr, - 'type': 'button' - }, 'Consumption'), React.createElement('button', { - 'data-param': 'graph_attr', - 'data-value': 'production', - 'className': _.keys(_.pick({ active: this.state.graph_attr === 'production' }, _.identity)).join(' ') + ' ' + 'btn btn-primary', - 'onClick': this.setGraphAttr, - 'type': 'button' - }, 'Production'))) : null, '\n ', this.props.children, '\n'); -}; \ No newline at end of file diff --git a/client/dashboard/energy/graph/graph.rt.js b/client/dashboard/energy/graph/graph.rt.js deleted file mode 100644 index c02eac8..0000000 --- a/client/dashboard/energy/graph/graph.rt.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; -export default function () { - return React.createElement('div', { 'id': 'energy_graph' }); -}; \ No newline at end of file diff --git a/client/dashboard/energy/table/table.rt.js b/client/dashboard/energy/table/table.rt.js deleted file mode 100644 index 721cbb8..0000000 --- a/client/dashboard/energy/table/table.rt.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; -function repeatEnergy_datum1(energy_datum, energy_datumIndex) { - return React.createElement('tr', { 'key': energy_datum.scoped_id }, React.createElement('td', {}), React.createElement('td', {}, energy_datum.day_to_s), React.createElement('td', {}, energy_datum.consumption_to_s), React.createElement('td', {}, energy_datum.production_to_s)); -} -export default function () { - return this.context.house ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Day'), React.createElement('th', {}, 'Consumption (kWh)'), React.createElement('th', {}, 'Production (kWh)'))), React.createElement.apply(this, [ - 'tbody', - {}, - _.map(this.context.house.energy_data, repeatEnergy_datum1.bind(this)) - ])) : null; -}; \ No newline at end of file diff --git a/client/dashboard/house/house.rt.js b/client/dashboard/house/house.rt.js deleted file mode 100644 index 7fd4f39..0000000 --- a/client/dashboard/house/house.rt.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; -function repeatYear1(year, yearIndex) { - return React.createElement('button', { - 'data-param': 'year', - 'data-value': year, - 'key': 'data-year-' + year, - 'className': 'btn-info btn btn-sm' + ' ' + _.keys(_.pick({ active: year == this.context.house.state.year }, _.identity)).join(' '), - 'onClick': this.setParam.bind(this) - }, year); -} -export default function () { - return React.createElement('div', { 'id': 'house' }, React.createElement('h4', {}, 'Select dataset:'), React.createElement('div', { - 'className': 'btn-group', - 'role': 'group' - }, React.createElement('button', { - 'data-param': 'dataset', - 'data-value': 'energy', - 'className': _.keys(_.pick({ active: this.energySelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary', - 'onClick': this.setParam.bind(this), - 'type': 'button' - }, 'Daily Energy Statistics'), React.createElement('button', { - 'data-param': 'dataset', - 'data-value': 'power', - 'className': _.keys(_.pick({ active: this.powerSelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary', - 'onClick': this.setParam.bind(this), - 'type': 'button' - }, '15-minute Power Statistics')), React.createElement('h4', {}, 'View as:'), React.createElement('div', { - 'className': 'btn-group', - 'role': 'group' - }, React.createElement('button', { - 'data-param': 'view', - 'data-value': 'graph', - 'className': _.keys(_.pick({ active: this.graphSelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary', - 'onClick': this.setParam.bind(this), - 'type': 'button' - }, 'Graph'), React.createElement('button', { - 'data-param': 'view', - 'data-value': 'table', - 'className': _.keys(_.pick({ active: this.tableSelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary', - 'onClick': this.setParam.bind(this), - 'type': 'button' - }, 'Table')), this.context.house ? React.createElement('div', {}, React.createElement('h4', {}, 'Select dates:'), React.createElement.apply(this, [ - 'div', - { 'className': 'btn-group' }, - _.map(this.context.house.years, repeatYear1.bind(this)) - ])) : null, React.createElement('br', {}), '\n\n ', this.props.children, '\n'); -}; \ No newline at end of file diff --git a/client/dashboard/layout/layout.rt.js b/client/dashboard/layout/layout.rt.js deleted file mode 100644 index f3d8a7b..0000000 --- a/client/dashboard/layout/layout.rt.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; -function repeatHouse1(house, houseIndex) { - return React.createElement('option', { - 'value': house.data.id, - 'key': house.scoped_id - }, house.data.name); -} -export default function () { - return React.createElement('div', { 'id': 'layout' }, this.state.requesting_data ? React.createElement('div', { 'className': 'alert alert-warning' }, 'Retrieving houses...') : null, React.createElement('h4', {}, 'Select household:'), this.state.houses ? React.createElement.apply(this, [ - 'select', - { - 'id': 'houses_select', - 'className': 'form-control', - 'onChange': this.setHouse.bind(this), - 'value': this.props.params.house_id - }, - _.map(this.state.houses, repeatHouse1.bind(this)) - ]) : null, this.state.house ? React.createElement('button', { - 'onClick': this.refreshData.bind(this), - 'className': 'btn btn-xs btn-default' - }, 'Refresh House Data') : null, '\n\n ', this.props.children, '\n'); -}; \ No newline at end of file diff --git a/client/dashboard/power/graph/graph.rt.js b/client/dashboard/power/graph/graph.rt.js deleted file mode 100644 index 230bc07..0000000 --- a/client/dashboard/power/graph/graph.rt.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; -export default function () { - return React.createElement('div', { 'id': 'power_graph' }); -}; \ No newline at end of file diff --git a/client/dashboard/power/power.rt.js b/client/dashboard/power/power.rt.js deleted file mode 100644 index 7a49c0c..0000000 --- a/client/dashboard/power/power.rt.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; -function repeatMonth1(month, monthIndex) { - return React.createElement('button', { - 'data-param': 'month', - 'data-value': month, - 'key': 'data-month-' + month, - 'className': 'btn-warning btn btn-sm' + ' ' + _.keys(_.pick({ active: month === this.context.house.state.month }, _.identity)).join(' '), - 'onClick': this.setParam.bind(this) - }, month); -} -export default function () { - return React.createElement('div', { 'id': 'power_view' }, React.createElement.apply(this, [ - 'div', - { 'className': 'btn-group' }, - this.context.house ? _.map(this.context.house.availableMonths(), repeatMonth1.bind(this)) : null - ]), this.state.loading_power_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n Retrieving power data...\n ') : null, React.createElement('div', { 'id': 'power_date_setter' }), '\n ', this.props.children, '\n'); -}; \ No newline at end of file diff --git a/client/dashboard/power/table/table.rt.js b/client/dashboard/power/table/table.rt.js deleted file mode 100644 index 00d8916..0000000 --- a/client/dashboard/power/table/table.rt.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; -function repeatPower_datum1(power_datum, power_datumIndex) { - return React.createElement('tr', { 'key': power_datum.scoped_id }, React.createElement('td', {}), React.createElement('td', {}, power_datum.time_to_s), React.createElement('td', {}, power_datum.consumption_to_s), React.createElement('td', {}, power_datum.production_to_s)); -} -export default function () { - return this.context.house ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Time'), React.createElement('th', {}, 'Consumption (W)'), React.createElement('th', {}, 'Production (W)'))), React.createElement.apply(this, [ - 'tbody', - {}, - _.map(this.context.house.power_data, repeatPower_datum1.bind(this)) - ])) : null; -}; \ No newline at end of file diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 0b1973a..74d3e13 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -7,7 +7,6 @@ import FsHelper from './server/lib/fs_helper'; import ComponentMapWriter from './server/lib/tasks/component_map_writer'; import DB from './server/config/database'; import {PowerDataSeed, HouseSeed} from './server/lib/tasks/seed_data'; -import rtCompile from './server/lib/tasks/react_template_compile'; gulp.task('generate_power_csv', function(done){ DB.sync().then(()=>{ @@ -27,16 +26,6 @@ gulp.task('save_house_csv', function(done){ }); }); -gulp.task('compile_react_templates', function() { - gulp.src('./client/dashboard/**/*.rt') - .pipe(rtCompile({ - modules: 'es6', - targetVersion: '0.14.0', - suffix: '.rt' - })) - .pipe(gulp.dest('./client/dashboard')); -}); - // right now, build only available for design. gulp.task('build', function(done) { var config, env, diff --git a/package.json b/package.json index 1eb594a..2f45bff 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "sass-loader": "3.1.2", "style-loader": "^0.12.3", "json-loader": "0.5.4", + "react-templates-loader": "0.4.0", "node-sass": "3.4.2", "moment-timezone": "0.5.0", "yargs": "3.32.0", diff --git a/server/lib/tasks/react_template_compile.js b/server/lib/tasks/react_template_compile.js deleted file mode 100644 index d633695..0000000 --- a/server/lib/tasks/react_template_compile.js +++ /dev/null @@ -1,58 +0,0 @@ -'use strict'; -// through2 is a thin wrapper around node transform streams -import through from 'through2'; -import gutil from 'gulp-util'; -import rt from 'react-templates'; -import path from 'path'; -import extend from 'extend'; - -// Consts -const PLUGIN_NAME = 'gulp-react-templates'; -var PluginError = gutil.PluginError; - -function normalizeName(name) { - return name.replace(/-/g, '_'); -} - -export default function (opt) { - function replaceExtension(filePath) { - return filePath + '.js'; - } - - function transform(file, enc, cb) { - if (file.isNull()) { - return cb(null, file); - } - if (file.isStream()) { - return cb(new PluginError(PLUGIN_NAME, 'Streaming not supported')); - } - - var filePath = file.path, - str = file.contents.toString('utf8'), - data; - - var options = extend({ - filename: file.path, - sourceFiles: [file.relative], - generatedFile: replaceExtension(file.relative) - }, opt); - - if (options.modules === 'none' && !options.name) { - options.name = normalizeName(path.basename(filePath, path.extname(filePath))); - console.log('options.name ', options.name) - } - - try { - data = rt.convertTemplateToReact(str, options); - } catch (err) { - return cb(new PluginError(PLUGIN_NAME, err)); - } - - file.contents = new Buffer(data); - - file.path = replaceExtension(file.path); - cb(null, file); - } - - return through.obj(transform); -}; diff --git a/spec/client/dashboard/models/house.test.js b/spec/client/dashboard/models/house.test.js index 133049a..c8f2b47 100644 --- a/spec/client/dashboard/models/house.test.js +++ b/spec/client/dashboard/models/house.test.js @@ -3,7 +3,6 @@ import moment from 'moment-timezone'; import House from './../../../../client/models/house.js'; - describe('house#setMonthState', ()=>{ var data_until = 1456589922, // Sat, 27 Feb 2016 16:18:42 +0000