all imports

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -1,7 +1,8 @@
-import React, {createClass} from 'react';
+import React from 'react';
+import createReactClass from 'create-react-class';
 import request from 'superagent';
 
-const BrewCleanup = createClass({
+const BrewCleanup = createReactClass({
 	displayName : 'BrewCleanup',
 	getDefaultProps(){
 		return {};

client/admin/brewUtils/brewCompress/brewCompress.jsx

@@ -1,7 +1,8 @@
-import React, {createClass} from 'react';
+import React from 'react';
+import createReactClass from 'create-react-class';
 import request from 'superagent';
 
-const BrewCompress = createClass({
+const BrewCompress = createReactClass({
 	displayName : 'BrewCompress',
 	getDefaultProps(){
 		return {};

client/admin/brewUtils/brewLookup/brewLookup.jsx

@@ -1,10 +1,11 @@
-import React, {createClass} from 'react';
+import React from 'react';
+import createReactClass from 'create-react-class';
 import request from 'superagent';
 import cx from 'classnames';
 
 import Moment from 'moment';
 
-const BrewLookup = createClass({
+const BrewLookup = createReactClass({
 	getDefaultProps() {
 		return {};
 	},

client/admin/brewUtils/stats/stats.jsx

@@ -1,7 +1,8 @@
-import React, {createClass} from 'react';
+import React from 'react';
+import createReactClass from 'create-react-class';
 import request from 'superagent';
 
-const Stats = createClass({
+const Stats = createReactClass({
 	displayName : 'Stats',
 	getDefaultProps(){
 		return {};

client/admin/lockTools/lockTools.jsx

@@ -1,10 +1,11 @@
 /*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
-require('./lockTools.less');
+import './lockTools.less';
-import React, {createClass} from 'react';
+import React from 'react';
+import createReactClass from 'create-react-class';
 
 import request from '../../homebrew/utils/request-middleware.js';
 
-const LockTools = createClass({
+const LockTools = createReactClass({
 	displayName     : 'LockTools',
 	getInitialState : function() {
 		return {
@@ -54,7 +55,7 @@ const LockTools = createClass({
 	}
 });
 
-const LockBrew = createClass({
+const LockBrew = createReactClass({
 	displayName     : 'LockBrew',
 	getInitialState : function() {
 		// Default values
@@ -182,7 +183,7 @@ const LockBrew = createClass({
 	}
 });
 
-const LockTable = createClass({
+const LockTable = createReactClass({
 	displayName     : 'LockTable',
 	getDefaultProps : function() {
 		return {
@@ -272,7 +273,7 @@ const LockTable = createClass({
 	}
 });
 
-const LockLookup = createClass({
+const LockLookup = createReactClass({
 	displayName     : 'LockLookup',
 	getDefaultProps : function() {
 		return {

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

@@ -1,4 +1,4 @@
-require('./notificationAdd.less');
+import './notificationAdd.less';
 import React, { useState, useRef } from 'react';
 import request from 'superagent';
 

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -1,5 +1,4 @@
-require('./notificationLookup.less');
+import './notificationLookup.less';
-
 import React, { useState} from 'react';
 import request from 'superagent';
 import Moment from 'moment';

client/components/codeEditor/codeEditor.jsx

@@ -1,51 +1,58 @@
 /* eslint-disable max-lines */
-require('./codeEditor.less');
+import './codeEditor.less';
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const _ = require('lodash');
+import _ from 'lodash';
-const closeTag = require('./close-tag');
+import closeTag from './close-tag';
-const autoCompleteEmoji = require('./autocompleteEmoji');
+import autoCompleteEmoji from './autocompleteEmoji';
+import Codemirror from 'codemirror';
 
-let CodeMirror;
+// ================= Language Modes =================
-if(typeof window !== 'undefined'){
+// Github flavoured markdown
-	CodeMirror = require('codemirror');
+import 'codemirror/mode/gfm/gfm.js';
+import 'codemirror/mode/css/css.js';
+import 'codemirror/mode/javascript/javascript.js';
 
-	//Language Modes
+// ================= Addons =================
-	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
-	require('codemirror/mode/css/css.js');
-	require('codemirror/mode/javascript/javascript.js');
 
-	//Addons
+// ---- Code folding ----
-	//Code folding
+import 'codemirror/addon/fold/foldcode.js';
-	require('codemirror/addon/fold/foldcode.js');
+import 'codemirror/addon/fold/foldgutter.js';
-	require('codemirror/addon/fold/foldgutter.js');
+import 'codemirror/addon/fold/xml-fold.js';
-	//Search and replace
-	require('codemirror/addon/search/search.js');
-	require('codemirror/addon/search/searchcursor.js');
-	require('codemirror/addon/search/jump-to-line.js');
-	require('codemirror/addon/search/match-highlighter.js');
-	require('codemirror/addon/search/matchesonscrollbar.js');
-	require('codemirror/addon/dialog/dialog.js');
-	//Trailing space highlighting
-	// require('codemirror/addon/edit/trailingspace.js');
-	//Active line highlighting
-	// require('codemirror/addon/selection/active-line.js');
-	//Scroll past last line
-	require('codemirror/addon/scroll/scrollpastend.js');
-	//Auto-closing
-	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
-	require('codemirror/addon/fold/xml-fold.js');
-	require('codemirror/addon/edit/closetag.js');
-	//Autocompletion
-	require('codemirror/addon/hint/show-hint.js');
 
-	const foldPagesCode = require('./fold-pages');
+// ---- Search and replace ----
-	foldPagesCode.registerHomebreweryHelper(CodeMirror);
+import 'codemirror/addon/search/search.js';
-	const foldCSSCode = require('./fold-css');
+import 'codemirror/addon/search/searchcursor.js';
-	foldCSSCode.registerHomebreweryHelper(CodeMirror);
+import 'codemirror/addon/search/jump-to-line.js';
-}
+import 'codemirror/addon/search/match-highlighter.js';
+import 'codemirror/addon/search/matchesonscrollbar.js';
+import 'codemirror/addon/dialog/dialog.js';
 
-const CodeEditor = createClass({
+// Trailing space highlighting
+// import 'codemirror/addon/edit/trailingspace.js';
+// Active line highlighting
+// import 'codemirror/addon/selection/active-line.js';
+// Scroll past last line
+import 'codemirror/addon/scroll/scrollpastend.js';
+
+// ---- Auto-closing ----
+import 'codemirror/addon/edit/closetag.js';
+
+// ---- Autocompletion ----
+import 'codemirror/addon/hint/show-hint.js';
+
+// ================= Custom Fold Helpers =================
+import foldPagesCode from './fold-pages';
+import foldCSSCode from './fold-css';
+
+let CodeMirror = Codemirror;
+
+// register helpers
+foldPagesCode.registerHomebreweryHelper(CodeMirror);
+foldCSSCode.registerHomebreweryHelper(CodeMirror);
+
+
+const CodeEditor = createReactClass({
 	displayName     : 'CodeEditor',
 	getDefaultProps : function() {
 		return {

client/components/combobox.jsx

@@ -1,9 +1,9 @@
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import request from 'superagent';
-const _ = require('lodash');
+import _ from 'lodash';
-require('./combobox.less');
+import './combobox.less';
 
-const Combobox = createClass({
+const Combobox = createReactClass({
 	displayName     : 'Combobox',
 	getDefaultProps : function() {
 		return {

client/components/renderWarnings/renderWarnings.jsx

@@ -1,11 +1,11 @@
-require('./renderWarnings.less');
+import './renderWarnings.less';
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const _     = require('lodash');
+import _ from 'lodash';
 
 import Dialog from '../dialog.jsx';
 
-const RenderWarnings = createClass({
+const RenderWarnings = createReactClass({
 	displayName     : 'RenderWarnings',
 	getInitialState : function() {
 		return {

client/components/splitPane/splitPane.jsx

@@ -1,6 +1,5 @@
-require('./splitPane.less');
+import './splitPane.less';
-const React = require('react');
+import React, { useEffect, useState} from 'react';
-const { useState, useEffect } = React;
 
 const PANE_WIDTH_KEY = 'HB_editor_splitWidth';
 const LIVE_SCROLL_KEY = 'HB_editor_liveScroll';

client/components/svg/cauldron.svg.jsx

@@ -1,5 +1,4 @@
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
 
 export default function(props){
 	return <svg version='1.1' x='0px' y='0px' viewBox='0 0 90 112.5' enableBackground='new 0 0 90 90' >

client/components/svg/naturalcrit-d20.svg.jsx

@@ -1,5 +1,4 @@
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
 
 export default function(props){
 	return <svg version='1.1' x='0px' y='0px' viewBox='0 0 100 100' enableBackground='new 0 0 100 100'><path d='M80.644,87.982l16.592-41.483c0.054-0.128,0.088-0.26,0.108-0.394c0.006-0.039,0.007-0.077,0.011-0.116  c0.007-0.087,0.008-0.174,0.002-0.26c-0.003-0.046-0.007-0.091-0.014-0.137c-0.014-0.089-0.036-0.176-0.063-0.262  c-0.012-0.034-0.019-0.069-0.031-0.103c-0.047-0.118-0.106-0.229-0.178-0.335c-0.004-0.006-0.006-0.012-0.01-0.018L67.999,3.358  c-0.01-0.013-0.003-0.026-0.013-0.04L68,3.315V4c0,0-0.033,0-0.037,0c-0.403-1-1.094-1.124-1.752-0.976  c0,0.004-0.004-0.012-0.007-0.012C66.201,3.016,66.194,3,66.194,3H66.19h-0.003h-0.003h-0.004h-0.003c0,0-0.004,0-0.007,0  s-0.003-0.151-0.007-0.151L20.495,15.227c-0.025,0.007-0.046-0.019-0.071-0.011c-0.087,0.028-0.172,0.041-0.253,0.083  c-0.054,0.027-0.102,0.053-0.152,0.085c-0.051,0.033-0.101,0.061-0.147,0.099c-0.044,0.036-0.084,0.073-0.124,0.113  c-0.048,0.048-0.093,0.098-0.136,0.152c-0.03,0.039-0.059,0.076-0.085,0.117c-0.046,0.07-0.084,0.145-0.12,0.223  c-0.011,0.023-0.027,0.042-0.036,0.066L2.911,57.664C2.891,57.715,3,57.768,3,57.82v0.002c0,0.186,0,0.375,0,0.562  c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004v0.002c0,0.074-0.002,0.15,0.012,0.223  C3.015,58.631,3,58.631,3,58.633c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004c0,0,0,0,0,0.002v0.004  c0,0.191-0.046,0.377,0.06,0.545c0-0.002-0.03,0.004-0.03,0.004c0,0.004-0.03,0.004-0.03,0.004c0,0.002,0,0.002,0,0.002  l-0.045,0.004c0.03,0.047,0.036,0.09,0.068,0.133l29.049,37.359c0.002,0.004,0,0.006,0.002,0.01c0.002,0.002,0,0.004,0.002,0.008  c0.006,0.008,0.014,0.014,0.021,0.021c0.024,0.029,0.052,0.051,0.078,0.078c0.027,0.029,0.053,0.057,0.082,0.082  c0.03,0.027,0.055,0.062,0.086,0.088c0.026,0.02,0.057,0.033,0.084,0.053c0.04,0.027,0.081,0.053,0.123,0.076  c0.005,0.004,0.01,0.008,0.016,0.01c0.087,0.051,0.176,0.09,0.269,0.123c0.042,0.014,0.082,0.031,0.125,0.043  c0.021,0.006,0.041,0.018,0.062,0.021c0.123,0.027,0.249,0.043,0.375,0.043c0.099,0,0.202-0.012,0.304-0.027l45.669-8.303  c0.057-0.01,0.108-0.021,0.163-0.037C79.547,88.992,79.562,89,79.575,89c0.004,0,0.004,0,0.004,0c0.021,0,0.039-0.027,0.06-0.035  c0.041-0.014,0.08-0.034,0.12-0.052c0.021-0.01,0.044-0.019,0.064-0.03c0.017-0.01,0.026-0.015,0.033-0.017  c0.014-0.008,0.023-0.021,0.037-0.028c0.14-0.078,0.269-0.174,0.38-0.285c0.014-0.016,0.024-0.034,0.038-0.048  c0.109-0.119,0.201-0.252,0.271-0.398c0.006-0.01,0.016-0.018,0.021-0.029c0.004-0.008,0.008-0.017,0.011-0.026  c0.002-0.004,0.003-0.006,0.005-0.01C80.627,88.021,80.635,88.002,80.644,87.982z M77.611,84.461L48.805,66.453l32.407-25.202  L77.611,84.461z M46.817,63.709L35.863,23.542l43.818,14.608L46.817,63.709z M84.668,40.542l8.926,5.952l-11.902,29.75  L84.668,40.542z M89.128,39.446L84.53,36.38l-6.129-12.257L89.128,39.446z M79.876,34.645L37.807,20.622L65.854,6.599L79.876,34.645  z M33.268,19.107l-6.485-2.162l23.781-6.487L33.268,19.107z M21.92,18.895l8.67,2.891L10.357,47.798L21.92,18.895z M32.652,24.649  l10.845,39.757L7.351,57.178L32.652,24.649z M43.472,67.857L32.969,92.363L8.462,60.855L43.472,67.857z M46.631,69.09l27.826,17.393  l-38.263,6.959L46.631,69.09z'></path></svg>;

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,20 +1,19 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./brewRenderer.less');
+import './brewRenderer.less';
-const React = require('react');
+import React, { useState, useRef, useMemo, useEffect } from 'react';
-const { useState, useRef, useMemo, useEffect } = React;
+import _ from 'lodash';
-const _ = require('lodash');
 
-const MarkdownLegacy = require('markdownLegacy.js');
+import MarkdownLegacy from 'markdownLegacy.js';
 import Markdown from 'markdown.js';
-const ErrorBar = require('./errorBar/errorBar.jsx');
+import ErrorBar from './errorBar/errorBar.jsx';
-const ToolBar  = require('./toolBar/toolBar.jsx');
+import ToolBar  from './toolBar/toolBar.jsx';
 
 //TODO: move to the brew renderer
-const RenderWarnings = require('client/components/renderWarnings/renderWarnings.jsx');
+import RenderWarnings from 'client/components/renderWarnings/renderWarnings.jsx';
-const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
+import NotificationPopup from './notificationPopup/notificationPopup.jsx';
-const Frame = require('react-frame-component').default;
+import Frame from 'react-frame-component';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
-const { printCurrentBrew } = require('../../../shared/helpers.js');
+import { printCurrentBrew } from '../../../shared/helpers.js';
 
 import HeaderNav from './headerNav/headerNav.jsx';
 import { safeHTML } from './safeHTML.js';

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -1,5 +1,5 @@
-require('./errorBar.less');
+import './errorBar.less';
-const React = require('react');
+import React from 'react';
 
 import Dialog from '../../../components/dialog.jsx';
 

client/homebrew/brewRenderer/headerNav/headerNav.jsx

@@ -1,7 +1,7 @@
-require('./headerNav.less');
+import './headerNav.less';
 
-import * as React from 'react';
+import React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 
 const MAX_TEXT_LENGTH = 40;
 

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,4 +1,4 @@
-require('./notificationPopup.less');
+import './notificationPopup.less';
 import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
 import Markdown from 'markdown.js';

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -1,8 +1,7 @@
 /* eslint-disable max-lines */
-require('./toolBar.less');
+import '.toolBar.less';
-const React = require('react');
+import React, { useState, useEffect } from 'react';
-const { useState, useEffect } = React;
+import _ from 'lodash';
-const _ = require('lodash');
 
 import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
 

client/homebrew/editor/editor.jsx

@@ -1,14 +1,14 @@
 /*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
-require('./editor.less');
+import './editor.less';
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 import Markdown from '../../../shared/markdown.js';
 
-const CodeEditor = require('client/components/codeEditor/codeEditor.jsx');
+import CodeEditor from 'client/components/codeEditor/codeEditor.jsx';
-const SnippetBar = require('./snippetbar/snippetbar.jsx');
+import SnippetBar from './snippetbar/snippetbar.jsx';
-const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
+import MetadataEditor from './metadataEditor/metadataEditor.jsx';
 
 const EDITOR_THEME_KEY = 'HB_editor_theme';
 
@@ -31,7 +31,7 @@ const DEFAULT_SNIPPET_TEXT = dedent`
 `;
 let isJumping = false;
 
-const Editor = createClass({
+const Editor = createReactClass({
 	displayName     : 'Editor',
 	getDefaultProps : function() {
 		return {

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -1,19 +1,19 @@
 /* eslint-disable max-lines */
-require('./metadataEditor.less');
+import './metadataEditor.less';
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const _     = require('lodash');
+import _ from 'lodash';
 import request from '../../utils/request-middleware.js';
-const Combobox = require('client/components/combobox.jsx');
+import Combobox from 'client/components/combobox.jsx';
-const TagInput = require('../tagInput/tagInput.jsx');
+import TagInput from '../tagInput/tagInput.jsx';
 
 
-const Themes = require('themes/themes.json');
+import Themes from 'themes/themes.json';
-const validations = require('./validations.js');
+import validations from './validations.js';
 
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
-const homebreweryThumbnail = require('../../thumbnail.png');
+import homebreweryThumbnail from '../../thumbnail.png';
 
 const callIfExists = (val, fn, ...args)=>{
 	if(val[fn]) {
@@ -21,7 +21,7 @@ const callIfExists = (val, fn, ...args)=>{
 	}
 };
 
-const MetadataEditor = createClass({
+const MetadataEditor = createReactClass({
 	displayName     : 'MetadataEditor',
 	getDefaultProps : function() {
 		return {

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,29 +1,36 @@
 /*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
-require('./snippetbar.less');
+import './snippetbar.less';
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const _     = require('lodash');
+
-const cx    = require('classnames');
+import _ from 'lodash';
+import cx from 'classnames';
 
 import { loadHistory } from '../../utils/versionHistory.js';
 import { brewSnippetsToJSON } from '../../../../shared/helpers.js';
 
-//Import all themes
+import Legacy5ePHB from 'themes/Legacy/5ePHB/snippets.js';
-const ThemeSnippets = {};
+import V3_5ePHB   from 'themes/V3/5ePHB/snippets.js';
-ThemeSnippets['Legacy_5ePHB'] = require('themes/Legacy/5ePHB/snippets.js');
+import V3_5eDMG   from 'themes/V3/5eDMG/snippets.js';
-ThemeSnippets['V3_5ePHB']     = require('themes/V3/5ePHB/snippets.js');
+import V3_Journal from 'themes/V3/Journal/snippets.js';
-ThemeSnippets['V3_5eDMG']     = require('themes/V3/5eDMG/snippets.js');
+import V3_Blank  from 'themes/V3/Blank/snippets.js';
-ThemeSnippets['V3_Journal']   = require('themes/V3/Journal/snippets.js');
-ThemeSnippets['V3_Blank']     = require('themes/V3/Blank/snippets.js');
 
-const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json');
+const ThemeSnippets = {
+  Legacy_5ePHB: Legacy5ePHB,
+  V3_5ePHB: V3_5ePHB,
+  V3_5eDMG: V3_5eDMG,
+  V3_Journal: V3_Journal,
+  V3_Blank: V3_Blank,
+};
+
+import EditorThemes from 'build/homebrew/codeMirror/editorThemes.json';
 
 const execute = function(val, props){
 	if(_.isFunction(val)) return val(props);
 	return val;
 };
 
-const Snippetbar = createClass({
+const Snippetbar = createReactClass({
 	displayName     : 'SnippetBar',
 	getDefaultProps : function() {
 		return {
@@ -283,7 +290,7 @@ const Snippetbar = createClass({
 
 export default Snippetbar;
 
-const SnippetGroup = createClass({
+const SnippetGroup = createReactClass({
 	displayName     : 'SnippetGroup',
 	getDefaultProps : function() {
 		return {

client/homebrew/editor/tagInput/tagInput.jsx

@@ -1,7 +1,6 @@
-require('./tagInput.less');
+import './tagInput.less';
-const React = require('react');
+import React, { useState, useEffect } from 'react';
-const { useState, useEffect } = React;
+import _ from 'lodash';
-const _     = require('lodash');
 
 const TagInput = ({ unique = true, values = [], ...props })=>{
 	const [tempInputText, setTempInputText] = useState('');

client/homebrew/navbar/account.navitem.jsx

@@ -1,9 +1,9 @@
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import request from 'superagent';
-const request = require('superagent');
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
-const Account = createClass({
+const Account = createReactClass({
 	displayName     : 'AccountNavItem',
 	getInitialState : function() {
 		return {

client/homebrew/navbar/error-navitem.jsx

@@ -1,6 +1,6 @@
-require('./error-navitem.less');
+import './error-navitem.less';
-const React = require('react');
+import React from 'react';
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
 const ErrorNavItem = ({ error = '', clearError })=>{
 	const response    = error.response;

client/homebrew/navbar/help.navitem.jsx

@@ -1,7 +1,7 @@
-const React = require('react');
+import React from 'react';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
 export default function(props){
 	return <Nav.dropdown>

client/homebrew/navbar/metadata.navitem.jsx

@@ -1,11 +1,11 @@
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const Moment = require('moment');
+import Moment from 'moment';
 
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
 
-const MetadataNav = createClass({
+const MetadataNav = createReactClass({
 	displayName     : 'MetadataNav',
 	getDefaultProps : function() {
 		return {

client/homebrew/navbar/nav.jsx

@@ -1,14 +1,13 @@
-require('client/homebrew/navbar/navbar.less');
+import 'client/homebrew/navbar/navbar.less';
-const React = require('react');
+import React, { useState, useRef, useEffect} from 'react';
-const { useState, useRef, useEffect } = React;
+import createReactClass from 'create-react-class';
-const createClass = require('create-react-class');
+import _ from 'lodash';
-const _ = require('lodash');
+import cx from 'classnames';
-const cx = require('classnames');
 
-const NaturalCritIcon = require('client/components/svg/naturalcrit-d20.svg.jsx');
+import NaturalCritIcon from 'client/components/svg/naturalcrit-d20.svg.jsx';
 
 const Nav = {
-	base : createClass({
+	base : createReactClass({
 		displayName : 'Nav.base',
 		render      : function(){
 			return <nav>
@@ -25,7 +24,7 @@ const Nav = {
 		</a>;
 	},
 
-	section : createClass({
+	section : createReactClass({
 		displayName : 'Nav.section',
 		render      : function(){
 			return <div className={`navSection ${this.props.className ?? ''}`}>
@@ -34,7 +33,7 @@ const Nav = {
 		}
 	}),
 
-	item : createClass({
+	item : createReactClass({
 		displayName     : 'Nav.item',
 		getDefaultProps : function() {
 			return {

client/homebrew/navbar/navbar.jsx

@@ -1,11 +1,11 @@
-require('./navbar.less');
+import './navbar.less';
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
 
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
-const PatreonNavItem = require('./patreon.navitem.jsx');
+import PatreonNavItem from './patreon.navitem.jsx';
 
-const Navbar = createClass({
+const Navbar = createReactClass({
 	displayName     : 'Navbar',
 	getInitialState : function() {
 		return {

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,7 +1,7 @@
-const React = require('react');
+import React from 'react';
-const _ = require('lodash');
+import _ from 'lodash';
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
-const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
+import { splitTextStyleAndMetadata } from '../../../shared/helpers.js';
 
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';

client/homebrew/navbar/patreon.navitem.jsx

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
 export default function(props){
 	return <Nav.item

client/homebrew/navbar/print.navitem.jsx

@@ -1,6 +1,6 @@
-const React = require('react');
+import React from 'react';
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
-const { printCurrentBrew } = require('../../../shared/helpers.js');
+import { printCurrentBrew } from '../../../shared/helpers.js';
 
 export default function(){
 	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>

client/homebrew/navbar/recent.navitem.jsx

@@ -1,15 +1,15 @@
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const _ = require('lodash');
+import _ from 'lodash';
-const Moment = require('moment');
+import Moment from 'moment';
 
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
 const EDIT_KEY = 'HB_nav_recentlyEdited';
 const VIEW_KEY = 'HB_nav_recentlyViewed';
 
 
-const RecentItems = createClass({
+const RecentItems = createReactClass({
 	DisplayName     : 'RecentItems',
 	getDefaultProps : function() {
 		return {

client/homebrew/navbar/vault.navitem.jsx

@@ -1,6 +1,6 @@
-const React = require('react');
+import React from 'react';
 
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
 export default function (props) {
 	return (

client/homebrew/pages/accountPage/accountPage.jsx

@@ -1,7 +1,7 @@
-const React  = require('react');
+import React from 'react';
-const moment = require('moment');
+import moment from 'moment';
-const UIPage = require('../basePages/uiPage/uiPage.jsx');
+import UIPage from '../basePages/uiPage/uiPage.jsx';
-const NaturalCritIcon = require('client/components/svg/naturalcrit-d20.svg.jsx');
+import NaturalCritIcon from 'client/components/svg/naturalcrit-d20.svg.jsx';
 
 let SAVEKEY = '';
 

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

@@ -1,12 +1,11 @@
-require('./brewItem.less');
+import './brewItem.less';
-const React = require('react');
+import React, { useCallback } from 'react';
-const { useCallback } = React;
+import moment from 'moment';
-const moment = require('moment');
 import request from '../../../../utils/request-middleware.js';
 
-const googleDriveIcon = require('../../../../googleDrive.svg');
+import googleDriveIcon from '../../../../googleDrive.svg';
-const homebreweryIcon = require('../../../../thumbnail.svg');
+import homebreweryIcon from '../../../../thumbnail.svg';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 const BrewItem = ({
 	brew = {

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

@@ -1,11 +1,11 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./listPage.less');
+import './listPage.less';
-const React       = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const _           = require('lodash');
+import _ from 'lodash';
-const moment      = require('moment');
+import moment from 'moment;'
 
-const BrewItem    = require('./brewItem/brewItem.jsx');
+import BrewItem from './brewItem/brewItem.jsx';
 
 const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
 const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
@@ -14,7 +14,7 @@ const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
 const DEFAULT_SORT_TYPE = 'alpha';
 const DEFAULT_SORT_DIR = 'asc';
 
-const ListPage = createClass({
+const ListPage = createReactClass({
 	displayName     : 'ListPage',
 	getDefaultProps : function() {
 		return {

client/homebrew/pages/basePages/uiPage/uiPage.jsx

@@ -1,16 +1,16 @@
-require('./uiPage.less');
+import './uiPage.less';
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
 
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
-const Navbar = require('client/homebrew/navbar/navbar.jsx');
+import Navbar from 'client/homebrew/navbar/navbar.jsx';
-const NewBrewItem = require('client/homebrew/navbar/newbrew.navitem.jsx');
+import NewBrewItem from 'client/homebrew/navbar/newbrew.navitem.jsx';
-const HelpNavItem = require('client/homebrew/navbar/help.navitem.jsx');
+import HelpNavItem from 'client/homebrew/navbar/help.navitem.jsx';
-const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both;
+import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx';
-const Account = require('client/homebrew/navbar/account.navitem.jsx');
+import Account from 'client/homebrew/navbar/account.navitem.jsx';
 
 
-const UIPage = createClass({
+const UIPage = createReactClass({
 	displayName : 'UIPage',
 
 	render : function(){

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,8 +1,8 @@
-require('./errorPage.less');
+import './errorPage.less';
-const React      = require('react');
+import React      from 'react';
-const UIPage     = require('../basePages/uiPage/uiPage.jsx');
+import UIPage     from '../basePages/uiPage/uiPage.jsx';
-import Markdown  from '../../../../shared/markdown.js';
+import Markdown   from '../../../../shared/markdown.js';
-const ErrorIndex = require('./errors/errorIndex.js');
+import ErrorIndex from './errors/errorIndex.js';
 
 const ErrorPage = ({ brew })=>{
 	// Retrieving the error text based on the brew's error code from ErrorIndex

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -1,4 +1,4 @@
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 const loginUrl = 'https://www.naturalcrit.com/login';
 

client/homebrew/pages/sharePage/sharePage.jsx

@@ -1,18 +1,19 @@
-require('./sharePage.less');
+import './sharePage.less';
-const React = require('react');
+import React, { useState, useEffect, useCallback } from 'react';
-const { useState, useEffect, useCallback } = React;
+import HeadTags from '../../../../vitreum/headtags.js';
-const { Meta } = require('vitreum/headtags');
+const { Meta } = HeadTags;
 
-const Nav = require('client/homebrew/navbar/nav.jsx');
-const Navbar = require('client/homebrew/navbar/navbar.jsx');
-const MetadataNav = require('client/homebrew/navbar/metadata.navitem.jsx');
-const PrintNavItem = require('client/homebrew/navbar/print.navitem.jsx');
-const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both;
-const Account = require('client/homebrew/navbar/account.navitem.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
-const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
+import Nav from 'client/homebrew/navbar/nav.jsx';
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
+import Navbar from 'client/homebrew/navbar/navbar.jsx';
+import MetadataNav from 'client/homebrew/navbar/metadata.navitem.jsx';
+import PrintNavItem from 'client/homebrew/navbar/print.navitem.jsx';
+import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx';
+import Account from 'client/homebrew/navbar/account.navitem.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
+
+import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle } from '../../../../shared/helpers.js';
 
 const SharePage = (props)=>{
 	const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;

client/homebrew/pages/userPage/userPage.jsx

@@ -1,17 +1,16 @@
-const React = require('react');
+import React, { useState} from 'react';
-const { useState } = React;
+import _ from 'lodash';
-const _ = require('lodash');
 
-const ListPage = require('../basePages/listPage/listPage.jsx');
+import ListPage from '../basePages/listPage/listPage.jsx';
 
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
-const Navbar = require('client/homebrew/navbar/navbar.jsx');
+import Navbar from 'client/homebrew/navbar/navbar.jsx';
-const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both;
+import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx';
-const Account = require('client/homebrew/navbar/account.navitem.jsx');
+import Account from 'client/homebrew/navbar/account.navitem.jsx';
-const NewBrew = require('client/homebrew/navbar/newbrew.navitem.jsx');
+import NewBrew from 'client/homebrew/navbar/newbrew.navitem.jsx';
-const HelpNavItem = require('client/homebrew/navbar/help.navitem.jsx');
+import HelpNavItem from 'client/homebrew/navbar/help.navitem.jsx';
-const ErrorNavItem = require('client/homebrew/navbar/error-navitem.jsx');
+import ErrorNavItem from 'client/homebrew/navbar/error-navitem.jsx';
-const VaultNavitem = require('client/homebrew/navbar/vault.navitem.jsx');
+import VaultNavitem from 'client/homebrew/navbar/vault.navitem.jsx';
 
 const UserPage = (props)=>{
 	props = {

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -1,19 +1,17 @@
 /*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/
 /*eslint max-params:["warn", { max: 10 }], */
-require('./vaultPage.less');
+import './vaultPage.less';
+import React, { useState, useEffect, useRef } from 'react';
 
-const React = require('react');
+import Nav          from 'client/homebrew/navbar/nav.jsx';
-const { useState, useEffect, useRef } = React;
+import Navbar       from 'client/homebrew/navbar/navbar.jsx';
-
+import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx';
-const Nav           = require('client/homebrew/navbar/nav.jsx');
+import Account      from 'client/homebrew/navbar/account.navitem.jsx';
-const Navbar        = require('client/homebrew/navbar/navbar.jsx');
+import NewBrew      from 'client/homebrew/navbar/newbrew.navitem.jsx';
-const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both;
+import HelpNavItem  from 'client/homebrew/navbar/help.navitem.jsx';
-const Account       = require('client/homebrew/navbar/account.navitem.jsx');
+import BrewItem     from '../basePages/listPage/brewItem/brewItem.jsx';
-const NewBrew       = require('client/homebrew/navbar/newbrew.navitem.jsx');
+import SplitPane    from 'client/components/splitPane/splitPane.jsx';
-const HelpNavItem   = require('client/homebrew/navbar/help.navitem.jsx');
+import ErrorIndex   from '../errorPage/errors/errorIndex.js';
-const BrewItem      = require('../basePages/listPage/brewItem/brewItem.jsx');
-const SplitPane     = require('client/components/splitPane/splitPane.jsx');
-const ErrorIndex    = require('../errorPage/errors/errorIndex.js');
 
 import request from '../../utils/request-middleware.js';
 

eslint.config.mjs

@@ -32,7 +32,7 @@ export default [{
 				"max-depth"            : ["warn", { max: 4 }],
 				"max-params"           : ["warn", { max: 5 }],
 				"no-restricted-syntax" : ["warn", "ClassDeclaration", "SwitchStatement"],
-				"no-unused-vars"       : ["warn", { vars: "all", args: "none", varsIgnorePattern: "config|_|cx|createClass" }],
+				"no-unused-vars"       : ["warn", { vars: "all", args: "none", varsIgnorePattern: "config|_|cx|createReactClass" }],
 				"react/jsx-uses-vars"  : "warn",
 
 				/** Fixable **/

shared/markdownLegacy.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const Markdown = require('markedLegacy');
+import Markdown from 'markedLegacy';
 const renderer = new Markdown.Renderer();
 
 //Processes the markdown within an HTML block if it's just a class-wrapper

tests/html/safeHTML.test.js

@@ -1,6 +1,5 @@
-
+import jsdomGlobal from 'jsdom-global';
-
+jsdomGlobal();
-require('jsdom-global')();
 
 import { safeHTML } from '../../client/homebrew/brewRenderer/safeHTML';
 

tests/markdown/emojis.test.js

@@ -1,5 +1,5 @@
 import Markdown from 'markdown.js';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 // Marked.js adds line returns after closing tags on some default tokens.
 // This removes those line returns for comparison sake.

tests/markdown/mustache-syntax.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 import Markdown from 'markdown.js';
 
 // Marked.js adds line returns after closing tags on some default tokens.

tests/markdown/variables.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 import Markdown from 'markdown.js';
 
 // Marked.js adds line returns after closing tags on some default tokens.

themes/Legacy/5ePHB/snippets.js

@@ -1,12 +1,12 @@
 /* eslint-disable max-lines */
 
-const MagicGen           = require('./snippets/magic.gen.js');
+import MagicGen           from './snippets/magic.gen.js';
-const ClassTableGen      = require('./snippets/classtable.gen.js');
+import ClassTableGen      from './snippets/classtable.gen.js';
-const MonsterBlockGen    = require('./snippets/monsterblock.gen.js');
+import MonsterBlockGen    from './snippets/monsterblock.gen.js';
-const ClassFeatureGen    = require('./snippets/classfeature.gen.js');
+import ClassFeatureGen    from './snippets/classfeature.gen.js';
-const CoverPageGen       = require('./snippets/coverpage.gen.js');
+import CoverPageGen       from './snippets/coverpage.gen.js';
-const TableOfContentsGen = require('./snippets/tableOfContents.gen.js');
+import TableOfContentsGen from './snippets/tableOfContents.gen.js';
-const dedent             = require('dedent-tabs').default;
+import dedent             from 'dedent-tabs';
 
 export default [
 

themes/Legacy/5ePHB/snippets/classfeature.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 export default function(classname){
 

themes/Legacy/5ePHB/snippets/classtable.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const features = [
 	'Astrological Botany',

themes/Legacy/5ePHB/snippets/coverpage.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const titles = [
 	'The Burning Gallows',

themes/Legacy/5ePHB/snippets/fullclass.gen.js

@@ -1,8 +1,8 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
-const ClassFeatureGen = require('./classfeature.gen.js');
+import ClassFeatureGen from './classfeature.gen.js';
 
-const ClassTableGen = require('./classtable.gen.js');
+import ClassTableGen from './classtable.gen.js';
 
 export default function(){
 

themes/Legacy/5ePHB/snippets/magic.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const spellNames = [
 	'Astral Rite of Acne',

themes/Legacy/5ePHB/snippets/monsterblock.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const genList = function(list, max){
 	return _.sampleSize(list, _.random(0, max)).join(', ') || 'None';

themes/Legacy/5ePHB/snippets/tableOfContents.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const getTOC = (pages)=>{
 	const add1 = (title, page)=>{

themes/V3/5ePHB/snippets.js

@@ -1,15 +1,12 @@
 /* eslint-disable max-lines */
-
+import MagicGen         from './snippets/magic.gen.js';
-const MagicGen           = require('./snippets/magic.gen.js');
+import ClassTableGen    from './snippets/classtable.gen.js';
-const ClassTableGen      = require('./snippets/classtable.gen.js');
+import MonsterBlockGen  from './snippets/monsterblock.gen.js';
-const MonsterBlockGen    = require('./snippets/monsterblock.gen.js');
+import scriptGen        from './snippets/script.gen.js';
-const scriptGen          = require('./snippets/script.gen.js');
+import ClassFeatureGen  from './snippets/classfeature.gen.js';
-const ClassFeatureGen    = require('./snippets/classfeature.gen.js');
+import CoverPageGen     from './snippets/coverpage.gen.js';
-const CoverPageGen       = require('./snippets/coverpage.gen.js');
+import QuoteGen 		from './snippets/quote.gen.js';
-const QuoteGen 			 = require('./snippets/quote.gen.js');
+import dedent           from 'dedent-tabs';
-const dedent             = require('dedent-tabs').default;
-
-
 
 export default [
 	{

themes/V3/5ePHB/snippets/classfeature.gen.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 export default function(classname){
 

themes/V3/5ePHB/snippets/classtable.gen.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 const features = [
 	'Astrological Botany',   'Biochemical Sorcery',   'Civil Divination',

themes/V3/5ePHB/snippets/coverpage.gen.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 const titles = [
 	'The Burning Gallows',                    'The Ring of Nenlast',

themes/V3/5ePHB/snippets/fullclass.gen.js

@@ -1,8 +1,7 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
-const ClassFeatureGen = require('./classfeature.gen.js');
+import ClassFeatureGen from './classfeature.gen.js';
-
+import ClassTableGen from './classtable.gen.js';
-const ClassTableGen = require('./classtable.gen.js');
 
 export default function(){
 

themes/V3/5ePHB/snippets/magic.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const spellNames = [
 	'Astral Rite of Acne',

themes/V3/5ePHB/snippets/monsterblock.gen.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 const genList = function(list, max){
 	return _.sampleSize(list, _.random(0, max)).join(', ') || 'None';

themes/V3/5ePHB/snippets/quote.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const quotes = [
 	'The sword glinted in the dim light, its edges keen and deadly. As the adventurer reached for it, he couldn\'t help but feel a surge of excitement mixed with fear. This was no ordinary blade.',

themes/V3/5ePHB/snippets/script.gen.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 export default {
 	dwarvish : ()=>{

themes/V3/5ePHB/snippets/watercolor.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 export default ()=>{
 	return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`;

themes/V3/Blank/snippets.js

@@ -1,17 +1,16 @@
 /* eslint-disable max-lines */
-
+import dedent                    from 'dedent-tabs';
-const WatercolorGen 			= require('./snippets/watercolor.gen.js');
+import WatercolorGen 			 from './snippets/watercolor.gen.js';
-const ImageMaskGen              = require('./snippets/imageMask.gen.js');
+import ImageMaskGen              from './snippets/imageMask.gen.js';
-const FooterGen                 = require('./snippets/footer.gen.js');
+import FooterGen                 from './snippets/footer.gen.js';
-const LicenseGenWotC            = require('./snippets/licenseWotC.gen.js');
+import LicenseGenWotC            from './snippets/licenseWotC.gen.js';
-const LicenseGenGNU             = require('./snippets/licenseGNU.gen.js');
+import LicenseGenGNU             from './snippets/licenseGNU.gen.js';
-const LicenseGen 			    = require('./snippets/license.gen.js');
+import LicenseGen 			     from './snippets/license.gen.js';
-const LicenseGenAelf            = require('./snippets/licenseAELF.js');
+import LicenseGenAelf            from './snippets/licenseAELF.js';
-const LicenseDTTRPGGCC          = require('./snippets/licenseDTRPGCC.gen.js');
+import LicenseDTTRPGGCC          from './snippets/licenseDTRPGCC.gen.js';
-const LicenseMongoosePublishing = require('./snippets/licenseMongoose.gen.js');
+import LicenseMongoosePublishing from './snippets/licenseMongoose.gen.js';
-const dedent                    = require('dedent-tabs').default;
+import TableOfContentsGen        from './snippets/tableOfContents.gen.js';
-const TableOfContentsGen        = require('./snippets/tableOfContents.gen.js');
+import indexGen                  from './snippets/index.gen.js';
-const indexGen                  = require('./snippets/index.gen.js');
 
 export default [
 

themes/V3/Blank/snippets/imageMask.gen.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 export default {
 	center : ()=>{

themes/V3/Blank/snippets/index.gen.js

@@ -1,4 +1,4 @@
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 export default ()=>{
 	return dedent`

themes/V3/Blank/snippets/license.gen.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 // Small and one-off licenses
 // Licenses in this file consist of one or two functions at most. If something is larger, 

themes/V3/Blank/snippets/licenseAELF.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 // AELF License
 

themes/V3/Blank/snippets/licenseDTRPGCC.gen.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 // DriveThruRPG/OneBookShelf Community Content Programs
 

themes/V3/Blank/snippets/licenseGNU.gen.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 // GNU Licenses
 

themes/V3/Blank/snippets/licenseMongoose.gen.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 // Mongoose Publishing Licenses
 

themes/V3/Blank/snippets/licenseWotC.gen.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 export default {
 	ogl1a : function () {

themes/V3/Blank/snippets/tableOfContents.gen.js

@@ -1,4 +1,4 @@
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 // Map each actual page to its footer label, accounting for skips or numbering resets
 const mapPages = (pages)=>{

themes/V3/Blank/snippets/watercolor.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 export default ()=>{
 	return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`;

vitreum/headtags.js

@@ -0,0 +1,79 @@
+import React from 'react';
+
+const obj2props = (obj)=>Object.entries(obj).map(([k,v])=>`${k}="${v}"`).join(' ');
+const toStr = (chld)=>Array.isArray(chld) ? chld.join('') : chld;
+const onServer = (typeof window === 'undefined');
+
+const injectTag = (tag, props, children)=>{
+	const injectNode = document.createElement(tag);
+	Object.entries(props).map(([key, val])=>injectNode[key]=val);
+	if(children) injectNode.appendChild(document.createTextNode(children));
+	document.getElementsByTagName('head')[0].appendChild(injectNode);
+};
+
+
+let NamedTags = {};
+let UnnamedTags = [];
+
+
+const HeadComponents = {
+	Title({ children }){
+		if(onServer) NamedTags.title = `<title>${toStr(children)}</title>`;
+		React.useEffect(()=>{document.title = toStr(children)}, [children]);
+		return null;
+	},
+	Favicon({ type = 'image/png', href = '', rel='icon', id= 'favicon'}){
+		if(onServer) NamedTags.favicon = `<link rel='shortcut icon' type="${type}" id="${id}" href="${href}" />`
+		React.useEffect(()=>{document.getElementById(id).href=href}, [id, href]);
+		return null;
+	},
+
+	Description({ children }){
+		if(onServer) NamedTags.description = `<meta name='description' content='${toStr(children)}' />`
+		return null;
+	},
+
+	Noscript({ children }){
+		if(onServer) UnnamedTags.push(`<noscript>${toStr(children)}<\/noscript>`);
+		return null;
+	},
+	Script({ children=[], ...props }){
+		if(onServer) {
+			UnnamedTags.push(children.length
+				? `<script ${obj2props(props)}>${toStr(children)}\<\/script>`
+				: `<script ${obj2props(props)} />`
+			);
+		}
+		return null;
+	},
+	Meta(props) {
+    if (onServer) {}
+    let tag = `<meta ${obj2props(props)} />`;
+    props.property || props.name ? NamedTags[props.property || props.name] = tag : UnnamedTags.push(tag);
+    React.useEffect(() => {
+			document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', Object.values(NamedTags).join('\n'));
+    },[NamedTags]);
+		return null;
+	},
+	Style({ children, type='text/css' }){
+		if(onServer) UnnamedTags.push(`<style type="${type}">${toStr(children)}</style>`);
+		return null;
+	}
+};
+
+const Inject = ({tag, children, ...props})=>{
+	React.useEffect(()=>{
+		injectTag(tag, props, children);
+	}, []);
+	return null;
+};
+
+export default {
+	Inject,
+	...HeadComponents,
+	generate: () => Object.values(NamedTags).concat(UnnamedTags).join('\n'),
+	flush: () => {
+		NamedTags = {};
+		UnnamedTags = [];
+	}
+};