Babel to support ES6 Javascript in older browsers

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -37,14 +37,13 @@ const Snippetbar = createClass({
 	},
 
 	renderSnippetGroups : function(){
+		let snippets = [];
 
 		if(this.props.view === 'text') {
 			if(this.props.renderer === 'V3')
 				snippets = SnippetsV3;
 			else
 				snippets = SnippetsLegacy;
-		} else {
-			snippets = [];
 		}
 
 		return _.map(snippets, (snippetGroup)=>{

client/homebrew/homebrew.jsx

@@ -45,7 +45,7 @@ const Homebrew = createClass({
 						<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='/new/:id' component={(routeProps)=><NewPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
-						<Route path='/new' exact component={(routeProps)=><NewPage brew={this.props.brew} />}/>
+						<Route path='/new' exact component={(routeProps)=><NewPage/>}/>
 						<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)} /> } />

client/homebrew/pages/newPage/newPage.jsx

@@ -27,6 +27,7 @@ const NewPage = createClass({
 				style : dedent`
 										/*=======---  Example CSS styling  ---=======*/
 										/* Any CSS here will apply to your document! */
+										
 										.myExampleClass {
 							 			  color: black;
 										}`,

package-lock.json

@@ -1245,6 +1245,108 @@
         "@babel/helper-plugin-utils": "^7.12.13"
       }
     },
+    "@babel/plugin-transform-runtime": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.5.tgz",
+      "integrity": "sha512-fPMBhh1AV8ZyneiCIA+wYYUH1arzlXR1UMcApjvchDhfKxhy2r2lReJv8uHEyihi4IFIGlr1Pdx7S5fkESDQsg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "babel-plugin-polyfill-corejs2": "^0.2.2",
+        "babel-plugin-polyfill-corejs3": "^0.2.2",
+        "babel-plugin-polyfill-regenerator": "^0.2.2",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.3.tgz",
+          "integrity": "sha512-RH3QDAfRMzj7+0Nqu5oqgO5q9mFtQEVvCRsi8qCEfzLR9p2BHfn5FzhSB2oj1fF7I2+DcTORkYaQ6aTR9Cofew==",
+          "requires": {
+            "@babel/helper-compilation-targets": "^7.13.0",
+            "@babel/helper-module-imports": "^7.12.13",
+            "@babel/helper-plugin-utils": "^7.13.0",
+            "@babel/traverse": "^7.13.0",
+            "debug": "^4.1.1",
+            "lodash.debounce": "^4.0.8",
+            "resolve": "^1.14.2",
+            "semver": "^6.1.2"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
+          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
+          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ=="
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
+          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
+        },
+        "@babel/types": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "babel-plugin-polyfill-corejs2": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.2.tgz",
+          "integrity": "sha512-kISrENsJ0z5dNPq5eRvcctITNHYXWOA4DUZRFYCz3jYCcvTb/A546LIddmoGNMVYg2U38OyFeNosQwI9ENTqIQ==",
+          "requires": {
+            "@babel/compat-data": "^7.13.11",
+            "@babel/helper-define-polyfill-provider": "^0.2.2",
+            "semver": "^6.1.1"
+          }
+        },
+        "babel-plugin-polyfill-corejs3": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.2.tgz",
+          "integrity": "sha512-l1Cf8PKk12eEk5QP/NQ6TH8A1pee6wWDJ96WjxrMXFLHLOBFzYM4moG80HFgduVhTqAFez4alnZKEhP/bYHg0A==",
+          "requires": {
+            "@babel/helper-define-polyfill-provider": "^0.2.2",
+            "core-js-compat": "^3.9.1"
+          }
+        },
+        "babel-plugin-polyfill-regenerator": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.2.tgz",
+          "integrity": "sha512-Goy5ghsc21HgPDFtzRkSirpZVW35meGoTmTOb2bxqdl60ghub4xOidgNTHaZfQ2FaxQsKmwvXtOAkcIS4SMBWg==",
+          "requires": {
+            "@babel/helper-define-polyfill-provider": "^0.2.2"
+          }
+        },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
     "@babel/plugin-transform-shorthand-properties": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.13.tgz",

package.json

@@ -35,12 +35,13 @@
   },
   "babel": {
     "presets": [
-      "env",
+      "@babel/preset-env",
-      "react"
+      "@babel/preset-react"
     ]
   },
   "dependencies": {
     "@babel/core": "^7.14.0",
+    "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.14.0",
     "@babel/preset-react": "^7.13.13",
     "body-parser": "^1.19.0",

scripts/buildHomebrew.js

@@ -7,9 +7,13 @@ 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 babel          = require('@babel/core');
+
+const babelify = async (code)=>(await babel.transformAsync(code, { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'] })).code;
 
 const transforms = {
+	'.js'   : (code, filename, opts)=>babelify(code),
+	'.jsx'  : (code, filename, opts)=>babelify(code),
 	'.less' : lessTransform,
 	'*'     : assetTransform('./build')
 };

server.js

@@ -35,7 +35,7 @@ const getBrewFromId = asyncHandler(async (id, accessType)=>{
 		brew.style = dedent`
 			/*=======---  Example CSS styling  ---=======*/
 			/* Any CSS here will apply to your document! */
-			
+
 			.myExampleClass {
  			  color: black;
 			}`;
@@ -217,7 +217,6 @@ app.use((req, res)=>{
 	templateFn('homebrew', title = req.brew ? req.brew.title : '', props)
         .then((page)=>{ res.send(page); })
         .catch((err)=>{
-        	console.log('TEMPLATE ERROR');
         	console.log(err);
         	return res.sendStatus(500);
         });