Webpack 5 support with updated packages (#131)

- Update to Webpack 5
- Use @effortlessmotion dynamic html and inline source plugins
- Remove .clasp.json and use SAMPLE file
- Consistent prettier formatting throughout
- Update packages to latest versions

Co-authored-by: Kevin Malakoff <kmalakoff@gmail.com>

src/client/dialog-demo-bootstrap/components/FormInput.tsx

@@ -2,9 +2,7 @@ import React, { useState, ChangeEvent, FormEvent } from 'react';
 import { Form, Button, Col, Row } from 'react-bootstrap';
 
 interface FormInputProps {
-  submitNewSheet: (
-    sheetName: string
-  ) => {
+  submitNewSheet: (sheetName: string) => {
     name: string;
     index: number;
     isActive: boolean;

src/client/dialog-demo-bootstrap/components/SheetEditor.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { Button, ListGroup } from 'react-bootstrap';
-import FormInput from './FormInput.tsx';
+import FormInput from './FormInput';
 
 // This is a wrapper for google.script.run that lets us use promises.
 import { serverFunctions } from '../../utils/serverFunctions';
@@ -10,27 +10,18 @@ const SheetEditor = () => {
   const [names, setNames] = useState([]);
 
   useEffect(() => {
-    serverFunctions
-      .getSheetsData()
-      .then(setNames)
-      .catch(alert);
+    serverFunctions.getSheetsData().then(setNames).catch(alert);
   }, []);
 
-  const deleteSheet = sheetIndex => {
-    serverFunctions
-      .deleteSheet(sheetIndex)
-      .then(setNames)
-      .catch(alert);
+  const deleteSheet = (sheetIndex) => {
+    serverFunctions.deleteSheet(sheetIndex).then(setNames).catch(alert);
   };
 
-  const setActiveSheet = sheetName => {
-    serverFunctions
-      .setActiveSheet(sheetName)
-      .then(setNames)
-      .catch(alert);
+  const setActiveSheet = (sheetName) => {
+    serverFunctions.setActiveSheet(sheetName).then(setNames).catch(alert);
   };
 
-  const submitNewSheet = async newSheetName => {
+  const submitNewSheet = async (newSheetName) => {
     try {
       const response = await serverFunctions.addSheet(newSheetName);
       setNames(response);
@@ -56,7 +47,7 @@ const SheetEditor = () => {
       <ListGroup>
         <TransitionGroup className="sheet-list">
           {names.length > 0 &&
-            names.map(name => (
+            names.map((name) => (
               <CSSTransition
                 classNames="sheetNames"
                 timeout={500}

src/client/dialog-demo-bootstrap/styles.css

@@ -1,6 +1,6 @@
 /* needed to make consistent test snapshots across OSs */
 body {
-  font-family: Arial, Helvetica, sans-serif !important;
+  font-family: Arial !important;
 }
 
 /*

src/client/dialog-demo/components/FormInput.jsx

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 const FormInput = ({ submitNewSheet }) => {
   const [inputValue, setInputValue] = useState('');
 
-  const handleChange = event => setInputValue(event.target.value);
+  const handleChange = (event) => setInputValue(event.target.value);
 
-  const handleSubmit = event => {
+  const handleSubmit = (event) => {
     event.preventDefault();
     if (inputValue.length === 0) return;
 

src/client/dialog-demo/components/SheetEditor.jsx

@@ -11,29 +11,20 @@ const SheetEditor = () => {
 
   useEffect(() => {
     // Call a server global function here and handle the response with .then() and .catch()
-    serverFunctions
-      .getSheetsData()
-      .then(setNames)
-      .catch(alert);
+    serverFunctions.getSheetsData().then(setNames).catch(alert);
   }, []);
 
-  const deleteSheet = sheetIndex => {
-    serverFunctions
-      .deleteSheet(sheetIndex)
-      .then(setNames)
-      .catch(alert);
+  const deleteSheet = (sheetIndex) => {
+    serverFunctions.deleteSheet(sheetIndex).then(setNames).catch(alert);
   };
 
-  const setActiveSheet = sheetName => {
-    serverFunctions
-      .setActiveSheet(sheetName)
-      .then(setNames)
-      .catch(alert);
+  const setActiveSheet = (sheetName) => {
+    serverFunctions.setActiveSheet(sheetName).then(setNames).catch(alert);
   };
 
   // You can also use async/await notation for server calls with our server wrapper.
   // (This does the same thing as .then().catch() in the above handlers.)
-  const submitNewSheet = async newSheetName => {
+  const submitNewSheet = async (newSheetName) => {
     try {
       const response = await serverFunctions.addSheet(newSheetName);
       setNames(response);
@@ -56,7 +47,7 @@ const SheetEditor = () => {
       <FormInput submitNewSheet={submitNewSheet} />
       <TransitionGroup className="sheet-list">
         {names.length > 0 &&
-          names.map(name => (
+          names.map((name) => (
             <CSSTransition
               classNames="sheetNames"
               timeout={500}

src/server/sheets.js

@@ -14,20 +14,18 @@ export const getSheetsData = () => {
   });
 };
 
-export const addSheet = sheetTitle => {
+export const addSheet = (sheetTitle) => {
   SpreadsheetApp.getActive().insertSheet(sheetTitle);
   return getSheetsData();
 };
 
-export const deleteSheet = sheetIndex => {
+export const deleteSheet = (sheetIndex) => {
   const sheets = getSheets();
   SpreadsheetApp.getActive().deleteSheet(sheets[sheetIndex]);
   return getSheetsData();
 };
 
-export const setActiveSheet = sheetName => {
-  SpreadsheetApp.getActive()
-    .getSheetByName(sheetName)
-    .activate();
+export const setActiveSheet = (sheetName) => {
+  SpreadsheetApp.getActive().getSheetByName(sheetName).activate();
   return getSheetsData();
 };