Skip to content

Commit 91cf386

Browse files
authored
fix: compress cached loader data (#4435)
1 parent 7b2e8e4 commit 91cf386

File tree

8 files changed

+37
-55
lines changed

8 files changed

+37
-55
lines changed

packages/api-prerendering-service/__tests__/render/extractPeLoaderDataFromHtml.test.ts

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,14 @@ describe("extractPeLoaderDataFromHtml Tests", () => {
44
it("must detect pe-loader-data-cache tags in given HTML", async () => {
55
const results = extractPeLoaderDataFromHtml(TEST_STRING);
66

7+
// The value is not decompressed, so it's still a string.
78
expect(results).toEqual([
89
{
910
key: "GfT8AoRsYT-1238102521",
10-
value: [
11-
{
12-
description:
13-
"The Falcon 1 was an expendable launch system privately developed and manufactured by SpaceX during 2006-2009. On 28 September 2008, Falcon 1 became the first privately-developed liquid-fuel launch vehicle to go into orbit around the Earth.",
14-
id: "5e9d0d95eda69955f709d1eb",
15-
name: "Falcon 1",
16-
wikipedia: "https://en.wikipedia.org/wiki/Falcon_1"
17-
},
18-
{
19-
description:
20-
"Falcon 9 is a two-stage rocket designed and manufactured by SpaceX for the reliable and safe transport of satellites and the Dragon spacecraft into orbit.",
21-
id: "5e9d0d95eda69973a809d1ec",
22-
name: "Falcon 9",
23-
wikipedia: "https://en.wikipedia.org/wiki/Falcon_9"
24-
},
25-
{
26-
description:
27-
"With the ability to lift into orbit over 54 metric tons (119,000 lb)--a mass equivalent to a 737 jetliner loaded with passengers, crew, luggage and fuel--Falcon Heavy can lift more than twice the payload of the next closest operational vehicle, the Delta IV Heavy, at one-third the cost.",
28-
id: "5e9d0d95eda69974db09d1ed",
29-
name: "Falcon Heavy",
30-
wikipedia: "https://en.wikipedia.org/wiki/Falcon_Heavy"
31-
},
32-
{
33-
description:
34-
"Starship and Super Heavy Rocket represent a fully reusable transportation system designed to service all Earth orbit needs as well as the Moon and Mars. This two-stage vehicle — composed of the Super Heavy rocket (booster) and Starship (ship) — will eventually replace Falcon 9, Falcon Heavy and Dragon.",
35-
id: "5e9d0d96eda699382d09d1ee",
36-
name: "Starship",
37-
wikipedia: "https://en.wikipedia.org/wiki/SpaceX_Starship"
38-
}
39-
]
11+
value: "pe_NobwRAJgpgzgxgJwJYAcAuSD2A7MAuMAFQAsoACAMQEMAbOHMgRjIHcqYyrsyoAPFKNghUARjXI0qAV2xxiZGAE8YaKAFsyKZADcqqmorLRtUGpgEROQsmq5SAZlThopCKJZGGAyiidQAGkauSNgA5mQATAAMUQBsALTRUQCcAHRkAPLcEQAcZF5Q6OoiUAiRMTkANJS09NzMJXBUauRopGT2SAgqmjp6porxxqbm7mQ0SACOUkgQ8fZSpuPSsvImxEhw4mRomGSheyG7ZJgIIkhonAiYMpZt5ACiVAhtqWCVYLP4YACsUMkQKIQZJ/YSxZIgn72ADsKQgjCgIneYGwzSg32odAYjGRLCQAGtUO4kFRvsQ0GgUDA8AB6GmCVJ4wkWEmpU6hGlMpA0zF1AD6OIAvpVwNB4Mh0FhcAReQxkmQkBwqDsWJh4ioqKFyNc4PioJcxUhQtgxlxLLZsA4nC43B5vL44AEOqcdu03BNRNszQoqPZWgguDAUKdLph7D79BNVErrPcyAARAMHbhBvyIX2XI57U7nNBvD5fAh/AFAkHuKjg5LQgDMVBycIRcGRqJaGNqctxBKJEBJZIpVNp9OwjK7LKobIQHK5PPb2D5yTAwtFsEQqAwOG+AHULvI46IkFHDMcJvZM9hjjmLicTGUfgAWGz65BwHY4DgACkYjGSlRiUXGIgAJTxPEyq2DAHBQNMSC6OI56vpwZA1tCZAAFb6hMJplGYVDQJYeJtJo7AwIIWrdNUiBQCw1Q0FIoShJq5DegspggbK3AABJQFQ2iGE03AnpcainK0xBcCqmyieQviKDhlhhq65AmrwlxbJgJE9KMAbrqiNBkOsmziNUcbxqYaDKgAkgAamQXE8Yo1R6CcJrxG0XR3O09AqPmnwQN8xaAsCoIVhC0J3hAIgNu4zZom2WKcdxvGdsyxKkgQ5KUtSdIMlyY4TlOXYzvFfJ2UlS6QCuEo6d8Xjmd0GwoFYlheFIAhlKVhgAEqYLq+pkG4WiwIIlzKgsNAGP1UBSDAnr+oGwYvHoUoKMoqgaIaxpjMcJEINokmcONZBPC88iXpcJruEqHAsKYensIpZAALKYAw3qPc8MDpCQioqmqGpavpUAbFs5AAMMAEUAEMAAGQwAKWQ9BqMGJHyeGcYtW1tmJYYOp6pc74iC9KilIBTX5HVMANWQ75U6gZMQzD8OsAeelQCY55SLQE0DZIjo1PFZA/gLdTY/Z5OJpqOA+YWvz/IFySxOWlbVjkESAgCCLoh8LbogQtUfQ1yXdr26X9llQ4jilPbjuynKFT4fj+HyBv1agi4ALpAA=="
4012
}
4113
]);
4214
});
4315
});
4416

45-
const TEST_STRING = `...<li><h1>Starship</h1><div>Starship and Super Heavy Rocket represent a fully reusable transportation system designed to service all Earth orbit needs as well as the Moon and Mars. This two-stage vehicle — composed of the Super Heavy rocket (booster) and Starship (ship) — will eventually replace Falcon 9, Falcon Heavy and Dragon.</div><br><div>More info at&nbsp;<a href="https://en.wikipedia.org/wiki/SpaceX_Starship" target="_blank" rel="noreferrer">https://en.wikipedia.org/wiki/SpaceX_Starship</a></div></li></ul></pb-spacex></pb-cell></pb-grid></pb-block></pb-document></main><footer data-testid="pb-footer" class="wby-1lh86qf"><div class="wby-xv6w56"><div class="logo wby-1i3ok2b"><a href="/"></a><div class="copy">DEVR © 2024</div></div></div></footer></div></div><pe-loader-data-cache data-key="GfT8AoRsYT-1238102521" data-value="[{&quot;id&quot;:&quot;5e9d0d95eda69955f709d1eb&quot;,&quot;name&quot;:&quot;Falcon 1&quot;,&quot;description&quot;:&quot;The Falcon 1 was an expendable launch system privately developed and manufactured by SpaceX during 2006-2009. On 28 September 2008, Falcon 1 became the first privately-developed liquid-fuel launch vehicle to go into orbit around the Earth.&quot;,&quot;wikipedia&quot;:&quot;https://en.wikipedia.org/wiki/Falcon_1&quot;},{&quot;id&quot;:&quot;5e9d0d95eda69973a809d1ec&quot;,&quot;name&quot;:&quot;Falcon 9&quot;,&quot;description&quot;:&quot;Falcon 9 is a two-stage rocket designed and manufactured by SpaceX for the reliable and safe transport of satellites and the Dragon spacecraft into orbit.&quot;,&quot;wikipedia&quot;:&quot;https://en.wikipedia.org/wiki/Falcon_9&quot;},{&quot;id&quot;:&quot;5e9d0d95eda69974db09d1ed&quot;,&quot;name&quot;:&quot;Falcon Heavy&quot;,&quot;description&quot;:&quot;With the ability to lift into orbit over 54 metric tons (119,000 lb)--a mass equivalent to a 737 jetliner loaded with passengers, crew, luggage and fuel--Falcon Heavy can lift more than twice the payload of the next closest operational vehicle, the Delta IV Heavy, at one-third the cost.&quot;,&quot;wikipedia&quot;:&quot;https://en.wikipedia.org/wiki/Falcon_Heavy&quot;},{&quot;id&quot;:&quot;5e9d0d96eda699382d09d1ee&quot;,&quot;name&quot;:&quot;Starship&quot;,&quot;description&quot;:&quot;Starship and Super Heavy Rocket represent a fully reusable transportation system designed to service all Earth orbit needs as well as the Moon and Mars. This two-stage vehicle — composed of the Super Heavy rocket (booster) and Starship (ship) — will eventually replace Falcon 9, Falcon Heavy and Dragon.&quot;,&quot;wikipedia&quot;:&quot;https://en.wikipedia.org/wiki/SpaceX_Starship&quot;}]"></pe-loader-data-cache></body></html>`;
17+
const TEST_STRING = `...<li><h1>Starship</h1><div>Starship and Super Heavy Rocket represent a fully reusable transportation system designed to service all Earth orbit needs as well as the Moon and Mars. This two-stage vehicle — composed of the Super Heavy rocket (booster) and Starship (ship) — will eventually replace Falcon 9, Falcon Heavy and Dragon.</div><br><div>More info at&nbsp;<a href="https://en.wikipedia.org/wiki/SpaceX_Starship" target="_blank" rel="noreferrer">https://en.wikipedia.org/wiki/SpaceX_Starship</a></div></li></ul></pb-spacex></pb-cell></pb-grid></pb-block></pb-document></main><footer data-testid="pb-footer" class="wby-1lh86qf"><div class="wby-xv6w56"><div class="logo wby-1i3ok2b"><a href="/"></a><div class="copy">DEVR © 2024</div></div></div></footer></div></div><pe-loader-data-cache data-key="GfT8AoRsYT-1238102521" data-value="pe_NobwRAJgpgzgxgJwJYAcAuSD2A7MAuMAFQAsoACAMQEMAbOHMgRjIHcqYyrsyoAPFKNghUARjXI0qAV2xxiZGAE8YaKAFsyKZADcqqmorLRtUGpgEROQsmq5SAZlThopCKJZGGAyiidQAGkauSNgA5mQATAAMUQBsALTRUQCcAHRkAPLcEQAcZF5Q6OoiUAiRMTkANJS09NzMJXBUauRopGT2SAgqmjp6porxxqbm7mQ0SACOUkgQ8fZSpuPSsvImxEhw4mRomGSheyG7ZJgIIkhonAiYMpZt5ACiVAhtqWCVYLP4YACsUMkQKIQZJ/YSxZIgn72ADsKQgjCgIneYGwzSg32odAYjGRLCQAGtUO4kFRvsQ0GgUDA8AB6GmCVJ4wkWEmpU6hGlMpA0zF1AD6OIAvpVwNB4Mh0FhcAReQxkmQkBwqDsWJh4ioqKFyNc4PioJcxUhQtgxlxLLZsA4nC43B5vL44AEOqcdu03BNRNszQoqPZWgguDAUKdLph7D79BNVErrPcyAARAMHbhBvyIX2XI57U7nNBvD5fAh/AFAkHuKjg5LQgDMVBycIRcGRqJaGNqctxBKJEBJZIpVNp9OwjK7LKobIQHK5PPb2D5yTAwtFsEQqAwOG+AHULvI46IkFHDMcJvZM9hjjmLicTGUfgAWGz65BwHY4DgACkYjGSlRiUXGIgAJTxPEyq2DAHBQNMSC6OI56vpwZA1tCZAAFb6hMJplGYVDQJYeJtJo7AwIIWrdNUiBQCw1Q0FIoShJq5DegspggbK3AABJQFQ2iGE03AnpcainK0xBcCqmyieQviKDhlhhq65AmrwlxbJgJE9KMAbrqiNBkOsmziNUcbxqYaDKgAkgAamQXE8Yo1R6CcJrxG0XR3O09AqPmnwQN8xaAsCoIVhC0J3hAIgNu4zZom2WKcdxvGdsyxKkgQ5KUtSdIMlyY4TlOXYzvFfJ2UlS6QCuEo6d8Xjmd0GwoFYlheFIAhlKVhgAEqYLq+pkG4WiwIIlzKgsNAGP1UBSDAnr+oGwYvHoUoKMoqgaIaxpjMcJEINokmcONZBPC88iXpcJruEqHAsKYensIpZAALKYAw3qPc8MDpCQioqmqGpavpUAbFs5AAMMAEUAEMAAGQwAKWQ9BqMGJHyeGcYtW1tmJYYOp6pc74iC9KilIBTX5HVMANWQ75U6gZMQzD8OsAeelQCY55SLQE0DZIjo1PFZA/gLdTY/Z5OJpqOA+YWvz/IFySxOWlbVjkESAgCCLoh8LbogQtUfQ1yXdr26X9llQ4jilPbjuynKFT4fj+HyBv1agi4ALpAA=="></pe-loader-data-cache></body></html>`;

packages/api-prerendering-service/package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
"@webiny/handler-client": "0.0.0",
2525
"@webiny/plugins": "0.0.0",
2626
"@webiny/utils": "0.0.0",
27-
"he": "^1.2.0",
2827
"lodash": "^4.17.21",
2928
"object-hash": "^3.0.0",
3029
"pluralize": "^8.0.0",
@@ -41,7 +40,6 @@
4140
"@babel/plugin-proposal-export-default-from": "^7.23.3",
4241
"@babel/preset-env": "^7.24.0",
4342
"@babel/preset-typescript": "^7.23.3",
44-
"@types/he": "^1.2.3",
4543
"@types/object-hash": "^2.2.1",
4644
"@types/puppeteer-core": "^5.4.0",
4745
"@webiny/cli": "0.0.0",

packages/api-prerendering-service/src/render/extractPeLoaderDataFromHtml.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { PeLoaderCacheEntry } from "./types";
2-
import he from "he";
32

43
const parsePeLoaderDataCacheTag = (content: string): PeLoaderCacheEntry | null => {
54
const regex =
@@ -14,10 +13,7 @@ const parsePeLoaderDataCacheTag = (content: string): PeLoaderCacheEntry | null =
1413

1514
const [, key, value] = m;
1615

17-
// JSON in `data-value` is HTML Entities-encoded. So, we need to decode it here first.
18-
const heParsedValue = he.decode(value);
19-
const parsedValue = JSON.parse(heParsedValue);
20-
return { key, value: parsedValue };
16+
return { key, value };
2117
}
2218

2319
return null;

packages/app-website/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"apollo-link": "^1.2.14",
2727
"apollo-link-batch-http": "^1.2.14",
2828
"graphql-tag": "^2.12.6",
29+
"lz-string": "^1.5.0",
2930
"react": "18.2.0",
3031
"react-dom": "18.2.0",
3132
"react-helmet": "^6.1.0",

packages/app-website/src/Website.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ export interface WebsiteProps extends AppProps {
1818
const PageBuilderProviderHOC: Decorator<
1919
GenericComponent<{ children: React.ReactNode }>
2020
> = PreviousProvider => {
21-
const websiteLoaderCache = useMemo(() => {
22-
return new WebsiteLoaderCache();
23-
}, []);
24-
2521
return function PageBuilderProviderHOC({ children }) {
22+
const websiteLoaderCache = useMemo(() => {
23+
return new WebsiteLoaderCache();
24+
}, []);
25+
2626
return (
2727
<PageBuilderProvider loaderCache={websiteLoaderCache}>
2828
<PreviousProvider>{children}</PreviousProvider>

packages/app-website/src/utils/WebsiteLoaderCache.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { ILoaderCache } from "@webiny/app-page-builder-elements/hooks/useLoader/ILoaderCache";
22
import { getPrerenderId, isPrerendering } from "@webiny/app/utils";
3-
import { PeLoaderHtmlCache } from "~/utils/WebsiteLoaderCache/PeLoaderHtmlCache";
3+
import { PeLoaderHtmlCache } from "./WebsiteLoaderCache/PeLoaderHtmlCache";
44

55
export class WebsiteLoaderCache implements ILoaderCache {
66
private loaderCache: Record<string, any> = {};
@@ -19,7 +19,12 @@ export class WebsiteLoaderCache implements ILoaderCache {
1919
return this.loaderCache[key];
2020
}
2121

22-
write<TData = unknown>(key: string, value: TData) {
22+
write<TData = unknown>(key: string, rawValue: TData) {
23+
// We assume it's compressed data if the value is a string.
24+
const value = PeLoaderHtmlCache.isCompressedData<TData>(rawValue)
25+
? PeLoaderHtmlCache.decompressData(rawValue as string)
26+
: rawValue;
27+
2328
this.loaderCache[key] = value;
2429

2530
if (isPrerendering()) {

packages/app-website/src/utils/WebsiteLoaderCache/PeLoaderHtmlCache.ts

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import lzString from "lz-string";
2+
3+
const COMPRESSED_DATA_PREFIX = "pe_";
4+
15
export class PeLoaderHtmlCache {
26
static read<TData = unknown>(key: string) {
37
const htmlElement = document.querySelector(`pe-loader-data-cache[data-key="${key}"]`);
@@ -11,16 +15,30 @@ export class PeLoaderHtmlCache {
1115
}
1216

1317
try {
14-
return JSON.parse(cachedResultElementValue) as TData;
18+
return PeLoaderHtmlCache.decompressData(cachedResultElementValue) as TData;
1519
} catch {
1620
return null;
1721
}
1822
}
1923

2024
static write<TData = unknown>(key: string, value: TData) {
21-
const html = `<pe-loader-data-cache data-key="${key}" data-value='${JSON.stringify(
25+
const html = `<pe-loader-data-cache data-key="${key}" data-value='${PeLoaderHtmlCache.compressData<TData>(
2226
value
2327
)}'></pe-loader-data-cache>`;
2428
document.body.insertAdjacentHTML("beforeend", html);
2529
}
30+
31+
static compressData<TData>(data: TData) {
32+
return COMPRESSED_DATA_PREFIX + lzString.compressToBase64(JSON.stringify(data));
33+
}
34+
35+
static decompressData(data: string) {
36+
return JSON.parse(
37+
lzString.decompressFromBase64(data.replace(COMPRESSED_DATA_PREFIX, "")) as string
38+
);
39+
}
40+
41+
static isCompressedData<TData>(data: TData) {
42+
return typeof data === "string" && data.startsWith(COMPRESSED_DATA_PREFIX);
43+
}
2644
}

yarn.lock

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12121,13 +12121,6 @@ __metadata:
1212112121
languageName: node
1212212122
linkType: hard
1212312123

12124-
"@types/he@npm:^1.2.3":
12125-
version: 1.2.3
12126-
resolution: "@types/he@npm:1.2.3"
12127-
checksum: e77851c73dd7b9902d92fe0118a26246a7f3676a3a1c6eb1408305187ef73b57c22550b1435946b983267f961d935554d5d0e1b458416932552f31e763e1aa41
12128-
languageName: node
12129-
linkType: hard
12130-
1213112124
"@types/hoist-non-react-statics@npm:^3.3.5":
1213212125
version: 3.3.5
1213312126
resolution: "@types/hoist-non-react-statics@npm:3.3.5"
@@ -14843,7 +14836,6 @@ __metadata:
1484314836
"@babel/preset-typescript": ^7.23.3
1484414837
"@babel/runtime": ^7.24.0
1484514838
"@sparticuz/chromium": 123.0.1
14846-
"@types/he": ^1.2.3
1484714839
"@types/object-hash": ^2.2.1
1484814840
"@types/puppeteer-core": ^5.4.0
1484914841
"@webiny/api": 0.0.0
@@ -14856,7 +14848,6 @@ __metadata:
1485614848
"@webiny/plugins": 0.0.0
1485714849
"@webiny/project-utils": 0.0.0
1485814850
"@webiny/utils": 0.0.0
14859-
he: ^1.2.0
1486014851
lodash: ^4.17.21
1486114852
object-hash: ^3.0.0
1486214853
pluralize: ^8.0.0
@@ -16722,6 +16713,7 @@ __metadata:
1672216713
apollo-link: ^1.2.14
1672316714
apollo-link-batch-http: ^1.2.14
1672416715
graphql-tag: ^2.12.6
16716+
lz-string: ^1.5.0
1672516717
react: 18.2.0
1672616718
react-dom: 18.2.0
1672716719
react-helmet: ^6.1.0

0 commit comments

Comments
 (0)