Skip to content

Commit 5bcc137

Browse files
mintuzmintuz
committed
File system
1 parent 568cb41 commit 5bcc137

File tree

9 files changed

+164
-0
lines changed

9 files changed

+164
-0
lines changed

‎examples/express-file-system/.babelrc

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"presets": [
3+
[
4+
"env",
5+
{
6+
"targets": {
7+
"browsers": ["last 2 versions", "ie >= 9", "safari >= 7"],
8+
"node": "0.12.7"
9+
},
10+
"modules": "commonjs"
11+
}
12+
],
13+
"react"
14+
],
15+
"plugins": [
16+
"add-module-exports",
17+
"transform-es2015-modules-commonjs",
18+
"transform-object-rest-spread",
19+
"transform-class-properties"
20+
]
21+
}

‎examples/express-file-system/package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "express-file-system",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"babel": "babel src --out-dir dist",
8+
"build": "npm run babel",
9+
"local": "npm run build && node dist/index.js"
10+
},
11+
"author": "Adam Bulmer",
12+
"license": "MIT",
13+
"dependencies": {
14+
"app-root-path": "^2.1.0",
15+
"express": "^4.16.4",
16+
"react": "^16.6.3",
17+
"react-dom": "^16.6.3"
18+
},
19+
"devDependencies": {
20+
"babel-cli": "^6.26.0",
21+
"babel-core": "^6.26.3",
22+
"babel-jest": "^20.0.3",
23+
"babel-plugin-add-module-exports": "^0.2.1",
24+
"babel-plugin-transform-class-properties": "^6.24.1",
25+
"babel-plugin-transform-es2015-modules-commonjs": "^6.7.4",
26+
"babel-plugin-transform-object-rest-spread": "^6.26.0",
27+
"babel-preset-env": "^1.6.1",
28+
"babel-preset-react": "^6.5.0"
29+
}
30+
}

‎examples/express-file-system/src/App/Body.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { StaticCSS as CSS } from '../../../../dist';
3+
4+
function Body(props) {
5+
return (
6+
<div className="fake-body">
7+
<p>
8+
{props.text}
9+
</p>
10+
</div>
11+
);
12+
};
13+
14+
Body.displayName = "Body";
15+
16+
export default CSS(Body);

‎examples/express-file-system/src/App/Header.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { StaticCSS as CSS } from '../../../../dist';
3+
4+
function Header() {
5+
return (
6+
<header className="fake-header">
7+
My header
8+
</header>
9+
);
10+
};
11+
12+
Header.displayName = "Header";
13+
14+
export default CSS(Header);

‎examples/express-file-system/src/App/index.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import Header from './Header';
3+
import Body from './Body';
4+
import { StaticCSS as CSS } from '../../../../dist';
5+
6+
function Root(props) {
7+
return (
8+
<React.Fragment>
9+
<Header />
10+
<div>
11+
<Body text={props.bodyText}/>
12+
</div>
13+
</React.Fragment>
14+
);
15+
}
16+
17+
Root.displayName = "Root";
18+
19+
export default CSS(Root, {
20+
styles() {
21+
return [
22+
'core.css',
23+
];
24+
}
25+
});

‎examples/express-file-system/src/index.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import express from 'express';
2+
import React from 'react';
3+
import ReactDOMServer from 'react-dom/server';
4+
import { path } from 'app-root-path';
5+
import App from './App';
6+
import { Resolver, FileSystemAdapter } from '../../../dist/index';
7+
8+
const app = express();
9+
10+
app.get('/', (req, res) => {
11+
const app = React.createElement(App, {
12+
bodyText: 'hello world, from the server yo',
13+
});
14+
15+
const htmlBody = ReactDOMServer.renderToString(app);
16+
17+
const resolver = new Resolver(app, new FileSystemAdapter({
18+
folderPath: `${path}/styles`,
19+
inline: true,
20+
}));
21+
22+
resolver.render()
23+
.then(css => {
24+
res.send(`
25+
<html>
26+
<head>
27+
${css}
28+
</head>
29+
<body>
30+
${htmlBody}
31+
</body>
32+
</html>
33+
`);
34+
});
35+
});
36+
37+
app.listen(8080, () => {
38+
console.log('Example application running');
39+
});

‎examples/express-file-system/styles/Body.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.fake-body {
2+
padding-top: 16px;
3+
padding-bottom: 16px;
4+
}
5+
6+
.fake-body p {
7+
margin-top: 0;
8+
}

‎examples/express-file-system/styles/Header.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.fake-header {
2+
background-color: black;
3+
color: white;
4+
padding-top: 16px;
5+
padding-bottom: 16px;
6+
}

‎examples/express-file-system/styles/core.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
}

0 commit comments

Comments
 (0)