Add MUI demo

[H-G-11]

TL;DR: This aims at providing an example using Google Material UI using MUI and Formik, in order to solve this issue.

The issue concerning the bundle size is addressed by updating tsconfig.json and webpack.config.js, to enable tree-shaking properly, even in Typescript. A new file global.d.ts is also added to keep functions at the root.

Details:

• tsconfig.json now includes "moduleResolution": "node" and "target": "ES2019".
• webpack.config.js now uses ecma: 6
• a new file global.d.ts allows to keep functions at the root in main.gs
• a new dialog is included: dialog-demo-mui, with the necessary function to show it in the menu, and to open the dialog.
• Formik is added for MUI demo dialog.

Final considerations: The bundle size is still big comparatively to other dialogs: 200kb versus 10kb (including Formik 40kb). This is partly due to:

• MUI not being included via CDN, as it is not recommended . This would in fact download the whole library. So, the comparison is unfair since other dialogs do not include their respective packages in their HTML file.
• Formik is not included via CDN as I haven't found how to make it work. It seems that they have issues with CDN, as they have several issues about it.

I have tested including a heavy MUI component to see if the size of the HTML changes. Including Autocomplete adds 60kb to the bundle size. This is the proof that tree-shaking is in place and working.

[enuchi]

Thanks @h-contributeur , really appreciate the PR. Have a few thoughts on these changes, but first I wanted to check if I understand the bundle sizes correctly. It's 200kb total to include MUI with tree-shaking (including about 40kb for Formik), compared with around 10kb without the libraries.

MUI's production minified package (entire library) from CDN at https://unpkg.com/@mui/material@5.11.11/umd/material-ui.production.min.js is about 140kb. I know they recommend against loading from a CDN etc. in typical situations (I'd argue this isn't the case here with Google Apps Script) but is this right that the full minified version is still smaller than the bundle created with tree-shaking?

[H-G-11]

Hello @enuchi

Thank you for your answer. You are right, the minified and compressed full library (144kb) is smaller than the tree-shaken minified and non-compressed library (150kb, can get bigger with more components).

I can try to include the full library via CDN then.

Details: The whole library minified and gziped is 144kB. Minified and not gziped is 500kB. In our final HTML, we have the minified tree-shaken non-compressed library at 150kB approx (with Formik and the rest, it brings the whole HTML to 200kb).

[enuchi]

Thanks @h-contributeur. That would be great. I played around with your PR and found I could use a CDN to load MUI with a few changes. Could you incorporate these into your PR?

I'd like to keep the "named export" version of global assignment for the server code, since I think adding back the global.function = ... syntax is too confusing for most users. Could you revert the tsconfig changes? Alternatively I think this could be improved by having a separate tsconfig.json for server folder with classic moduleResolution that is compatible with gas-webpack-plugin, and one for the client folder that uses more modern module resolution but haven't look much into this.

Lastly, would you mind removing Formik? Think it is a great tool for apps with a lot of forms but not relevant for most here and think it's more useful to just have a plain example showing MUI.

[enuchi]

Something like this but with packageVersion in the urls. The DynamicCdnWebpackPlugin will not work correctly unless peer dependencies are included.

https://github.com/enuchi/React-Google-Apps-Script/blob/0b7bdd18c0cd3372fbf62652ab297ac156fc2c08/webpack.config.js#L202-L222

And imports like this: https://github.com/enuchi/React-Google-Apps-Script/blob/0b7bdd18c0cd3372fbf62652ab297ac156fc2c08/src/client/dialog-demo-mui/components/FormInput.tsx#L2

[H-G-11]

I think it should be fine now @enuchi . This version produces a bundle size of 10kB like the rest.

Thanks a lot for your time and this great repository! Let me know if there is anything I should change.

Have a great Sunday afternoon

[enuchi]

Thanks for making the changes! Looks good at first glance. Let me take a closer look and see if anything else needs to be changed.

[H-G-11]

Hello @enuchi, sorry for this!

It should be done, thank you for your review.

[enuchi]

Looks good! Adding MUI is increasing the overall bundle size here during development and making the tests fail here, so am going to make a couple changes to the repo. Do you mind pulling in some changes once they're in?

[enuchi]

Ok was able to update the PR -- looks good now, going to merge this.

[enuchi]

Thanks for your help getting this example into the project @h-contributeur.