initial

nchanged · nchanged · commit 5a8d707387ff · 2018-08-28T21:46:54.000+02:00
diff --git a/.DS_Store b/.DS_Store
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,18 @@
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = tab
+quote_type = double
+
+insert_final_newline = true
+max_line_length=120
+trim_trailing_whitespace = true
+
+[*.{json,md,yml,yaml}]
+indent_style = space
+
+[*.md]
+max_line_length=80
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -10,7 +10,9 @@ pids
 *.pid
 *.seed
 *.pid.lock
-
+.fusebox
+.vscode
+dist
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
diff --git a/README.md b/README.md
@@ -0,0 +1,20 @@
+# Fuse react demo
+
+This demo demostrates the following
+
+- [fuse-react](https://github.com/fuse-box/fuse-react) router and lazy loading
+- FuseBox automatic JS Code Splitting
+- FuseBox automatic CSS Code Splitting
+
+## Install and run
+
+```
+npm install;
+node fuse dist
+```
+
+If you want to run it in development mode
+
+```
+node fuse
+```
diff --git a/fuse.js b/fuse.js
@@ -0,0 +1,72 @@
+const { src, task, context, bumpVersion } = require("fuse-box/sparky");
+const { FuseBox, QuantumPlugin, CSSPlugin, SassPlugin, WebIndexPlugin } = require("fuse-box");
+
+task("default", async context => {
+	await context.clean();
+	await context.development();
+});
+
+task("dist", async context => {
+	await context.clean();
+	await context.dist();
+});
+
+context(
+	class {
+		getConfig() {
+			return FuseBox.init({
+				homeDir: "src",
+				target: "browser@es5",
+				hash: this.isProduction,
+				output: "dist/$name.js",
+				plugins: [
+					[SassPlugin(), CSSPlugin()],
+					WebIndexPlugin({
+						template: "src/index.html"
+					}),
+					this.isProduction &&
+						QuantumPlugin({
+							css: true,
+							uglify: true
+						})
+				]
+			});
+		}
+		async clean() {
+			await src("./dist")
+				.clean("dist/")
+				.exec();
+		}
+
+		async prepareDistFolder() {
+			await bumpVersion("package.json", { type: "patch" });
+			await src("./package.json")
+				.dest("dist/")
+				.exec();
+		}
+
+		dist() {
+			this.isProduction = true;
+			const fuse = this.getConfig();
+			fuse.dev({ fallback: "index.html" });
+			fuse
+				.bundle("demo")
+				.splitConfig({
+					dest: "/chunks/"
+				})
+				.instructions(">app.tsx");
+			return fuse.run();
+		}
+
+		development() {
+			const fuse = this.getConfig();
+			fuse.dev({ fallback: "index.html" });
+			fuse
+				.bundle("demo")
+				.hmr()
+				.instructions(">app.tsx")
+				.watch();
+			return fuse.run();
+		}
+	}
+);
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "fuse-react-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fuse-box/fuse-react-demo.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/fuse-box/fuse-react-demo/issues"
+  },
+  "homepage": "https://github.com/fuse-box/fuse-react-demo#readme",
+  "devDependencies": {
+    "fuse-box": "^3.5.0",
+    "node-sass": "^4.9.3",
+    "typescript": "^3.0.1",
+    "uglify": "^0.1.5",
+    "uglify-js": "^3.4.8"
+  },
+  "dependencies": {
+    "fuse-react": "^1.0.19",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
+  }
+}
diff --git a/src/app.tsx b/src/app.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Link, Switch } from "fuse-react";
+import "./style.scss";
+
+const config = {
+	routes: {
+		"/blog": {
+			component: () => import("./routes/blog/Blog")
+		},
+		"/news": {
+			component: () => import("./routes/news/News")
+		},
+		"/listing": {
+			component: () => import("./routes/listing/Listing")
+		}
+	}
+};
+class Menu extends React.Component {
+	public render() {
+		const menuConfig = [
+			{ to: "/blog", label: "Blogs" },
+			{ to: "/news", label: "News" },
+			{ to: "/listing", label: "Listing" }
+		];
+		return (
+			<div className="menu">
+				{menuConfig.map((item, i) => (
+					<Link activeClassName="active" key={i} to={item.to}>
+						{item.label}
+					</Link>
+				))}
+			</div>
+		);
+	}
+}
+class MyRootComponent extends React.Component {
+	public render() {
+		return (
+			<div className="demo">
+				<div className="left">
+					<Menu />
+				</div>
+				<div className="right">
+					<Switch config={config} />
+				</div>
+			</div>
+		);
+	}
+}
+
+ReactDOM.render(<MyRootComponent />, document.querySelector("#root"));
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title></title> $css
+</head>
+
+<body>
+	<div id="root"></div> $bundles
+</body>
+
+</html>
diff --git a/src/routes/blog/Blog.scss b/src/routes/blog/Blog.scss
@@ -0,0 +1,5 @@
+.blog {
+	h1 {
+		color: royalblue;
+	}
+}
diff --git a/src/routes/blog/Blog.tsx b/src/routes/blog/Blog.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import "./Blog.scss";
+export class Blogs extends React.Component {
+	public render() {
+		return (
+			<div className="page blog">
+				<h1>Blogs</h1>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+					magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+					pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+					est laborum.
+				</p>
+				<p>
+					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+					aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+					Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+					dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
+					amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
+					aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
+					laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
+					voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
+					pariatur
+				</p>
+			</div>
+		);
+	}
+}
diff --git a/src/routes/listing/Listing.scss b/src/routes/listing/Listing.scss
@@ -0,0 +1,9 @@
+.listing {
+	a {
+		text-decoration: none;
+		padding: 3px;
+		&.active {
+			background-color: aquamarine;
+		}
+	}
+}
diff --git a/src/routes/listing/Listing.tsx b/src/routes/listing/Listing.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Link, Switch, Route } from "fuse-react";
+import "./Listing.scss";
+import { ListingA } from "./listing-a/ListingA";
+
+export class Listing extends React.Component {
+	public render() {
+		return (
+			<div className="page listing">
+				<h1>Listing with sub route</h1>
+				<div>
+					<Link activeClassName="active" to="/listing/a">
+						Listing a
+					</Link>
+				</div>
+				<div>
+					<Link activeClassName="active" to="/listing/b">
+						Listing b
+					</Link>
+				</div>
+
+				<Switch placeholder={<div>Loading</div>}>
+					<Route path="/listing/a" component={ListingA} />
+					<Route path="/listing/b" component={() => import("./listing-b/ListingB")} />
+				</Switch>
+			</div>
+		);
+	}
+}
diff --git a/src/routes/listing/listing-a/ListingA.tsx b/src/routes/listing/listing-a/ListingA.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+export class ListingA extends React.Component {
+	public render() {
+		return (
+			<div>
+				<h2>Listing A </h2>
+				<p>
+					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+					aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+					Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
+				</p>
+			</div>
+		);
+	}
+}
diff --git a/src/routes/listing/listing-b/ListingB.tsx b/src/routes/listing/listing-b/ListingB.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export class ListingB extends React.Component {
+	public render() {
+		return (
+			<div>
+				<h2>Listing B </h2>
+				<p>
+					Pedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
+					Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
+					repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
+					reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+				</p>
+			</div>
+		);
+	}
+}
diff --git a/src/routes/news/News.scss b/src/routes/news/News.scss
@@ -0,0 +1,5 @@
+.news {
+	h1 {
+		color: blueviolet;
+	}
+}
diff --git a/src/routes/news/News.tsx b/src/routes/news/News.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+import "./News.scss";
+export class News extends React.Component {
+	public render() {
+		return (
+			<div className="page news">
+				<h1>News</h1>
+				<p>
+					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+					atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+					sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+					facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+					impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
+					repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
+					voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
+					ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+				</p>
+				<p>
+					On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized
+					by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble
+					that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will,
+					which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to
+					distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able
+					to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances
+					and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to
+					be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle
+					of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse
+					pains
+				</p>
+			</div>
+		);
+	}
+}
diff --git a/src/style.scss b/src/style.scss
diff --git a/src/tsconfig.json b/src/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +.blog {
 +	h1 {
 +		color: royalblue;
 +	}
 +}