Improve bundle size, dynamic imports & remove parse5 (#10865)

* Remove unused import

* Lazy load tar-js and pako for rageshakes

* Update cheerio imports

* Replace parse5 with DOMParser

* Remove stale comment

src/HtmlUtils.tsx

@@ -19,7 +19,7 @@ limitations under the License.
 
 import React, { LegacyRef, ReactElement, ReactNode } from "react";
 import sanitizeHtml from "sanitize-html";
-import cheerio from "cheerio";
+import { load as cheerio } from "cheerio";
 import classNames from "classnames";
 import EMOJIBASE_REGEX from "emojibase-regex";
 import { merge, split } from "lodash";
@@ -549,7 +549,7 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
             }
 
             safeBody = sanitizeHtml(formattedBody!, sanitizeParams);
-            const phtml = cheerio.load(safeBody, {
+            const phtml = cheerio(safeBody, {
                 // @ts-ignore: The `_useHtmlParser2` internal option is the
                 // simplest way to both parse and render using `htmlparser2`.
                 _useHtmlParser2: true,

src/SlashCommands.tsx

@@ -22,7 +22,6 @@ import { User } from "matrix-js-sdk/src/models/user";
 import { Direction } from "matrix-js-sdk/src/models/event-timeline";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import * as ContentHelpers from "matrix-js-sdk/src/content-helpers";
-import { Element as ChildElement, parseFragment as parseHtml } from "parse5";
 import { logger } from "matrix-js-sdk/src/logger";
 import { IContent } from "matrix-js-sdk/src/models/event";
 import { MRoomTopicEventContent } from "matrix-js-sdk/src/@types/topic";
@@ -1003,16 +1002,15 @@ export const Commands = [
 
             // Try and parse out a widget URL from iframes
             if (widgetUrl.toLowerCase().startsWith("<iframe ")) {
-                // We use parse5, which doesn't render/create a DOM node. It instead runs
-                // some superfast regex over the text so we don't have to.
-                const embed = parseHtml(widgetUrl);
+                const embed = new DOMParser().parseFromString(widgetUrl, "text/html").body;
                 if (embed?.childNodes?.length === 1) {
-                    const iframe = embed.childNodes[0] as ChildElement;
-                    if (iframe.tagName.toLowerCase() === "iframe" && iframe.attrs) {
-                        const srcAttr = iframe.attrs.find((a) => a.name === "src");
+                    const iframe = embed.firstElementChild;
+                    if (iframe.tagName.toLowerCase() === "iframe") {
                         logger.log("Pulling URL out of iframe (embed code)");
-                        if (!srcAttr) return reject(new UserFriendlyError("iframe has no src attribute"));
-                        widgetUrl = srcAttr.value;
+                        if (!iframe.hasAttribute("src")) {
+                            return reject(new UserFriendlyError("iframe has no src attribute"));
+                        }
+                        widgetUrl = iframe.getAttribute("src");
                     }
                 }
             }

src/editor/serialize.ts

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import { encode } from "html-entities";
-import cheerio from "cheerio";
+import { load as cheerio } from "cheerio";
 import escapeHtml from "escape-html";
 
 import Markdown from "../Markdown";
@@ -143,7 +143,7 @@ export function htmlSerializeFromMdIfNeeded(md: string, { forceHTML = false } =
     const parser = new Markdown(md);
     if (!parser.isPlainText() || forceHTML) {
         // feed Markdown output to HTML parser
-        const phtml = cheerio.load(parser.toHTML(), {
+        const phtml = cheerio(parser.toHTML(), {
             // @ts-ignore: The `_useHtmlParser2` internal option is the
             // simplest way to both parse and render using `htmlparser2`.
             _useHtmlParser2: true,
@@ -153,7 +153,7 @@ export function htmlSerializeFromMdIfNeeded(md: string, { forceHTML = false } =
         if (SettingsStore.getValue("feature_latex_maths")) {
             // original Markdown without LaTeX replacements
             const parserOrig = new Markdown(orig);
-            const phtmlOrig = cheerio.load(parserOrig.toHTML(), {
+            const phtmlOrig = cheerio(parserOrig.toHTML(), {
                 // @ts-ignore: The `_useHtmlParser2` internal option is the
                 // simplest way to both parse and render using `htmlparser2`.
                 _useHtmlParser2: true,

src/rageshake/submit-rageshake.ts

@@ -16,10 +16,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import pako from "pako";
-import Tar from "tar-js";
 import { logger } from "matrix-js-sdk/src/logger";
 
+import type * as Pako from "pako";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import PlatformPeg from "../PlatformPeg";
 import { _t } from "../languageHandler";
@@ -177,6 +176,11 @@ async function collectBugReport(opts: IOpts = {}, gzipLogs = true): Promise<Form
     body.append("mx_local_settings", localStorage.getItem("mx_local_settings")!);
 
     if (opts.sendLogs) {
+        let pako: typeof Pako | undefined;
+        if (gzipLogs) {
+            pako = await import("pako");
+        }
+
         progressCallback(_t("Collecting logs"));
         const logs = await rageshake.getLogsForReport();
         for (const entry of logs) {
@@ -237,6 +241,7 @@ export default async function sendBugReport(bugReportEndpoint?: string, opts: IO
  * @return {Promise} Resolved when the bug report is downloaded (or started).
  */
 export async function downloadBugReport(opts: IOpts = {}): Promise<void> {
+    const Tar = (await import("tar-js")).default;
     const progressCallback = opts.progressCallback || ((): void => {});
     const body = await collectBugReport(opts, false);