Use latest gas-client and support closing dialogs

Author: enuchi

README.md

@@ -309,8 +309,8 @@ google.script.run
   .addSheet(sheetTitle);
 
 // Using gas-client we can use more familiar promises style like this:
-import Server from 'gas-client';
-const { serverFunctions } = new Server();
+import { GASClient } from 'gas-client';
+const { serverFunctions, scriptHostFunctions } = new GASClient({});
 
 // We now have access to all our server functions, which return promises!
 serverFunctions
@@ -327,6 +327,12 @@ async () => {
     handleError(err);
   }
 };
+
+// Use scriptHostFunctions to control dialogs
+scriptHostFunctions.close(); // close a dialog or sidebar
+scriptHostFunctions.setWidth(400); // set dialog width to 400px
+scriptHostFunctions.setHeight(800); // set dialog height to 800px
+
 ```
 
 In development, `gas-client` will allow you to call server-side functions from your local environment. In production, it will use Google's underlying `google.script.run` utility.

dev/dev-server-wrapper.html

@@ -20,7 +20,7 @@
     <base target="_top" />
     <title>Dev Server</title>
     <!-- Load gas-client as external. Exposed global variable is GASClient.  -->
-    <script src="https://unpkg.com/gas-client@1.1.1/dist/index.js"></script>
+    <script src="https://unpkg.com/gas-client@1.2.0/dist/index.js"></script>
     <style>
       body,
       html {
@@ -37,15 +37,21 @@
 
         const iframe = document.getElementById('iframe');
         iframe.src = 'https://localhost:' + PORT + '/' + FILE_NAME;
-        const { serverFunctions } = new window.GASClient.GASClient({
-          allowedDevelopmentDomains: (origin) =>
-            /https:\/\/.*\.googleusercontent\.com$/.test(origin),
-        });
+
+        const { serverFunctions, scriptHostFunctions } =
+          new window.GASClient.GASClient({
+            allowedDevelopmentDomains: (origin) =>
+              /https:\/\/.*\.googleusercontent\.com$/.test(origin),
+          });
 
         const handleRequest = (event) => {
           const request = event.data;
           const { type, functionName, id, args } = request;
 
+          if (type === 'SCRIPT_HOST_FUNCTION_REQUEST') {
+            scriptHostFunctions[functionName](...args);
+          }
+
           if (type !== 'REQUEST') return;
 
           serverFunctions[functionName](...args)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-google-apps-script",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "type": "module",
   "description": "Starter project for using React with Google Apps Script",
   "repository": {
@@ -41,7 +41,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.11",
-    "gas-client": "^1.1.1",
+    "gas-client": "^1.2.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.4.0",

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

@@ -4,10 +4,14 @@ import { Button, ListGroup } from 'react-bootstrap';
 import FormInput from './FormInput';
 
 // This is a wrapper for google.script.run that lets us use promises.
-import { serverFunctions } from '../../utils/serverFunctions';
+import {
+  serverFunctions,
+  scriptHostFunctions,
+} from '../../utils/serverFunctions';
 
 const SheetEditor = () => {
   const [names, setNames] = useState([]);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   useEffect(() => {
     serverFunctions.getSheetsData().then(setNames).catch(alert);
@@ -77,6 +81,29 @@ const SheetEditor = () => {
             ))}
         </TransitionGroup>
       </ListGroup>
+      {names.length > 0 && (
+        <div className="d-flex justify-content-end py-3">
+          {!isExpanded ? (
+            <Button
+              variant="light"
+              className="mr-2"
+              onClick={() => {
+                scriptHostFunctions.setHeight(1000);
+                scriptHostFunctions.setWidth(1000);
+                setIsExpanded(true);
+              }}
+            >
+              Expand Dialog
+            </Button>
+          ) : null}
+          <Button
+            variant="outline-dark"
+            onClick={() => scriptHostFunctions.close()}
+          >
+            Close Dialog Window
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

src/client/dialog-demo-bootstrap/index.html

@@ -21,7 +21,7 @@
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/gas-client@1.1.1/dist/index.js"
+      src="https://unpkg.com/gas-client@1.2.0/dist/index.js"
     ></script>
     <script
       crossorigin

src/client/dialog-demo-mui/index.html

@@ -17,7 +17,7 @@
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/gas-client@1.1.1/dist/index.js"
+      src="https://unpkg.com/gas-client@1.2.0/dist/index.js"
     ></script>
     <script
       crossorigin

src/client/dialog-demo-tailwindcss/index.html

@@ -17,7 +17,7 @@
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/gas-client@1.1.1/dist/index.js"
+      src="https://unpkg.com/gas-client@1.2.0/dist/index.js"
     ></script>
     <script
       crossorigin

src/client/dialog-demo/index.html

@@ -17,7 +17,7 @@
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/gas-client@1.1.1/dist/index.js"
+      src="https://unpkg.com/gas-client@1.2.0/dist/index.js"
     ></script>
     <script
       crossorigin

src/client/utils/serverFunctions.ts

@@ -1,10 +1,12 @@
 import { GASClient } from 'gas-client';
 import * as publicServerFunctions from '../../server';
 
-const { serverFunctions } = new GASClient<typeof publicServerFunctions>({
+const { serverFunctions, scriptHostFunctions } = 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 };
+export { serverFunctions, scriptHostFunctions };