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

.circleci/config.yml

@@ -6,7 +6,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:8.9
+      - image: circleci/node:12.16.3
       - image: circleci/mongo:3.4-jessie
 
     working_directory: ~/repo
@@ -30,4 +30,3 @@ jobs:
 
       # run tests!
       - run: npm run circleci
-

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 { StaticRouter:Router, Switch, Route } = require('react-router-dom');
-const CreateRouter = require('pico-router').createRouter;
+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(){
+	render : function (){
-		return <div className='homebrew'>
+		return (
-			<Router defaultUrl={this.props.url}/>
+			<Router location={this.props.url}>
-		</div>;
+				<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>
 `;
 };
-
-
-

package.json

@@ -2,6 +2,9 @@
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
   "version": "2.8.2",
+  "engines": {
+    "node": "12.16.x"
+  },
   "repository": {
     "type": "git",
     "url": "git://github.com/naturalcrit/homebrewery.git"
@@ -9,7 +12,8 @@
   "scripts": {
     "dev": "node scripts/dev.js",
     "quick": "node scripts/quick.js",
-    "build": "node scripts/build.js",
+    "build": "node scripts/buildHomebrew.js",
+    "buildall": "node scripts/buildHomebrew.js && node scripts/buildAdmin.js",
     "lint": "eslint --fix **/*.{js,jsx}",
     "lint:dry": "eslint **/*.{js,jsx}",
     "circleci": "npm test && eslint **/*.{js,jsx} --max-warnings=0",
@@ -18,7 +22,7 @@
     "test:dev": "pico-check -v -w",
     "phb": "node scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
-    "postinstall": "npm run build",
+    "postinstall": "npm run buildall",
     "start": "node server.js"
   },
   "author": "stolksdorf",
@@ -36,26 +40,31 @@
     ]
   },
   "dependencies": {
-    "babel-preset-env": "^1.7.0",
+    "@babel/core": "^7.9.0",
-    "babel-preset-react": "^6.24.1",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.4",
     "body-parser": "^1.19.0",
     "classnames": "^2.2.6",
     "codemirror": "^5.53.2",
     "cookie-parser": "^1.4.5",
     "create-react-class": "^15.6.3",
     "express": "^4.17.1",
+    "fs-extra": "9.0.0",
     "jwt-simple": "^0.5.6",
+    "less": "^3.11.1",
     "lodash": "^4.17.15",
     "marked": "^0.3.19",
     "moment": "^2.25.3",
     "mongoose": "^5.9.12",
     "nconf": "^0.10.0",
-    "pico-router": "^2.1.0",
+    "prop-types": "15.7.2",
+    "query-string": "6.12.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "5.2.0",
     "shortid": "^2.2.15",
     "superagent": "^5.2.2",
-    "vitreum": "^4.10.1"
+    "vitreum": "github:calculuschild/vitreum#21a8e1c9421f1d3a3b474c12f480feb2fbd28c5b"
   },
   "devDependencies": {
     "eslint": "^6.8.0",

scripts/build.js

@@ -1,20 +0,0 @@
-const label = 'build';
-console.time(label);
-
-const clean = require('vitreum/steps/clean.js');
-const jsx   = require('vitreum/steps/jsx.js');
-const lib   = require('vitreum/steps/libs.js');
-const less  = require('vitreum/steps/less.js');
-const asset = require('vitreum/steps/assets.js');
-
-const Proj = require('./project.json');
-
-clean()
-	.then(lib(Proj.libs))
-	.then(()=>jsx('homebrew', './client/homebrew/homebrew.jsx', { libs: Proj.libs, shared: ['./shared'] }))
-	.then((deps)=>less('homebrew', { shared: ['./shared'] }, deps))
-	.then(()=>jsx('admin', './client/admin/admin.jsx', { libs: Proj.libs, shared: ['./shared'] }))
-	.then((deps)=>less('admin', { shared: ['./shared'] }, deps))
-	.then(()=>asset(Proj.assets, ['./shared', './client']))
-	.then(console.timeEnd.bind(console, label))
-	.catch(console.error);

scripts/buildAdmin.js

@@ -0,0 +1,31 @@
+const fs = require('fs-extra');
+const Proj = require('./project.json');
+
+const { pack } = require('vitreum');
+const isDev = !!process.argv.find((arg)=>arg=='--dev');
+
+const lessTransform  = require('vitreum/transforms/less.js');
+const assetTransform = require('vitreum/transforms/asset.js');
+//const Meta = require('vitreum/headtags');
+
+const transforms = {
+	'.less' : lessTransform,
+	'*'     : assetTransform('./build')
+};
+
+const build = async ({ bundle, render, ssr })=>{
+	await fs.outputFile('./build/admin/bundle.css', await lessTransform.generate({ paths: './shared' }));
+	await fs.outputFile('./build/admin/bundle.js', bundle);
+	await fs.outputFile('./build/admin/ssr.js', ssr);
+	await fs.outputFile('./build/admin/render.js', render);
+};
+
+fs.emptyDirSync('./build/admin');
+pack('./client/admin/admin.jsx', {
+	paths : ['./shared'],
+	libs  : Proj.libs,
+	dev   : isDev && build,
+	transforms
+})
+	.then(build)
+	.catch(console.error);

scripts/buildHomebrew.js

@@ -0,0 +1,31 @@
+const fs = require('fs-extra');
+const Proj = require('./project.json');
+
+const { pack } = require('vitreum');
+const isDev = !!process.argv.find((arg)=>arg=='--dev');
+
+const lessTransform  = require('vitreum/transforms/less.js');
+const assetTransform = require('vitreum/transforms/asset.js');
+//const Meta = require('vitreum/headtags');
+
+const transforms = {
+	'.less' : lessTransform,
+	'*'     : assetTransform('./build')
+};
+
+const build = async ({ bundle, render, ssr })=>{
+	await fs.outputFile('./build/homebrew/bundle.css', await lessTransform.generate({ paths: './shared' }));
+	await fs.outputFile('./build/homebrew/bundle.js', bundle);
+	await fs.outputFile('./build/homebrew/ssr.js', ssr);
+	await fs.outputFile('./build/homebrew/render.js', render);
+};
+
+fs.emptyDirSync('./build/homebrew');
+pack('./client/homebrew/homebrew.jsx', {
+	paths : ['./shared'],
+	libs  : Proj.libs,
+	dev   : isDev && build,
+	transforms
+})
+	.then(build)
+	.catch(console.error);

scripts/project.json

@@ -13,7 +13,6 @@
 		"codemirror/mode/javascript/javascript.js",
 		"moment",
 		"superagent",
-		"marked",
+		"marked"
-		"pico-router"
 	]
-}
+}

server.js

@@ -121,21 +121,20 @@ app.get('/print/:id', (req, res, next)=>{
 
 
 //Render the page
-const render = require('vitreum/steps/render');
+//const render = require('.build/render');
 const templateFn = require('./client/template.js');
 app.use((req, res)=>{
-	render('homebrew', templateFn, {
+	const props = {
 		version     : require('./package.json').version,
 		url         : req.originalUrl,
 		welcomeText : welcomeText,
 		changelog   : changelogText,
 		brew        : req.brew,
 		brews       : req.brews,
-		account     : req.account
+		account     : req.account,
-	})
+	};
-		.then((page)=>{
+	templateFn('homebrew', props)
-			return res.send(page);
+		.then((page)=>res.send(page))
-		})
 		.catch((err)=>{
 			console.log(err);
 			return res.sendStatus(500);

server/admin.api.js

@@ -1,7 +1,7 @@
 const HomebrewModel = require('./homebrew.model.js').model;
 const router = require('express').Router();
 const Moment = require('moment');
-const render = require('vitreum/steps/render');
+//const render = require('vitreum/steps/render');
 const templateFn = require('../client/template.js');
 const zlib = require('zlib');
 
@@ -100,7 +100,7 @@ router.get('/admin/stats', mw.adminOnly, (req, res)=>{
 });
 
 router.get('/admin', mw.adminOnly, (req, res)=>{
-	render('admin', templateFn, {
+	templateFn('admin', {
 		url : req.originalUrl
 	})
 		.then((page)=>res.send(page))

shared/homebrewery/renderWarnings/renderWarnings.jsx

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

shared/naturalcrit/codeEditor/codeEditor.jsx

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

shared/naturalcrit/nav/nav.jsx

@@ -1,3 +1,4 @@
+require('./nav.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
@@ -70,4 +71,4 @@ const Nav = {
 };
 
 
-module.exports = Nav;
+module.exports = Nav;

shared/naturalcrit/nav/nav.less

@@ -1,3 +1,4 @@
+//@import (less) 'naturalcrit/styles/style.fonts.css';
 nav{
 	background-color : #333;
 	.navContent{
@@ -77,4 +78,4 @@ nav{
 	.navSection:last-child .navItem{
 		border-left : 1px solid #666;
 	}
-}
+}

shared/naturalcrit/splitPane/splitPane.jsx

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

shared/naturalcrit/styles/core.less

@@ -5,12 +5,12 @@
 @import 'naturalcrit/styles/colors.less';
 @import 'naturalcrit/styles/tooltip.less';
 @font-face {
-	font-family : CodeLight;
+	font-family : 'CodeLight';
-	src         : url('/assets/naturalcrit/styles/CODE Light.otf');
+	src         : data-uri('naturalcrit/styles/CODE Light.otf') format('opentype');
 }
 @font-face {
-	font-family : CodeBold;
+	font-family : 'CodeBold';
-	src         : url('/assets/naturalcrit/styles/CODE Bold.otf');
+	src         : data-uri('naturalcrit/styles/CODE Bold.otf') format('opentype');
 }
 html,body, #reactRoot{
 	height      : 100vh;
@@ -47,4 +47,4 @@ button{
 	&:disabled{
 		background-color : @silver !important;
 	}
-}
+}