chore: improve dynamic richtext loading

Author: dipankarmaikap

packages/angular/projects/sdk/src/lib/rich-text-node.component.ts

@@ -7,66 +7,49 @@ import {
   ElementRef,
   Renderer2,
   OnInit,
+  OnDestroy,
   Type,
-  ViewContainerRef,
   ViewEncapsulation,
   Injector,
   createComponent,
   EnvironmentInjector,
   ApplicationRef,
+  ComponentRef,
+  signal,
 } from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
+import { isVoidElement } from '@storyblok/richtext';
 import {
-  STORYBLOK_RICHTEXT_COMPONENTS,
+  StoryblokRichtextResolver,
   type AngularRenderNode,
   isTextNode,
   isTagNode,
   isComponentNode,
 } from './richtext.feature';
 
-/**
- * Self-closing HTML elements that don't have children.
- */
-const VOID_ELEMENTS = new Set([
-  'area',
-  'base',
-  'br',
-  'col',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'link',
-  'meta',
-  'param',
-  'source',
-  'track',
-  'wbr',
-]);
-
 /**
  * Recursively renders a single rich text AST node.
  *
  * This component handles three types of nodes:
  * - **Text nodes**: Rendered as plain text
  * - **Tag nodes**: Rendered as HTML elements with attributes
- * - **Component nodes**: Rendered using custom Angular components
+ * - **Component nodes**: Rendered using custom Angular components (supports lazy loading)
  *
  * The component uses Angular's `Renderer2` for SSR-safe DOM manipulation.
  *
- * @internal This component is used internally by `RichTextComponent`.
+ * @internal This component is used internally by `SbRichTextComponent`.
  * Users typically don't need to use this directly, but it's exported
  * for custom component implementations that need to render children.
  *
  * @example Rendering children in a custom component
  * ```typescript
  * @Component({
  *   selector: 'app-custom-link',
- *   imports: [RichTextNodeComponent],
+ *   imports: [SbRichTextNodeComponent],
  *   template: `
  *     <a [href]="href()">
  *       @for (child of children(); track $index) {
- *         <sb-richtext-node [node]="child" />
+ *         <sb-rich-text-node [node]="child" />
  *       }
  *     </a>
  *   `,
@@ -78,53 +61,40 @@ const VOID_ELEMENTS = new Set([
  * ```
  */
 @Component({
-  selector: 'sb-richtext-node',
+  selector: 'sb-rich-text-node',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [NgComponentOutlet],
   template: `
-    @if (isComponentWithType()) {
+    @if (componentType()) {
       <ng-container *ngComponentOutlet="componentType(); inputs: componentInputs()" />
     }
   `,
   styles: [
     `
-      sb-richtext-node {
+      sb-rich-text-node {
         display: contents;
       }
     `,
   ],
 })
-export class RichTextNodeComponent implements OnInit {
-  private readonly components = inject(STORYBLOK_RICHTEXT_COMPONENTS);
+export class SbRichTextNodeComponent implements OnInit, OnDestroy {
+  private readonly resolver = inject(StoryblokRichtextResolver);
   private readonly renderer = inject(Renderer2);
   private readonly el = inject(ElementRef<HTMLElement>);
   private readonly injector = inject(Injector);
   private readonly envInjector = inject(EnvironmentInjector);
   private readonly appRef = inject(ApplicationRef);
 
+  /** Track dynamically created child components for cleanup */
+  private readonly childComponentRefs: ComponentRef<SbRichTextNodeComponent>[] = [];
+
   /** The AST node to render */
   readonly node = input.required<AngularRenderNode>();
 
-  /**
-   * Whether this is a component node with a registered component type.
-   * Used to conditionally render the ngComponentOutlet in the template.
-   */
-  readonly isComponentWithType = computed(() => {
-    const node = this.node();
-    if (!isComponentNode(node)) return false;
-    return this.components[node.component] != null;
-  });
-
-  /**
-   * The Angular component type to render for component nodes.
-   */
-  readonly componentType = computed<Type<unknown> | null>(() => {
-    const node = this.node();
-    if (!isComponentNode(node)) return null;
-    return this.components[node.component] ?? null;
-  });
+  /** Resolved component type (supports lazy loading) */
+  readonly componentType = signal<Type<unknown> | null>(null);
 
   /**
    * The inputs to pass to the dynamic component.
@@ -160,10 +130,52 @@ export class RichTextNodeComponent implements OnInit {
       return;
     }
 
-    // Handle component nodes without a registered component (fallback: render children)
-    if (isComponentNode(node) && !this.componentType()) {
+    // Handle component nodes
+    if (isComponentNode(node)) {
+      this.resolveAndRenderComponent(node, hostElement);
+    }
+  }
+
+  ngOnDestroy(): void {
+    // Clean up all dynamically created child components
+    for (const ref of this.childComponentRefs) {
+      this.appRef.detachView(ref.hostView);
+      ref.destroy();
+    }
+    this.childComponentRefs.length = 0;
+  }
+
+  /**
+   * Resolves and renders a component node, handling both eager and lazy loading.
+   */
+  private resolveAndRenderComponent(
+    node: { component: string; props: Record<string, unknown>; children?: AngularRenderNode[] },
+    hostElement: HTMLElement,
+  ): void {
+    // Try synchronous resolution first (eager or cached)
+    const syncComponent = this.resolver.getSync(node.component as any);
+
+    if (syncComponent) {
+      this.componentType.set(syncComponent);
+      return;
+    }
+
+    // Check if the component is registered at all
+    if (!this.resolver.has(node.component as any)) {
+      // No component registered - render children as fallback
       this.renderChildren(node.children ?? [], hostElement);
+      return;
     }
+
+    // Lazy component - resolve asynchronously
+    this.resolver.resolve(node.component as any).then((component) => {
+      if (component) {
+        this.componentType.set(component);
+      } else {
+        // Fallback: render children if component couldn't be resolved
+        this.renderChildren(node.children ?? [], hostElement);
+      }
+    });
   }
 
   /**
@@ -195,24 +207,27 @@ export class RichTextNodeComponent implements OnInit {
     // Append to parent element
     this.renderer.appendChild(parent, element);
 
-    // Render children inside the element (skip for void elements)
-    if (!VOID_ELEMENTS.has(node.tag) && node.children?.length) {
+    // Render children inside the element (skip for void elements like img, br, hr)
+    if (!isVoidElement(node.tag) && node.children?.length) {
       this.renderChildren(node.children, element);
     }
   }
 
   /**
-   * Recursively renders child nodes by creating RichTextNodeComponent instances.
+   * Recursively renders child nodes by creating SbRichTextNodeComponent instances.
    * Uses createComponent from @angular/core for proper SSR support.
    */
   private renderChildren(children: AngularRenderNode[], parent: HTMLElement | Element): void {
     for (const child of children) {
       // Create the component using Angular's createComponent
-      const componentRef = createComponent(RichTextNodeComponent, {
+      const componentRef = createComponent(SbRichTextNodeComponent, {
         environmentInjector: this.envInjector,
         elementInjector: this.injector,
       });
 
+      // Track for cleanup
+      this.childComponentRefs.push(componentRef);
+
       // Set the input
       componentRef.setInput('node', child);
 

packages/angular/projects/sdk/src/lib/rich-text.component.ts

@@ -5,14 +5,14 @@ import {
   computed,
   inject,
 } from '@angular/core';
-import type { StoryblokRichTextNode, StoryblokSegmentType } from '@storyblok/richtext';
+import type { StoryblokRichTextNode } from '@storyblok/richtext';
 import { getRichTextSegments, renderSegments } from '@storyblok/richtext';
 import {
-  STORYBLOK_RICHTEXT_COMPONENTS,
+  StoryblokRichtextResolver,
   createAngularAdapter,
   type AngularRenderNode,
 } from './richtext.feature';
-import { RichTextNodeComponent } from './rich-text-node.component';
+import { SbRichTextNodeComponent } from './rich-text-node.component';
 
 /**
  * Renders Storyblok rich text content with support for custom component overrides.
@@ -23,15 +23,26 @@ import { RichTextNodeComponent } from './rich-text-node.component';
  *
  * @example Basic usage
  * ```html
- * <sb-richtext [doc]="story.content.body" />
+ * <sb-rich-text [doc]="story.content.body" />
  * ```
  *
- * @example With custom component overrides
+ * @example With custom component overrides (lazy loading - recommended)
  * ```typescript
  * // In your providers:
  * provideStoryblok(
  *   { accessToken: 'token' },
  *   withStoryblokRichtextComponents({
+ *     link: () => import('./custom-link').then(m => m.CustomLinkComponent),
+ *     image: () => import('./optimized-image').then(m => m.OptimizedImageComponent),
+ *   })
+ * )
+ * ```
+ *
+ * @example With custom component overrides (eager loading)
+ * ```typescript
+ * provideStoryblok(
+ *   { accessToken: 'token' },
+ *   withStoryblokRichtextComponents({
  *     link: CustomLinkComponent,
  *     image: OptimizedImageComponent,
  *   })
@@ -42,10 +53,11 @@ import { RichTextNodeComponent } from './rich-text-node.component';
  * ```typescript
  * @Component({
  *   selector: 'app-custom-link',
+ *   imports: [SbRichTextNodeComponent],
  *   template: `
  *     <a [href]="href()" [target]="target()">
  *       @for (child of children(); track $index) {
- *         <sb-richtext-node [node]="child" />
+ *         <sb-rich-text-node [node]="child" />
  *       }
  *     </a>
  *   `,
@@ -58,19 +70,19 @@ import { RichTextNodeComponent } from './rich-text-node.component';
  * ```
  */
 @Component({
-  selector: 'sb-richtext',
+  selector: 'sb-rich-text',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RichTextNodeComponent],
+  imports: [SbRichTextNodeComponent],
   template: `
     @for (node of nodes(); track $index) {
-      <sb-richtext-node [node]="node" />
+      <sb-rich-text-node [node]="node" />
     }
   `,
   host: { style: 'display: contents' },
 })
-export class RichTextComponent {
-  private readonly components = inject(STORYBLOK_RICHTEXT_COMPONENTS);
+export class SbRichTextComponent {
+  private readonly resolver = inject(StoryblokRichtextResolver);
 
   /** The Storyblok rich text document to render */
   readonly doc = input.required<StoryblokRichTextNode>();
@@ -87,7 +99,7 @@ export class RichTextComponent {
     const adapter = createAngularAdapter();
 
     // 3. Get keys of custom components (these become "component" nodes)
-    const keys = Object.keys(this.components) as StoryblokSegmentType[];
+    const keys = this.resolver.getRegisteredTypes();
 
     // 4. Render segments to Angular AST
     return renderSegments(segments, adapter, keys);