Reduce React app size (#17)

* tavdog -> Tronbyt

* Compress images with ImageOptim

* Split the React app into smaller chunks

- split the code through dynamic imports
- increase the bundle limit to 1 MB
- optimize imports for tree shaking

.babelrc.json

@@ -6,9 +6,14 @@
                 "useBuiltIns": false
             }
         ],
-        "@babel/preset-react"
+        [
+            "@babel/preset-react",
+            {
+                "runtime": "automatic"
+            }
+        ]
     ],
     "plugins": [
-        "@babel/plugin-transform-class-properties"
+        "@babel/plugin-transform-runtime"
     ]
 }

docs/schema/schema.md

@@ -64,7 +64,7 @@ The `get_schema` method returns a `schema.Schema` object that contains _fields_.
 Next up should be more familiar. We're now passing `config` into `main()`. This is the same for current pixlet scripts that take `config` today. In [Community Apps](https://github.com/tidbyt/community), we will populate the config hashmap with values configured from the mobile app.
 
 ## Icons
-Each schema field takes an `icon` value. We use the free icons from [Font Awesome](https://fontawesome.com/v6/search?s=solid%2Cbrands) at version 6.1.1 with the names camel cased. For example [users-cog](https://fontawesome.com/v6/icons/users-cog?style=solid&s=solid) should be `usersCog` in the `icon` value. When submitting to the community repo, the icon names are validated against this [icon map](https://github.com/tidbyt/community/blob/main/apps/icons.go).
+Each schema field takes an `icon` value. We use the free icons from [Font Awesome](https://fontawesome.com/v6/search?s=solid%2Cbrands) at version 6.7.2 with the names camel cased. For example [users-cog](https://fontawesome.com/v6/icons/users-cog?style=solid&s=solid) should be `usersCog` in the `icon` value. When submitting to the community repo, the icon names are validated against this [icon map](https://github.com/tidbyt/community/blob/main/apps/icons.go).
 
 ## Dynamic Fields
 Pixlet offers two types of fields: basic fields like `Toggle` or `Text` and dynamic fields that take a `handler` method like `LocationBased` or `Typeahead`. For dynamic fields, the `handler` will get called with user inputs. What the handler returns is specific to the field.

package.json

@@ -10,23 +10,28 @@
   "scripts": {
     "start": "webpack serve --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js",
+    "analyze": "webpack --config webpack.prod.js --profile --json > stats.json",
     "clean": "rm -rf dist/static/ && git restore dist/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tavdog/pixlet.git"
+    "url": "git+https://github.com/Tronbyt/pixlet.git"
   },
   "keywords": [],
   "author": "Tidbyt, Inc.",
   "license": "Apache 2.0",
   "bugs": {
-    "url": "https://github.com/tavdog/pixlet/issues"
+    "url": "https://github.com/Tronbyt/pixlet/issues"
   },
-  "homepage": "https://github.com/tavdog/pixlet#readme",
+  "homepage": "https://github.com/Tronbyt/pixlet#readme",
+  "browserslist": [
+    "defaults and fully supports es6-module"
+  ],
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.26.9",
     "@babel/preset-react": "^7.24.1",
     "@svgr/webpack": "^8.1.0",
     "babel-loader": "^9.1.3",

src/Main.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 
 import Container from '@mui/material/Container';

src/features/appbar/AppBar.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 

src/features/controls/Controls.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { Button, Stack } from '@mui/material';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
 import { resetConfig, setConfig } from '../config/actions';
 import { set } from '../config/configSlice';
 

src/features/errors/ErrorSnackbar.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { createRef } from 'react';
 import { SnackbarProvider } from 'notistack';
 import * as styles from './styles.css';
 
 export default function ErrorSnackbar(props) {
-    const notistackRef = React.createRef();
+    const notistackRef = createRef();
 
     return (
         <SnackbarProvider

src/features/preview/Preview.jsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { Paper } from '@mui/material';
+import Paper from '@mui/material/Paper';
 
 import * as styles from './styles.css';
 

src/features/schema/Field.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { useState } from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -12,7 +11,7 @@ import FieldIcon from './FieldIcon';
 export default function Field(props) {
     const field = props.field;
 
-    const [expanded, setExpanded] = React.useState(false);
+    const [expanded, setExpanded] = useState(false);
 
     const handleChange = (panel) => (event, isExpanded) => {
         setExpanded(isExpanded ? panel : false);

src/features/schema/FieldDetails.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import OAuth2 from './fields/oauth2/OAuth2';
 import PhotoSelect from './fields/photoselect/PhotoSelect';
 import Toggle from './fields/Toggle';

src/features/schema/FieldIcon.jsx

@@ -1,11 +1,14 @@
-import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { findIconDefinition } from '@fortawesome/fontawesome-svg-core';
 
 import Icon from '@mui/material/Icon';
 
 import * as styles from './styles.css';
 
+const { library } = await import('@fortawesome/fontawesome-svg-core');
+const { fab } = await import('@fortawesome/free-brands-svg-icons');
+const { fas } = await import('@fortawesome/free-solid-svg-icons');
+library.add(fas, fab);
 
 export default function FieldIcon(props) {
     const iconName = props.icon;

src/features/schema/Schema.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import refreshSchema from './actions';

src/features/schema/fields/Color.jsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react';
-
+import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Sketch } from '@uiw/react-color';
 import { set } from '../../config/configSlice';

src/features/schema/fields/DateTime.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import dayjs from 'dayjs';
 

src/features/schema/fields/Dropdown.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import InputLabel from '@mui/material/InputLabel';

src/features/schema/fields/Generated.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { callGeneratedHandler } from '../../handlers/actions';

src/features/schema/fields/TextInput.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import TextField from '@mui/material/TextField';

src/features/schema/fields/Toggle.jsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react';
-
+import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Switch from '@mui/material/Switch';
 import { set } from '../../config/configSlice';

src/features/schema/fields/Typeahead.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import Autocomplete from '@mui/material/Autocomplete';

src/features/schema/fields/location/InputSlider.jsx

@@ -1,6 +1,4 @@
 // Largely based on https://mui.com/material-ui/react-slider/#InputSlider.js
-import React from 'react';
-
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid2';

src/features/schema/fields/location/LocationBased.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import MenuItem from '@mui/material/MenuItem';

src/features/schema/fields/location/LocationForm.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import MenuItem from '@mui/material/MenuItem';

src/features/schema/fields/oauth2/OAuth2.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import OAuth2Login from 'react-simple-oauth2-login';
 

src/features/schema/fields/oauth2/OAuth2Handler.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useEffect } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import Grid from '@mui/material/Grid2';

src/features/schema/fields/photoselect/PhotoSelect.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import Fragment, { useState, useCallback, useEffect } from 'react';
 import Cropper from 'react-easy-crop';
 import { useDispatch } from 'react-redux';
 
@@ -111,7 +111,7 @@ export default function PhotoSelect({ field }) {
     }
 
     return (
-        <React.Fragment>
+        <Fragment>
             {buttons}
             <Modal
                 open={open}
@@ -158,6 +158,6 @@ export default function PhotoSelect({ field }) {
                     </div>
                 </div>
             </Modal>
-        </React.Fragment>
+        </Fragment>
     );
 }

src/features/schema/fields/photoselect/RawPhotoSelect.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import Fragment, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import Button from '@mui/material/Button';
@@ -87,8 +87,8 @@ export default function RawPhotoSelect({ field }) {
     }
 
     return (
-        <React.Fragment>
+        <Fragment>
             {buttons}
-        </React.Fragment>
+        </Fragment>
     );
 }

src/features/theme/DevToolsTheme.jsx

@@ -1,17 +1,10 @@
-import React from 'react';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { fab } from '@fortawesome/free-brands-svg-icons';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-
 import ThemeProvider from '@mui/system/ThemeProvider';
 
 import { theme } from './theme';
 import './styles.css';
 
 
 export default function DevToolsTheme(props) {
-    library.add(fas, fab);
-
     return (
         <ThemeProvider theme={theme}>
             {props.children}

src/features/theme/theme.js

@@ -1,12 +1,10 @@
-
 import '@fontsource/barlow';
 import '@fontsource/material-icons';
 
 import { createTheme } from '@mui/material/styles';
 
 import { solarized } from './colors';
 
-
 export const theme = createTheme({
     palette: {
         mode: 'light',