From eb273a5c933d20b862e57bce2b0fc156be54f693 Mon Sep 17 00:00:00 2001 From: Damian Aruj Date: Tue, 4 Oct 2016 14:39:35 -0300 Subject: [PATCH] Example using css-modules and the latest version of react-templates. --- client/config/development/entry.js | 4 +++ client/config/development/webpack.js | 14 ++++---- package.json | 6 ++-- server/assets/css/app.scss | 32 ++++++++++--------- .../components/layouts/test/test.component.js | 20 ++++++++++++ shared/components/layouts/test/test.rt.html | 5 +++ shared/components/layouts/test/test.scss | 5 +++ shared/components/layouts/test/test.test.js | 14 ++++++++ shared/lib/routes.js | 5 +++ shared/lib/routes/test/test.route.js | 18 +++++++++++ shared/lib/routes/test/test.test.js | 31 ++++++++++++++++++ 11 files changed, 128 insertions(+), 26 deletions(-) create mode 100644 shared/components/layouts/test/test.component.js create mode 100644 shared/components/layouts/test/test.rt.html create mode 100644 shared/components/layouts/test/test.scss create mode 100644 shared/components/layouts/test/test.test.js create mode 100644 shared/lib/routes/test/test.route.js create mode 100644 shared/lib/routes/test/test.test.js diff --git a/client/config/development/entry.js b/client/config/development/entry.js index dee5314..ea94b65 100644 --- a/client/config/development/entry.js +++ b/client/config/development/entry.js @@ -1,5 +1,9 @@ import { createHistory, useQueries } from 'history'; +import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'; +import '!style-loader!css-loader!font-awesome/css/font-awesome.css'; +import 'assets/css/app.scss'; + import app from 'client/app'; app(useQueries(createHistory)); diff --git a/client/config/development/webpack.js b/client/config/development/webpack.js index 85e168d..572666a 100644 --- a/client/config/development/webpack.js +++ b/client/config/development/webpack.js @@ -9,8 +9,7 @@ const ROOT = CLIENT + '/..'; // Identical to development webpack config, except minified. module.exports = { entry: { - app: __dirname + '/entry', - style: __dirname + '/style' + app: __dirname + '/entry' }, devtool: 'source-map', output: { @@ -22,12 +21,12 @@ module.exports = { { test: /\.js$/, loader: 'babel' - }, { - test: /\.scss$/, - loader: ExtractTextPlugin.extract('style', 'css!sass?sourceMap=true') }, { test: /\.css$/, - loader: ExtractTextPlugin.extract('style', 'css?sourceMap=true') + loader: 'style-loader!css-loader?modules' + }, { + test: /\.scss$/, + loader: 'style-loader!css-loader?modules!sass-loader' }, { test: /\.json$/, loader: 'json' @@ -57,7 +56,7 @@ module.exports = { loader: 'url?limit=10000&mimetype=image/svg+xml' }, { test: /\.rt\.html$/, - loader: 'react-templates-loader?targetVersion=0.14.0' + loader: 'react-templates-loader?modules=amd' } ] }, @@ -90,4 +89,3 @@ module.exports = { } } } - diff --git a/package.json b/package.json index 3a6ecee..390429c 100644 --- a/package.json +++ b/package.json @@ -91,16 +91,16 @@ "i18next-xhr-backend": "^0.5.3", "immutable": "3.8.x", "jquery": "2.2.x", - "morgan": "~1.5.1", "moment": "2.13.x", + "morgan": "~1.5.1", "query-string": "^3.0.0", "react": "0.14.7", "react-addons-test-utils": "0.14.7", "react-bootstrap": "0.29.x", "react-dom": "0.14.7", "react-redux": "4.4.x", - "react-templates": "0.4.x", - "react-templates-loader": "0.4.x", + "react-templates": "^0.5.4", + "react-templates-loader": "^0.5.1", "redux": "3.5.x", "redux-act": "0.5.x", "redux-loop": "2.1.x", diff --git a/server/assets/css/app.scss b/server/assets/css/app.scss index 80540b4..f6878e0 100644 --- a/server/assets/css/app.scss +++ b/server/assets/css/app.scss @@ -1,16 +1,18 @@ -html, body { - height:100%; -} -#app_container { - min-height: 100%; - position:relative; - padding-bottom:100px; -} -#app_footer { - width:100%; - padding:15px; - position:absolute; - bottom:0px; - border-top:2px solid darkgrey; - background-color:#F8F8F8; +:global { + html, body { + height:100%; + } + #app_container { + min-height: 100%; + position:relative; + padding-bottom:100px; + } + #app_footer { + width:100%; + padding:15px; + position:absolute; + bottom:0px; + border-top:2px solid darkgrey; + background-color:#F8F8F8; + } } diff --git a/shared/components/layouts/test/test.component.js b/shared/components/layouts/test/test.component.js new file mode 100644 index 0000000..27e1921 --- /dev/null +++ b/shared/components/layouts/test/test.component.js @@ -0,0 +1,20 @@ +/*global module*/ + +import React from 'react'; + +import template from './test.rt.html'; +import SpikeComponent from 'shared/lib/base_classes/spike_component'; + +class TestComponent extends SpikeComponent { + + get template(){ + return template; + } + +} + +TestComponent.propTypes = { + +}; + +module.exports = TestComponent; diff --git a/shared/components/layouts/test/test.rt.html b/shared/components/layouts/test/test.rt.html new file mode 100644 index 0000000..698ca87 --- /dev/null +++ b/shared/components/layouts/test/test.rt.html @@ -0,0 +1,5 @@ + + +
+ TestComponent body! +
diff --git a/shared/components/layouts/test/test.scss b/shared/components/layouts/test/test.scss new file mode 100644 index 0000000..408cd53 --- /dev/null +++ b/shared/components/layouts/test/test.scss @@ -0,0 +1,5 @@ +.testWrapper { + background-color: red; + width: 300px; + height: 400px; +} diff --git a/shared/components/layouts/test/test.test.js b/shared/components/layouts/test/test.test.js new file mode 100644 index 0000000..a45b8e7 --- /dev/null +++ b/shared/components/layouts/test/test.test.js @@ -0,0 +1,14 @@ +/*global describe it expect console*/ + +import TestUtils from 'react-addons-test-utils'; +import React from 'react'; + +import Test from './test.component'; + +describe('Test component', ()=>{ + it('renders without problems', (done)=>{ + test = TestUtils.renderIntoDocument(React.createElement(Test) ); + expect(test.state).toEqual({}); + done(); + }); +}); diff --git a/shared/lib/routes.js b/shared/lib/routes.js index 7e483fb..057023b 100644 --- a/shared/lib/routes.js +++ b/shared/lib/routes.js @@ -2,9 +2,14 @@ import Details from './routes/details/details.route'; import Index from './routes/index/index.route'; import Login from './routes/login/login.route'; import Missing from './routes/missing/missing.route'; +import Test from './routes/test/test.route'; export function defineRoutes(i18n) { return includeHelpers([ + new Test({ + path: new RegExp(`^\/?((\\w{2})\/)?(${i18n.t('test')})$`), + parameters: {2: 'locale'} + }), new Index({ path: new RegExp(`^\/?((\\w{2})\/?)?$`), parameters: {2: 'locale'} diff --git a/shared/lib/routes/test/test.route.js b/shared/lib/routes/test/test.route.js new file mode 100644 index 0000000..d9d3164 --- /dev/null +++ b/shared/lib/routes/test/test.route.js @@ -0,0 +1,18 @@ +/*global*/ + +import RouteBase from '../route.base'; + +class Test extends RouteBase { + + get route_name(){ + return 'Test'; + } + + get component(){ + return require('shared/components/layouts/test/test.component'); + } + +} + +export default Test; + diff --git a/shared/lib/routes/test/test.test.js b/shared/lib/routes/test/test.test.js new file mode 100644 index 0000000..df6c4de --- /dev/null +++ b/shared/lib/routes/test/test.test.js @@ -0,0 +1,31 @@ +/*global describe it expect*/ + +import { testSharedRouteBehavior } from '../route.base.test'; +import { defineRoutes } from '../../routes'; +import i18n from 'shared/lib/i18n/i18nFactory.mock'; + +let route = defineRoutes(i18n).getRoute('Test'); + +describe('Test route', ()=>{ + testSharedRouteBehavior(route); + + it('detects location', ()=>{ + expect(route.matchesLocation('test')).toBe(true); + expect(route.matchesLocation('/en/test')).toBe(true); + }); + + it('properly sets params', ()=>{ + let params = route.parseParams({pathname: '/en/test'}); + expect(params).toEqual({locale: 'en'}); + }); + + it('can create url from action', ()=>{ + let action = {payload: {}}; + expect(route.url(action, i18n)).toEqual('/en/test'); + }) + + it('has a component', ()=>{ + expect(typeof route.component).toEqual('function'); + }); + +});