#7670: Use <IsolatedComponent> for DocumentView, EphemeralFormContent, CustomFormComponent

scripts/DiscardFilePlugin.mjs

@@ -19,11 +19,6 @@ export default class DiscardFilePlugin {
             // If `delete assets[]` causes issues in the future, try replacing the content instead:
             // assets["DocumentView.js"] = new webpack.sources.RawSource('"Dropped"');
           }
-
-          // TODO: Use <IsolatedComponent/> and move these to isolatedComponentList
-          delete assets["DocumentView.js"];
-          delete assets["EphemeralFormContent.js"];
-          delete assets["CustomFormComponent.js"];
         },
       );
     });

src/bricks/renderers/CustomFormComponent.tsx

@@ -15,6 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import "@/vendors/bootstrapWithoutRem.css";
+import "@/sidebar/sidebarBootstrapOverrides.scss";
+import "@/bricks/renderers/customForm.css";
 import React, { useEffect, useRef, useState } from "react";
 import { type Schema, type UiSchema } from "@/types/schemaTypes";
 import { type JsonObject } from "type-fest";
@@ -24,14 +27,13 @@ import { Stylesheets } from "@/components/Stylesheets";
 import JsonSchemaForm from "@rjsf/bootstrap-4";
 import validator from "@/validators/formValidator";
 import { type IChangeEvent } from "@rjsf/core";
+import { templates } from "@/components/formBuilder/RjsfTemplates";
 import ImageCropWidget from "@/components/formBuilder/ImageCropWidget";
 import RjsfSelectWidget from "@/components/formBuilder/RjsfSelectWidget";
 import DescriptionField from "@/components/formBuilder/DescriptionField";
 import TextAreaWidget from "@/components/formBuilder/TextAreaWidget";
 import RjsfSubmitContext from "@/components/formBuilder/RjsfSubmitContext";
-import { templates } from "@/components/formBuilder/RjsfTemplates";
 import { cloneDeep } from "lodash";
-import { useStylesheetsContextWithFormDefault } from "@/components/StylesheetsContext";
 
 const FIELDS = {
   DescriptionField,
@@ -43,7 +45,7 @@ const UI_WIDGETS = {
   TextareaWidget: TextAreaWidget,
 } as const;
 
-const CustomFormComponent: React.FunctionComponent<{
+export type CustomFormComponentProps = {
   schema: Schema;
   uiSchema: UiSchema;
   submitCaption: string;
@@ -63,8 +65,11 @@ const CustomFormComponent: React.FunctionComponent<{
   resetOnSubmit?: boolean;
   className?: string;
   stylesheets?: string[];
-  disableParentStyles?: boolean;
-}> = ({
+};
+
+const CustomFormComponent: React.FunctionComponent<
+  CustomFormComponentProps
+> = ({
   schema,
   uiSchema,
   submitCaption,
@@ -73,8 +78,7 @@ const CustomFormComponent: React.FunctionComponent<{
   className,
   onSubmit,
   resetOnSubmit = false,
-  stylesheets: newStylesheets,
-  disableParentStyles = false,
+  stylesheets,
 }) => {
   // Use useRef instead of useState because we don't need/want a re-render when count changes
   // This ref is used to track the onSubmit run number for runtime tracing
@@ -95,11 +99,6 @@ const CustomFormComponent: React.FunctionComponent<{
     setKey((prev) => prev + 1);
   };
 
-  const { stylesheets } = useStylesheetsContextWithFormDefault({
-    newStylesheets,
-    disableParentStyles,
-  });
-
   const submitData = async (data: UnknownObject): Promise<void> => {
     submissionCountRef.current += 1;
     await onSubmit(data, {

src/bricks/renderers/customForm.test.tsx

@@ -16,7 +16,8 @@
  */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
+import { screen } from "shadow-dom-testing-library";
 import ImageCropWidget from "@/components/formBuilder/ImageCropWidget";
 import DescriptionField from "@/components/formBuilder/DescriptionField";
 import JsonSchemaForm from "@rjsf/bootstrap-4";
@@ -228,9 +229,10 @@
     );
 
     render(<Component {...props} />);
+    await waitForEffect();
 
     expect(screen.queryByText("Submit")).not.toBeInTheDocument();
-    expect(screen.getByRole("textbox")).toBeInTheDocument();
+    expect(screen.getByShadowRole("textbox")).toBeInTheDocument();
   });
 
   test("Supports postSubmitAction reset", async () => {
@@ -261,17 +263,19 @@
 
     render(<Component {...props} />);
 
-    const textBox = screen.getByRole("textbox");
+    await waitForEffect();
+
+    const textBox = screen.getByShadowRole("textbox");
     await userEvent.type(textBox, "Some text");
     expect(textBox).toHaveValue("Some text");
-    await userEvent.click(screen.getByRole("button", { name: "Submit" }));
+    await userEvent.click(screen.getByShadowRole("button", { name: "Submit" }));
 
     expect(runPipelineMock).toHaveBeenCalledOnce();
 
     expect(dataStoreSetSpy).not.toHaveBeenCalled();
 
     // Need to get new textbox reference, because the old one is removed when the key changes
-    expect(screen.getByRole("textbox")).toHaveValue("");
+    expect(screen.getByShadowRole("textbox")).toHaveValue("");
   });
 
   test.each([undefined, "save"])(
@@ -304,18 +308,22 @@
 
       render(<Component {...props} />);
 
+      await waitForEffect();
+
       const value = "Some text";
-      const textBox = screen.getByRole("textbox");
+      const textBox = screen.getByShadowRole("textbox");
       await userEvent.type(textBox, value);
-      await userEvent.click(screen.getByRole("button", { name: "Submit" }));
+      await userEvent.click(
+        screen.getByShadowRole("button", { name: "Submit" }),
+      );
 
       expect(runPipelineMock).toHaveBeenCalledOnce();
       expect(dataStoreSetSpy).toHaveBeenCalledExactlyOnceWith("test", {
         name: value,
       });
 
       // Need to get new textbox reference, because the old one is removed if/when the key changes
-      expect(screen.getByRole("textbox")).toHaveValue(value);
+      expect(screen.getByShadowRole("textbox")).toHaveValue(value);
     },
   );
 

src/bricks/renderers/customForm.ts → src/bricks/renderers/customForm.tsx

@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import React from "react";
 import { type JsonObject } from "type-fest";
 import { dataStore } from "@/background/messenger/strict/api";
 import { validateRegistryId } from "@/types/helpers";
@@ -46,6 +47,8 @@ import { getOutputReference, validateOutputKey } from "@/runtime/runtimeTypes";
 import { type BrickConfig } from "@/bricks/types";
 import { isExpression } from "@/utils/expressionUtils";
 import { getPlatform } from "@/platform/platformContext";
+import IsolatedComponent from "@/components/IsolatedComponent";
+import { type CustomFormComponentProps } from "./CustomFormComponent";
 
 interface DatabaseResult {
   success: boolean;
@@ -297,10 +300,20 @@ export class CustomFormRenderer extends RendererABC {
       normalizedData,
     });
 
-    // Changed webpackChunkName to de-conflict with the manual entry in webpack used to load in the stylesheets
-    const { default: CustomFormComponent } = await import(
-      /* webpackChunkName: "CustomFormRendererComponent" */
-      "./CustomFormComponent"
+    const CustomFormComponent: React.FunctionComponent<
+      CustomFormComponentProps
+    > = (props) => (
+      <IsolatedComponent
+        name="CustomFormComponent"
+        noStyle={disableParentStyles}
+        lazy={async () =>
+          import(
+            /* webpackChunkName: "isolated/CustomFormComponent" */
+            "./CustomFormComponent"
+          )
+        }
+        factory={(CustomFormComponent) => <CustomFormComponent {...props} />}
+      />
     );
 
     return {
@@ -314,7 +327,6 @@ export class CustomFormRenderer extends RendererABC {
         submitCaption,
         className,
         stylesheets,
-        disableParentStyles,
         // Option only applies if a custom onSubmit handler is provided
         resetOnSubmit: onSubmit != null && postSubmitAction === "reset",
         async onSubmit(

src/bricks/renderers/document.ts → src/bricks/renderers/document.tsx

@@ -15,8 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import React from "react";
 import { RendererABC } from "@/types/bricks/rendererTypes";
-import DocumentViewLazy from "./documentView/DocumentViewLazy";
 import { validateRegistryId } from "@/types/helpers";
 import {
   type BrickArgs,
@@ -28,6 +28,8 @@ import {
   DOCUMENT_ELEMENT_TYPES,
   type DocumentElement,
 } from "@/components/documentBuilder/documentBuilderTypes";
+import IsolatedComponent from "@/components/IsolatedComponent";
+import { type DocumentViewProps } from "./documentView/DocumentViewProps";
 
 export const DOCUMENT_SCHEMA: Schema = {
   $schema: "https://json-schema.org/draft/2019-09/schema#",
@@ -107,12 +109,30 @@ export class DocumentRenderer extends RendererABC {
     }>,
     options: BrickOptions,
   ): Promise<ComponentRef> {
+    const DocumentView: React.FC<DocumentViewProps> = (props) => (
+      <IsolatedComponent
+        name="DocumentView"
+        noStyle={disableParentStyles}
+        lazy={async () =>
+          import(
+            /* webpackChunkName: "isolated/DocumentView" */
+            "./documentView/DocumentView"
+          )
+        }
+        factory={(DocumentView) => <DocumentView {...props} />}
+        // It must fill the frame even if `noStyle` is set, so set it as a style prop
+        // TODO: The parent node should instead make sure that the children fill
+        // the sidebar vertically (via a simple `.d-flex`), but this this requires
+        // verifying that other components aren't broken by this.
+        style={{ height: "100%" }}
+      />
+    );
+
     return {
-      Component: DocumentViewLazy,
+      Component: DocumentView,
       props: {
         body,
         stylesheets,
-        disableParentStyles,
         options,
       },
     };

src/bricks/renderers/documentView/DocumentView.tsx

@@ -15,21 +15,18 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import "@/vendors/bootstrapWithoutRem.css";
+import "@/sidebar/sidebarBootstrapOverrides.scss";
 import { buildDocumentBranch } from "@/components/documentBuilder/documentTree";
 import React from "react";
-import EmotionShadowRoot from "@/components/EmotionShadowRoot";
 import { type DocumentViewProps } from "./DocumentViewProps";
 import DocumentContext from "@/components/documentBuilder/render/DocumentContext";
 import { Stylesheets } from "@/components/Stylesheets";
 import { joinPathParts } from "@/utils/formUtils";
-import StylesheetsContext, {
-  useStylesheetsContextWithDocumentDefault,
-} from "@/components/StylesheetsContext";
 
 const DocumentView: React.FC<DocumentViewProps> = ({
   body,
-  stylesheets: newStylesheets,
-  disableParentStyles,
+  stylesheets,
   options,
   meta,
   onAction,
@@ -44,35 +41,26 @@ const DocumentView: React.FC<DocumentViewProps> = ({
     throw new Error("meta.extensionId is required for DocumentView");
   }
 
-  const { stylesheets } = useStylesheetsContextWithDocumentDefault({
-    newStylesheets,
-    disableParentStyles,
-  });
-
   return (
     // Wrap in a React context provider that passes BrickOptions down to any embedded bricks
     <DocumentContext.Provider value={{ options, onAction }}>
-      <EmotionShadowRoot className="h-100">
-        <StylesheetsContext.Provider value={{ stylesheets }}>
-          <Stylesheets href={stylesheets}>
-            {body.map((documentElement, index) => {
-              const documentBranch = buildDocumentBranch(documentElement, {
-                staticId: joinPathParts("body", "children"),
-                // Root of the document, so no branches taken yet
-                branches: [],
-              });
+      <Stylesheets href={stylesheets}>
+        {body.map((documentElement, index) => {
+          const documentBranch = buildDocumentBranch(documentElement, {
+            staticId: joinPathParts("body", "children"),
+            // Root of the document, so no branches taken yet
+            branches: [],
+          });
 
-              if (documentBranch == null) {
-                return null;
-              }
+          if (documentBranch == null) {
+            return null;
+          }
 
-              const { Component, props } = documentBranch;
-              // eslint-disable-next-line react/no-array-index-key -- They have no other unique identifier
-              return <Component key={index} {...props} />;
-            })}
-          </Stylesheets>
-        </StylesheetsContext.Provider>
-      </EmotionShadowRoot>
+          const { Component, props } = documentBranch;
+          // eslint-disable-next-line react/no-array-index-key -- They have no other unique identifier
+          return <Component key={index} {...props} />;
+        })}
+      </Stylesheets>
     </DocumentContext.Provider>
   );
 };

src/bricks/renderers/documentView/DocumentViewProps.tsx

@@ -33,10 +33,7 @@ export type DocumentViewProps = {
    * Remote stylesheets (URLs) to include in the document.
    */
   stylesheets?: string[];
-  /**
-   * Whether to disable the base (bootstrap) styles, plus any inherited styles, on the document (and children).
-   */
-  disableParentStyles?: boolean;
+
   options: BrickOptions<BrickArgsContext>;
   meta: {
     runId: UUID;