Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a06cd27

Browse files
author
Alexey Litvinov
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)

AltStyle によって変換されたページ (->オリジナル) /