Support react-refresh and shared client/server types (#98)

- Adds support for react-refresh through `@pmmwh/react-refresh-webpack-plugin`. Updated webpack config to support this. Means entire app is no longer refreshed on changes, only individual components, and state is maintained.
- React refresh removes need for `google-apps-script-webpack-dev-server` package
- In client code, support for server function autocomplete through use of gas-client 1.0.0. Requires certain files to be typescript .ts files
- Remove need for "global" exports in main server file through updated gas-webpack-plugin

src/client/.eslintrc.json

@@ -29,7 +29,19 @@
     "camelcase": "warn",
     "import/prefer-default-export": "warn",
     "import/no-extraneous-dependencies": "warn",
-    "prefer-object-spread": "warn"
+    "prefer-object-spread": "warn",
+    "rules": {
+      "import/extensions": [
+        "error",
+        "ignorePackages",
+        {
+          "js": "never",
+          "jsx": "never",
+          "ts": "never",
+          "tsx": "never"
+        }
+      ]
+    }
   },
   "settings": {
     "react": {

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

@@ -4,9 +4,7 @@ import { Button, ListGroup } from 'react-bootstrap';
 import FormInput from './FormInput.tsx';
 
 // This is a wrapper for google.script.run that lets us use promises.
-import server from '../../utils/server';
-
-const { serverFunctions } = server;
+import { serverFunctions } from '../../utils/serverFunctions';
 
 const SheetEditor = () => {
   const [names, setNames] = useState([]);

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

@@ -4,9 +4,7 @@ import FormInput from './FormInput';
 import SheetButton from './SheetButton';
 
 // This is a wrapper for google.script.run that lets us use promises.
-import server from '../../utils/server';
-
-const { serverFunctions } = server;
+import { serverFunctions } from '../../utils/serverFunctions';
 
 const SheetEditor = () => {
   const [names, setNames] = useState([]);

src/client/utils/server.js

@@ -1,10 +0,0 @@
-import Server from 'gas-client';
-
-const { PORT } = process.env;
-
-const server = new Server({
-  // this is necessary for local development but will be ignored in production
-  allowedDevelopmentDomains: `https://localhost:${PORT}`,
-});
-
-export default server;

src/client/utils/serverFunctions.ts

@@ -0,0 +1,10 @@
+import { GASClient } from 'gas-client';
+import * as publicServerFunctions from '../../server';
+
+const { serverFunctions } = new GASClient<typeof publicServerFunctions>({
+  // this is necessary for local development but will be ignored in production
+  allowedDevelopmentDomains: origin =>
+    /https:\/\/.*\.googleusercontent\.com$/.test(origin),
+});
+
+export { serverFunctions };

src/server/index.js

@@ -1,12 +0,0 @@
-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.openDialogBootstrap = publicUiFunctions.openDialogBootstrap;
-global.openAboutSidebar = publicUiFunctions.openAboutSidebar;
-global.getSheetsData = publicSheetFunctions.getSheetsData;
-global.addSheet = publicSheetFunctions.addSheet;
-global.deleteSheet = publicSheetFunctions.deleteSheet;
-global.setActiveSheet = publicSheetFunctions.setActiveSheet;

src/server/index.ts

@@ -0,0 +1,20 @@
+import {
+  onOpen,
+  openDialog,
+  openDialogBootstrap,
+  openAboutSidebar,
+} from './ui';
+
+import { getSheetsData, addSheet, deleteSheet, setActiveSheet } from './sheets';
+
+// Public functions must be exported as named exports
+export {
+  onOpen,
+  openDialog,
+  openDialogBootstrap,
+  openAboutSidebar,
+  getSheetsData,
+  addSheet,
+  deleteSheet,
+  setActiveSheet,
+};