feat(content): add support for lazy loading content files

apps/blog-app/vite.config.ts

@@ -18,7 +18,12 @@ export default defineConfig(() => {
         static: true,
         prerender: {
           routes: async () => {
-            return ['/', '/about', '/blog/2022-12-27-my-first-post'];
+            return [
+              '/',
+              '/about',
+              '/blog/2022-12-27-my-first-post',
+              '/blog/2022-12-31-my-second-post',
+            ];
           },
         },
         vite: {

packages/content/src/lib/content-file.ts

@@ -2,6 +2,6 @@ export interface ContentFile<
   Attributes extends Record<string, any> = Record<string, any>
 > {
   filename: string;
-  content: string;
+  content?: string;
   attributes: Attributes;
 }

packages/content/src/lib/content-files-list-token.spec.ts

@@ -0,0 +1,26 @@
+import { TestBed } from '@angular/core/testing';
+import { CONTENT_FILES_LIST_TOKEN } from './content-files-list-token';
+
+vi.mock('./get-content-files', () => {
+  return {
+    getContentFilesList: () => ({
+      '/test.md': { title: 'Test' },
+    }),
+  };
+});
+describe('CONTENT_FILES_LIST_TOKEN', () => {
+  it('should be the token', () => {
+    const { CONTENT_FILES_LIST_TOKEN } = setup();
+    const firstParsedFile = CONTENT_FILES_LIST_TOKEN[0];
+    expect(CONTENT_FILES_LIST_TOKEN).toBeTruthy();
+    expect(firstParsedFile.filename).toEqual('/test.md');
+    expect(firstParsedFile.attributes['title']).toEqual('Test');
+  });
+
+  function setup() {
+    TestBed.configureTestingModule({});
+    return {
+      CONTENT_FILES_LIST_TOKEN: TestBed.inject(CONTENT_FILES_LIST_TOKEN),
+    };
+  }
+});

packages/content/src/lib/content-files-list-token.ts

@@ -0,0 +1,23 @@
+import { InjectionToken } from '@angular/core';
+
+import { ContentFile } from './content-file';
+import { getContentFilesList } from './get-content-files';
+
+export const CONTENT_FILES_LIST_TOKEN = new InjectionToken<ContentFile[]>(
+  '@analogjs/content Content Files List',
+  {
+    providedIn: 'root',
+    factory() {
+      const contentFiles = getContentFilesList();
+
+      return Object.keys(contentFiles).map((filename) => {
+        const attributes = contentFiles[filename];
+
+        return {
+          filename,
+          attributes,
+        };
+      });
+    },
+  }
+);

packages/content/src/lib/content-files-token.ts

@@ -1,26 +1,14 @@
 import { InjectionToken } from '@angular/core';
-import fm from 'front-matter';
-import { ContentFile } from './content-file';
-import { getRawFiles } from './get-raw-files';
 
-export const CONTENT_FILES_TOKEN = new InjectionToken<ContentFile[]>(
-  '@analogjs/content Content Files',
-  {
-    providedIn: 'root',
-    factory() {
-      const rawContentFiles = getRawFiles();
+import { getContentFiles } from './get-content-files';
 
-      return Object.keys(rawContentFiles).map((filename) => {
-        const { body, attributes } = fm<Record<string, any>>(
-          rawContentFiles[filename]
-        );
+export const CONTENT_FILES_TOKEN = new InjectionToken<
+  Record<string, () => Promise<string>>
+>('@analogjs/content Content Files', {
+  providedIn: 'root',
+  factory() {
+    const contentFiles = getContentFiles();
 
-        return {
-          filename,
-          content: body,
-          attributes,
-        };
-      });
-    },
-  }
-);
+    return contentFiles;
+  },
+});

packages/content/src/lib/content.spec.ts

@@ -1,9 +1,10 @@
 import { fakeAsync, flushMicrotasks, TestBed } from '@angular/core/testing';
 import { ActivatedRoute, convertToParamMap } from '@angular/router';
 import { expect } from 'vitest';
-import { injectContent } from './content';
 import { Observable, of } from 'rxjs';
+
 import { CONTENT_FILES_TOKEN } from './content-files-token';
+import { injectContent } from './content';
 import { ContentFile } from './content-file';
 
 describe('injectContent', () => {
@@ -13,45 +14,46 @@ describe('injectContent', () => {
   it("should return ContentFile object with empty filename, empty attributes, and default fallback 'No Content Found' as content when no match between slug and files and no custom fallback provided", fakeAsync(() => {
     const { injectContent } = setup({
       routeParams: { slug: 'test' },
+      contentFiles: {},
     });
     injectContent().subscribe((c) => {
       expect(c.content).toMatch('No Content Found');
       expect(c.attributes).toEqual({});
-      expect(c.filename).toEqual('');
+      expect(c.filename).toEqual('/src/content/test.md');
     });
     flushMicrotasks();
   }));
 
   it("should return ContentFile object with empty filename, empty attributes, and the custom fallback 'Custom Fallback' as content when no match between slug and files and custom fallback 'Custom Fallback' provided", fakeAsync(() => {
     const customFallback = 'Custom Fallback';
     const routeParams = { slug: 'test' };
-    const { injectContent } = setup({ routeParams, customFallback });
+    const { injectContent } = setup({
+      routeParams,
+      customFallback,
+      contentFiles: {},
+    });
     injectContent().subscribe((c) => {
       expect(c.content).toMatch(customFallback);
       expect(c.attributes).toEqual({});
-      expect(c.filename).toEqual('');
+      expect(c.filename).toEqual('/src/content/test.md');
     });
     flushMicrotasks();
   }));
 
   it('should return ContentFile object with correct filename, correct attributes, and the correct content of the file when match between slug and files', fakeAsync(() => {
     const routeParams = { slug: 'test' };
-    const contentFiles = [
-      {
-        filename: '/src/content/dont-match.md',
-        attributes: {
-          slug: 'dont-match',
-        },
-        content: 'Dont Match',
-      },
-      {
-        filename: '/src/content/test.md',
-        attributes: {
-          slug: 'test',
-        },
-        content: 'Test Content',
-      },
-    ];
+    const contentFiles = {
+      '/src/content/dont-match.md': () =>
+        Promise.resolve(`---
+slug: 'dont-match'
+---
+Dont Match'`),
+      '/src/content/test.md': () =>
+        Promise.resolve(`---
+slug: 'test'
+---
+Test Content`),
+    };
     const { injectContent } = setup({
       routeParams,
       contentFiles,
@@ -67,22 +69,18 @@ describe('injectContent', () => {
   it('should return ContentFile object with correct filename, correct attributes, and the correct content of the file when match between custom param and files', fakeAsync(() => {
     const customParam = 'customSlug';
     const routeParams = { customSlug: 'custom-slug-test' };
-    const contentFiles: ContentFile<TestAttributes>[] = [
-      {
-        filename: '/src/content/dont-match.md',
-        attributes: {
-          slug: 'dont-match',
-        },
-        content: 'Dont Match',
-      },
-      {
-        filename: '/src/content/custom-slug-test.md',
-        attributes: {
-          slug: 'custom-slug-test',
-        },
-        content: 'Test Content',
-      },
-    ];
+    const contentFiles = {
+      '/src/content/dont-match.md': () =>
+        Promise.resolve(`---
+slug: 'dont-match'
+---
+Dont Match'`),
+      '/src/content/custom-slug-test.md': () =>
+        Promise.resolve(`---
+slug: 'custom-slug-test'
+---
+Test Content`),
+    };
     const { injectContent } = setup({
       customParam,
       routeParams,
@@ -101,7 +99,7 @@ describe('injectContent', () => {
       customParam: string;
       customFallback: string;
       routeParams: { [key: string]: any };
-      contentFiles: ContentFile<TestAttributes>[];
+      contentFiles: Record<string, () => Promise<string>>;
     }>
   ) {
     TestBed.configureTestingModule({

packages/content/src/lib/content.ts

@@ -2,10 +2,13 @@
 
 import { inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs/operators';
-import { injectContentFiles } from './inject-content-files';
-import { Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import fm from 'front-matter';
+import { Observable, of } from 'rxjs';
+
 import { ContentFile } from './content-file';
+import { CONTENT_FILES_TOKEN } from './content-files-token';
+import { waitFor } from './utils/zone-wait-for';
 
 /**
  * Retrieves the static content using the provided param
@@ -20,19 +23,44 @@ export function injectContent<
   fallback = 'No Content Found'
 ): Observable<ContentFile<Attributes | Record<string, never>>> {
   const route = inject(ActivatedRoute);
-  const contentFiles = injectContentFiles<Attributes | Record<string, never>>();
+  const contentFiles = inject(CONTENT_FILES_TOKEN);
   return route.paramMap.pipe(
     map((params) => params.get(param)),
-    map((slug) => {
-      return (
-        contentFiles.find(
-          (file) => file.filename === `/src/content/${slug}.md`
-        ) || {
+    switchMap((slug) => {
+      const filename = `/src/content/${slug}.md`;
+      const contentFile = contentFiles[filename];
+
+      if (!contentFile) {
+        return of({
           attributes: {},
-          filename: '',
+          filename,
           content: fallback,
+        });
+      }
+
+      return new Promise<string>((resolve) => {
+        const contentResolver = contentFile();
+
+        if (import.meta.env.SSR === true) {
+          waitFor(contentResolver).then((content) => {
+            resolve(content);
+          });
+        } else {
+          contentResolver.then((content) => {
+            resolve(content);
+          });
         }
-      );
+      }).then((content) => {
+        const { body, attributes } = fm<Attributes | Record<string, never>>(
+          content
+        );
+
+        return {
+          filename,
+          attributes,
+          content: body,
+        };
+      });
     })
   );
 }

packages/content/src/lib/get-content-files.ts

@@ -0,0 +1,23 @@
+/**
+ * Returns the list of content files by filename with ?analog-content-list=true.
+ * We use the query param to transform the return into an array of
+ * just front matter attributes.
+ *
+ * @returns
+ */
+export const getContentFilesList = () =>
+  import.meta.glob<Record<string, any>>('/src/content/**/*.md', {
+    eager: true,
+    import: 'default',
+    query: { 'analog-content-list': true },
+  });
+
+/**
+ * Returns the lazy loaded content files for lookups.
+ *
+ * @returns
+ */
+export const getContentFiles = () =>
+  import.meta.glob(['/src/content/**/*.md'], {
+    as: 'raw',
+  });

packages/content/src/lib/inject-content-files.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { expect } from 'vitest';
-import { CONTENT_FILES_TOKEN } from './content-files-token';
+import { CONTENT_FILES_LIST_TOKEN } from './content-files-list-token';
 import { ContentFile } from './content-file';
 import { injectContentFiles } from './inject-content-files';
 
@@ -30,7 +30,7 @@ describe('injectContentFiles', () => {
   function setup<Attributes extends Record<string, any>>(
     contentFiles: ContentFile[] = []
   ) {
-    TestBed.overrideProvider(CONTENT_FILES_TOKEN, {
+    TestBed.overrideProvider(CONTENT_FILES_LIST_TOKEN, {
       useValue: contentFiles,
     });
     return {

packages/content/src/lib/inject-content-files.ts

@@ -1,9 +1,9 @@
 import { ContentFile } from './content-file';
 import { inject } from '@angular/core';
-import { CONTENT_FILES_TOKEN } from './content-files-token';
+import { CONTENT_FILES_LIST_TOKEN } from './content-files-list-token';
 
 export function injectContentFiles<
   Attributes extends Record<string, any>
 >(): ContentFile<Attributes>[] {
-  return inject(CONTENT_FILES_TOKEN) as ContentFile<Attributes>[];
+  return inject(CONTENT_FILES_LIST_TOKEN) as ContentFile<Attributes>[];
 }