diff --git a/package-lock.json b/package-lock.json index 4f17989..c412c5a 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 7aa83be..15447e0 100644 --- a/package.json +++ b/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": [ diff --git a/static/js/shop/Backlog.jsx b/static/js/shop/Backlog.jsx index 7d1aff0..50cd956 100644 --- a/static/js/shop/Backlog.jsx +++ b/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]) diff --git a/static/js/shop/Cart.jsx b/static/js/shop/Cart.jsx index 7bf72b1..12c3790 100644 --- a/static/js/shop/Cart.jsx +++ b/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 */ 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); diff --git a/static/js/shop/Crate.jsx b/static/js/shop/Crate.jsx index 4e4d50b..0b30b65f 100644 --- a/static/js/shop/Crate.jsx +++ b/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 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 (
diff --git a/static/js/shop/CrateList.jsx b/static/js/shop/CrateList.jsx index 4819a56..4543482 100644 --- a/static/js/shop/CrateList.jsx +++ b/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 ( { diff --git a/static/js/shop/CrateMode.jsx b/static/js/shop/CrateMode.jsx index 16d25d1..3d26efc 100644 --- a/static/js/shop/CrateMode.jsx +++ b/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 (
diff --git a/static/js/shop/CrateWarnings.jsx b/static/js/shop/CrateWarnings.jsx index 29a14bd..8d68b2b 100644 --- a/static/js/shop/CrateWarnings.jsx +++ b/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 ( diff --git a/static/js/shop/FakePlaceholder.jsx b/static/js/shop/FakePlaceholder.jsx index 8b0edaf..00f1a34 100644 --- a/static/js/shop/FakePlaceholder.jsx +++ b/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}) { }}>
); } - //console.log("FakePlaceholder renders: ", renderCount) return ( diff --git a/static/js/shop/ImportJSON.jsx b/static/js/shop/ImportJSON.jsx index 0a1fde0..df327bb 100644 --- a/static/js/shop/ImportJSON.jsx +++ b/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) => { diff --git a/static/js/shop/Layout.jsx b/static/js/shop/Layout.jsx index 9863cd9..3d27115 100644 --- a/static/js/shop/Layout.jsx +++ b/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 ( diff --git a/static/js/shop/OrderForm.jsx b/static/js/shop/OrderForm.jsx index f386369..a2bc41f 100644 --- a/static/js/shop/OrderForm.jsx +++ b/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 ( diff --git a/static/js/shop/OrderPanel.jsx b/static/js/shop/OrderPanel.jsx index 881c34e..586eca2 100644 --- a/static/js/shop/OrderPanel.jsx +++ b/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 (
diff --git a/static/js/shop/OrderSummary.jsx b/static/js/shop/OrderSummary.jsx index 6fa0350..fb6c849 100644 --- a/static/js/shop/OrderSummary.jsx +++ b/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 ( diff --git a/static/js/shop/ProductCartItem.jsx b/static/js/shop/ProductCartItem.jsx index cce5e72..e4cf411 100644 --- a/static/js/shop/ProductCartItem.jsx +++ b/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; diff --git a/static/js/shop/ProductItem.jsx b/static/js/shop/ProductItem.jsx index 3a0d495..393af65 100644 --- a/static/js/shop/ProductItem.jsx +++ b/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) diff --git a/static/js/shop/RFQFeedback.jsx b/static/js/shop/RFQFeedback.jsx index 28ba263..f7ca108 100644 --- a/static/js/shop/RFQFeedback.jsx +++ b/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) => { diff --git a/static/js/shop/Resources.jsx b/static/js/shop/Resources.jsx index a074277..92ab549 100644 --- a/static/js/shop/Resources.jsx +++ b/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 ( 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 ( 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) => { diff --git a/webpack.config.js b/webpack.config.js index bc1ffb3..77096fc 100644 --- a/webpack.config.js +++ b/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, + } + } + ], } ] },