v3.0 Migration from Webpack to Vite (#54)

* Added preferred engines * Convert project from Webpack to Vite * add integrity to script tags * add html attributes to improve internationalization
melledijkstra · Nov 7, 2024 · efa2bb8 · efa2bb8
1 parent cd26533
commit efa2bb8
Show file tree

Hide file tree

Showing 20 changed files with 1,533 additions and 4,750 deletions.
diff --git a/.claspignore b/.claspignore
@@ -4,4 +4,3 @@ node_modules/**
 # this is a generated file that will be inlined within the generated HTML
 # no need to deploy it
 main.js
-*.txt
diff --git a/.gitignore b/.gitignore
@@ -22,6 +22,3 @@ certs/
 
 # storybook
 storybook-static/
-
-# webpack bundle analyzer
-./report.html
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20
+20
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,4 +1,4 @@
-import { StorybookConfig } from '@storybook/react-webpack5';
+import { StorybookConfig } from '@storybook/react-vite';
 import { join, dirname } from 'path';
 
 /**
@@ -15,25 +15,12 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-interactions'),
-    getAbsolutePath('@storybook/addon-webpack5-compiler-swc')
   ],
   framework: {
-    name: '@storybook/react-webpack5',
-    options: { builder: { useSWC: true } }
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
-  swc: () => ({
-    "jsc": {
-      "transform": {
-        "react": {
-          "runtime": "automatic"
-        }
-      }
-    }
-  }),
-  webpackFinal: async (config) => {
+  viteFinal: async (config) => {
     if (config?.resolve?.alias) {
       // @ts-ignore
       config.resolve.alias['../utils/serverFunctions'] = require.resolve(

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -22,6 +22,7 @@ const preview: Preview = {
     },
   },
   decorators: [ServerMockDecorator, DialogDecorator],
+  tags: ['autodocs'],
 };
 
 export default preview;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,14 @@
+# Changelog
+
+## 3.0.0
+
+- **Breaking Change**: Migration from Webpack to Vite
+  - Storybook converted to use vite
+
+## 2.0.0
+
+- No history... sorry
+
+## 1.0.0
+
+- Initial release, no history... sorry
diff --git a/declarations.d.ts b/declarations.d.ts
diff --git a/dev/dev-server-wrapper.html b/dev/dev-server-wrapper.html
@@ -0,0 +1,87 @@
+<!-- 
+This is a development server page that serves as a wrapper for Google Apps Script (GAS) client-side development.
+
+It is meant to be run inside a Google Sheets/Docs/Forms dialog window during local development.
+
+It loads the gas-client library (as an external), sets up an iframe that points to a local development
+server (such as running with vite), and establishes a communication bridge between the GAS server functions and the local development server. 
+
+This allows for local development and testing of client-side code while still being able to interact with 
+the GAS server-side functions.
+
+Two placeholders are used in this file that will need to be replaced in a build step:
+- _ _PORT_ _: The port number of the local development server. (e.g. 3000)
+- _ _FILE_NAME_ _: The name of the file being loaded. (e.g. dialog-demo-bootstrap/index.html)
+
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base target="_top" />
+    <title>Dev Server</title>
+    <!-- Load gas-client as external. Exposed global variable is GASClient.  -->
+    <script
+      crossorigin
+      integrity="sha384-pdoLFZ6Km6ToTanpnj5aokMJPkRi1p9b/NI+KaQ230ufwQHp4aRqQkJbY4rmWc4d"
+      src="https://unpkg.com/[email protected]/dist/index.js"
+    ></script>
+    <style>
+      body,
+      html {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        // These values need to be replaced during the build process
+        const PORT = '__PORT__';
+        const FILE_NAME = '__FILE_NAME__';
+
+        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 handleRequest = (event) => {
+          const request = event.data;
+          const { type, functionName, id, args } = request;
+
+          if (type !== 'REQUEST') return;
+
+          serverFunctions[functionName](...args)
+            .then((response) => {
+              iframe.contentWindow.postMessage(
+                { type: 'RESPONSE', id, status: 'SUCCESS', response },
+                'https://localhost:' + PORT
+              );
+            })
+            .catch((err) => {
+              iframe.contentWindow.postMessage(
+                {
+                  type: 'RESPONSE',
+                  id,
+                  status: 'ERROR',
+                  response: err,
+                },
+                'https://localhost:' + PORT
+              );
+            });
+        };
+        window.addEventListener('message', handleRequest, false);
+      });
+    </script>
+  </head>
+  <body>
+    <div style="width: 100%; height: 100%">
+      <iframe
+        title="Development Dialog Loader"
+        id="iframe"
+        style="width: 100%; height: 100%; border: 0; position: absolute"
+      ></iframe>
+    </div>
+  </body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,3 @@ node_modules/** @@
     # this is a generated file that will be inlined within the generated HTML
     # no need to deploy it
     main.js
-    *.txt