#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.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,25 @@ 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} />}
+      />
+    );
+
     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;

src/bricks/transformers/ephemeralForm/EphemeralForm.tsx

@@ -26,10 +26,10 @@ import { type Target } from "@/types/messengerTypes";
 import { validateUUID } from "@/types/helpers";
 import { TOP_LEVEL_FRAME_ID } from "@/domConstants";
 import useAsyncState from "@/hooks/useAsyncState";
-import { EphemeralFormContent } from "./EphemeralFormContent";
-import EmotionShadowRoot from "@/components/EmotionShadowRoot";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import useReportError from "@/hooks/useReportError";
+import IsolatedComponent from "@/components/IsolatedComponent";
+import { type EphemeralFormContentProps } from "./EphemeralFormContent";
 
 const ModalLayout: React.FC = ({ children }) => (
   // Don't use React Bootstrap's Modal because we want to customize the classes in the layout
@@ -42,6 +42,22 @@ const PanelLayout: React.FC = ({ children }) => (
   <div className="p-3">{children}</div>
 );
 
+const EphemeralFormContent: React.FunctionComponent<
+  EphemeralFormContentProps
+> = (props) => (
+  <IsolatedComponent
+    name="EphemeralFormContent"
+    noStyle={props.definition.disableParentStyles}
+    lazy={async () =>
+      import(
+        /* webpackChunkName: "isolated/EphemeralFormContent" */
+        "./EphemeralFormContent"
+      )
+    }
+    factory={(EphemeralFormContent) => <EphemeralFormContent {...props} />}
+  />
+);
+
 /**
  * @see FormTransformer
  */
@@ -101,14 +117,12 @@ const EphemeralForm: React.FC = () => {
   return (
     <FormContainer>
       <ErrorBoundary>
-        <EmotionShadowRoot>
-          <EphemeralFormContent
-            definition={formDefinition}
-            target={target}
-            nonce={nonce}
-            isModal={isModal}
-          />
-        </EmotionShadowRoot>
+        <EphemeralFormContent
+          definition={formDefinition}
+          target={target}
+          nonce={nonce}
+          isModal={isModal}
+        />
       </ErrorBoundary>
     </FormContainer>
   );