Skip to content

Commit 143c018

Browse files
melledijkstramelledijkstra
committed
Convert project from Webpack to Vite
1 parent 37a5e2a commit 143c018

19 files changed

+1510
-4746
lines changed

‎.claspignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,3 @@ node_modules/**
44
# this is a generated file that will be inlined within the generated HTML
55
# no need to deploy it
66
main.js
7-
*.txt

‎.gitignore

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,3 @@ certs/
2222

2323
# storybook
2424
storybook-static/
25-
26-
# webpack bundle analyzer
27-
./report.html

‎.storybook/main.ts

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { StorybookConfig } from '@storybook/react-webpack5';
1+
import { StorybookConfig } from '@storybook/react-vite';
22
import { join, dirname } from 'path';
33

44
/**
@@ -15,25 +15,12 @@ const config: StorybookConfig = {
1515
getAbsolutePath('@storybook/addon-links'),
1616
getAbsolutePath('@storybook/addon-essentials'),
1717
getAbsolutePath('@storybook/addon-interactions'),
18-
getAbsolutePath('@storybook/addon-webpack5-compiler-swc')
1918
],
2019
framework: {
21-
name: '@storybook/react-webpack5',
22-
options: { builder: { useSWC: true } }
20+
name: getAbsolutePath('@storybook/react-vite'),
21+
options: {},
2322
},
24-
docs: {
25-
autodocs: 'tag',
26-
},
27-
swc: () => ({
28-
"jsc": {
29-
"transform": {
30-
"react": {
31-
"runtime": "automatic"
32-
}
33-
}
34-
}
35-
}),
36-
webpackFinal: async (config) => {
23+
viteFinal: async (config) => {
3724
if (config?.resolve?.alias) {
3825
// @ts-ignore
3926
config.resolve.alias['../utils/serverFunctions'] = require.resolve(

‎.storybook/preview.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const preview: Preview = {
2222
},
2323
},
2424
decorators: [ServerMockDecorator, DialogDecorator],
25+
tags: ['autodocs'],
2526
};
2627

2728
export default preview;

‎CHANGELOG.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Changelog
2+
3+
## 3.0.0
4+
5+
- **Breaking Change**: Migration from Webpack to Vite
6+
- Storybook converted to use vite
7+
8+
## 2.0.0
9+
10+
- No history... sorry
11+
12+
## 1.0.0
13+
14+
- Initial release, no history... sorry

‎declarations.d.ts

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎dev/dev-server-wrapper.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!--
2+
This is a development server page that serves as a wrapper for Google Apps Script (GAS) client-side development.
3+
4+
It is meant to be run inside a Google Sheets/Docs/Forms dialog window during local development.
5+
6+
It loads the gas-client library (as an external), sets up an iframe that points to a local development
7+
server (such as running with vite), and establishes a communication bridge between the GAS server functions and the local development server.
8+
9+
This allows for local development and testing of client-side code while still being able to interact with
10+
the GAS server-side functions.
11+
12+
Two placeholders are used in this file that will need to be replaced in a build step:
13+
- _ _PORT_ _: The port number of the local development server. (e.g. 3000)
14+
- _ _FILE_NAME_ _: The name of the file being loaded. (e.g. dialog-demo-bootstrap/index.html)
15+
16+
-->
17+
<!DOCTYPE html>
18+
<html>
19+
<head>
20+
<base target="_top" />
21+
<title>Dev Server</title>
22+
<!-- Load gas-client as external. Exposed global variable is GASClient. -->
23+
<script src="https://unpkg.com/gas-client@1.1.1/dist/index.js"></script>
24+
<style>
25+
body,
26+
html {
27+
margin: 0;
28+
width: 100%;
29+
height: 100%;
30+
}
31+
</style>
32+
<script>
33+
document.addEventListener('DOMContentLoaded', function () {
34+
// These values need to be replaced during the build process
35+
const PORT = '__PORT__';
36+
const FILE_NAME = '__FILE_NAME__';
37+
38+
const iframe = document.getElementById('iframe');
39+
iframe.src = 'https://localhost:' + PORT + '/' + FILE_NAME;
40+
const { serverFunctions } = new window.GASClient.GASClient({
41+
allowedDevelopmentDomains: (origin) =>
42+
/https:\/\/.*\.googleusercontent\.com$/.test(origin),
43+
});
44+
45+
const handleRequest = (event) => {
46+
const request = event.data;
47+
const { type, functionName, id, args } = request;
48+
49+
if (type !== 'REQUEST') return;
50+
51+
serverFunctions[functionName](...args)
52+
.then((response) => {
53+
iframe.contentWindow.postMessage(
54+
{ type: 'RESPONSE', id, status: 'SUCCESS', response },
55+
'https://localhost:' + PORT
56+
);
57+
})
58+
.catch((err) => {
59+
iframe.contentWindow.postMessage(
60+
{
61+
type: 'RESPONSE',
62+
id,
63+
status: 'ERROR',
64+
response: err,
65+
},
66+
'https://localhost:' + PORT
67+
);
68+
});
69+
};
70+
window.addEventListener('message', handleRequest, false);
71+
});
72+
</script>
73+
</head>
74+
<body>
75+
<div style="width: 100%; height: 100%">
76+
<iframe
77+
id="iframe"
78+
style="width: 100%; height: 100%; border: 0; position: absolute"
79+
></iframe>
80+
</div>
81+
</body>
82+
</html>

0 commit comments

Comments
 (0)