From c997ff7ada7e063f4483c3754a07fae3df7df5f4 Mon Sep 17 00:00:00 2001 From: Nuckyz <61953774+Nuckyz@users.noreply.github.com> Date: Wed, 27 Mar 2024 17:44:41 -0300 Subject: [PATCH] Fix lazy chunk force loading --- .../pinDms/components/CreateCategoryModal.tsx | 4 +-- src/webpack/webpack.ts | 27 ++++++++++--------- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/plugins/pinDms/components/CreateCategoryModal.tsx b/src/plugins/pinDms/components/CreateCategoryModal.tsx index f38cc88c..309ca69f 100644 --- a/src/plugins/pinDms/components/CreateCategoryModal.tsx +++ b/src/plugins/pinDms/components/CreateCategoryModal.tsx @@ -31,9 +31,9 @@ interface ColorPickerWithSwatchesProps { } const ColorPicker = findComponentByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)"); -const ColorPickerWithSwatches = findComponentByCodeLazy(".presets,", "customColor:"); +const ColorPickerWithSwatches = findComponentByCodeLazy("presets,", "customColor:"); -export const requireSettingsMenu = extractAndLoadChunksLazy(['name:"UserSettings"'], /createPromise:.{0,20}el\("(.+?)"\).{0,50}"UserSettings"/); +export const requireSettingsMenu = extractAndLoadChunksLazy(['name:"UserSettings"'], /createPromise:.{0,20}Promise\.all\((\[\i\.\i\(".+?"\).+?\])\).then\(\i\.bind\(\i,"(.+?)"\)\).{0,50}"UserSettings"/); const cl = classNameFactory("vc-pindms-modal-"); diff --git a/src/webpack/webpack.ts b/src/webpack/webpack.ts index a543a2dc..0790e8bf 100644 --- a/src/webpack/webpack.ts +++ b/src/webpack/webpack.ts @@ -408,10 +408,11 @@ export function findExportedComponentLazy(...props: stri /** * Extract and load chunks using their entry point - * @param code An array of all the code the module factory containing the entry point (as of using it to load chunks) must include - * @param matcher A RegExp that returns the entry point id as the first capture group. Defaults to a matcher that captures the first entry point found in the module factory + * @param code An array of all the code the module factory containing the lazy chunk loading must include + * @param matcher A RegExp that returns the chunk ids array as the first capture group and the entry point id as the second. Defaults to a matcher that captures the lazy chunk loading found in the module factory + * @returns A promise that resolves when the chunks were loaded */ -export async function extractAndLoadChunks(code: string[], matcher: RegExp = /\.el\("(.+?)"\)(?<=(\i)\.el.+?)\.then\(\2\.bind\(\2,"\1"\)\)/) { +export async function extractAndLoadChunks(code: string[], matcher: RegExp = /Promise\.all\((\[\i\.\i\(".+?"\).+?\])\).then\(\i\.bind\(\i,"(.+?)"\)\)/) { const module = findModuleFactory(...code); if (!module) { const err = new Error("extractAndLoadChunks: Couldn't find module factory"); @@ -432,9 +433,9 @@ export async function extractAndLoadChunks(code: string[], matcher: RegExp = /\. return; } - const [, id] = match; - if (!id || !Number(id)) { - const err = new Error("extractAndLoadChunks: Matcher didn't return a capturing group with the entry point, or the entry point returned wasn't a number"); + const [, rawChunkIds, entryPointId] = match; + if (!rawChunkIds || Number.isNaN(entryPointId)) { + const err = new Error("extractAndLoadChunks: Matcher didn't return a capturing group with the chunk ids array, or the entry point id returned as the second group wasn't a number"); logger.warn(err, "Code:", code, "Matcher:", matcher); // Strict behaviour in DevBuilds to fail early and make sure the issue is found @@ -444,19 +445,21 @@ export async function extractAndLoadChunks(code: string[], matcher: RegExp = /\. return; } - await (wreq as any).el(id); - return wreq(id as any); + const chunkIds = Array.from(rawChunkIds.matchAll(/\("(.+?)"\)/g)).map((m: any) => m[1]); + + await Promise.all(chunkIds.map(id => wreq.e(id))); + wreq(entryPointId); } /** * This is just a wrapper around {@link extractAndLoadChunks} to make our reporter test for your webpack finds. * * Extract and load chunks using their entry point - * @param code An array of all the code the module factory containing the entry point (as of using it to load chunks) must include - * @param matcher A RegExp that returns the entry point id as the first capture group. Defaults to a matcher that captures the first entry point found in the module factory - * @returns A function that loads the chunks on first call + * @param code An array of all the code the module factory containing the lazy chunk loading must include + * @param matcher A RegExp that returns the chunk ids array as the first capture group and the entry point id as the second. Defaults to a matcher that captures the lazy chunk loading found in the module factory + * @returns A function that returns a promise that resolves when the chunks were loaded, on first call */ -export function extractAndLoadChunksLazy(code: string[], matcher: RegExp = /\.el\("(.+?)"\)(?<=(\i)\.el.+?)\.then\(\2\.bind\(\2,"\1"\)\)/) { +export function extractAndLoadChunksLazy(code: string[], matcher: RegExp = /Promise\.all\((\[\i\.\i\(".+?"\).+?\])\).then\(\i\.bind\(\i,"(.+?)"\)\)/) { if (IS_DEV) lazyWebpackSearchHistory.push(["extractAndLoadChunks", [code, matcher]]); return () => extractAndLoadChunks(code, matcher);