update webpack, update packages, dev experience

update webpack, clasp, client code, eslint, prettier, readme, packages to latest

src/server/.babelrc

@@ -1,14 +1,17 @@
 {
-    "presets": [
-        ["@babel/env", {
-            "modules": false
-        }]
-    ],
-    "plugins": [
-        "transform-es3-property-literals",
-        "transform-es3-member-expression-literals",
-        "@babel/plugin-proposal-class-properties",
-        "@babel/plugin-proposal-object-rest-spread",
-        "@babel/plugin-transform-object-assign"
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "modules": false
+      }
     ]
+  ],
+  "plugins": [
+    "transform-es3-property-literals",
+    "transform-es3-member-expression-literals",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-object-assign"
+  ]
 }

src/server/.eslintrc.json

@@ -1,18 +1,16 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "extends": ["airbnb-base", "prettier"],
-  "plugins": ["googleappsscript", "prettier"],
+  "extends": ["airbnb-base", "plugin:prettier/recommended"],
+  "plugins": ["prettier", "googleappsscript"],
   "env": {
     "googleappsscript/googleappsscript": true
   },
-  "globals": {
-    "SpreadsheetApp": true,
-    "HtmlService": true,
-    "global": true
-  },
   "rules": {
-    "import/prefer-default-export": 0,
-    "prettier/prettier": "error"
+    "prettier/prettier": "error",
+    "camelcase": "warn",
+    "import/prefer-default-export": "warn",
+    "import/no-extraneous-dependencies": "warn",
+    "prefer-object-spread": "warn"
   }
 }

src/server/code.js

@@ -1,10 +0,0 @@
-import * as publicFunctions from './sheets-utilities';
-
-// Expose public functions
-global.onOpen = publicFunctions.onOpen;
-global.openDialog = publicFunctions.openDialog;
-global.openAboutSidebar = publicFunctions.openAboutSidebar;
-global.getSheetsData = publicFunctions.getSheetsData;
-global.addSheet = publicFunctions.addSheet;
-global.deleteSheet = publicFunctions.deleteSheet;
-global.setActiveSheet = publicFunctions.setActiveSheet;

src/server/index.js

@@ -0,0 +1,11 @@
+import * as publicUiFunctions from './ui';
+import * as publicSheetFunctions from './sheets';
+
+// Expose public functions by attaching to `global`
+global.onOpen = publicUiFunctions.onOpen;
+global.openDialog = publicUiFunctions.openDialog;
+global.openAboutSidebar = publicUiFunctions.openAboutSidebar;
+global.getSheetsData = publicSheetFunctions.getSheetsData;
+global.addSheet = publicSheetFunctions.addSheet;
+global.deleteSheet = publicSheetFunctions.deleteSheet;
+global.setActiveSheet = publicSheetFunctions.setActiveSheet;

src/server/sheets-utilities.js

@@ -1,65 +0,0 @@
-// Use ES6/7 code
-const onOpen = () => {
-  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
-    .createMenu('Custom scripts')
-    .addItem('Edit sheets [sample React project]', 'openDialog')
-    .addItem('About me', 'openAboutSidebar')
-    .addToUi();
-};
-
-const openDialog = () => {
-  const html = HtmlService.createHtmlOutputFromFile('main')
-    .setWidth(400)
-    .setHeight(600);
-  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
-    .showModalDialog(html, 'Sheet Editor');
-};
-
-const openAboutSidebar = () => {
-  const html = HtmlService.createHtmlOutputFromFile('about');
-  SpreadsheetApp.getUi().showSidebar(html);
-};
-
-const getSheets = () => SpreadsheetApp.getActive().getSheets();
-
-const getActiveSheetName = () => SpreadsheetApp.getActive().getSheetName();
-
-const getSheetsData = () => {
-  const activeSheetName = getActiveSheetName();
-  return getSheets().map((sheet, index) => {
-    const sheetName = sheet.getName();
-    return {
-      text: sheetName,
-      sheetIndex: index,
-      isActive: sheetName === activeSheetName,
-    };
-  });
-};
-
-const addSheet = sheetTitle => {
-  SpreadsheetApp.getActive().insertSheet(sheetTitle);
-  return getSheetsData();
-};
-
-const deleteSheet = sheetIndex => {
-  const sheets = getSheets();
-  SpreadsheetApp.getActive().deleteSheet(sheets[sheetIndex]);
-  return getSheetsData();
-};
-
-const setActiveSheet = sheetName => {
-  SpreadsheetApp.getActive()
-    .getSheetByName(sheetName)
-    .activate();
-  return getSheetsData();
-};
-
-export {
-  onOpen,
-  openDialog,
-  openAboutSidebar,
-  getSheetsData,
-  addSheet,
-  deleteSheet,
-  setActiveSheet,
-};

src/server/sheets.js

@@ -0,0 +1,33 @@
+const getSheets = () => SpreadsheetApp.getActive().getSheets();
+
+const getActiveSheetName = () => SpreadsheetApp.getActive().getSheetName();
+
+export const getSheetsData = () => {
+  const activeSheetName = getActiveSheetName();
+  return getSheets().map((sheet, index) => {
+    const sheetName = sheet.getName();
+    return {
+      text: sheetName,
+      sheetIndex: index,
+      isActive: sheetName === activeSheetName,
+    };
+  });
+};
+
+export const addSheet = sheetTitle => {
+  SpreadsheetApp.getActive().insertSheet(sheetTitle);
+  return getSheetsData();
+};
+
+export const deleteSheet = sheetIndex => {
+  const sheets = getSheets();
+  SpreadsheetApp.getActive().deleteSheet(sheets[sheetIndex]);
+  return getSheetsData();
+};
+
+export const setActiveSheet = sheetName => {
+  SpreadsheetApp.getActive()
+    .getSheetByName(sheetName)
+    .activate();
+  return getSheetsData();
+};

src/server/ui.js

@@ -0,0 +1,19 @@
+export const onOpen = () => {
+  SpreadsheetApp.getUi()
+    .createMenu('My Sample React Project') // edit me!
+    .addItem('Sheet Name Editor', 'openDialog')
+    .addItem('About me', 'openAboutSidebar')
+    .addToUi();
+};
+
+export const openDialog = () => {
+  const html = HtmlService.createHtmlOutputFromFile('main')
+    .setWidth(400)
+    .setHeight(600);
+  SpreadsheetApp.getUi().showModalDialog(html, 'Sheet Editor');
+};
+
+export const openAboutSidebar = () => {
+  const html = HtmlService.createHtmlOutputFromFile('about');
+  SpreadsheetApp.getUi().showSidebar(html);
+};