Set up preprocessor for conditional compilation

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-12-14 16:29:32 +08:00
parent 25c4ff970d
commit bf05594813
21 changed files with 99 additions and 13 deletions

10
package-lock.json generated
View File

@ -26,6 +26,7 @@
"uuid": "^9.0.1", "uuid": "^9.0.1",
"webpack": "^5.89.0", "webpack": "^5.89.0",
"webpack-cli": "^5.1.4", "webpack-cli": "^5.1.4",
"webpack-preprocessor-loader": "^1.3.0",
"zustand": "^4.4.7" "zustand": "^4.4.7"
} }
}, },
@ -4828,6 +4829,15 @@
"node": ">=10.0.0" "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": { "node_modules/webpack-sources": {
"version": "3.2.3", "version": "3.2.3",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -13,7 +13,22 @@ module.exports = {
{ {
test: /\.(js|jsx)$/, test: /\.(js|jsx)$/,
exclude: /node_modules/, 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,
}
}
],
} }
] ]
}, },