Merge branch 'master' into Intersection-Observer

client/admin/brewUtils/brewLookup/brewLookup.jsx

@@ -1,3 +1,5 @@
+require('./brewLookup.less');
+
 const React = require('react');
 const createClass = require('create-react-class');
 const cx    = require('classnames');
@@ -12,22 +14,43 @@ const BrewLookup = createClass({
 	},
 	getInitialState() {
 		return {
-			query     : '',
-			foundBrew : null,
-			searching : false,
-			error     : null
+			query       : '',
+			foundBrew   : null,
+			searching   : false,
+			error       : null,
+			scriptCount : 0
 		};
 	},
 	handleChange(e){
 		this.setState({ query: e.target.value });
 	},
 	lookup(){
-		this.setState({ searching: true, error: null });
+		this.setState({ searching: true, error: null, scriptCount: 0 });
 
 		request.get(`/admin/lookup/${this.state.query}`)
-			.then((res)=>this.setState({ foundBrew: res.body }))
+			.then((res)=>{
+				const foundBrew = res.body;
+				const scriptCheck = foundBrew?.text.match(/(<\/?s)cript/g);
+				this.setState({
+					foundBrew   : foundBrew,
+					scriptCount : scriptCheck?.length || 0,
+				});
+			})
 			.catch((err)=>this.setState({ error: err }))
-			.finally(()=>this.setState({ searching: false }));
+			.finally(()=>{
+				this.setState({
+					searching : false
+				});
+			});
+	},
+
+	async cleanScript(){
+		if(!this.state.foundBrew?.shareId) return;
+
+		await request.put(`/admin/clean/script/${this.state.foundBrew.shareId}`)
+			.catch((err)=>{ this.setState({ error: err }); return; });
+
+		this.lookup();
 	},
 
 	renderFoundBrew(){
@@ -46,12 +69,23 @@ const BrewLookup = createClass({
 				<dt>Share Link</dt>
 				<dd><a href={`/share/${brew.shareId}`} target='_blank' rel='noopener noreferrer'>/share/{brew.shareId}</a></dd>
 
+				<dt>Created Time</dt>
+				<dd>{brew.createdAt ? Moment(brew.createdAt).toLocaleString() : 'No creation date'}</dd>
+
 				<dt>Last Updated</dt>
 				<dd>{Moment(brew.updatedAt).fromNow()}</dd>
 
 				<dt>Num of Views</dt>
 				<dd>{brew.views}</dd>
+
+				<dt>SCRIPT tags detected</dt>
+				<dd>{this.state.scriptCount}</dd>
 			</dl>
+			{this.state.scriptCount > 0 &&
+				<div className='cleanButton'>
+					<button onClick={this.cleanScript}>CLEAN BREW</button>
+				</div>
+			}
 		</div>;
 	},
 

client/admin/brewUtils/brewLookup/brewLookup.less

@@ -0,0 +1,6 @@
+.brewLookup {
+    .cleanButton {
+        display : inline-block;
+        width   : 100%;
+    }
+}

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -5,7 +5,7 @@ const { useState, useRef, useCallback, useMemo, useEffect } = React;
 const _ = require('lodash');
 
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';
 const ErrorBar = require('./errorBar/errorBar.jsx');
 const ToolBar  = require('./toolBar/toolBar.jsx');
 
@@ -201,7 +201,8 @@ const BrewRenderer = (props)=>{
 			renderedPages.length = 0;
 
 		// Render currently-edited page first so cross-page effects (variables, links) can propagate out first
-		renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);
+		if(rawPages.length > props.currentEditorCursorPageNum -1)
+			renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);
 
 		_.forEach(rawPages, (page, index)=>{
 			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,6 +1,6 @@
 require('./notificationPopup.less');
 import React, { useEffect, useState } from 'react';
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 
 import Dialog from '../../../components/dialog.jsx';
 

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -13,6 +13,7 @@
 	height           : auto;
 	padding          : 2px 0;
 	font-family      : 'Open Sans', sans-serif;
+	font-size        : 13px;
 	color            : #CCCCCC;
 	background-color : #555555;
 	& > *:not(.toggleButton) {
@@ -154,13 +155,6 @@
 		width            : auto;
 		min-width        : 46px;
 		height           : 100%;
-		padding          : 0 0px;
-		font-weight      : unset;
-		color            : inherit;
-		background-color : unset;
-
-		&:not(button:has(i, svg)) { padding : 0 8px; }
-
 		&:hover { background-color : #444444; }
 		&:focus { border  : 1px solid #D3D3D3;outline : none;}
 		&:disabled {

client/homebrew/editor/editor.jsx

@@ -4,7 +4,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
-const Markdown = require('../../../shared/naturalcrit/markdown.js');
+import Markdown from '../../../shared/naturalcrit/markdown.js';
 
 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -3,10 +3,10 @@ require('./metadataEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
-const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
+const TagInput = require('../tagInput/tagInput.jsx');
 
 
 const Themes = require('themes/themes.json');
@@ -341,10 +341,11 @@ const MetadataEditor = createClass({
 				{this.renderThumbnail()}
 			</div>
 
-			<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
+			<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
 				placeholder='add tag' unique={true}
 				values={this.props.metadata.tags}
-				onChange={(e)=>this.handleFieldChange('tags', e)}/>
+				onChange={(e)=>this.handleFieldChange('tags', e)}
+				/>
 
 			<div className='field systems'>
 				<label>systems</label>
@@ -363,12 +364,13 @@ const MetadataEditor = createClass({
 
 			{this.renderAuthors()}
 
-			<StringArrayEditor label='invited authors' valuePatterns={[/.+/]}
+			<TagInput label='invited authors' valuePatterns={[/.+/]}
 				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
 				placeholder='invite author' unique={true}
 				values={this.props.metadata.invitedAuthors}
 				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
-				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>
+				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
+				/>
 
 			<h2>Privacy</h2>
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -79,6 +79,7 @@
 				text-overflow : ellipsis;
 			}
 			button {
+				.colorButton();
 				padding          : 0px 5px;
 				color            : white;
 				background-color : black;
@@ -138,16 +139,16 @@
 		margin-bottom : 15px;
 		button { width : 100%; }
 		button.publish {
-			.button(@blueLight);
+			.colorButton(@blueLight);
 		}
 		button.unpublish {
-			.button(@silver);
+			.colorButton(@silver);
 		}
 	}
 
 	.delete.field .value {
 		button {
-			.button(@red);
+			.colorButton(@red);
 		}
 	}
 	.authors.field .value {
@@ -271,7 +272,7 @@
 			&:last-child { border-radius : 0 0.5em 0.5em 0; }
 		}
 
-		.badge {
+		.tag {
 			padding          : 0.3em;
 			margin           : 2px;
 			font-size        : 0.9em;

client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx

@@ -1,149 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-
-const StringArrayEditor = createClass({
-	displayName     : 'StringArrayEditor',
-	getDefaultProps : function() {
-		return {
-			label         : '',
-			values        : [],
-			valuePatterns : null,
-			validators    : [],
-			placeholder   : '',
-			notes         : [],
-			unique        : false,
-			cannotEdit    : [],
-			onChange      : ()=>{}
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			valueContext : !!this.props.values ? this.props.values.map((value)=>({
-				value,
-				editing : false
-			})) : [],
-			temporaryValue : '',
-			updateValue    : ''
-		};
-	},
-
-	componentDidUpdate : function(prevProps) {
-		if(!_.eq(this.props.values, prevProps.values)) {
-			this.setState({
-				valueContext : this.props.values ? this.props.values.map((newValue)=>({
-					value   : newValue,
-					editing : this.state.valueContext.find(({ value })=>value === newValue)?.editing || false
-				})) : []
-			});
-		}
-	},
-
-	handleChange : function(value) {
-		this.props.onChange({
-			target : {
-				value
-			}
-		});
-	},
-
-	addValue : function(value){
-		this.handleChange(_.uniq([...this.props.values, value]));
-		this.setState({
-			temporaryValue : ''
-		});
-	},
-
-	removeValue : function(index){
-		this.handleChange(this.props.values.filter((_, i)=>i !== index));
-	},
-
-	updateValue : function(value, index){
-		const valueContext = this.state.valueContext;
-		valueContext[index].value = value;
-		valueContext[index].editing = false;
-		this.handleChange(valueContext.map((context)=>context.value));
-		this.setState({ valueContext, updateValue: '' });
-	},
-
-	editValue : function(index){
-		if(!!this.props.cannotEdit && this.props.cannotEdit.includes(this.props.values[index])) {
-			return;
-		}
-		const valueContext = this.state.valueContext.map((context, i)=>{
-			context.editing = index === i;
-			return context;
-		});
-		this.setState({ valueContext, updateValue: this.props.values[index] });
-	},
-
-	valueIsValid : function(value, index) {
-		const values = _.clone(this.props.values);
-		if(index !== undefined) {
-			values.splice(index, 1);
-		}
-		const matchesPatterns = !this.props.valuePatterns || this.props.valuePatterns.some((pattern)=>!!(value || '').match(pattern));
-		const uniqueIfSet = !this.props.unique || !values.includes(value);
-		const passesValidators = !this.props.validators || this.props.validators.every((validator)=>validator(value));
-		return matchesPatterns && uniqueIfSet && passesValidators;
-	},
-
-	handleValueInputKeyDown : function(event, index) {
-		if(event.key === 'Enter') {
-			if(this.valueIsValid(event.target.value, index)) {
-				if(index !== undefined) {
-					this.updateValue(event.target.value, index);
-				} else {
-					this.addValue(event.target.value);
-				}
-			}
-		} else if(event.key === 'Escape') {
-			this.closeEditInput(index);
-		}
-	},
-
-	closeEditInput : function(index) {
-		const valueContext = this.state.valueContext;
-		valueContext[index].editing = false;
-		this.setState({ valueContext, updateValue: '' });
-	},
-
-	render : function() {
-		const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing
-			? <React.Fragment key={i}>
-				<div className='input-group'>
-					<input type='text' className={`value ${this.valueIsValid(this.state.updateValue, i) ? '' : 'invalid'}`} autoFocus placeholder={this.props.placeholder}
-						value={this.state.updateValue}
-						onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)}
-						onChange={(e)=>this.setState({ updateValue: e.target.value })}/>
-					{<div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.closeEditInput(i); }}><i className='fa fa-undo fa-fw'/></div>}
-					{this.valueIsValid(this.state.updateValue, i) ? <div className='icon steel'  onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}><i className='fa fa-check fa-fw'/></div> : null}
-				</div>
-			</React.Fragment>
-			: <div className='badge' key={i} onClick={()=>this.editValue(i)}>{context.value}
-				{!!this.props.cannotEdit && this.props.cannotEdit.includes(context.value) ? null : <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.removeValue(i); }}><i className='fa fa-times fa-fw'/></div>}
-			</div>
-		);
-
-		return <div className='field'>
-			<label>{this.props.label}</label>
-			<div style={{ flex: '1 0' }} className='value'>
-				<div className='list'>
-					{valueElements}
-					<div className='input-group'>
-						<input type='text' className={`value ${this.valueIsValid(this.state.temporaryValue) ? '' : 'invalid'}`} placeholder={this.props.placeholder}
-							   value={this.state.temporaryValue}
-							   onKeyDown={(e)=>this.handleValueInputKeyDown(e)}
-							   onChange={(e)=>this.setState({ temporaryValue: e.target.value })}/>
-						{this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}><i className='fa fa-check fa-fw'/></div> : null}
-					</div>
-				</div>
-
-				{this.props.notes ? this.props.notes.map((n, index)=><p key={index}><small>{n}</small></p>) : null}
-			</div>
-		</div>;
-	}
-});
-
-module.exports = StringArrayEditor;

client/homebrew/editor/tagInput/tagInput.jsx

@@ -0,0 +1,105 @@
+require('./tagInput.less');
+const React = require('react');
+const { useState, useEffect } = React;
+const _     = require('lodash');
+
+const TagInput = ({ unique = true, values = [], ...props }) => {
+	const [tempInputText, setTempInputText] = useState('');
+	const [tagList, setTagList] = useState(values.map((value) => ({ value, editing: false })));
+
+	useEffect(()=>{
+		handleChange(tagList.map((context)=>context.value))
+	}, [tagList])
+
+	const handleChange = (value)=>{
+		props.onChange({
+			target : { value }
+		})
+	};
+
+	const handleInputKeyDown = ({ evt, value, index, options = {} }) => {
+		if (_.includes(['Enter', ','], evt.key)) {
+			evt.preventDefault();
+			submitTag(evt.target.value, value, index);
+			if (options.clear) {
+				setTempInputText('');
+			}
+		}
+	};
+
+	const submitTag = (newValue, originalValue, index) => {
+		setTagList((prevContext) => {
+			// remove existing tag
+			if(newValue === null){
+				return [...prevContext].filter((context, i)=>i !== index);
+			}
+			// add new tag
+			if(originalValue === null){
+				return [...prevContext, { value: newValue, editing: false }]
+			}
+			// update existing tag
+			return prevContext.map((context, i) => {
+				if (i === index) {
+					return { ...context, value: newValue, editing: false };
+				}
+				return context;
+			});
+		});
+	};
+
+	const editTag = (index) => {
+		setTagList((prevContext) => {
+			return prevContext.map((context, i) => {
+				if (i === index) {
+					return { ...context, editing: true };
+				}
+				return { ...context, editing: false };
+			});
+		});
+	};
+
+	const renderReadTag = (context, index) => {
+		return (
+			<li key={index}
+				data-value={context.value}
+				className='tag'
+				onClick={() => editTag(index)}>
+				{context.value}
+				<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index)}}><i className='fa fa-times fa-fw'/></button>
+			</li>
+		);
+	};
+
+	const renderWriteTag = (context, index) => {
+		return (
+			<input type='text'
+				key={index}
+				defaultValue={context.value} 
+				onKeyDown={(evt) => handleInputKeyDown({evt, value: context.value, index: index})} 
+				autoFocus 
+			/>
+		);
+	};
+
+	return (
+		<div className='field'>
+			<label>{props.label}</label>
+			<div className='value'>
+				<ul className='list'>
+					{tagList.map((context, index) => { return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
+				</ul>
+
+				<input
+					type='text'
+					className='value'
+					placeholder={props.placeholder}
+					value={tempInputText}
+					onChange={(e) => setTempInputText(e.target.value)}
+					onKeyDown={(evt) => handleInputKeyDown({ evt, value: null, options: { clear: true } })}
+				/>
+			</div>
+		</div>
+	);
+};
+
+module.exports = TagInput;

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -2,7 +2,7 @@ require('./brewItem.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const moment = require('moment');
-const request = require('../../../../utils/request-middleware.js');
+import request from '../../../../utils/request-middleware.js';
 
 const googleDriveIcon = require('../../../../googleDrive.svg');
 const homebreweryIcon = require('../../../../thumbnail.png');

client/homebrew/pages/editPage/editPage.jsx

@@ -4,7 +4,7 @@ const React = require('react');
 const _ = require('lodash');
 const createClass = require('create-react-class');
 
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -16,6 +16,7 @@ const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const VaultNavItem = require('../../navbar/vault.navitem.jsx');
 
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
@@ -23,7 +24,7 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const LockNotification = require('./lockNotification/lockNotification.jsx');
 
-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
 const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
@@ -417,6 +418,7 @@ const EditPage = createClass({
 					</Nav.item>
 				</Nav.dropdown>
 				<PrintNavItem />
+				<VaultNavItem />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />
 			</Nav.section>

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,7 +1,7 @@
 require('./errorPage.less');
 const React      = require('react');
 const UIPage     = require('../basePages/uiPage/uiPage.jsx');
-const Markdown   = require('../../../../shared/naturalcrit/markdown.js');
+import Markdown  from '../../../../shared/naturalcrit/markdown.js';
 const ErrorIndex = require('./errors/errorIndex.js');
 
 const ErrorPage = ({ brew })=>{

client/homebrew/pages/homePage/homePage.jsx

@@ -2,7 +2,7 @@ require('./homePage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const cx = require('classnames');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');

client/homebrew/pages/newPage/newPage.jsx

@@ -2,9 +2,9 @@
 require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 
-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const PrintNavItem = require('../../navbar/print.navitem.jsx');

client/homebrew/pages/sharePage/sharePage.jsx

@@ -8,6 +8,7 @@ const Navbar = require('../../navbar/navbar.jsx');
 const MetadataNav = require('../../navbar/metadata.navitem.jsx');
 const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const VaultNavItem = require('../../navbar/vault.navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
@@ -110,6 +111,7 @@ const SharePage = createClass({
 							</Nav.item>
 						</Nav.dropdown>
 					</>}
+					<VaultNavItem/>
 					<RecentNavItem brew={this.props.brew} storageKey='view' />
 					<Account />
 				</Nav.section>

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -15,7 +15,7 @@ const BrewItem      = require('../basePages/listPage/brewItem/brewItem.jsx');
 const SplitPane     = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
 const ErrorIndex    = require('../errorPage/errors/errorIndex.js');
 
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 
 const VaultPage = (props)=>{
 	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);

client/homebrew/pages/vaultPage/vaultPage.less

@@ -92,49 +92,11 @@
 
 					&:invalid { background : rgb(255, 188, 181); }
 					
-					&[type='checkbox'] {
-						position       : relative;
-						display        : inline-block;
-						width          : 50px;
-						height         : 30px;
-						font-family    : 'WalterTurncoat';
-						font-size      : 20px;
-						font-weight    : 800;
-						color          : white;
-						letter-spacing : 2px;
-						appearance     : none;
-						background     : red;
-						isolation      : isolate;
-						border-radius  : 5px;
-
-						&::before,&::after {
-							position    : absolute;
-							inset       : 0;
-							z-index     : 5;
-							padding-top : 2px;
-							text-align  : center;
-						}
-
-						&::before {
-							display : block;
-							content : 'No';
-						}
-
-						&::after {
-							display : none;
-							content : 'Yes';
-						}
-
-						&:checked {
-							background : green;
-
-							&::before { display : none; }
-							&::after { display : block; }
-						}
-					}
+					
 				}
 
 				#searchButton {
+					.colorButton(@green);
 					position : absolute;
 					right    : 20px;
 					bottom   : 0;
@@ -152,7 +114,6 @@
 			flex-direction : column;
 			height         : 100%;
 			overflow-y     : auto;
-			font-family    : 'BookInsanityRemake';
 			font-size      : 0.34cm;
 				
 			h3 {
@@ -356,6 +317,7 @@
 					}
 
 					button {
+						.colorButton(@green);
 						width : max-content;
 
 						&.previousPage { grid-area : previousPage; }

client/homebrew/utils/request-middleware.js

@@ -1,4 +1,4 @@
-const request = require('superagent');
+import request from 'superagent';
 
 const addHeader = (request)=>request.set('Homebrewery-Version', global.version);
 
@@ -9,4 +9,4 @@ const requestMiddleware = {
 	delete : (path)=>addHeader(request.delete(path)),
 };
 
-module.exports = requestMiddleware;
+export default requestMiddleware;

client/template.js

@@ -8,6 +8,8 @@ const template = async function(name, title='', props = {}){
 	});
 	const ogMetaTags = ogTags.join('\n');
 
+	const ssrModule = await import(`../build/${name}/ssr.cjs`);
+
 	return `<!DOCTYPE html>
 	<html>
 		<head>
@@ -21,7 +23,7 @@ const template = async function(name, title='', props = {}){
 			<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
 		</head>
 		<body>
-			<main id="reactRoot">${require(`../build/${name}/ssr.js`)(props)}</main>
+			<main id="reactRoot">${ssrModule.default(props)}</main>
 			<script src=${`/${name}/bundle.js`}></script>
 			<script>start_app(${JSON.stringify(props)})</script>
 		</body>
@@ -29,4 +31,4 @@ const template = async function(name, title='', props = {}){
 	`;
 };
 
-module.exports = template;
+export default template;