Update vitreum (#946)

- Updates Vitreum to v6.0.1 + some custom fixes.
  - Stylesheets must be imported with `require('./sheet.less');` but can also can now share stylesheets between jsx components.
  - Should eliminate a lot of security concerns with older nested dependencies.
  - Changed a lot of files to make this work
- Also removes dependency on PicoRouter in favor of React-Router

client/admin/admin.jsx

@@ -1,3 +1,4 @@
+require('./admin.less');
 const React = require('react');
 const createClass = require('create-react-class');
 

client/admin/brewCleanup/brewCleanup.jsx

@@ -1,3 +1,4 @@
+require('./brewCleanup.less');
 const React       = require('react');
 const createClass = require('create-react-class');
 const cx          = require('classnames');
@@ -71,4 +72,4 @@ const BrewCleanup = createClass({
 	}
 });
 
-module.exports = BrewCleanup;
+module.exports = BrewCleanup;

client/admin/brewCompress/brewCompress.jsx

@@ -1,3 +1,4 @@
+require('./brewCompress.less');
 const React       = require('react');
 const createClass = require('create-react-class');
 const cx          = require('classnames');
@@ -88,4 +89,4 @@ const BrewCompress = createClass({
 	}
 });
 
-module.exports = BrewCompress;
+module.exports = BrewCompress;

client/admin/brewLookup/brewLookup.jsx

@@ -1,3 +1,4 @@
+require('./brewLookup.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const cx    = require('classnames');

client/admin/stats/stats.jsx

@@ -1,3 +1,4 @@
+require('./stats.less');
 const React       = require('react');
 const createClass = require('create-react-class');
 const cx          = require('classnames');
@@ -42,4 +43,4 @@ const Stats = createClass({
 	}
 });
 
-module.exports = Stats;
+module.exports = Stats;

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,3 +1,4 @@
+require('./brewRenderer.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -1,3 +1,4 @@
+require('./errorBar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,4 +1,4 @@
-
+require('./notificationPopup.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');

client/homebrew/editor/editor.jsx

@@ -1,3 +1,4 @@
+require('./editor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
@@ -138,9 +139,3 @@ const Editor = createClass({
 });
 
 module.exports = Editor;
-
-
-
-
-
-

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -1,3 +1,4 @@
+require('./metadataEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,3 +1,4 @@
+require('./snippetbar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
@@ -92,4 +93,4 @@ const SnippetGroup = createClass({
 		</div>;
 	},
 
-});
+});

client/homebrew/homebrew.jsx

@@ -1,19 +1,19 @@
+require('./homebrew.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
-
-const CreateRouter = require('pico-router').createRouter;
+const { StaticRouter:Router, Switch, Route } = require('react-router-dom');
+const queryString = require('query-string');
 
 const HomePage = require('./pages/homePage/homePage.jsx');
 const EditPage = require('./pages/editPage/editPage.jsx');
 const UserPage = require('./pages/userPage/userPage.jsx');
 const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
-const ErrorPage = require('./pages/errorPage/errorPage.jsx');
+//const ErrorPage = require('./pages/errorPage/errorPage.jsx');
 const PrintPage = require('./pages/printPage/printPage.jsx');
 
-let Router;
 const Homebrew = createClass({
 	getDefaultProps : function() {
 		return {
@@ -36,55 +36,36 @@ const Homebrew = createClass({
 		global.account = this.props.account;
 		global.version = this.props.version;
 
-
-		Router = CreateRouter({
-			'/edit/:id' : (args)=>{
-				if(!this.props.brew.editId){
-					return <ErrorPage errorId={args.id}/>;
-				}
-
-				return <EditPage
-					id={args.id}
-					brew={this.props.brew} />;
-			},
-
-			'/share/:id' : (args)=>{
-				if(!this.props.brew.shareId){
-					return <ErrorPage errorId={args.id}/>;
-				}
-
-				return <SharePage
-					id={args.id}
-					brew={this.props.brew} />;
-			},
-			'/user/:username' : (args)=>{
-				return <UserPage
-					username={args.username}
-					brews={this.props.brews}
-				/>;
-			},
-			'/print/:id' : (args, query)=>{
-				return <PrintPage brew={this.props.brew} query={query}/>;
-			},
-			'/print' : (args, query)=>{
-				return <PrintPage query={query}/>;
-			},
-			'/new' : (args)=>{
-				return <NewPage />;
-			},
-			'/changelog' : (args)=>{
-				return <SharePage
-					brew={{ title: 'Changelog', text: this.props.changelog }} />;
-			},
-			'*' : <HomePage
-				welcomeText={this.props.welcomeText} />,
-		});
 	},
-	render : function(){
-		return <div className='homebrew'>
-			<Router defaultUrl={this.props.url}/>
-		</div>;
+	render : function (){
+		return (
+			<Router location={this.props.url}>
+				<div className='homebrew'>
+					<Switch>
+						<Route path='/edit/:id' component={(routeProps)=><EditPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+						<Route path='/share/:id' component={(routeProps)=><SharePage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} />}/>
+						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} /> } />
+						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} /> } />
+						<Route path='/new' exact component={NewPage}/>
+						<Route path='/changelog' exact component={()=><SharePage brew={{ title: 'Changelog', text: this.props.changelog }} />}/>
+						<Route path='/' component={()=><HomePage welcomeText={this.props.welcomeText}/>}/>
+					</Switch>
+				</div>
+			</Router>
+		);
 	}
 });
 
 module.exports = Homebrew;
+
+//TODO: Nicer Error page instead of just "cant get that"
+// 	'/share/:id' : (args)=>{
+// 		if(!this.props.brew.shareId){
+// 			return <ErrorPage errorId={args.id}/>;
+// 		}
+//
+// 		return <SharePage
+// 			id={args.id}
+// 			brew={this.props.brew} />;
+// 	},

client/homebrew/homebrew.less

@@ -1,4 +1,3 @@
-
 @import 'naturalcrit/styles/core.less';
 .homebrew{
 	height : 100%;

client/homebrew/navbar/navbar.jsx

@@ -1,3 +1,4 @@
+require('./navbar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');

client/homebrew/pages/editPage/editPage.jsx

@@ -1,9 +1,10 @@
+require('./editPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 const request = require('superagent');
-const Meta = require('vitreum/meta');
+const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,3 +1,4 @@
+require('./errorPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');

client/homebrew/pages/homePage/homePage.jsx

@@ -1,9 +1,10 @@
+require('./homePage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 const request = require('superagent');
-const Meta = require('vitreum/meta');
+const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');

client/homebrew/pages/newPage/newPage.jsx

@@ -1,3 +1,4 @@
+require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');

client/homebrew/pages/printPage/printPage.jsx

@@ -1,8 +1,9 @@
+require('./printPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
-const Meta = require('vitreum/meta');
+const { Meta } = require('vitreum/headtags');
 const Markdown = require('naturalcrit/markdown.js');
 
 const PrintPage = createClass({

client/homebrew/pages/sharePage/sharePage.jsx

@@ -1,8 +1,9 @@
+require('./sharePage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
-const Meta = require('vitreum/meta');
+const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');

client/homebrew/pages/userPage/userPage.jsx

@@ -1,3 +1,4 @@
+require('./userPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');

client/homebrew/phbStyle/phb.style.less

@@ -1,4 +1,3 @@
-
 @import (less) 'shared/naturalcrit/styles/reset.less';
 @import (less) './client/homebrew/phbStyle/phb.fonts.css';
 @import (less) './client/homebrew/phbStyle/phb.assets.less';

client/template.js

@@ -1,21 +1,19 @@
-module.exports = function(vitreum){
+module.exports = async (name, props={})=>{
 	return `
 <!DOCTYPE html>
 <html>
 	<head>
 		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
 		<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+		<link href=${`/${name}/bundle.css`} rel='stylesheet'></link>
 		<link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" />
 		<title>The Homebrewery - NaturalCrit</title>
-		${vitreum.head}
 	</head>
 	<body>
-		<main id="reactRoot">${vitreum.body}</main>
+		<main id="reactRoot">${require(`../build/${name}/ssr.js`)(props)}</main>
 	</body>
-	${vitreum.js}
+	<script src=${`/${name}/bundle.js`}></script>
+	<script>start_app(${JSON.stringify(props)})</script>
 </html>
 `;
 };
-
-
-