Set up preprocessor for conditional compilation

Signed-off-by: Egor Savkin <es@m-labs.hk>

package-lock.json

@@ -26,6 +26,7 @@
         "uuid": "^9.0.1",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",
+        "webpack-preprocessor-loader": "^1.3.0",
         "zustand": "^4.4.7"
       }
     },
@@ -4828,6 +4829,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/webpack-preprocessor-loader": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/webpack-preprocessor-loader/-/webpack-preprocessor-loader-1.3.0.tgz",
+      "integrity": "sha512-wvHkDvgU9lhKQ1OWIJsawPBT/0wr+J7dwC7DHy0KtmXR/thGOAWbKEErGeJ2aXGSpwgqQTolIRoETlwMzocK1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.11.5"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",

package.json

@@ -31,7 +31,8 @@
     "webpack-cli": "^5.1.4",
     "json-logic-js": "^2.0.2",
     "zustand": "^4.4.7",
-    "@uidotdev/usehooks":"^2.4.1"
+    "@uidotdev/usehooks":"^2.4.1",
+    "webpack-preprocessor-loader": "^1.3.0"
   },
   "babel": {
     "presets": [

static/js/shop/Backlog.jsx

@@ -2,20 +2,24 @@ import React from 'react';
 import {Droppable} from "@hello-pangea/dnd";
 import {ProductItem} from "./ProductItem";
 import {useShopStore} from "./shop_store";
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 /**
  * Component that renders the backlog in the aside
  */
 export function Backlog() {
+    // #!render_count
     const renderCount = useRenderCount();
+
     const data = useShopStore((state) => state.groups);
     const items = useShopStore((state) => state.cards);
     const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
     const isMobile = useShopStore((state) => state.isMobile);
 
-
+    // #!render_count
     console.log("Backlog renders: ", renderCount)
+
     const ordered_groups = data.categories.map(groupItem => ({
         name: groupItem.name,
         items: groupItem.itemIds.map(itemId => items[itemId])

static/js/shop/Cart.jsx

@@ -6,6 +6,7 @@ import {FakePlaceholder} from "./FakePlaceholder";
 import {FillExtData} from "./options/utils";
 import {hp_to_slots} from "./count_resources";
 import {useShopStore} from "./shop_store";
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 import {useShallow} from "zustand/react/shallow";
 
@@ -13,6 +14,7 @@ import {useShallow} from "zustand/react/shallow";
  * Component that displays a list of <ProductCartItem>
  */
 export function Cart({crate_index}) {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const crate = useShopStore(useShallow((state) => state.crates[crate_index]), (a, b) => {
@@ -20,6 +22,7 @@ export function Cart({crate_index}) {
     });
     const crateParams = useShopStore((state) => state.crateParams);
 
+    // #!render_count
     console.log("Cart renders: ", renderCount)
 
     const nbrOccupied = hp_to_slots(crate.occupiedHP);

static/js/shop/Crate.jsx

@@ -3,19 +3,26 @@ import {Cart} from "./Cart";
 import {CrateMode} from "./CrateMode";
 import {CrateWarnings} from "./CrateWarnings";
 import {useShopStore} from "./shop_store";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
+
 /**
  * Component that displays the main crate with reminder rules.
  * It includes <Cart> and rules
  */
 export function Crate({crate_index}) {
+    // #!render_count
     const renderCount = useRenderCount();
+
     const crate = useShopStore((state) => state.crates[crate_index],
         (a, b) => a.length === b.length);
     const onDeleteCrate = useShopStore((state) => state.delCrate);
 
+    // #!render_count
     console.log("Crate renders: ", renderCount)
+
     return (
         <div className="crate">
 

static/js/shop/CrateList.jsx

@@ -2,9 +2,12 @@ import React from 'react'
 import {Accordion} from "react-bootstrap";
 import {Crate} from "./Crate";
 import {useShopStore} from "./shop_store";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 export function CrateList() {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const crates = useShopStore((state) => state.crates,
@@ -13,6 +16,7 @@ export function CrateList() {
     const onAddCrate = useShopStore((state) => state.newCrate);
     const setActiveCrate = useShopStore((state) => state.setActiveCrate);
 
+    // #!render_count
     console.log("CrateList renders: ", renderCount)
     return (
         <Accordion id="accordion_crates" flush activeKey={active_crate} onSelect={(e) => {

static/js/shop/CrateMode.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import {useShopStore} from "./shop_store";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 /**
  * Component that displays crate modes
  */
 export function CrateMode({crate_index}) {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const modes_order = useShopStore((state) => state.modes_order);
@@ -14,6 +17,7 @@ export function CrateMode({crate_index}) {
         (a, b) => a.id === b.id && a.crate_mode === b.crate_mode);
     const setMode = useShopStore((state) => state.setCrateMode);
 
+    // #!render_count
     console.log("CrateMode renders: ", renderCount)
     return (
         <div className="crate-mode">

static/js/shop/CrateWarnings.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import {LevelUI} from "./warnings";
 import {useShopStore} from "./shop_store";
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 const compareArrays = (a, b) =>
@@ -8,8 +9,12 @@ const compareArrays = (a, b) =>
     a.every((element, index) => element.id === b[index].id);
 
 export function CrateWarnings({crate_index}) {
+    // #!render_count
     const renderCount = useRenderCount();
+
     const crate_warnings = useShopStore(state => (state.crates[crate_index].warnings), compareArrays)
+
+    // #!render_count
     console.log("CrateWarnings renders: ", renderCount)
     // TODO UI/colors
     return (

static/js/shop/FakePlaceholder.jsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import {useRenderCount} from "@uidotdev/usehooks";
 
 /**
  * Component that displays a placeholder inside crate.
  * Allows to display how it remains space for the current crate.
  */
 export function FakePlaceholder({isDraggingOver, nToDraw}) {
-    const renderCount = useRenderCount();
     const fakePlaceholder = [];
 
     for (let i = nToDraw; i > 0; i--) {
@@ -19,7 +17,6 @@ export function FakePlaceholder({isDraggingOver, nToDraw}) {
             }}></div>
         );
     }
-    //console.log("FakePlaceholder renders: ", renderCount)
 
     return (
         <React.Fragment>

static/js/shop/ImportJSON.jsx

@@ -3,6 +3,7 @@ import {useClickAway} from "./options/useClickAway";
 import {Modal} from "react-bootstrap";
 import React from "react";
 import {Validation} from "./validate";
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 const JSONExample = JSON.stringify({
@@ -11,6 +12,7 @@ const JSONExample = JSON.stringify({
 });
 
 export function ImportJSON() {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const shouldShow = useShopStore((state) => state.importShouldOpen);
@@ -20,6 +22,7 @@ export function ImportJSON() {
     const closeImport = useShopStore((state) => state.closeImport);
     const showImport = useShopStore((state) => state.openImport);
 
+    // #!render_count
     console.log("ImportJSON renders: ", renderCount)
 
     const ref = useClickAway((e) => {

static/js/shop/Layout.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import {useShopStore} from "./shop_store";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 /**
@@ -8,12 +10,14 @@ import {useRenderCount} from "@uidotdev/usehooks";
 
 
 export function Layout({aside, main}) {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const mobileSideMenuShouldOpen = useShopStore(state => state.sideMenuIsOpen);
     const onClickToggleMobileSideMenu = useShopStore(state => state.switchSideMenu);
     const showCardAddedFeedback = useShopStore(state => state.showCardAddedFeedback);
 
+    // #!render_count
     console.log("Layout renders: ", renderCount)
 
     return (

static/js/shop/OrderForm.jsx

@@ -2,6 +2,8 @@ import React from 'react'
 import {Validation} from "./validate.js";
 import {useShopStore} from "./shop_store";
 import {ShowJSON} from "./ShowJSON";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 
@@ -9,6 +11,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
  * Components that renders the form to request quote.
  */
 export function OrderForm() {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const email = useShopStore((state) => state.email);
@@ -20,6 +23,7 @@ export function OrderForm() {
     const submitDisabled = useShopStore((state) => state.submitDisabled);
     const resetEmailValidation = useShopStore((state) => state.resetEmailValidation);
 
+    // #!render_count
     console.log("OrderForm renders: ", renderCount)
 
     return (

static/js/shop/OrderPanel.jsx

@@ -5,6 +5,8 @@ import {CrateList} from "./CrateList";
 import {useShopStore} from "./shop_store";
 import {ImportJSON} from "./ImportJSON";
 import {RFQFeedback} from "./RFQFeedback";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 /**
@@ -12,10 +14,12 @@ import {useRenderCount} from "@uidotdev/usehooks";
  * It acts like-a layout, this component do nothing more.
  */
 export function OrderPanel({title, description}) {
+    // #!render_count
     const renderCount = useRenderCount();
     const isMobile = useShopStore((state) => state.isMobile);
     const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
 
+    // #!render_count
     console.log("OrderPanel renders: ", renderCount)
 
     return (<section className="panel">

static/js/shop/OrderSummary.jsx

@@ -3,6 +3,8 @@ import {SummaryPopup} from "./options/SummaryPopup";
 import {formatMoney} from "./utils";
 import {WarningIndicator} from "./CardWarnings";
 import {useShopStore} from "./shop_store";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 /**
@@ -10,6 +12,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
  * It is a summary of purchase
  */
 export function OrderSummary() {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const currency = useShopStore((state) => state.currency);
@@ -24,7 +27,7 @@ export function OrderSummary() {
     const clearCrate = useShopStore((state) => state.clearCrate);
     const delCrate = useShopStore((state) => state.delCrate);
 
-
+    // #!render_count
     console.log("OrderSummary renders: ", renderCount)
 
     return (

static/js/shop/ProductCartItem.jsx

@@ -5,6 +5,8 @@ import {productStyle} from "./utils";
 import {Resources} from "./Resources";
 import {CardWarnings} from "./CardWarnings";
 import {useShopStore} from "./shop_store";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 /**
@@ -12,6 +14,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
  * Used in the crate
  */
 export function ProductCartItem({card_index, crate_index, ext_data, first, last}) {
+    // #!render_count
     const renderCount = useRenderCount();
 
 
@@ -24,6 +27,7 @@ export function ProductCartItem({card_index, crate_index, ext_data, first, last}
     const onCardUpdate = useShopStore((state) => state.updateOptions);
     const onCardRemove = useShopStore((state) => state.deleteCard);
 
+    // #!render_count
     console.log("ProductCartItem renders: ", renderCount)
 
     let options, options_data;

static/js/shop/ProductItem.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import {Draggable} from "@hello-pangea/dnd";
 import {formatMoney, productStyle} from "./utils";
 import {useShopStore} from "./shop_store";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 /**
@@ -9,6 +11,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
  * Used in the aside (e.g backlog of product)
  */
 export function ProductItem({card_index}) {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const getCardDescription = useShopStore((state) => state.getCardDescription);
@@ -16,6 +19,7 @@ export function ProductItem({card_index}) {
     const onAddCard = useShopStore((state) => state.addCardFromBacklog);
     const card = getCardDescription(card_index);
 
+    // #!render_count
     console.log("ProductItem renders: ", renderCount)
 
 

static/js/shop/RFQFeedback.jsx

@@ -3,15 +3,18 @@ import {useClickAway} from "./options/useClickAway";
 import {Modal} from "react-bootstrap";
 import {Validation} from "./validate";
 import React from "react";
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 export function RFQFeedback() {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const closeRFQ = useShopStore((state) => state.closeRFQFeedback);
     const shouldShow = useShopStore((state) => state.shouldShowRFQFeedback);
     const status = useShopStore((state) => state.processingResult);
 
+    // #!render_count
     console.log("RFQFeedback renders: ", renderCount)
 
     const ref = useClickAway((e) => {

static/js/shop/Resources.jsx

@@ -1,6 +1,8 @@
 import {OverlayTrigger} from "react-bootstrap";
 import React from "react";
 import {v4 as uuidv4} from "uuid";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 
@@ -63,7 +65,9 @@ function RenderResources({resources, library}) {
 }
 
 export function Resources({resources}) {
+    // #!render_count
     const renderCount = useRenderCount();
+    // #!render_count
     console.log("Resources renders: ", renderCount)
     return (
         <OverlayTrigger

static/js/shop/Shop.jsx

@@ -1,5 +1,7 @@
 import React, {useEffect} from 'react';
 import {DragDropContext} from "@hello-pangea/dnd";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 
@@ -13,6 +15,7 @@ import {useShopStore} from "./shop_store";
  */
 
 export function Shop() {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const addCardFromBacklog = useShopStore((state) => state.addCardFromBacklog);
@@ -20,12 +23,6 @@ export function Shop() {
     const deleteCard = useShopStore((state) => state.deleteCard);
     const cardIndexById = useShopStore((state) => state.cardIndexById);
 
-    /*const {addCardFromBacklog, moveCard, deleteCard, cardIndexById} = useShopStore(useShallow(state => ({
-        addCardFromBacklog: state.addCardFromBacklog,
-        moveCard: state.moveCard,
-        deleteCard: state.deleteCard,
-        cardIndexById: state.cardIndexById
-    })));*/
     const handleOnDragEnd = (drop_result, _provided) => {
         if (!drop_result.destination) {
             console.warn("No drop destination");
@@ -43,7 +40,9 @@ export function Shop() {
         addCardFromBacklog(null, [cardIndexById("eem_pwr_mod"), cardIndexById("kasli")], -1, true);
     }, []);
 
+    // #!render_count
     console.log("Shop renders: ", renderCount)
+
     return (
         <DragDropContext onDragEnd={handleOnDragEnd}>
             <Layout

static/js/shop/ShowJSON.jsx

@@ -2,9 +2,12 @@ import React from "react";
 import {Modal} from "react-bootstrap";
 import {useShopStore} from "./shop_store";
 import {useClickAway} from "./options/useClickAway";
+
+// #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
 
 export function ShowJSON() {
+    // #!render_count
     const renderCount = useRenderCount();
 
     const shouldShow = useShopStore((state) => state.shouldShowDescription);
@@ -12,6 +15,7 @@ export function ShowJSON() {
     const closeDescription = useShopStore((state) => state.closeDescription);
     const showDescription = useShopStore((state) => state.showDescription);
 
+    // #!render_count
     console.log("ShowJSON renders: ", renderCount)
 
     const ref = useClickAway((e) => {

webpack.config.js

@@ -13,7 +13,22 @@ module.exports = {
             {
                 test: /\.(js|jsx)$/,
                 exclude: /node_modules/,
-                use: 'babel-loader'
+                use: [
+                    'babel-loader',
+                    {
+                        loader: "webpack-preprocessor-loader",
+                        options: {
+                            debug: false,
+                            directives: {
+                                render_count: true,
+                            },
+                            params: {
+                                ENV: process.env.NODE_ENV,
+                            },
+                            verbose: false,
+                        }
+                    }
+                ],
             }
         ]
     },