fix(content): make mermaid tree shakable (#563)

analogjs · Jul 24, 2023 · b7cef8a · b7cef8a
1 parent e4387f2
commit b7cef8a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 30 deletions.
diff --git a/apps/blog-app/src/app/app.config.ts b/apps/blog-app/src/app/app.config.ts
@@ -1,4 +1,8 @@
-import { provideContent, withMarkdownRenderer } from '@analogjs/content';
+import {
+  provideContent,
+  withMarkdownRenderer,
+  withMermaid,
+} from '@analogjs/content';
 import { provideFileRouter } from '@analogjs/router';
 import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
@@ -12,7 +16,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(),
     provideClientHydration(),
-    provideContent(withMarkdownRenderer({ enableMermaid: true })),
+    provideContent(withMarkdownRenderer(), withMermaid()),
     provideFileRouter(
       withInMemoryScrolling({ anchorScrolling: 'enabled' }),
       withEnabledBlockingInitialNavigation()

diff --git a/packages/content/src/index.ts b/packages/content/src/index.ts
@@ -7,6 +7,7 @@ export {
   MarkdownContentRendererService,
   provideContent,
   withMarkdownRenderer,
+  withMermaid,
 } from './lib/markdown-content-renderer.service';
 export { default as MarkdownRouteComponent } from './lib/markdown-route.component';
 export { default as MarkdownComponent } from './lib/markdown.component';

diff --git a/packages/content/src/lib/markdown-content-renderer.service.ts b/packages/content/src/lib/markdown-content-renderer.service.ts
@@ -22,32 +22,25 @@ export class MarkdownContentRendererService implements ContentRenderer {
   enhance() {}
 }
 
-export interface MarkdownRendererOptions {
-  enableMermaid: boolean;
+export function withMarkdownRenderer(): Provider {
+  return {
+    provide: ContentRenderer,
+    useFactory: () => new MarkdownContentRendererService(),
+    deps: [MarkedSetupService],
+  };
 }
 
-export function withMarkdownRenderer(
-  options?: MarkdownRendererOptions
-): Provider[] {
-  return [
-    {
-      provide: ContentRenderer,
-      useFactory: () => new MarkdownContentRendererService(),
-      deps: [MarkedSetupService],
-    },
-    ...(options?.enableMermaid
-      ? [
-          {
-            provide: USE_MERMAID_TOKEN,
-            useValue: true,
-          },
-        ]
-      : []),
-  ];
+export function withMermaid(): Provider {
+  return {
+    provide: MERMAID_IMPORT_TOKEN,
+    useValue: import('mermaid'),
+  };
 }
 
 export function provideContent(...features: Provider[]) {
   return [...features, MarkedSetupService];
 }
 
-export const USE_MERMAID_TOKEN = new InjectionToken<boolean>('use_mermaid');
+export const MERMAID_IMPORT_TOKEN = new InjectionToken<
+  Promise<typeof import('mermaid')>
+>('mermaid_import');
diff --git a/packages/content/src/lib/markdown.component.ts b/packages/content/src/lib/markdown.component.ts
@@ -17,7 +17,7 @@ import { catchError, map, mergeMap } from 'rxjs/operators';
 
 import { AnchorNavigationDirective } from './anchor-navigation.directive';
 import { ContentRenderer } from './content-renderer';
-import { USE_MERMAID_TOKEN } from './markdown-content-renderer.service';
+import { MERMAID_IMPORT_TOKEN } from './markdown-content-renderer.service';
 
 @Component({
   selector: 'analog-markdown',
@@ -35,8 +35,9 @@ export default class AnalogMarkdownComponent
   private route = inject(ActivatedRoute);
   private zone = inject(NgZone);
   private readonly platformId = inject(PLATFORM_ID);
-  private readonly useMermaid =
-    inject(USE_MERMAID_TOKEN, { optional: true }) ?? false;
+  private readonly mermaidImport = inject(MERMAID_IMPORT_TOKEN, {
+    optional: true,
+  });
   private mermaid: typeof import('mermaid') | undefined;
 
   public content$: Observable<SafeHtml> = of('');
@@ -47,14 +48,14 @@ export default class AnalogMarkdownComponent
   contentRenderer = inject(ContentRenderer);
 
   constructor() {
-    if (isPlatformBrowser(this.platformId) && this.useMermaid) {
+    if (isPlatformBrowser(this.platformId) && this.mermaidImport) {
       // Mermaid can only be loaded on client side
-      this.loadMermaid();
+      this.loadMermaid(this.mermaidImport);
     }
   }
 
-  async loadMermaid() {
-    this.mermaid = await import('mermaid');
+  async loadMermaid(mermaidImport: Promise<typeof import('mermaid')>) {
+    this.mermaid = await mermaidImport;
     this.mermaid.default.initialize({ startOnLoad: false });
     // Explicitly running mermaid as ngAfterViewChecked
     // has probably already been called