Skip to content

Commit a06cd27

Browse files
mightyalekseymightyaleksey
committed
wierd description
1 parent 71be603 commit a06cd27

File tree

4 files changed

+99
-7
lines changed

4 files changed

+99
-7
lines changed

‎demo/app/view-engine.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ const ReactDOM = require('react-dom/server');
77

88
const doctype = '<!doctype html>';
99

10+
/**
11+
* @param {object} view
12+
*/
1013
function dropCache(view) {
1114
const detectView = new RegExp(`^${view}`);
1215

@@ -20,6 +23,11 @@ babel({
2023
only: /components/,
2124
});
2225

26+
/**
27+
* @param {string} file
28+
* @param {object} opts
29+
* @param {function} cb
30+
*/
2331
module.exports = function viewEngine(file, opts, cb) {
2432
let markup = doctype;
2533

‎demo/app/worker.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ const viewEngine = require('./view-engine');
77
const config = require('../package').config;
88
const app = express();
99

10+
// teaches node.js to load css files
1011
require('css-modules-require-hook/preset');
1112

12-
// setting rendering engine
13+
// sets react rendering engine
1314
app.engine('js', viewEngine);
1415
app.set('views', path.join(__dirname, '../components'));
1516
app.set('view engine', 'js');
1617

18+
// streams static files
1719
app.use(express.static(path.join(__dirname, '../static')));
1820

1921
app.get('/', (req, res) => res.render('Page'));

‎demo/cmrh.conf.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const config = require('./package').config;
22

33
module.exports = {
4+
// the custom template for the generic classes
45
generateScopedName: config.css,
56
};

‎demo/readme.md

Lines changed: 87 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,91 @@
1-
Universal usage example
2-
=======================
1+
Universal Usage demo
2+
====================
33

4-
## Usage
4+
Small demo of configuring [css-modules-require-hook](https://github.com/css-modules/css-modules-require-hook/) with [webpack](https://webpack.github.io/) and [react](https://facebook.github.io/react/). See the detailed description below.
5+
6+
## Quick start
57

68
```bash
7-
npm i
8-
npm run compile
9-
npm run start
9+
$ npm install
10+
$ npm run compile
11+
$ npm run start
12+
```
13+
14+
## Description
15+
16+
Hi, I tried to make a simple demo. So if you are familiar with technologies [webpack](https://webpack.github.io/), [react](https://facebook.github.io/react/) and [express](http://expressjs.com/), then it will be easy for to understand that example. Anyways, I'll point on the main parts to save your time.
17+
18+
### Backend
19+
20+
In this demo I use [express](http://expressjs.com/) to handle user requests and [react](https://facebook.github.io/react/) components to serve html for them:
21+
22+
- **app/**
23+
- `view-engine.js`
24+
- `worker.js`
25+
- **components/**
26+
- `Page.js`
27+
28+
#### `worker.js`
29+
30+
Is an entry point for the server application. It contains main middlewares and helpers for the server rendering. Here I attach require hook:
31+
32+
```javascript
33+
require('css-modules-require-hook/preset');
34+
```
35+
36+
It helps to process calls to the css files in runtime and build necessary class names:
37+
38+
```javascript
39+
import styles from './Page.css'; // Page.js
40+
```
41+
42+
Also, I made a small [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) for express to make render step isolated from the main program. It's connected here:
43+
44+
```javascript
45+
// setting rendering engine
46+
app.engine('js', viewEngine);
47+
app.set('views', path.join(__dirname, '../components'));
48+
app.set('view engine', 'js');
1049
```
50+
51+
and implemented in the `view-engine.js` file. So, I can use neat calls to build html:
52+
53+
```javascript
54+
app.get('/', (req, res) => res.render('Page'));
55+
```
56+
57+
#### `view-engine.js`
58+
59+
Is a [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) implementation. Requires necessary react components and builds html.
60+
61+
#### `Page.js`
62+
63+
Main react component, which describes the page and contains all the necessary dependencies.
64+
65+
```javascript
66+
// get the necessary class names
67+
import styles from './Page.css';
68+
69+
// pass particular generated class name to the component
70+
<section className={ styles.wrapper }>
71+
// ...
72+
</section>
73+
```
74+
75+
### Frontend
76+
77+
The modern frontend is so tough that you have to use particular bundler systems in order to build necessary styles and scripts. My favourite one is [webpack](https://webpack.github.io/), so I'll describe how to configure it. Usually to build necessary styles using [CSS&nbsp;Modules](https://github.com/css-modules/) you have to use a [css-loader](https://github.com/webpack/css-loader):
78+
79+
```javascript
80+
module: {
81+
loaders: [
82+
{
83+
test: /\.css$/i,
84+
loader: ExtractTextPlugin.extract('style',
85+
`css?modules&localIdentName=[name]_[local]__[hash:base64:5]`),
86+
},
87+
],
88+
},
89+
```
90+
91+
In this example I provide a custom template for the generic class names `[name]_[local]__[hash:base64:5]` which is also used by require hook (see the `cmrh.conf.js` file).

0 commit comments

Comments
 (0)