processing · hydrosquall · Mar 5, 2020 · Feb 13, 2020 · Feb 13, 2020 · Feb 13, 2020
diff --git a/.babelrc b/.babelrc
@@ -23,7 +23,6 @@
             "loose": true
           }
         ],
-        "@babel/plugin-proposal-json-strings",
         "@babel/plugin-proposal-function-sent",
         "@babel/plugin-proposal-export-namespace-from",
         "@babel/plugin-proposal-numeric-separator",
@@ -36,10 +35,7 @@
           {
             "proposal": "minimal"
           }
-        ],
-        "@babel/plugin-proposal-nullish-coalescing-operator",
-        "@babel/plugin-proposal-do-expressions",
-        "@babel/plugin-proposal-function-bind"
+        ]
       ],
       "presets": [
         "@babel/preset-env",
@@ -53,7 +49,6 @@
     }
   },
   "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-syntax-import-meta",
     [
       "@babel/plugin-proposal-decorators",
@@ -67,22 +62,17 @@
         "loose": true
       }
     ],
-    "@babel/plugin-proposal-json-strings",
     "@babel/plugin-proposal-function-sent",
     "@babel/plugin-proposal-export-namespace-from",
     "@babel/plugin-proposal-numeric-separator",
     "@babel/plugin-proposal-throw-expressions",
     "@babel/plugin-proposal-export-default-from",
     "@babel/plugin-proposal-logical-assignment-operators",
-    "@babel/plugin-proposal-optional-chaining",
     [
       "@babel/plugin-proposal-pipeline-operator",
       {
         "proposal": "minimal"
       }
-    ],
-    "@babel/plugin-proposal-nullish-coalescing-operator",
-    "@babel/plugin-proposal-do-expressions",
-    "@babel/plugin-proposal-function-bind"
+    ]
   ]
 }
diff --git a/.gitignore b/.gitignore
@@ -17,3 +17,4 @@ cert_chain.crt
 localhost.crt
 localhost.key
 privkey.pem
+.cache/
diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
@@ -16,7 +16,7 @@ import { metaKeyName, } from '../utils/metaKey';
 const triangleUrl = require('../images/down-filled-triangle.svg');
 const logoUrl = require('../images/p5js-logo-small.svg');
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 
 class Nav extends React.PureComponent {
   constructor(props) {

diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="keywords"
+      content="p5.js, p5.js web editor, web editor, processing, code editor"
+    />
+    <meta
+      name="description"
+      content="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners."
+    />
+    <title>p5.js Web Editor</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Inconsolata"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel='shortcut icon'
+    href='https://raw.githubusercontent.com/processing/p5.js-website-OLD/master/favicon.ico'
+    type='image/x-icon' />
+  </head>
+  <body>
+    <div id="root" class="root-app"></div>
+    <script src="./index.jsx"></script>
+  </body>
+</html>
diff --git a/client/index.jsx b/client/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { hot } from 'react-hot-loader/root';
+import { hot } from 'react-hot-loader';
+
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 import configureStore from './store';
@@ -22,7 +23,8 @@ const App = () => (
   </Provider>
 );
 
-const HotApp = hot(App);
+// https://github.com/gaearon/react-hot-loader/pull/1223
+const HotApp = hot(module)(App);
 
 render(
   <HotApp />,

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 
 class App extends React.Component {
   constructor(props, context) {

diff --git a/client/modules/IDE/actions/assets.js b/client/modules/IDE/actions/assets.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 const ROOT_URL = __process.env.API_URL;
 
 function setAssets(assets, totalSize) {

diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
@@ -6,7 +6,7 @@ import * as ActionTypes from '../../../constants';
 import { setUnsavedChanges } from './ide';
 import { setProjectSavedTime } from './project';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 const ROOT_URL = __process.env.API_URL;
 
 function appendToFilename(filename, string) {

diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import * as ActionTypes from '../../../constants';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 const ROOT_URL = __process.env.API_URL;
 
 function updatePreferences(formParams, dispatch) {
@@ -209,4 +209,3 @@ export function setAllAccessibleOutput(value) {
     dispatch(setSoundOutput(value));
   };
 }
-
diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
@@ -14,7 +14,7 @@ import {
 } from './ide';
 import { clearState, saveState } from '../../../persistState';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 const ROOT_URL = __process.env.API_URL;
 
 export function setProject(project) {

diff --git a/client/modules/IDE/actions/projects.js b/client/modules/IDE/actions/projects.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 const ROOT_URL = __process.env.API_URL;
 
 // eslint-disable-next-line

diff --git a/client/modules/IDE/actions/uploader.js b/client/modules/IDE/actions/uploader.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 import { createFile } from './files';
 import { TEXT_FILE_REGEX } from '../../../../server/utils/fileUtils';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 const s3BucketHttps = __process.env.S3_BUCKET_URL_BASE ||
                       `https://s3-${__process.env.AWS_REGION}.amazonaws.com/${__process.env.S3_BUCKET}/`;
 const ROOT_URL = __process.env.API_URL;

diff --git a/client/modules/IDE/components/FileUploader.jsx b/client/modules/IDE/components/FileUploader.jsx
@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import * as UploaderActions from '../actions/uploader';
 import { fileExtensionsAndMimeTypes } from '../../../../server/utils/fileUtils';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 const s3Bucket = __process.env.S3_BUCKET_URL_BASE ||
                  `https://s3-${__process.env.AWS_REGION}.amazonaws.com/${__process.env.S3_BUCKET}/`;
 

diff --git a/client/modules/User/actions.js b/client/modules/User/actions.js
@@ -5,7 +5,7 @@ import { showErrorModal, justOpenedProject } from '../IDE/actions/ide';
 import { showToast, setToastText } from '../IDE/actions/toast';
 
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 const ROOT_URL = __process.env.API_URL;
 
 export function authError(error) {

diff --git a/client/store.js b/client/store.js
@@ -4,7 +4,7 @@ import DevTools from './modules/App/components/DevTools';
 import rootReducer from './reducers';
 import { clearState, loadState } from './persistState';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
+const __process = process;
 
 export default function configureStore(initialState) {
   const enhancers = [
@@ -35,4 +35,3 @@ export default function configureStore(initialState) {
 
   return store;
 }
-
diff --git a/developer_docs/development.md b/developer_docs/development.md
@@ -5,6 +5,13 @@ A guide for adding code to this project.
 ## Installation
 Follow the [installation guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/installation.md).
 
+## Quickstart
+
+```bash
+npm install
+npm run parcel
+```
+
 ## Tests
 To run the test suite simply run `npm test` (after installing dependencies with `npm install`)
 
@@ -17,18 +24,18 @@ A sample unit test could be found here: [Nav.test.jsx](../client/components/__te
 
 # Technologies Used
 
-**MERN stack** - MongoDB, Express, React/Redux, and Node. 
- 
+**MERN stack** - MongoDB, Express, React/Redux, and Node.
+
  - For a reference to the **file structure format** this project is using, please look at the [Mern Starter](https://github.com/Hashnode/mern-starter).
 
- - This project does not use CSS Modules, styled-components, or other CSS-in-JS libraries, but uses Sass. [BEM guidelines and naming conventions](http://getbem.com/) are followed. 
- 
+ - This project does not use CSS Modules, styled-components, or other CSS-in-JS libraries, but uses Sass. [BEM guidelines and naming conventions](http://getbem.com/) are followed.
+
  - For common and reusable styles, write OOSCSS (Object-Oriented SCSS) with placeholders and mixins. For organizing styles, follow the [7-1 Pattern](https://sass-guidelin.es/#the-7-1-pattern) for Sass.
 
- - We're using [ES6](http://es6-features.org/) and transpiling to ES5 using [Babel](https://babeljs.io/). 
+ - We're using [ES6](http://es6-features.org/) and transpiling to ES5 using [Babel](https://babeljs.io/).
 
  - For reference to the JavaScript style guide, see the [Airbnb Style Guide](https://github.com/airbnb/javascript), [React ESLint Plugin](https://github.com/yannickcr/eslint-plugin-react).
 
  - The ESLint configuration is based on a few popular React/Redux boilerplates. Open to suggestions on this. If in development, you're getting annoyed with ESLint, you can temporarily remove the `eslint-loader` it from `webpack/config.dev.js` in the JavaScript loader, or disable any line from eslint by commenting at the end of the line `// eslint-disable-line`.
 
- - [Jest](https://jestjs.io/) for unit tests and snapshot testing along with [Enzyme](https://airbnb.io/enzyme/) for testing React.
+ - [Jest](https://jestjs.io/) for unit tests and snapshot testing along with [Enzyme](https://airbnb.io/enzyme/) for testing React.