optimize webpack and other minor changes

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

appsscript.json

@@ -1,9 +1,10 @@
 {
   "timeZone": "America/New_York",
-  "dependencies": {
+  "dependencies": {},
-  },
+  "exceptionLogging": "STACKDRIVER",
   "oauthScopes": [
     "https://www.googleapis.com/auth/script.container.ui",
     "https://www.googleapis.com/auth/spreadsheets"
-  ] 
+  ],
-}
+  "runtimeVersion": "V8"
+}

dist/appsscript.json

@@ -1,9 +1,10 @@
 {
   "timeZone": "America/New_York",
-  "dependencies": {
+  "dependencies": {},
-  },
+  "exceptionLogging": "STACKDRIVER",
   "oauthScopes": [
     "https://www.googleapis.com/auth/script.container.ui",
     "https://www.googleapis.com/auth/spreadsheets"
-  ] 
+  ],
-}
+  "runtimeVersion": "V8"
+}

dist/code.js

@@ -60,21 +60,21 @@ function setActiveSheet() {
     }, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 1);
 }([ function(module, __webpack_exports__, __webpack_require__) {
     "use strict";
-    __webpack_require__.d(__webpack_exports__, "d", function() {
+    __webpack_require__.d(__webpack_exports__, "d", (function() {
         return onOpen;
-    }), __webpack_require__.d(__webpack_exports__, "f", function() {
+    })), __webpack_require__.d(__webpack_exports__, "f", (function() {
         return openDialog;
-    }), __webpack_require__.d(__webpack_exports__, "e", function() {
+    })), __webpack_require__.d(__webpack_exports__, "e", (function() {
         return openAboutSidebar;
-    }), __webpack_require__.d(__webpack_exports__, "c", function() {
+    })), __webpack_require__.d(__webpack_exports__, "c", (function() {
         return getSheetsData;
-    }), __webpack_require__.d(__webpack_exports__, "a", function() {
+    })), __webpack_require__.d(__webpack_exports__, "a", (function() {
         return addSheet;
-    }), __webpack_require__.d(__webpack_exports__, "b", function() {
+    })), __webpack_require__.d(__webpack_exports__, "b", (function() {
         return deleteSheet;
-    }), __webpack_require__.d(__webpack_exports__, "g", function() {
+    })), __webpack_require__.d(__webpack_exports__, "g", (function() {
         return setActiveSheet;
-    });
+    }));
     var onOpen = function() {
         SpreadsheetApp.getUi().createMenu("Custom scripts").addItem("Edit sheets [sample React project]", "openDialog").addItem("About me", "openAboutSidebar").addToUi();
     }, openDialog = function() {
@@ -87,14 +87,14 @@ function setActiveSheet() {
         return SpreadsheetApp.getActive().getSheets();
     }, getSheetsData = function() {
         var activeSheetName = SpreadsheetApp.getActive().getSheetName();
-        return getSheets().map(function(sheet, index) {
+        return getSheets().map((function(sheet, index) {
             var sheetName = sheet.getName();
             return {
                 text: sheetName,
                 sheetIndex: index,
                 isActive: sheetName === activeSheetName
             };
-        });
+        }));
     }, addSheet = function(sheetTitle) {
         return SpreadsheetApp.getActive().insertSheet(sheetTitle), getSheetsData();
     }, deleteSheet = function(sheetIndex) {
@@ -106,11 +106,11 @@ function setActiveSheet() {
 }, function(module, __webpack_exports__, __webpack_require__) {
     "use strict";
     __webpack_require__.r(__webpack_exports__), function(global) {
-        var _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+        var _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-        global.onOpen = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["d"], global.openDialog = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["f"], 
+        global.onOpen = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["d"], global.openDialog = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["f"], 
-        global.openAboutSidebar = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["e"], 
+        global.openAboutSidebar = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["e"], global.getSheetsData = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["c"], 
-        global.getSheetsData = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["c"], global.addSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["a"], 
+        global.addSheet = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["a"], global.deleteSheet = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["b"], 
-        global.deleteSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["b"], global.setActiveSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["g"];
+        global.setActiveSheet = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["g"];
     }.call(this, __webpack_require__(2));
 }, function(module, exports) {
     var g;

package.json

@@ -19,57 +19,59 @@
   ],
   "author": "Elisha Nuchi",
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "react": "^16.12.0",
+    "react-addons-css-transition-group": "^15.6.2",
+    "react-dom": "^16.12.0",
+    "react-transition-group": "^4.3.0"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
+    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
-    "@babel/plugin-transform-object-assign": "^7.2.0",
+    "@babel/plugin-transform-object-assign": "^7.8.3",
-    "@babel/polyfill": "^7.4.4",
+    "@babel/polyfill": "^7.8.3",
-    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "^7.8.3",
-    "@google/clasp": "^1.7.0",
+    "@google/clasp": "^2.3.0",
-    "@types/google-apps-script": "0.0.26",
+    "babel-eslint": "^10.0.3",
-    "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
-    "clasp": "^1.0.0",
     "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.6.0",
+    "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^1.0.1",
+    "dynamic-cdn-webpack-plugin": "^5.0.0",
     "eslint": "^5.16.0",
-    "eslint-config-google": "^0.9.1",
+    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-prettier": "^2.10.0",
     "eslint-config-standard": "^11.0.0",
     "eslint-loader": "^2.1.2",
     "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-googleappsscript": "^1.0.2",
+    "eslint-plugin-googleappsscript": "^1.0.3",
-    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-node": "^7.0.1",
-    "eslint-plugin-prettier": "^2.6.2",
+    "eslint-plugin-prettier": "^2.7.0",
     "eslint-plugin-promise": "^3.8.0",
-    "eslint-plugin-react": "^7.13.0",
+    "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-standard": "^3.1.0",
     "gas-lib": "^2.0.3",
+    "gas-types-detailed": "^1.0.0",
     "gas-webpack-plugin": "^0.3.0",
     "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^3.2.0",
-    "prettier": "^1.18.2",
+    "module-to-cdn": "^3.1.5",
-    "prop-types": "^15.7.2",
+    "prettier": "^1.19.1",
-    "react": "^16.8.6",
-    "react-addons-css-transition-group": "^15.6.2",
-    "react-dom": "^16.8.6",
-    "react-transition-group": "^2.9.0",
     "style-loader": "^0.22.1",
-    "tern": "^0.22.3",
+    "tern": "^0.24.3",
     "tern-googleappsscript": "^1.0.2",
-    "uglifyjs-webpack-plugin": "^1.2.7",
+    "terser-webpack-plugin": "^2.3.4",
-    "webpack": "^4.33.0",
+    "webpack": "^4.41.5",
     "webpack-clean": "^1.2.3",
-    "webpack-cli": "^3.3.3"
+    "webpack-cli": "^3.3.10"
   }
 }

src/client/.eslintrc.json

@@ -1,17 +1,11 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "extends": [
+  "extends": ["airbnb-base", "plugin:react/recommended", "eslint:recommended"],
-    "plugin:react/recommended",
+  "plugins": ["babel", "react"],
-    "eslint:recommended",
-    "google"
-  ],
-  "plugins": [
-    "babel",
-    "react"
-  ],
   "env": {
-    "browser": true
+    "browser": true,
+    "es6": true
   },
   "globals": {
     "google": false,

src/client/components/about-sidebar.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../styles.css';
 
 export const AboutPage = () => (
   <div className="sheetNameText">
@@ -9,7 +8,7 @@ export const AboutPage = () => (
       target="_blank"
       rel="noopener noreferrer"
     >
-     React + Google Apps Script
+      React + Google Apps Script
     </a>
     <div>-Elisha Nuchi</div>
   </div>

src/client/components/form-input.js

@@ -1,13 +1,12 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import '../styles.css';
 
 export default function FormInput(props) {
   const [text, setText] = useState('');
 
-  const handleChange = (event) => setText(event.target.value);
+  const handleChange = event => setText(event.target.value);
 
-  const handleSubmit = (event) => {
+  const handleSubmit = event => {
     event.preventDefault();
     if (text.length === 0) return;
 

src/client/components/sheet-button.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SheetButton = props => {
+  const { name, deleteButtonHandler, clickSheetNameHandler } = props;
+
+  const { sheetIndex, text, isActive } = name;
+
+  return (
+    <div className="sheetLine">
+      <button onClick={e => deleteButtonHandler(e, sheetIndex)}>X</button>
+      <span
+        onClick={e => clickSheetNameHandler(e, text)}
+        className={'sheetNameText ' + (isActive ? 'active-sheet' : '')}
+      >
+        {text}
+      </span>
+    </div>
+  );
+};
+
+export default SheetButton;
+
+SheetButton.propTypes = {
+  name: PropTypes.object,
+  deleteButtonHandler: PropTypes.func,
+  clickSheetNameHandler: PropTypes.func,
+};

src/client/components/sheet-button.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import '../styles.css';
-
-const SheetButton = (props) => {
-  const {name, deleteButtonHandler, clickSheetNameHandler} = props;
-
-  const {sheetIndex, text, isActive} = name;
-
-  return (
-    <div className="sheetLine">
-      <button
-        onClick={(e) => deleteButtonHandler(e, sheetIndex)}
-      >X
-      </button>
-      <span
-          onClick={(e) => clickSheetNameHandler(e, text)}
-          className={'sheetNameText ' + (isActive ? 'active-sheet' : '')}
-        >{text}
-      </span>
-    </div>
-  );
-};
-
-export default SheetButton;
-
-SheetButton.propTypes = {
-  name: PropTypes.object,
-  deleteButtonHandler: PropTypes.func,
-  clickSheetNameHandler: PropTypes.func,
-};

src/client/components/sheet-editor.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import FormInput from './form-input';
 import SheetButton from './sheet-button';
@@ -6,7 +6,7 @@ import SheetButton from './sheet-button';
 import server from '../server';
 
 export default function SheetEditor() {
-  const {getSheetsData, addSheet, deleteSheet, setActiveSheet} = server;
+  const { getSheetsData, addSheet, deleteSheet, setActiveSheet } = server;
 
   const [names, setNames] = useState([]);
 
@@ -43,18 +43,19 @@ export default function SheetEditor() {
         transitionEnterTimeout={100}
         transitionLeaveTimeout={100}
       >
-      {names.length ? names.map((name) => {
+        {names.length
-        return <SheetButton
+          ? names.map(name => {
-          name={name}
+              return (
-          deleteButtonHandler={deleteButtonHandler}
+                <SheetButton
-          clickSheetNameHandler={clickSheetNameHandler}
+                  name={name}
-          key={name.sheetName}
+                  deleteButtonHandler={deleteButtonHandler}
-          />;
+                  clickSheetNameHandler={clickSheetNameHandler}
-          })
+                  key={name.sheetName}
-        : null}
+                />
+              );
+            })
+          : null}
       </ReactCSSTransitionGroup>
     </div>
   );
 }
-
-

src/client/main.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import SheetEditor from './components/sheet-editor';
+import './styles.css';
+
 
 ReactDOM.render(
   <SheetEditor />,

src/server/.eslintrc.json

@@ -1,8 +1,8 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "extends": ["eslint:recommended", "google"],
+  "extends": ["airbnb-base", "prettier"],
-  "plugins": ["googleappsscript"],
+  "plugins": ["googleappsscript", "prettier"],
   "env": {
     "googleappsscript/googleappsscript": true
   },
@@ -12,6 +12,7 @@
     "global": true
   },
   "rules": {
-    "import/prefer-default-export": 0
+    "import/prefer-default-export": 0,
+    "prettier/prettier": "error"
   }
-}
+}

src/server/code.js

@@ -1,4 +1,4 @@
-import * as publicFunctions from './sheets-utilities.js';
+import * as publicFunctions from './sheets-utilities';
 
 // Expose public functions
 global.onOpen = publicFunctions.onOpen;

src/server/sheets-utilities.js

@@ -11,25 +11,18 @@ const openDialog = () => {
   const html = HtmlService.createHtmlOutputFromFile('main')
     .setWidth(400)
     .setHeight(600);
-  SpreadsheetApp
+  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
-    .getUi() // Or DocumentApp or FormApp.
     .showModalDialog(html, 'Sheet Editor');
 };
 
 const openAboutSidebar = () => {
   const html = HtmlService.createHtmlOutputFromFile('about');
-  SpreadsheetApp
+  SpreadsheetApp.getUi().showSidebar(html);
-    .getUi()
-    .showSidebar(html);
 };
 
-const getSheets = () => SpreadsheetApp
+const getSheets = () => SpreadsheetApp.getActive().getSheets();
-  .getActive()
-  .getSheets();
 
-const getActiveSheetName = () => SpreadsheetApp
+const getActiveSheetName = () => SpreadsheetApp.getActive().getSheetName();
-  .getActive()
-  .getSheetName();
 
 const getSheetsData = () => {
   const activeSheetName = getActiveSheetName();
@@ -43,24 +36,19 @@ const getSheetsData = () => {
   });
 };
 
-const addSheet = (sheetTitle) => {
+const addSheet = sheetTitle => {
-  SpreadsheetApp
+  SpreadsheetApp.getActive().insertSheet(sheetTitle);
-    .getActive()
-    .insertSheet(sheetTitle);
   return getSheetsData();
 };
 
-const deleteSheet = (sheetIndex) => {
+const deleteSheet = sheetIndex => {
   const sheets = getSheets();
-  SpreadsheetApp
+  SpreadsheetApp.getActive().deleteSheet(sheets[sheetIndex]);
-    .getActive()
-    .deleteSheet(sheets[sheetIndex]);
   return getSheetsData();
 };
 
-const setActiveSheet = (sheetName) => {
+const setActiveSheet = sheetName => {
-  SpreadsheetApp
+  SpreadsheetApp.getActive()
-    .getActive()
     .getSheetByName(sheetName)
     .activate();
   return getSheetsData();

webpack.config.js

@@ -1,55 +1,52 @@
+/*********************************
+ *       import webpack plugins
+ ********************************/
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const GasPlugin = require('gas-webpack-plugin');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const WebpackCleanPlugin = require('webpack-clean');
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
+const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
 
-// settings
+/*********************************
+ *       define file paths
+ ********************************/
 const destination = 'dist';
 const htmlTemplate = './src/client/dialog-template.html';
-const htmlWebpackInlineSourcePlugin = new HtmlWebpackInlineSourcePlugin();
-const webpackCleanPlugin = new WebpackCleanPlugin([
-  destination + '/' + 'main.js',
-]);
 
-// Client entrypoints:
+/*********************************
+ *    client entry point paths
+ ********************************/
 const clientEntrypoints = [
   {
-    name: "CLIENT - main dialog",
+    name: 'CLIENT - main dialog',
-    entry: "./src/client/main.jsx",
+    entry: './src/client/main.jsx',
-    filename: "main.html"
+    filename: 'main.html',
   },
   {
-    name: "CLIENT - about sidebar",
+    name: 'CLIENT - about sidebar',
-    entry: "./src/client/about.jsx",
+    entry: './src/client/about.jsx',
-    filename: "about.html"
+    filename: 'about.html',
   },
 ];
 
+/*********************************
+ *       Declare settings
+ ********************************/
+
+// any shared client & server settings
 const sharedConfigSettings = {
-  optimization: {
+  performance: {
-    minimizer: [
+    hints: 'warning',
-      new UglifyJSPlugin({
+    maxEntrypointSize: 512000,
-        uglifyOptions: {
+    maxAssetSize: 512000,
-          warnings: false,
-          ie8: true,
-          mangle: false,
-          compress: {
-            properties: false
-          },
-          output: {
-            beautify: true
-          }
-        }
-      })
-    ]
   },
-  module: {},
 };
 
+// eslint settings, to check during build if desired
 const eslintConfig = {
   enforce: 'pre',
   test: /\.jsx?$/,
@@ -58,51 +55,55 @@ const eslintConfig = {
   options: {
     cache: false,
     failOnError: false,
-    fix: true
+    fix: true,
-  }
+  },
 };
 
+// appscript copy settings, to copy this file over to the destination directory
 const appsscriptConfig = {
-  name: "COPY APPSSCRIPT.JSON",
+  name: 'COPY APPSSCRIPT.JSON',
-  entry: "./appsscript.json",
+  entry: './appsscript.json',
   plugins: [
     new CleanWebpackPlugin([destination]),
     new CopyWebpackPlugin([
       {
-        from: './appsscript.json'
+        from: './appsscript.json',
-      }
+      },
-    ])
+    ]),
-  ]
+  ],
 };
 
+// config shared for all client settings
 const clientConfig = {
   ...sharedConfigSettings,
   output: {
     path: path.resolve(__dirname, destination),
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json']
+    extensions: ['.js', '.jsx', '.json'],
   },
   module: {
     rules: [
+      // turned off by default, but uncomment below to run linting during build
       // eslintConfig,
       {
-        test: /\.jsx$/,
+        test: /\.jsx?$/,
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader"
+          loader: 'babel-loader',
-        }
+        },
       },
       {
         test: /\.css$/,
-        use: [ 'style-loader', 'css-loader' ]
+        use: ['style-loader', 'css-loader'],
-      }
+      },
     ],
   },
 };
 
-const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
+// config for EACH client entrypoint
-  return ({
+const clientConfigs = clientEntrypoints.map(clientEntrypoint => {
+  return {
     ...clientConfig,
     name: clientEntrypoint.name,
     entry: clientEntrypoint.entry,
@@ -110,42 +111,71 @@ const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
       new HtmlWebpackPlugin({
         template: htmlTemplate,
         filename: clientEntrypoint.filename,
-        inlineSource: '.(js|css)$' // embed all javascript and css inline
+        inlineSource: '^[^(//)]+.(js|css)$', // embed all js and css inline, exclude packages with '//' for dynamic cdn insertion
       }),
-      htmlWebpackInlineSourcePlugin,
+      new HtmlWebpackInlineSourcePlugin(),
-      webpackCleanPlugin,
+      new WebpackCleanPlugin([path.join(destination, 'main.js')]),
+      new DynamicCdnWebpackPlugin(),
     ],
-  })
+  };
 });
 
 const serverConfig = {
   ...sharedConfigSettings,
-  name: "SERVER",
+  name: 'SERVER',
-  entry: "./src/server/code.js",
+  entry: './src/server/code.js',
   output: {
     filename: 'code.js',
     path: path.resolve(__dirname, destination),
-    libraryTarget: 'this'
+    libraryTarget: 'this',
   },
   module: {
     rules: [
+      // turned off by default, but uncomment below to run linting during build
       // eslintConfig,
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader"
+          loader: 'babel-loader',
-        }
+        },
       },
     ],
   },
-  plugins: [
+  optimization: {
-    new GasPlugin()
+    minimizer: [
-  ]
+      new TerserPlugin({
+        sourceMap: true,
+        terserOptions: {
+          ecma: undefined,
+          warnings: false,
+          parse: {},
+          compress: {
+            properties: false,
+          },
+          mangle: false,
+          module: false,
+          output: {
+            beautify: true,
+          },
+          toplevel: false,
+          nameCache: null,
+          ie8: true,
+          keep_classnames: undefined,
+          keep_fnames: false,
+          safari10: false,
+        },
+      }),
+    ],
+  },
+  plugins: [new GasPlugin()],
 };
 
 module.exports = [
+  // 1. Copy the appscript file.
   appsscriptConfig,
+  // 2. One client bundle for each client entrypoint.
   ...clientConfigs,
+  // 3. Bundle the server
   serverConfig,
 ];