Breaking changes in front-end SDK v2

Major updates overview

  • Server-Side Rendering (SSR) and personalization (p13n)

    • Full content server-side rendering is now enabled for both author and public instances, improving performance and SEO.

    • Author instance now supports Server-Side Rendering of personalized content.

  • TypeScript migration

    The libraries have been migrated to TypeScript to enhance:

    • Code quality

    • Maintainability

    • Type safety

      JavaScript vs TypeScript SPAs: Do you need to update?

      • JavaScript SPAs: No updates required.

      • TypeScript SPAs: Must update page input declarations.

      • Magnolia samples:

        • Affected (update needed): Angular and Angular-SSR.

        • Unaffected: NextJS, Vue, and Nuxt.

Common changes across libraries

You can find best practice examples of how to work with the Frontend SDK v2 (incorporating all of the following information) in the Starter projects.

Wrapper removal

  • EditorContentHelper and PersonalizationService wrappers have been removed.

  • SPAs must now import these functions directly from @magnolia/frontend-helpers-base:

    import { EditorContextService, PersonalizationService } from '@magnolia/frontend-helpers-base';

Editor context changes

  • Editors now use magnoliaContext to determine page mode (edit/preview) in Magnolia.

  • Replaces previous iframe-based detection (inEditor, inEditorAsync).

New features

  • Added ContentRendererService.

  • Introduced new types:

    • ComponentProps

    • IEditorContextService

    • MgnlContent

    • MgnlTemplateAnnotations

Property removals

  • Removed parentTemplateId property from editable-area.

Framework-specific updates

Angular

Enhanced support

  • editable-area now supports additional children besides content and customView.

  • Supports both tag and directive syntax for editable-area:

    <div class="flex flex-col justify-between min-h-[calc(100vh-5rem)]">
  <main>
    <editable-area [content]="main"></editable-area>
  </main>

  <div editable-area [content]="footer" [customView]="renderFooter"></div>

  <ng-template #renderFooter let-components="components">
    <app-footer-renderer [components]="components"></app-footer-renderer>
  </ng-template>
</div>

Property changes

  • Removed EditorContextService for templateAnnotations and config.

  • Removed templateDefinitions property in editable-page.

  • Added new properties to editable-page:

    <editable-page
    [content]="content"
    [templateAnnotations]="templateAnnotations"
    [magnoliaContext]="magnoliaContext"
    [config]="magnoliaConfig"
></editable-page>

React

  • Updated children processing in editable-area.

    For more details about the differences between children processing in v1 and v2 libraries, see MGNLFE-571 Change the way to process children of EditableArea in ReactEditor.

  • Removed templateDefinitions property from editable-page.

  • Added magnoliaContext property to editable-page.

  • EditablePage, EditableArea, and EditableComponent:

    • In React FEv1, they are class components. They can be extended to create custom components, for example a CustomArea that’s extending the EditableArea.

    • In React FEv2, they are functional components. Therefore, any custom components which extend them must be rewritten.

  • EditablePage, EditableArea, and EditableComponent:

    • In React FEv1, they are class components. They can be extended to create custom components, for example a CustomArea that’s extending the EditableArea.

    • In React FEv2, they are functional components. Therefore, any custom components which extend them must be rewritten.

Vue

  • Added magnoliaContext property to editable-page.

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules