Skip to content

Commit 5a8d707

Browse files
nchangednchanged
committed
initial
1 parent 3782c8f commit 5a8d707

19 files changed

+3146
-1
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎.editorconfig

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_size = 2
6+
indent_style = tab
7+
quote_type = double
8+
9+
insert_final_newline = true
10+
max_line_length=120
11+
trim_trailing_whitespace = true
12+
13+
[*.{json,md,yml,yaml}]
14+
indent_style = space
15+
16+
[*.md]
17+
max_line_length=80
18+
trim_trailing_whitespace = false

‎.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ pids
1010
*.pid
1111
*.seed
1212
*.pid.lock
13-
13+
.fusebox
14+
.vscode
15+
dist
1416
# Directory for instrumented libs generated by jscoverage/JSCover
1517
lib-cov
1618

‎README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Fuse react demo
2+
3+
This demo demostrates the following
4+
5+
- [fuse-react](https://github.com/fuse-box/fuse-react) router and lazy loading
6+
- FuseBox automatic JS Code Splitting
7+
- FuseBox automatic CSS Code Splitting
8+
9+
## Install and run
10+
11+
```
12+
npm install;
13+
node fuse dist
14+
```
15+
16+
If you want to run it in development mode
17+
18+
```
19+
node fuse
20+
```

‎fuse.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
const { src, task, context, bumpVersion } = require("fuse-box/sparky");
2+
const { FuseBox, QuantumPlugin, CSSPlugin, SassPlugin, WebIndexPlugin } = require("fuse-box");
3+
4+
task("default", async context => {
5+
await context.clean();
6+
await context.development();
7+
});
8+
9+
task("dist", async context => {
10+
await context.clean();
11+
await context.dist();
12+
});
13+
14+
context(
15+
class {
16+
getConfig() {
17+
return FuseBox.init({
18+
homeDir: "src",
19+
target: "browser@es5",
20+
hash: this.isProduction,
21+
output: "dist/$name.js",
22+
plugins: [
23+
[SassPlugin(), CSSPlugin()],
24+
WebIndexPlugin({
25+
template: "src/index.html"
26+
}),
27+
this.isProduction &&
28+
QuantumPlugin({
29+
css: true,
30+
uglify: true
31+
})
32+
]
33+
});
34+
}
35+
async clean() {
36+
await src("./dist")
37+
.clean("dist/")
38+
.exec();
39+
}
40+
41+
async prepareDistFolder() {
42+
await bumpVersion("package.json", { type: "patch" });
43+
await src("./package.json")
44+
.dest("dist/")
45+
.exec();
46+
}
47+
48+
dist() {
49+
this.isProduction = true;
50+
const fuse = this.getConfig();
51+
fuse.dev({ fallback: "index.html" });
52+
fuse
53+
.bundle("demo")
54+
.splitConfig({
55+
dest: "/chunks/"
56+
})
57+
.instructions(">app.tsx");
58+
return fuse.run();
59+
}
60+
61+
development() {
62+
const fuse = this.getConfig();
63+
fuse.dev({ fallback: "index.html" });
64+
fuse
65+
.bundle("demo")
66+
.hmr()
67+
.instructions(">app.tsx")
68+
.watch();
69+
return fuse.run();
70+
}
71+
}
72+
);

‎package.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "fuse-react-demo",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/fuse-box/fuse-react-demo.git"
12+
},
13+
"author": "",
14+
"license": "ISC",
15+
"bugs": {
16+
"url": "https://github.com/fuse-box/fuse-react-demo/issues"
17+
},
18+
"homepage": "https://github.com/fuse-box/fuse-react-demo#readme",
19+
"devDependencies": {
20+
"fuse-box": "^3.5.0",
21+
"node-sass": "^4.9.3",
22+
"typescript": "^3.0.1",
23+
"uglify": "^0.1.5",
24+
"uglify-js": "^3.4.8"
25+
},
26+
"dependencies": {
27+
"fuse-react": "^1.0.19",
28+
"react": "^16.4.2",
29+
"react-dom": "^16.4.2"
30+
}
31+
}

‎src/app.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as React from "react";
2+
import * as ReactDOM from "react-dom";
3+
import { Link, Switch } from "fuse-react";
4+
import "./style.scss";
5+
6+
const config = {
7+
routes: {
8+
"/blog": {
9+
component: () => import("./routes/blog/Blog")
10+
},
11+
"/news": {
12+
component: () => import("./routes/news/News")
13+
},
14+
"/listing": {
15+
component: () => import("./routes/listing/Listing")
16+
}
17+
}
18+
};
19+
class Menu extends React.Component {
20+
public render() {
21+
const menuConfig = [
22+
{ to: "/blog", label: "Blogs" },
23+
{ to: "/news", label: "News" },
24+
{ to: "/listing", label: "Listing" }
25+
];
26+
return (
27+
<div className="menu">
28+
{menuConfig.map((item, i) => (
29+
<Link activeClassName="active" key={i} to={item.to}>
30+
{item.label}
31+
</Link>
32+
))}
33+
</div>
34+
);
35+
}
36+
}
37+
class MyRootComponent extends React.Component {
38+
public render() {
39+
return (
40+
<div className="demo">
41+
<div className="left">
42+
<Menu />
43+
</div>
44+
<div className="right">
45+
<Switch config={config} />
46+
</div>
47+
</div>
48+
);
49+
}
50+
}
51+
52+
ReactDOM.render(<MyRootComponent />, document.querySelector("#root"));

‎src/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title></title> $css
6+
</head>
7+
8+
<body>
9+
<div id="root"></div> $bundles
10+
</body>
11+
12+
</html>

‎src/routes/blog/Blog.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.blog {
2+
h1 {
3+
color: royalblue;
4+
}
5+
}

‎src/routes/blog/Blog.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from "react";
2+
import "./Blog.scss";
3+
export class Blogs extends React.Component {
4+
public render() {
5+
return (
6+
<div className="page blog">
7+
<h1>Blogs</h1>
8+
<p>
9+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
10+
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
11+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
12+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
13+
est laborum.
14+
</p>
15+
<p>
16+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
17+
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
18+
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
19+
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
20+
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
21+
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
22+
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
23+
voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
24+
pariatur
25+
</p>
26+
</div>
27+
);
28+
}
29+
}

‎src/routes/listing/Listing.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.listing {
2+
a {
3+
text-decoration: none;
4+
padding: 3px;
5+
&.active {
6+
background-color: aquamarine;
7+
}
8+
}
9+
}

‎src/routes/listing/Listing.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from "react";
2+
import { Link, Switch, Route } from "fuse-react";
3+
import "./Listing.scss";
4+
import { ListingA } from "./listing-a/ListingA";
5+
6+
export class Listing extends React.Component {
7+
public render() {
8+
return (
9+
<div className="page listing">
10+
<h1>Listing with sub route</h1>
11+
<div>
12+
<Link activeClassName="active" to="/listing/a">
13+
Listing a
14+
</Link>
15+
</div>
16+
<div>
17+
<Link activeClassName="active" to="/listing/b">
18+
Listing b
19+
</Link>
20+
</div>
21+
22+
<Switch placeholder={<div>Loading</div>}>
23+
<Route path="/listing/a" component={ListingA} />
24+
<Route path="/listing/b" component={() => import("./listing-b/ListingB")} />
25+
</Switch>
26+
</div>
27+
);
28+
}
29+
}

‎src/routes/listing/listing-a/ListingA.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import * as React from "react";
2+
export class ListingA extends React.Component {
3+
public render() {
4+
return (
5+
<div>
6+
<h2>Listing A </h2>
7+
<p>
8+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
9+
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
10+
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
11+
</p>
12+
</div>
13+
);
14+
}
15+
}

‎src/routes/listing/listing-b/ListingB.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as React from "react";
2+
3+
export class ListingB extends React.Component {
4+
public render() {
5+
return (
6+
<div>
7+
<h2>Listing B </h2>
8+
<p>
9+
Pedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
10+
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
11+
repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
12+
reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
13+
</p>
14+
</div>
15+
);
16+
}
17+
}

‎src/routes/news/News.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.news {
2+
h1 {
3+
color: blueviolet;
4+
}
5+
}

‎src/routes/news/News.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from "react";
2+
import "./News.scss";
3+
export class News extends React.Component {
4+
public render() {
5+
return (
6+
<div className="page news">
7+
<h1>News</h1>
8+
<p>
9+
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
10+
atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
11+
sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
12+
facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
13+
impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
14+
repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
15+
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
16+
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
17+
</p>
18+
<p>
19+
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized
20+
by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble
21+
that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will,
22+
which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to
23+
distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able
24+
to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances
25+
and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to
26+
be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle
27+
of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse
28+
pains
29+
</p>
30+
</div>
31+
);
32+
}
33+
}

0 commit comments

Comments
 (0)