Eliminate compiler warnings

src/bricks/transformers/ephemeralForm/formTransformer.ts

@@ -23,6 +23,7 @@ import { type BrickConfig } from "@/bricks/types";
 import { type FormDefinition } from "@/platform/forms/formTypes";
 import { isExpression } from "@/utils/expressionUtils";
 import type { PlatformCapability } from "@/platform/capabilities";
+import { assertNotNullish } from "@/utils/nullishUtils";
 
 export const TEMPORARY_FORM_SCHEMA: Schema = {
   type: "object",
@@ -135,15 +136,19 @@ export class FormTransformer extends TransformerABC {
       controller.abort();
     });
 
-    if (logger.context.extensionId == null) {
-      throw new Error(`${this.name} must be run in a mod context`);
-    }
+    const { extensionId, blueprintId, extensionPointId } = logger.context;
+
+    assertNotNullish(extensionId, `${this.name} must be run in a mod context`);
+    assertNotNullish(
+      extensionPointId,
+      `${this.name} must be run in a starter brick context`,
+    );
 
     try {
       return await platform.form(formDefinition, controller, {
-        extensionId: logger.context.extensionId,
-        blueprintId: logger.context.blueprintId,
-        extensionPointId: logger.context.extensionPointId,
+        extensionId,
+        blueprintId,
+        extensionPointId,
       });
     } finally {
       controller.abort();

src/bricks/transformers/temporaryInfo/DisplayTemporaryInfo.ts

@@ -114,6 +114,7 @@ class DisplayTemporaryInfo extends TransformerABC {
 
     const target = isRootAware ? root : document;
     assumeNotNullish_UNSAFE(extensionId);
+    assumeNotNullish_UNSAFE(extensionPointId);
     // XXX: blueprintId can actually be nullish if not running on the context of a mod. But assume it's non-nullish
     //  for passing to the panel for now. The panel can gracefully handle nullish blueprintId.
     assumeNotNullish_UNSAFE(blueprintId);
@@ -123,7 +124,7 @@ class DisplayTemporaryInfo extends TransformerABC {
 
     const panelEntryMetadata: TemporaryPanelEntryMetadata = {
       heading: title,
-      componentRef: {
+      modComponentRef: {
         extensionId,
         blueprintId,
         extensionPointId,

src/bricks/transformers/temporaryInfo/EphemeralPanel.tsx

@@ -174,7 +174,7 @@ const EphemeralPanel: React.FC = () => {
             <PanelBody
               isRootPanel={false}
               payload={entry.payload}
-              context={entry.componentRef}
+              context={entry.modComponentRef}
               onAction={(action) => {
                 resolveTemporaryPanel(target, panelNonce, action);
               }}
@@ -216,7 +216,7 @@ const EphemeralPanel: React.FC = () => {
           <PanelBody
             isRootPanel={false}
             payload={entry.payload}
-            context={entry.componentRef}
+            context={entry.modComponentRef}
             onAction={(action) => {
               resolveTemporaryPanel(target, panelNonce, action);
             }}

src/contentScript/ephemeralForm.ts

@@ -54,7 +54,7 @@ export async function createFrameSource(
 export async function ephemeralForm(
   definition: FormDefinition,
   controller: AbortController,
-  componentRef: ModComponentRef,
+  modComponentRef: ModComponentRef,
 ): Promise<unknown> {
   expectContext("contentScript");
 
@@ -71,8 +71,8 @@ export async function ephemeralForm(
   // Pre-registering the form also allows the sidebar to know a form will be shown in computing the default
   // tab to show during sidebar initialization.
   const formPromise = registerForm({
-    componentRef,
     nonce: formNonce,
+    modComponentRef,
     definition,
   });
 
@@ -83,7 +83,7 @@ export async function ephemeralForm(
     await showSidebarForm({
       nonce: formNonce,
       form: definition,
-      componentRef,
+      modComponentRef,
     });
 
     // Two-way binding between sidebar and form. Listen for the user (or an action) closing the sidebar

src/contentScript/ephemeralPanel.ts

@@ -114,7 +114,7 @@ export async function ephemeralPanel({
     registerEmptyTemporaryPanel({
       nonce,
       location,
-      extensionId: panelEntryMetadata.componentRef.extensionId,
+      extensionId: panelEntryMetadata.modComponentRef.extensionId,
     });
 
     await showSidebar();
@@ -125,7 +125,7 @@ export async function ephemeralPanel({
       nonce,
       payload: {
         key: uuidv4(),
-        extensionId: panelEntryMetadata.componentRef.extensionId,
+        extensionId: panelEntryMetadata.modComponentRef.extensionId,
         loadingMessage: "Loading",
       },
     });
@@ -141,14 +141,14 @@ export async function ephemeralPanel({
     // Popover/modal location
     // Clear existing to remove stale modals/popovers
     await cancelTemporaryPanelsForExtension(
-      panelEntryMetadata.componentRef.extensionId,
+      panelEntryMetadata.modComponentRef.extensionId,
     );
 
     // Register empty panel for "loading" state
     registerEmptyTemporaryPanel({
       nonce,
       location,
-      extensionId: panelEntryMetadata.componentRef.extensionId,
+      extensionId: panelEntryMetadata.modComponentRef.extensionId,
     });
 
     // Create a source URL for content that will be loaded in the panel iframe
@@ -235,7 +235,7 @@ export async function ephemeralPanel({
       nonce,
       location,
       entry,
-      extensionId: entry.componentRef.extensionId,
+      extensionId: entry.modComponentRef.extensionId,
       onRegister: onReady,
     });
     return panelAction ?? {};

src/contentScript/pageEditor/runRendererBrick.ts

@@ -47,13 +47,13 @@ type Location = "modal" | "panel";
  * @see useDocumentPreviewRunBlock
  */
 export async function runRendererBrick({
-  componentRef,
+  modComponentRef,
   runId,
   title,
   args,
   location,
 }: {
-  componentRef: ModComponentRef;
+  modComponentRef: ModComponentRef;
   runId: UUID;
   title: string;
   args: RunBrickArgs;
@@ -63,7 +63,7 @@ export async function runRendererBrick({
 
   let payload: PanelPayload;
   try {
-    await runBrickPreview({ ...args, modId: componentRef.blueprintId });
+    await runBrickPreview({ ...args, modId: modComponentRef.blueprintId });
     // We're expecting a HeadlessModeError (or other error) to be thrown in the line above
     // noinspection ExceptionCaughtLocallyJS
     throw new NoRendererError();
@@ -74,22 +74,22 @@ export async function runRendererBrick({
         blockId: error.blockId,
         args: error.args,
         ctxt: error.ctxt,
-        extensionId: componentRef.extensionId,
+        extensionId: modComponentRef.extensionId,
         runId,
       };
     } else {
       payload = {
         key: nonce,
         error: serializeError(error),
-        extensionId: componentRef.extensionId,
+        extensionId: modComponentRef.extensionId,
         runId,
       };
     }
 
     if (location === "panel") {
       await showTemporarySidebarPanel({
         // Pass component ref id so previous run is cancelled
-        componentRef,
+        modComponentRef,
         nonce,
         heading: title,
         payload,
@@ -104,9 +104,9 @@ export async function runRendererBrick({
         await waitForTemporaryPanel({
           nonce,
           location,
-          extensionId: componentRef.extensionId,
+          extensionId: modComponentRef.extensionId,
           entry: {
-            componentRef,
+            modComponentRef,
             nonce,
             heading: title,
             payload,

src/contentScript/sidebarController.tsx

@@ -372,7 +372,7 @@ export function removeModComponents(modComponentIds: UUID[]): void {
   const current = panels.splice(0);
   panels.push(
     ...current.filter(
-      (x) => !modComponentIds.includes(x.componentRef.extensionId),
+      (x) => !modComponentIds.includes(x.modComponentRef.extensionId),
     ),
   );
   void renderPanelsIfVisible();
@@ -393,7 +393,7 @@ export function removeStarterBrick(
   console.debug("sidebarController:removeStarterBrick %s", starterBrickId, {
     preserveExtensionIds,
     panels: panels.filter(
-      (x) => x.componentRef.extensionPointId === starterBrickId,
+      (x) => x.modComponentRef.extensionPointId === starterBrickId,
     ),
   });
 
@@ -402,8 +402,8 @@ export function removeStarterBrick(
   panels.push(
     ...current.filter(
       (x) =>
-        x.componentRef.extensionPointId !== starterBrickId ||
-        preserveExtensionIds.includes(x.componentRef.extensionId),
+        x.modComponentRef.extensionPointId !== starterBrickId ||
+        preserveExtensionIds.includes(x.modComponentRef.extensionId),
     ),
   );
 
@@ -418,12 +418,12 @@ export function reservePanels(refs: ModComponentRef[]): void {
     return;
   }
 
-  const current = new Set(panels.map((x) => x.componentRef.extensionId));
+  const current = new Set(panels.map((x) => x.modComponentRef.extensionId));
   for (const { extensionId, extensionPointId, blueprintId } of refs) {
     if (!current.has(extensionId)) {
       const entry: PanelEntry = {
         type: "panel",
-        componentRef: {
+        modComponentRef: {
           extensionId,
           extensionPointId,
           blueprintId,
@@ -448,14 +448,16 @@ export function reservePanels(refs: ModComponentRef[]): void {
 }
 
 export function updateHeading(extensionId: UUID, heading: string): void {
-  const entry = panels.find((x) => x.componentRef.extensionId === extensionId);
+  const entry = panels.find(
+    (x) => x.modComponentRef.extensionId === extensionId,
+  );
 
   if (entry) {
     entry.heading = heading;
     console.debug(
       "updateHeading: update heading for panel %s for %s",
       extensionId,
-      entry.componentRef.extensionPointId,
+      entry.modComponentRef.extensionPointId,
       { ...entry },
     );
     void renderPanelsIfVisible();
@@ -473,7 +475,7 @@ export function upsertPanel(
   payload: PanelPayload,
 ): void {
   const entry = panels.find(
-    (panel) => panel.componentRef.extensionId === extensionId,
+    (panel) => panel.modComponentRef.extensionId === extensionId,
   );
   if (entry) {
     entry.payload = payload;
@@ -500,7 +502,7 @@ export function upsertPanel(
     );
     panels.push({
       type: "panel",
-      componentRef: {
+      modComponentRef: {
         extensionId,
         extensionPointId,
         blueprintId,

src/pageEditor/starterBricks/modComponentFormStateAdapter.ts

@@ -20,7 +20,7 @@ import { type IconProp } from "@fortawesome/fontawesome-svg-core";
 import { type Metadata } from "@/types/registryTypes";
 import { type StarterBrickDefinitionLike } from "@/starterBricks/types";
 import { type StarterBrickType } from "@/types/starterBrickTypes";
-import type { DraftModComponent } from "@/contentScript/pageEditor/types";
+import { type DraftModComponent } from "@/contentScript/pageEditor/types";
 import { type ModComponentBase } from "@/types/modComponentTypes";
 import { type Target } from "@/types/messengerTypes";
 import { type BaseFormState } from "@/pageEditor/store/editor/baseFormStateTypes";
@@ -120,5 +120,6 @@ export interface ModComponentFormStateAdapter<
    */
   readonly selectModComponent: (
     modComponentFormState: TState,
-  ) => ModComponentBase;
+  ) => // XXX: refine type to enforce starter brick reference is the registry id and not an inner definition reference
+  ModComponentBase;
 }

src/pageEditor/tabs/effect/useDocumentPreviewRunBlock.ts

@@ -37,6 +37,9 @@ import { isExpression } from "@/utils/expressionUtils";
 import makeIntegrationsContextFromDependencies from "@/integrations/util/makeIntegrationsContextFromDependencies";
 import useAsyncState from "@/hooks/useAsyncState";
 import { inspectedTab } from "@/pageEditor/context/connection";
+import { ADAPTERS } from "@/pageEditor/starterBricks/adapter";
+import { validateRegistryId } from "@/types/helpers";
+import { assertNotNullish } from "@/utils/nullishUtils";
 
 type Location = "modal" | "panel";
 
@@ -103,13 +106,16 @@ export default function useDocumentPreviewRunBlock(
 ): BlockPreviewRunBlock {
   const [state, dispatch] = useReducer(previewSlice.reducer, initialState);
 
+  const formState = useSelector(selectActiveModComponentFormState);
+
   const {
+    type,
     uuid: modComponentId,
-    modMetadata: mod,
+    modMetadata,
     apiVersion,
     integrationDependencies,
     starterBrick,
-  } = useSelector(selectActiveModComponentFormState);
+  } = formState;
 
   const { blockConfig: brickConfig } = useSelector(
     selectActiveModComponentNodeInfo(brickInstanceId),
@@ -173,6 +179,12 @@ export default function useDocumentPreviewRunBlock(
 
       dispatch(previewSlice.actions.startPreview());
 
+      const adapter = ADAPTERS.get(type);
+      const starterBrickId = validateRegistryId(
+        adapter.selectModComponent(formState).extensionPointId,
+      );
+      assertNotNullish(starterBrickId, "Expected starter brick id");
+
       // If the block is configured to inherit the root element, and the
       // starter brick is a trigger, try to get the root element from the
       // starter brick.
@@ -193,9 +205,10 @@ export default function useDocumentPreviewRunBlock(
         await runRendererBrick(inspectedTab, {
           runId: traceRecord.runId,
           title,
-          componentRef: {
+          modComponentRef: {
             extensionId: modComponentId,
-            blueprintId: mod?.id,
+            blueprintId: modMetadata?.id,
+            extensionPointId: starterBrickId,
           },
           args: {
             apiVersion,