Skip to content

Reduce frontend bundle size and bump @tanstack/react-query #1322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
daveearley merged 1 commit into from
Aug 23, 2026
Merged

Reduce frontend bundle size and bump @tanstack/react-query #1322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"@stripe/react-stripe-js": "^2.1.1",
"@stripe/stripe-js": "^1.54.1",
"@tabler/icons-react": "^3.35.0",
"@tanstack/react-query": "5.76.1",
"@tanstack/react-query": "5.102.2",
"@tanstack/react-table": "^8.21.3",
"@tiptap/core": "^3.3.0",
"@tiptap/extension-image": "^3.3.0",
Expand Down Expand Up @@ -105,6 +105,7 @@
"vite-plugin-copy": "^0.1.6"
},
"resolutions": {
"prosemirror-model": "^1.25.7"
"prosemirror-model": "^1.25.7",
"prosemirror-view": "1.41.8"
}
}
5 changes: 3 additions & 2 deletions frontend/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,11 +126,12 @@ Sitemap: ${frontendUrl}/sitemap.xml
render = (await dynamicImport(path.join(__dirname, "./dist/server/entry.server.js"))).render;
}

const { appHtml, dehydratedState, helmetContext } = await render(
const { appHtml, dehydratedState, helmetContext, themeColors } = await render(
{ req, res },
ssrManifest
);
const stringifiedState = htmlSafeJsonStringify(dehydratedState);
const stringifiedThemeColors = htmlSafeJsonStringify(themeColors);

const helmetHtml = Object.values(helmetContext.helmet || {})
.map((value) => value.toString() || "")
Expand All @@ -148,7 +149,7 @@ Sitemap: ${frontendUrl}/sitemap.xml
const html = template
.replace("<!--head-snippets-->", () => headSnippets.join("\n"))
.replace("<!--app-html-->", () => appHtml)
.replace("<!--dehydrated-state-->", () => `<script>window.__REHYDRATED_STATE__ = ${stringifiedState}</script>`)
.replace("<!--dehydrated-state-->", () => `<script>window.__REHYDRATED_STATE__ = ${stringifiedState};window.__THEME_COLORS__ = ${stringifiedThemeColors}</script>`)
.replace("<!--environment-variables-->", () => envVariablesHtml)
.replace(/<!--render-helmet-->.*?<!--\/render-helmet-->/s, () => helmetHtml);

Expand Down
13 changes: 5 additions & 8 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import {i18n} from "@lingui/core";
import {I18nProvider} from "@lingui/react";
import {ModalsProvider} from "@mantine/modals";
import {DatesProvider} from "@mantine/dates";
import {HydrationBoundary, QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {DehydratedState, HydrationBoundary, QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {Helmet, HelmetProvider} from "react-helmet-async";
import {generateColors} from '@mantine/colors-generator';
import type {ThemeColors} from "./utilites/themeColors.ts";

import "@mantine/core/styles/global.css";
import "@mantine/core/styles.css";
Expand All @@ -23,7 +23,6 @@ import {ThirdPartyScripts} from "./components/common/ThirdPartyScripts";
import {getConfig} from "./utilites/config.ts";
import {CookieConsentBanner} from "./components/common/CookieConsentBanner";
import {isConsentPending, setConsentState, updateGoogleConsentMode} from "./utilites/trackingPixels/consent";
import "./utilites/dateLocales.ts";

declare global {
interface Window {
Expand All @@ -35,8 +34,9 @@ export const App: FC<
PropsWithChildren<{
queryClient: QueryClient;
locale: string;
themeColors: ThemeColors;
helmetContext?: any;
dehydratedState?: unknown;
dehydratedState?: DehydratedState;
}>
> = (props) => {
const [isLoadedOnBrowser, setIsLoadedOnBrowser] = React.useState(false);
Expand Down Expand Up @@ -75,10 +75,7 @@ export const App: FC<
<MantineProvider
cssVariablesResolver={v8CssVariablesResolver}
theme={{
colors: {
primary: generateColors(getConfig("VITE_APP_PRIMARY_COLOR", "#40296C") as string),
secondary: generateColors(getConfig("VITE_APP_SECONDARY_COLOR", "#3d0b44") as string),
},
colors: props.themeColors,
primaryColor: "primary",
fontFamily: "Outfit, sans-serif",
primaryShade: 8,
Expand Down
6 changes: 3 additions & 3 deletions ...on/Editor/Controls/LiquidTokenControl.tsx → ...LiquidTokenControl/LiquidTokenControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {Badge, Menu, ScrollArea, Text} from '@mantine/core';
import {IconBraces} from '@tabler/icons-react';
import {RichTextEditor, useRichTextEditorContext} from '@mantine/tiptap';
import {EmailTemplateToken, EmailTemplateType} from '../../../../types';
import {useGetEmailTemplateTokens} from '../../../../queries/useGetEmailTemplateTokens';
import {EmailTemplateToken, EmailTemplateType} from '../../../../../types';
import {useGetEmailTemplateTokens} from '../../../../../queries/useGetEmailTemplateTokens';
import {t, Trans} from '@lingui/macro';

interface LiquidTokenControlProps {
export interface LiquidTokenControlProps {
templateType: EmailTemplateType;
excludeTokens?: string[];
}
Expand Down
17 changes: 17 additions & 0 deletions frontend/src/components/common/Editor/Controls/LiquidTokenControl/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import {prefetchOnIdle} from "../../../../../utilites/helpers.ts";
import {createLazyModule} from "../../../../../utilites/lazyModule.ts";
import type {LiquidTokenControlProps} from "./LiquidTokenControl";

const liquidTokenControlModule = createLazyModule(() => import("./LiquidTokenControl"));

prefetchOnIdle(liquidTokenControlModule.load);

export const LiquidTokenControl = (props: LiquidTokenControlProps) => {
const module = liquidTokenControlModule.useModule();

if (!module) {
return null;
}

return <module.LiquidTokenControl {...props}/>;
};
224 changes: 224 additions & 0 deletions frontend/src/components/common/Editor/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
import {Link, RichTextEditor} from "@mantine/tiptap";
import {useEditor} from "@tiptap/react";
import StarterKit from '@tiptap/starter-kit';
import {TextAlign} from '@tiptap/extension-text-align';
import {Color, TextStyle} from '@tiptap/extension-text-style';
import React, {useEffect, useState} from "react";
import {InputDescription, InputError, InputLabel, MantineFontSize} from "@mantine/core";
import classes from "./Editor.module.scss";
import classNames from "classnames";
import {Trans} from "@lingui/macro";
import {InsertImageControl} from "./Controls/InsertImageControl";
import {ImageResize} from "./Extensions/ImageResizeExtension";
import {Extension} from '@tiptap/core';

export interface EditorProps {
onChange: (value: string) => void;
value: string;
label?: React.ReactNode;
description?: React.ReactNode;
required?: boolean;
className?: string;
error?: string | React.ReactNode;
editorType?: 'full' | 'simple';
maxLength?: number;
size?: MantineFontSize;
additionalExtensions?: Extension[];
additionalToolbarControls?: React.ReactNode;
}

export const Editor = ({
error,
onChange,
value,
label = '',
required = false,
className = '',
description = '',
editorType = 'full',
maxLength,
size = 'md',
additionalExtensions = [],
additionalToolbarControls,
}: EditorProps) => {
const [charError, setCharError] = useState<string | null | React.ReactNode>(null);

const editor = useEditor({
extensions: [
StarterKit.configure({
link: false,
paragraph: {
HTMLAttributes: {
style: 'margin: 0.5em 0;'
}
},
hardBreak: {
HTMLAttributes: {
'data-type': 'hard-break'
}
}
}),
Link,
TextAlign.configure({types: ['heading', 'paragraph']}),
ImageResize,
TextStyle,
Color,
...additionalExtensions
],
onUpdate: ({editor}) => {
const html = editor.getHTML();
const htmlLength = html.length;

if (maxLength && htmlLength > maxLength) {
setCharError(`Character limit exceeded: ${htmlLength}/${maxLength}`);
} else {
setCharError(null);
}

onChange(html);
},
});

useEffect(() => {
if (value && editor) {
if (value !== editor.getHTML()) {
editor.commands.setContent(value, {emitUpdate: false, parseOptions: {preserveWhitespace: "full"}});
}
const htmlLength = value.length;

if (maxLength && htmlLength > maxLength) {
setCharError(<Trans>HTML character limit exceeded: {htmlLength}/{maxLength}</Trans>);
} else {
setCharError(null);
}
}
}, [value, editor, maxLength]);

return (
<div className={classNames([classes.inputWrapper, className])}>
{label && <InputLabel size={size} required={required}
onClick={() => editor?.commands.focus()}>{label}</InputLabel>}
{description && (
<div style={{marginBottom: 5}}>
<InputDescription size={size}>{description}</InputDescription>
</div>
)}
<RichTextEditor variant={'subtle'} editor={editor}>
<RichTextEditor.Toolbar sticky className={classes.toolbar}>
{editorType === 'full' && (
<>
<RichTextEditor.ControlsGroup>
<RichTextEditor.Bold/>
<RichTextEditor.Italic/>
<RichTextEditor.Underline/>
<RichTextEditor.ClearFormatting/>
<RichTextEditor.ColorPicker
colors={[
'#25262b',
'#868e96',
'#fa5252',
'#e64980',
'#be4bdb',
'#7950f2',
'#4c6ef5',
'#228be6',
'#15aabf',
'#12b886',
'#40c057',
'#82c91e',
'#fab005',
'#fd7e14',
]}
/>
</RichTextEditor.ControlsGroup>

<RichTextEditor.ControlsGroup>
<RichTextEditor.H1/>
<RichTextEditor.H2/>
<RichTextEditor.H3/>
<RichTextEditor.H4/>
</RichTextEditor.ControlsGroup>

<RichTextEditor.ControlsGroup>
<RichTextEditor.BulletList/>
<RichTextEditor.OrderedList/>
</RichTextEditor.ControlsGroup>

<RichTextEditor.ControlsGroup>
<RichTextEditor.Link/>
<RichTextEditor.Unlink/>
</RichTextEditor.ControlsGroup>

<RichTextEditor.ControlsGroup>
<RichTextEditor.AlignLeft/>
<RichTextEditor.AlignCenter/>
<RichTextEditor.AlignJustify/>
<RichTextEditor.AlignRight/>
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<InsertImageControl/>
</RichTextEditor.ControlsGroup>
</>
)}

{editorType === 'simple' && (
<>
<RichTextEditor.ControlsGroup>
<RichTextEditor.Bold/>
<RichTextEditor.Italic/>
<RichTextEditor.Underline/>
<RichTextEditor.ClearFormatting/>
<RichTextEditor.ColorPicker
colors={[
'#25262b',
'#868e96',
'#fa5252',
'#e64980',
'#be4bdb',
'#7950f2',
'#4c6ef5',
'#228be6',
'#15aabf',
'#12b886',
'#40c057',
'#82c91e',
'#fab005',
'#fd7e14',
]}
/>
</RichTextEditor.ControlsGroup>

<RichTextEditor.ControlsGroup>
<RichTextEditor.Link/>
<RichTextEditor.Unlink/>
</RichTextEditor.ControlsGroup>

<RichTextEditor.ControlsGroup>
<RichTextEditor.AlignLeft/>
<RichTextEditor.AlignCenter/>
<RichTextEditor.AlignRight/>
</RichTextEditor.ControlsGroup>

<RichTextEditor.ControlsGroup>
<RichTextEditor.BulletList/>
<RichTextEditor.OrderedList/>
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<InsertImageControl/>
</RichTextEditor.ControlsGroup>
</>
)}

{additionalToolbarControls}
</RichTextEditor.Toolbar>

<RichTextEditor.Content/>
</RichTextEditor>
{(charError || error) && (
<div className={classes.error}>
<InputError>{error || charError}</InputError>
</div>
)}
</div>
);
};
Loading
Loading