refactor: react fast refresh

build/flecks.yml

@@ -73,7 +73,6 @@
     - '@babel/core'
     - '@babel/parser'
     - '@babel/types'
-    - '@hot-loader/react-dom'
     - '@pixi/constants'
     - '@pixi/core'
     - '@pixi/display'
@@ -92,6 +91,8 @@
     - 'matter-js'
     - 'pako'
     - 'react'
+    - 'react-dom'
+    - 'react-refresh/runtime'
     - 'react-window'
   port: 32350
   public: 'humus.localhost'

package.json

@@ -13,7 +13,7 @@
     "build": "FLECKS_ENV__flecks_server__start=0 npm run build:only",
     "build:only": "flecks build",
     "debug": "DEBUG=*,-babel*,-compression*,-engine*,-eslint*,-express*,-send*,-sequelize*,-socket.io* npm run dev",
-    "dev": "npm run -- build:only -h",
+    "dev": "npm run -- build:only -dh",
     "link-all": "yarn && for i in avocado humus; do yarn link $(for j in $(ls node_modules/@$i/); do echo \" @$i/$j\"; done); done",
     "postinstall": "patch-package",
     "refresh": "rm -rf yarn.lock node_modules dist && yarn link-all",

packages/app/src/components/app/index.jsx

@@ -1,6 +1,5 @@
 import {
   classnames,
-  hot,
   React,
 } from '@flecks/react';
 import {
@@ -54,4 +53,4 @@ function Humus() {
   );
 }
 
-export default hot(module)(Humus);
+export default Humus;

packages/app/src/components/app/play/renderable.jsx

@@ -9,7 +9,7 @@ import {useRoom, useSelfEntity} from '../../../hooks';
 
 import styles from './renderable.module.scss';
 
-const RoomStage = () => {
+function RoomStage() {
   const selfEntity = useSelfEntity();
   const [camera, setCamera] = useState();
   const room = useRoom();
@@ -19,6 +19,6 @@ const RoomStage = () => {
     }
   }, [selfEntity]);
   return <RoomRenderable camera={camera} styles={styles} room={room} />;
-};
+}
 
 export default RoomStage;

packages/app/src/components/app/play/ui/hotbar/index.jsx

@@ -5,7 +5,7 @@ import {PropTypes, React} from '@flecks/react';
 import ItemSlot from '../item-slot';
 import styles from './index.module.scss';
 
-const HotbarComponent = (props) => {
+function HotbarComponent(props) {
   const {selfEntity} = props;
   const {inputActions} = selfEntity;
   // Render keys bound for each slot.
@@ -35,7 +35,7 @@ const HotbarComponent = (props) => {
     </ItemSlot>
   ));
   return <div className={styles.hotbar}><div className={styles.inner}>{itemSlots}</div></div>;
-};
+}
 
 HotbarComponent.propTypes = {
   selfEntity: PropTypes.shape({

packages/app/src/components/app/play/ui/index.jsx

@@ -18,7 +18,7 @@ import Money from './money';
 import Stamina from './stamina';
 import styles from './index.module.scss';
 
-const PlayUi = () => {
+function PlayUi() {
   const {config: {'@humus/app': {resolution}}} = useFlecks();
   const ref = useRef();
   const room = useRoom();
@@ -60,6 +60,6 @@ const PlayUi = () => {
       )}
     </div>
   );
-};
+}
 
 export default PlayUi;

packages/app/src/components/app/play/ui/item-slot/index.jsx

@@ -9,7 +9,7 @@ import {
 
 import styles from './index.module.scss';
 
-const ItemSlotComponent = (props) => {
+function ItemSlotComponent(props) {
   const {
     children,
     className,
@@ -60,7 +60,7 @@ const ItemSlotComponent = (props) => {
       </div>
     </button>
   );
-};
+}
 
 ItemSlotComponent.defaultProps = {
   children: null,

packages/app/src/components/app/ui/index.jsx

@@ -11,7 +11,7 @@ import styles from './index.module.scss';
 
 export {Context};
 
-const Ui = ({children}) => {
+function Ui({children}) {
   const [width, height] = useContext(Context);
   const $ui = useRef();
   useEffect(() => {
@@ -38,7 +38,7 @@ const Ui = ({children}) => {
       {children}
     </div>
   );
-};
+}
 
 Ui.propTypes = {
   children: PropTypes.node.isRequired,

packages/combat/src/persea/traits/harmful.jsx

@@ -3,12 +3,11 @@ import {join} from 'path';
 import {Code} from '@avocado/react';
 import {useJsonPatcher} from '@avocado/resource/persea';
 import {
-  hot,
   PropTypes,
   React,
 } from '@flecks/react';
 
-const Harmful = ({json, path}) => {
+function Harmful({json, path}) {
   const patch = useJsonPatcher();
   return (
     <div className="harmful">
@@ -22,7 +21,7 @@ const Harmful = ({json, path}) => {
       </div>
     </div>
   );
-};
+}
 
 Harmful.defaultProps = {};
 
@@ -44,4 +43,4 @@ Harmful.propTypes = {
 
 Harmful.displayName = 'Harmful';
 
-export default hot(module)(Harmful);
+export default Harmful;

packages/core/src/persea/traits/item.jsx

@@ -3,12 +3,11 @@ import {join} from 'path';
 import {Code, Number} from '@avocado/react';
 import {useJsonPatcher} from '@avocado/resource/persea';
 import {
-  hot,
   PropTypes,
   React,
 } from '@flecks/react';
 
-const Item = ({json, path}) => {
+function Item({json, path}) {
   const patch = useJsonPatcher();
   return (
     <div className="item">
@@ -29,7 +28,7 @@ const Item = ({json, path}) => {
       </div>
     </div>
   );
-};
+}
 
 Item.defaultProps = {};
 
@@ -49,4 +48,4 @@ Item.propTypes = {
   path: PropTypes.string.isRequired,
 };
 
-export default hot(module)(Item);
+export default Item;