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",
"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",

View File

@ -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": [

View File

@ -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])

View File

@ -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);

View File

@ -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">

View File

@ -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) => {

View File

@ -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">

View File

@ -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 (

View File

@ -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>

View File

@ -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) => {

View File

@ -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 (

View File

@ -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 (

View File

@ -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">

View File

@ -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 (

View File

@ -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;

View File

@ -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)

View File

@ -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) => {

View File

@ -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

View File

@ -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

View File

@ -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) => {

View File

@ -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,
}
}
],
}
]
},