datocms-plugin-sdk 1.1.0 → 2.0.0

package/src/connect.ts

@@ -1,494 +1,159 @@
-import type { SchemaTypes } from '@datocms/cma-client';
 import connectToParent from 'penpal/lib/connectToParent';
-import type {
-  ItemFormOutlet,
-  RenderItemFormOutletMethods,
-  RenderItemFormOutletPropertiesAndMethods,
-  StructuredTextCustomBlockStyle,
-  StructuredTextCustomMark,
-} from '.';
+import type { AssetSourcesHook } from './hooks/assetSources';
+import type { BuildItemPresentationInfoHook } from './hooks/buildItemPresentationInfo';
+import type { ContentAreaSidebarItemsHook } from './hooks/contentAreaSidebarItems';
+import type { CustomBlockStylesForStructuredTextFieldHook } from './hooks/customBlockStylesForStructuredTextField';
+import type { CustomMarksForStructuredTextFieldHook } from './hooks/customMarksForStructuredTextField';
+import type { ExecuteFieldDropdownActionHook } from './hooks/executeFieldDropdownAction';
+import type { ExecuteItemFormDropdownActionHook } from './hooks/executeItemFormDropdownAction';
+import type { ExecuteItemsDropdownActionHook } from './hooks/executeItemsDropdownAction';
+import type { ExecuteUploadsDropdownActionHook } from './hooks/executeUploadsDropdownAction';
+import type { FieldDropdownActionsHook } from './hooks/fieldDropdownActions';
+import type { InitialLocationQueryForItemSelectorHook } from './hooks/initialLocationQueryForItemSelector';
+import type { ItemCollectionOutletsHook } from './hooks/itemCollectionOutlets';
+import type { ItemFormDropdownActionsHook } from './hooks/itemFormDropdownActions';
+import type { ItemFormOutletsHook } from './hooks/itemFormOutlets';
+import type { ItemFormSidebarPanelsHook } from './hooks/itemFormSidebarPanels';
+import type { ItemFormSidebarsHook } from './hooks/itemFormSidebars';
+import type { ItemsDropdownActionsHook } from './hooks/itemsDropdownActions';
+import type { MainNavigationTabsHook } from './hooks/mainNavigationTabs';
+import type { ManualFieldExtensionsHook } from './hooks/manualFieldExtensions';
+import type { OnBeforeItemUpsertHook } from './hooks/onBeforeItemUpsert';
+import type { OnBeforeItemsDestroyHook } from './hooks/onBeforeItemsDestroy';
+import type { OnBeforeItemsPublishHook } from './hooks/onBeforeItemsPublish';
+import type { OnBeforeItemsUnpublishHook } from './hooks/onBeforeItemsUnpublish';
+import type { OnBootHook } from './hooks/onBoot';
+import type { OverrideFieldExtensionsHook } from './hooks/overrideFieldExtensions';
 import {
-  type Parent,
-  isOnBootParent,
-  isRenderAssetSourceParent,
-  isRenderConfigScreenParent,
-  isRenderFieldExtensionParent,
-  isRenderItemFormOutletParent,
-  isRenderManualFieldExtensionConfigScreenParent,
-  isRenderModalParent,
-  isRenderPageParent,
-  isRenderSidebarPanelParent,
-  isRenderSidebarParent,
-} from './guards';
-import type {
-  AssetSource,
-  ContentAreaSidebarItem,
-  FieldExtensionOverride,
-  InitPropertiesAndMethods,
-  InitialLocationQueryForItemSelector,
-  ItemFormSidebar,
-  ItemFormSidebarPanel,
-  ItemPresentationInfo,
-  MainNavigationTab,
-  ManualFieldExtension,
-  OnBootMethods,
-  OnBootPropertiesAndMethods,
-  RenderAssetSourceMethods,
-  RenderAssetSourcePropertiesAndMethods,
-  RenderConfigScreenMethods,
-  RenderConfigScreenPropertiesAndMethods,
-  RenderFieldExtensionMethods,
-  RenderFieldExtensionPropertiesAndMethods,
-  RenderManualFieldExtensionConfigScreenMethods,
-  RenderManualFieldExtensionConfigScreenPropertiesAndMethods,
-  RenderModalMethods,
-  RenderModalPropertiesAndMethods,
-  RenderPageMethods,
-  RenderPagePropertiesAndMethods,
-  RenderSidebarMethods,
-  RenderSidebarPanelMethods,
-  RenderSidebarPanelPropertiesAndMethods,
-  RenderSidebarPropertiesAndMethods,
-  SettingsAreaSidebarItemGroup,
-} from './types';
-
-type Field = SchemaTypes.Field;
-type Item = SchemaTypes.Item;
-type ItemCreateSchema = SchemaTypes.ItemCreateSchema;
-type ItemType = SchemaTypes.ItemType;
-type ItemUpdateSchema = SchemaTypes.ItemUpdateSchema;
-
-export type SizingUtilities = {
-  /**
-   * Listens for DOM changes and automatically calls `setHeight` when it detects
-   * a change. If you're using `datocms-react-ui` package, the `<Canvas />`
-   * component already takes care of calling this method for you.
-   */
-  startAutoResizer: () => void;
-  /** Stops resizing the iframe automatically */
-  stopAutoResizer: () => void;
-  /**
-   * Triggers a change in the size of the iframe. If you don't explicitely pass
-   * a `newHeight` it will be automatically calculated using the iframe content
-   * at the moment
-   */
-  updateHeight: (newHeight?: number) => void;
-};
-
-export type { Field, ItemType };
-
-export type IntentCtx = InitPropertiesAndMethods;
-export type OnBootCtx = OnBootPropertiesAndMethods;
-export type FieldIntentCtx = InitPropertiesAndMethods & {
-  itemType: ItemType;
-};
-export type RenderPageCtx = RenderPagePropertiesAndMethods;
-export type RenderModalCtx = RenderModalPropertiesAndMethods & SizingUtilities;
-export type RenderAssetSourceCtx = RenderAssetSourcePropertiesAndMethods &
-  SizingUtilities;
-export type RenderItemFormSidebarPanelCtx =
-  RenderSidebarPanelPropertiesAndMethods & SizingUtilities;
-export type RenderItemFormSidebarCtx = RenderSidebarPropertiesAndMethods &
-  SizingUtilities;
-export type RenderItemFormOutletCtx = RenderItemFormOutletPropertiesAndMethods &
-  SizingUtilities;
-export type RenderFieldExtensionCtx = RenderFieldExtensionPropertiesAndMethods &
-  SizingUtilities;
-export type RenderManualFieldExtensionConfigScreenCtx =
-  RenderManualFieldExtensionConfigScreenPropertiesAndMethods & SizingUtilities;
-export type RenderConfigScreenCtx = RenderConfigScreenPropertiesAndMethods &
-  SizingUtilities;
-
-type MaybePromise<T> = T | Promise<T>;
+  RenderAssetSourceHook,
+  renderAssetSourceBootstrapper,
+} from './hooks/renderAssetSource';
+import {
+  RenderConfigScreenHook,
+  renderConfigScreenBootstrapper,
+} from './hooks/renderConfigScreen';
+import {
+  RenderFieldExtensionHook,
+  renderFieldExtensionBootstrapper,
+} from './hooks/renderFieldExtension';
+import {
+  RenderItemCollectionOutletHook,
+  renderItemCollectionOutletBootstrapper,
+} from './hooks/renderItemCollectionOutlet';
+import {
+  RenderItemFormOutletHook,
+  renderItemFormOutletBootstrapper,
+} from './hooks/renderItemFormOutlet';
+import {
+  RenderItemFormSidebarHook,
+  renderItemFormSidebarBootstrapper,
+} from './hooks/renderItemFormSidebar';
+import {
+  RenderItemFormSidebarPanelHook,
+  renderItemFormSidebarPanelBootstrapper,
+} from './hooks/renderItemFormSidebarPanel';
+import {
+  RenderManualFieldExtensionConfigScreenHook,
+  renderManualFieldExtensionConfigScreenBootstrapper,
+} from './hooks/renderManualFieldExtensionConfigScreen';
+import { RenderModalHook, renderModalBootstrapper } from './hooks/renderModal';
+import { RenderPageHook, renderPageBootstrapper } from './hooks/renderPage';
+import {
+  RenderUploadSidebarHook,
+  renderUploadSidebarBootstrapper,
+} from './hooks/renderUploadSidebar';
+import {
+  RenderUploadSidebarPanelHook,
+  renderUploadSidebarPanelBootstrapper,
+} from './hooks/renderUploadSidebarPanel';
+import type { SettingsAreaSidebarItemGroupsHook } from './hooks/settingsAreaSidebarItemGroups';
+import { UploadSidebarPanelsHook } from './hooks/uploadSidebarPanels';
+import { UploadSidebarsHook } from './hooks/uploadSidebars';
+import type { UploadsDropdownActionsHook } from './hooks/uploadsDropdownActions';
+import type { ValidateManualFieldExtensionParametersHook } from './hooks/validateManualFieldExtensionParameters';
+import {
+  Bootstrapper,
+  ExtractRenderHooks,
+  fromOneFieldIntoMultipleAndResultsById,
+  omit,
+} from './utils';
 
 /** The full options you can pass to the `connect` function */
-export type FullConnectParameters = {
-  /**
-   * This function will be called once at boot time and can be used to perform
-   * ie. some initial integrity checks on the configuration.
-   *
-   * @tag boot
-   */
-  onBoot: (ctx: OnBootCtx) => void;
-
-  /**
-   * This function will be called before destroying records. You can stop the
-   * action by returning `false`
-   *
-   * @tag beforeHooks
-   */
-  onBeforeItemsDestroy: (
-    items: Item[],
-    ctx: OnBootCtx,
-  ) => MaybePromise<boolean>;
-
-  /**
-   * This function will be called before publishing records. You can stop the
-   * action by returning `false`
-   *
-   * @tag beforeHooks
-   */
-  onBeforeItemsPublish: (
-    items: Item[],
-    ctx: OnBootCtx,
-  ) => MaybePromise<boolean>;
-
-  /**
-   * This function will be called before unpublishing records. You can stop the
-   * action by returning `false`
-   *
-   * @tag beforeHooks
-   */
-  onBeforeItemsUnpublish: (
-    items: Item[],
-    ctx: OnBootCtx,
-  ) => MaybePromise<boolean>;
-
-  /**
-   * This function will be called before saving a new version of a record. You
-   * can stop the action by returning `false`
-   *
-   * @tag beforeHooks
-   */
-  onBeforeItemUpsert: (
-    createOrUpdateItemPayload: ItemUpdateSchema | ItemCreateSchema,
-    ctx: OnBootCtx,
-  ) => MaybePromise<boolean>;
-
-  /**
-   * Use this function to customize the presentation of a record in records
-   * collections and "Single link" or "Multiple links" field
-   *
-   * @tag presentation
-   */
-  buildItemPresentationInfo: (
-    item: Item,
-    ctx: OnBootCtx,
-  ) => MaybePromise<ItemPresentationInfo | undefined>;
-
-  /**
-   * Use this function to customize the initial filters when opening an record
-   * selector via a "Single link" or "Multiple links" field
-   *
-   * @tag locationQuery
-   */
-  initialLocationQueryForItemSelector: (
-    openerfield: Item,
-    itemType: ItemType,
-    ctx: OnBootCtx,
-  ) => MaybePromise<InitialLocationQueryForItemSelector | undefined>;
-
-  /**
-   * Use this function to declare new tabs you want to add in the top-bar of the
-   * UI
-   *
-   * @tag pages
-   */
-  mainNavigationTabs: (ctx: IntentCtx) => MainNavigationTab[];
-  /**
-   * Use this function to declare new navigation sections in the Settings Area
-   * sidebar
-   *
-   * @tag pages
-   */
-  settingsAreaSidebarItemGroups: (
-    ctx: IntentCtx,
-  ) => SettingsAreaSidebarItemGroup[];
-  /**
-   * Use this function to declare new navigation items in the Content Area
-   * sidebar
-   *
-   * @tag pages
-   */
-  contentAreaSidebarItems: (ctx: IntentCtx) => ContentAreaSidebarItem[];
-  /**
-   * Use this function to declare new field extensions that users will be able
-   * to install manually in some field
-   *
-   * @tag manualFieldExtensions
-   */
-  manualFieldExtensions: (ctx: IntentCtx) => ManualFieldExtension[];
-  /**
-   * Use this function to declare additional sources to be shown when users want
-   * to upload new assets
-   *
-   * @tag assetSources
-   */
-  assetSources: (ctx: IntentCtx) => AssetSource[] | undefined;
-  /**
-   * Use this function to declare new sidebar panels to be shown when the user
-   * edits records of a particular model
-   *
-   * @tag sidebarPanels
-   */
-  itemFormSidebarPanels: (
-    itemType: ItemType,
-    ctx: IntentCtx,
-  ) => ItemFormSidebarPanel[];
-
-  /**
-   * Use this function to declare new sidebar to be shown when the user edits
-   * records of a particular model
-   *
-   * @tag sidebarPanels
-   */
-  itemFormSidebars: (itemType: ItemType, ctx: IntentCtx) => ItemFormSidebar[];
-
-  /**
-   * Use this function to declare custom outlets to be shown at the top of the
-   * record's editing page
-   *
-   * @tag itemFormOutlets
-   */
-  itemFormOutlets: (itemType: ItemType, ctx: IntentCtx) => ItemFormOutlet[];
-
-  /**
-   * Use this function to automatically force one or more field extensions to a
-   * particular field
-   *
-   * @tag forcedFieldExtensions
-   */
-  overrideFieldExtensions: (
-    field: Field,
-    ctx: FieldIntentCtx,
-  ) => FieldExtensionOverride | undefined;
-
-  /**
-   * Use this function to define a number of custom marks for a specific
-   * Structured Text field
-   *
-   * @tag structuredText
-   */
-  customMarksForStructuredTextField: (
-    field: Field,
-    ctx: FieldIntentCtx,
-  ) => StructuredTextCustomMark[] | undefined;
-
-  /**
-   * Use this function to define a number of custom block styles for a specific
-   * Structured Text field
-   *
-   * @tag structuredText
-   */
-  customBlockStylesForStructuredTextField: (
-    field: Field,
-    ctx: FieldIntentCtx,
-  ) => StructuredTextCustomBlockStyle[] | undefined;
-
-  /**
-   * This function will be called when the plugin needs to render the plugin's
-   * configuration form
-   *
-   * @tag configScreen
-   */
-  renderConfigScreen: (ctx: RenderConfigScreenCtx) => void;
-  /**
-   * This function will be called when the plugin needs to render a specific
-   * page (see the `mainNavigationTabs`, `settingsAreaSidebarItemGroups` and
-   * `contentAreaSidebarItems` functions)
-   *
-   * @tag pages
-   */
-  renderPage: (pageId: string, ctx: RenderPageCtx) => void;
-  /**
-   * This function will be called when the plugin requested to open a modal (see
-   * the `openModal` function)
-   *
-   * @tag modals
-   */
-  renderModal: (modalId: string, ctx: RenderModalCtx) => void;
-  /**
-   * This function will be called when the plugin needs to render a sidebar
-   * panel (see the `itemFormSidebarPanels` function)
-   *
-   * @tag sidebarPanels
-   */
-  renderItemFormSidebarPanel: (
-    sidebarPaneId: string,
-    ctx: RenderItemFormSidebarPanelCtx,
-  ) => void;
-  /**
-   * This function will be called when the plugin needs to render a sidebar (see
-   * the `itemFormSidebars` function)
-   *
-   * @tag sidebarPanels
-   */
-  renderItemFormSidebar: (
-    sidebarId: string,
-    ctx: RenderItemFormSidebarCtx,
-  ) => void;
-  /**
-   * This function will be called when the plugin needs to render an outlet (see
-   * the `itemFormOutlets` function)
-   *
-   * @tag itemFormOutlets
-   */
-  renderItemFormOutlet: (
-    itemFormOutletId: string,
-    ctx: RenderItemFormOutletCtx,
-  ) => void;
-  /**
-   * This function will be called when the user selects one of the plugin's
-   * asset sources to upload a new media file.
-   *
-   * @tag assetSources
-   */
-  renderAssetSource: (assetSourceId: string, ctx: RenderAssetSourceCtx) => void;
-  /**
-   * This function will be called when the plugin needs to render a field
-   * extension (see the `manualFieldExtensions` and `overrideFieldExtensions`
-   * functions)
-   *
-   * @tag forcedFieldExtensions
-   */
-  renderFieldExtension: (
-    fieldExtensionId: string,
-    ctx: RenderFieldExtensionCtx,
-  ) => void;
-  /**
-   * This function will be called when the plugin needs to render the
-   * configuration form for installing a field extension inside a particular
-   * field
-   *
-   * @tag manualFieldExtensions
-   */
-  renderManualFieldExtensionConfigScreen: (
-    fieldExtensionId: string,
-    ctx: RenderManualFieldExtensionConfigScreenCtx,
-  ) => void;
-  /**
-   * This function will be called each time the configuration object changes. It
-   * must return an object containing possible validation errors
-   *
-   * @tag manualFieldExtensions
-   */
-  validateManualFieldExtensionParameters: (
-    fieldExtensionId: string,
-    parameters: Record<string, unknown>,
-  ) => Record<string, unknown> | Promise<Record<string, unknown>>;
-};
-
-function toMultifield<Result>(
-  fn: ((field: Field, ctx: FieldIntentCtx) => Result) | undefined,
-) {
-  return (
-    fields: Field[],
-    ctx: InitPropertiesAndMethods,
-  ): Record<string, Result> => {
-    if (!fn) {
-      return {};
-    }
-
-    const result: Record<string, Result> = {};
-
-    for (const field of fields) {
-      const itemType = ctx.itemTypes[
-        field.relationships.item_type.data.id
-      ] as ItemType;
-      result[field.id] = fn(field, { ...ctx, itemType });
-    }
-
-    return result;
-  };
-}
-
-type AwaitedReturnType<T extends (...args: any) => any> = Awaited<
-  ReturnType<T>
->;
-
-function getMaxScrollHeight() {
-  const elements = document.querySelectorAll('body *');
-  let maxVal = 0;
-  for (let i = 0; i < elements.length; i++) {
-    maxVal = Math.max(elements[i].getBoundingClientRect().bottom, maxVal);
-  }
-  return maxVal;
-}
-
-const buildRenderUtils = (parent: { setHeight: (number: number) => void }) => {
-  let oldHeight: null | number = null;
-
-  const updateHeight = (height?: number) => {
-    const realHeight =
-      height === undefined
-        ? Math.max(
-            document.body.scrollHeight,
-            document.body.offsetHeight,
-            document.documentElement.getBoundingClientRect().height,
-            getMaxScrollHeight(),
-          )
-        : height;
-
-    if (realHeight !== oldHeight) {
-      parent.setHeight(realHeight);
-      oldHeight = realHeight;
-    }
-  };
-
-  let resizeObserver: ResizeObserver | null = null;
-  let mutationObserver: MutationObserver | null = null;
-  const onMutation = () => updateHeight();
-
-  const startAutoResizer = () => {
-    updateHeight();
-
-    if (!resizeObserver) {
-      resizeObserver = new ResizeObserver(onMutation);
-      resizeObserver.observe(document.documentElement);
-    }
-
-    if (!mutationObserver) {
-      mutationObserver = new MutationObserver(onMutation);
-
-      mutationObserver.observe(window.document.body, {
-        attributes: true,
-        childList: true,
-        subtree: true,
-        characterData: true,
-      });
-    }
-  };
-
-  const stopAutoResizer = () => {
-    if (resizeObserver) {
-      resizeObserver.disconnect();
-      resizeObserver = null;
-    }
-
-    if (mutationObserver) {
-      mutationObserver.disconnect();
-      mutationObserver = null;
-    }
-  };
-
-  return { updateHeight, startAutoResizer, stopAutoResizer };
-};
+export type FullConnectParameters = AssetSourcesHook &
+  BuildItemPresentationInfoHook &
+  ContentAreaSidebarItemsHook &
+  CustomBlockStylesForStructuredTextFieldHook &
+  CustomMarksForStructuredTextFieldHook &
+  ExecuteFieldDropdownActionHook &
+  ExecuteItemFormDropdownActionHook &
+  ExecuteItemsDropdownActionHook &
+  ExecuteUploadsDropdownActionHook &
+  FieldDropdownActionsHook &
+  InitialLocationQueryForItemSelectorHook &
+  ItemCollectionOutletsHook &
+  ItemFormDropdownActionsHook &
+  ItemFormOutletsHook &
+  ItemFormSidebarPanelsHook &
+  ItemFormSidebarsHook &
+  ItemsDropdownActionsHook &
+  MainNavigationTabsHook &
+  ManualFieldExtensionsHook &
+  OnBeforeItemsDestroyHook &
+  OnBeforeItemsPublishHook &
+  OnBeforeItemsUnpublishHook &
+  OnBeforeItemUpsertHook &
+  OnBootHook &
+  OverrideFieldExtensionsHook &
+  RenderAssetSourceHook &
+  RenderConfigScreenHook &
+  RenderFieldExtensionHook &
+  RenderItemCollectionOutletHook &
+  RenderItemFormOutletHook &
+  RenderItemFormSidebarHook &
+  RenderItemFormSidebarPanelHook &
+  RenderManualFieldExtensionConfigScreenHook &
+  RenderModalHook &
+  RenderPageHook &
+  RenderUploadSidebarHook &
+  RenderUploadSidebarPanelHook &
+  SettingsAreaSidebarItemGroupsHook &
+  UploadsDropdownActionsHook &
+  UploadSidebarPanelsHook &
+  UploadSidebarsHook &
+  ValidateManualFieldExtensionParametersHook;
 
 export async function connect(
-  configuration: Partial<FullConnectParameters> = {},
+  rawConfiguration: Partial<FullConnectParameters> = {},
 ): Promise<void> {
-  const {
-    assetSources,
-    mainNavigationTabs,
-    settingsAreaSidebarItemGroups,
-    contentAreaSidebarItems,
-    manualFieldExtensions,
-    itemFormSidebarPanels,
-    itemFormSidebars,
-    itemFormOutlets,
-  } = configuration;
-  let listener: ((newSettings: any) => void) | null = null;
+  let onChangeListener: ((newSettings: any) => void) | null = null;
+
   let callMethodMergingBootCtxExecutor:
     | ((
         methodName: string,
         methodArgs: unknown[],
-        extraCtx: Record<string, unknown>,
+        extraCtxProperties: Record<string, unknown>,
+        extraCtxMethodKeys: string[],
+        methodCallId: string,
       ) => void)
     | null = null;
 
+  const configuration = {
+    ...rawConfiguration,
+    overrideFieldExtensions: fromOneFieldIntoMultipleAndResultsById(
+      rawConfiguration.overrideFieldExtensions,
+    ),
+    customMarksForStructuredTextField: fromOneFieldIntoMultipleAndResultsById(
+      rawConfiguration.customMarksForStructuredTextField,
+    ),
+    customBlockStylesForStructuredTextField:
+      fromOneFieldIntoMultipleAndResultsById(
+        rawConfiguration.customBlockStylesForStructuredTextField,
+      ),
+  };
+
   const penpalConnection = connectToParent({
     methods: {
-      sdkVersion: () => '0.2.0',
+      sdkVersion: () => '0.3.0',
       implementedHooks: () =>
         Object.fromEntries(
           Object.entries(configuration).map(([key, value]) => {
@@ -499,32 +164,27 @@ export async function connect(
             return [key, value];
           }),
         ),
-      assetSources,
-      mainNavigationTabs,
-      settingsAreaSidebarItemGroups,
-      contentAreaSidebarItems,
-      manualFieldExtensions,
-      itemFormSidebarPanels,
-      itemFormSidebars,
-      itemFormOutlets,
-      overrideFieldExtensions: toMultifield(
-        configuration.overrideFieldExtensions,
-      ),
-      customMarksForStructuredTextField: toMultifield(
-        configuration.customMarksForStructuredTextField,
-      ),
-      customBlockStylesForStructuredTextField: toMultifield(
-        configuration.customBlockStylesForStructuredTextField,
+      // What hooks should we expose via penpal as direct callable methods by CMS?
+      // * all renderXXX hooks will be called via onChange() -> bootstrapper, so not needed
+      // * all non-render hooks ending with ctx will be called via callMethodMergingBootCtx(), so not needed
+      // * only the non-render hooks NOT ending with ctx need to be directly called by the CMS!
+      // In the following lines we're exposing more than needed (all non-render hooks).. but it's OK.
+      ...Object.fromEntries(
+        Object.entries(configuration).filter(
+          ([key]) => !key.startsWith('render'),
+        ),
       ),
       onChange(newSettings: unknown) {
-        if (listener) {
-          listener(newSettings);
+        if (onChangeListener) {
+          onChangeListener(newSettings);
         }
       },
       callMethodMergingBootCtx(
         methodName: string,
         methodArgs: unknown[],
-        extraCtx: Record<string, unknown>,
+        extraCtxProperties: Record<string, unknown>,
+        extraCtxMethodKeys: string[],
+        methodCallId: string,
       ) {
         if (!callMethodMergingBootCtxExecutor) {
           return null;
@@ -532,239 +192,88 @@ export async function connect(
         return callMethodMergingBootCtxExecutor(
           methodName,
           methodArgs,
-          extraCtx,
+          extraCtxProperties,
+          extraCtxMethodKeys,
+          methodCallId,
         );
       },
     },
   });
 
-  const parent: Parent = await penpalConnection.promise;
-  const initialSettings = await parent.getSettings();
+  const methods = await penpalConnection.promise;
+  const initialProperties = await methods.getSettings();
 
-  if (isOnBootParent(parent, initialSettings)) {
-    type Settings = AwaitedReturnType<OnBootMethods['getSettings']>;
-    let currentSettings = initialSettings as Settings;
+  if (initialProperties.mode === 'onBoot') {
+    let currentProperties = initialProperties;
 
-    listener = (newSettings: Settings) => {
-      currentSettings = newSettings;
+    onChangeListener = (newProperties) => {
+      currentProperties = newProperties;
     };
 
     callMethodMergingBootCtxExecutor = (
       methodName: string,
       methodArgs: unknown[],
-      extraCtx: Record<string, unknown>,
+      extraCtxProperties: Record<string, unknown>,
+      extraCtxMethodKeys: string[],
+      methodCallId: string,
     ) => {
       if (!(methodName in configuration)) {
         return undefined;
       }
 
       return (configuration as any)[methodName](...methodArgs, {
-        ...parent,
-        ...currentSettings,
-        ...extraCtx,
+        ...omit(methods, ['getSettings', 'setHeight']),
+        ...omit(currentProperties, ['mode', 'bodyPadding']),
+        ...Object.fromEntries(
+          extraCtxMethodKeys.map((methodName) => [
+            methodName,
+            function createAdditionalMethodProxy(...args: any[]) {
+              return (methods as any).callAdditionalCtxMethod(
+                methodCallId,
+                methodName,
+                args,
+              );
+            },
+          ]),
+        ),
+        ...extraCtxProperties,
       });
     };
 
     if (configuration.onBoot) {
       configuration.onBoot({
-        ...parent,
-        ...currentSettings,
+        ...methods,
+        ...currentProperties,
       });
     }
   }
 
-  if (isRenderPageParent(parent, initialSettings)) {
-    type Settings = AwaitedReturnType<RenderPageMethods['getSettings']>;
-
-    const render = (settings: Settings) => {
-      if (!configuration.renderPage) {
-        return;
-      }
-
-      configuration.renderPage(settings.pageId, {
-        ...parent,
-        ...settings,
-      });
-    };
-
-    listener = render;
-    render(initialSettings as Settings);
-  }
-
-  if (isRenderConfigScreenParent(parent, initialSettings)) {
-    type Settings = AwaitedReturnType<RenderConfigScreenMethods['getSettings']>;
-
-    const renderUtils = buildRenderUtils(parent);
-
-    const render = (settings: Settings) => {
-      if (!configuration.renderConfigScreen) {
-        return;
-      }
-
-      configuration.renderConfigScreen({
-        ...parent,
-        ...settings,
-        ...renderUtils,
-      });
-    };
-
-    listener = render;
-    render(initialSettings as Settings);
-  }
-
-  if (isRenderModalParent(parent, initialSettings)) {
-    type Settings = AwaitedReturnType<RenderModalMethods['getSettings']>;
-
-    const renderUtils = buildRenderUtils(parent);
-
-    const render = (settings: Settings) => {
-      if (!configuration.renderModal) {
-        return;
-      }
-
-      configuration.renderModal(settings.modalId, {
-        ...parent,
-        ...settings,
-        ...renderUtils,
-      });
-    };
-
-    listener = render;
-    render(initialSettings as Settings);
-  }
-
-  if (isRenderAssetSourceParent(parent, initialSettings)) {
-    type Settings = AwaitedReturnType<RenderAssetSourceMethods['getSettings']>;
-
-    const renderUtils = buildRenderUtils(parent);
-
-    const render = (settings: Settings) => {
-      if (!configuration.renderAssetSource) {
-        return;
-      }
-
-      configuration.renderAssetSource(settings.assetSourceId, {
-        ...parent,
-        ...settings,
-        ...renderUtils,
-      });
-    };
-
-    listener = render;
-    render(initialSettings as Settings);
-  }
-
-  if (isRenderSidebarPanelParent(parent, initialSettings)) {
-    type Settings = AwaitedReturnType<RenderSidebarPanelMethods['getSettings']>;
-
-    const renderUtils = buildRenderUtils(parent);
-
-    const render = (settings: Settings) => {
-      if (!configuration.renderItemFormSidebarPanel) {
-        return;
-      }
-
-      configuration.renderItemFormSidebarPanel(settings.sidebarPaneId, {
-        ...parent,
-        ...settings,
-        ...renderUtils,
-      });
-    };
-
-    listener = render;
-    render(initialSettings as Settings);
-  }
-
-  if (isRenderSidebarParent(parent, initialSettings)) {
-    type Settings = AwaitedReturnType<RenderSidebarMethods['getSettings']>;
-
-    const renderUtils = buildRenderUtils(parent);
-
-    const render = (settings: Settings) => {
-      if (!configuration.renderItemFormSidebar) {
-        return;
-      }
-
-      configuration.renderItemFormSidebar(settings.sidebarId, {
-        ...parent,
-        ...settings,
-        ...renderUtils,
-      });
-    };
-
-    listener = render;
-    render(initialSettings as Settings);
-  }
-
-  if (isRenderItemFormOutletParent(parent, initialSettings)) {
-    type Settings = AwaitedReturnType<
-      RenderItemFormOutletMethods['getSettings']
-    >;
-
-    const renderUtils = buildRenderUtils(parent);
-
-    const render = (settings: Settings) => {
-      if (!configuration.renderItemFormOutlet) {
-        return;
-      }
-
-      configuration.renderItemFormOutlet(settings.itemFormOutletId, {
-        ...parent,
-        ...settings,
-        ...renderUtils,
-      });
-    };
-
-    listener = render;
-    render(initialSettings as Settings);
-  }
-
-  if (isRenderFieldExtensionParent(parent, initialSettings)) {
-    type Settings = AwaitedReturnType<
-      RenderFieldExtensionMethods['getSettings']
-    >;
-
-    const renderUtils = buildRenderUtils(parent);
-
-    const render = (settings: Settings) => {
-      if (!configuration.renderFieldExtension) {
-        return;
-      }
-
-      configuration.renderFieldExtension(settings.fieldExtensionId, {
-        ...parent,
-        ...settings,
-        ...renderUtils,
-      });
-    };
-
-    listener = render;
-    render(initialSettings as Settings);
-  }
-
-  if (isRenderManualFieldExtensionConfigScreenParent(parent, initialSettings)) {
-    type Settings = AwaitedReturnType<
-      RenderManualFieldExtensionConfigScreenMethods['getSettings']
-    >;
-
-    const renderUtils = buildRenderUtils(parent);
+  type EnsureAllBootstrappers = {
+    [K in keyof ExtractRenderHooks<FullConnectParameters>]: Bootstrapper<K>;
+  };
 
-    const render = (settings: Settings) => {
-      if (!configuration.renderManualFieldExtensionConfigScreen) {
-        return;
-      }
+  const availableBootstrappers: EnsureAllBootstrappers = {
+    renderAssetSource: renderAssetSourceBootstrapper,
+    renderConfigScreen: renderConfigScreenBootstrapper,
+    renderFieldExtension: renderFieldExtensionBootstrapper,
+    renderItemCollectionOutlet: renderItemCollectionOutletBootstrapper,
+    renderItemFormOutlet: renderItemFormOutletBootstrapper,
+    renderItemFormSidebar: renderItemFormSidebarBootstrapper,
+    renderItemFormSidebarPanel: renderItemFormSidebarPanelBootstrapper,
+    renderManualFieldExtensionConfigScreen:
+      renderManualFieldExtensionConfigScreenBootstrapper,
+    renderModal: renderModalBootstrapper,
+    renderPage: renderPageBootstrapper,
+    renderUploadSidebar: renderUploadSidebarBootstrapper,
+    renderUploadSidebarPanel: renderUploadSidebarPanelBootstrapper,
+  };
 
-      configuration.renderManualFieldExtensionConfigScreen(
-        settings.fieldExtensionId,
-        {
-          ...parent,
-          ...settings,
-          ...renderUtils,
-        },
-      );
-    };
+  for (const bootstrapper of Object.values(availableBootstrappers)) {
+    const result = bootstrapper(configuration, methods, initialProperties);
 
-    listener = render;
-    render(initialSettings as Settings);
+    if (result) {
+      onChangeListener = result;
+      break;
+    }
   }
 }