Skip to content

Commit

Permalink
feat(content): add support for lazy loading content files (analogjs#235)
Browse files Browse the repository at this point in the history
  • Loading branch information
brandonroberts authored and Villanuevand committed Sep 12, 2023
1 parent c240c0c commit 0c21771
Show file tree
Hide file tree
Showing 15 changed files with 214 additions and 112 deletions.
7 changes: 6 additions & 1 deletion apps/blog-app/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion packages/content/src/lib/content-file.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ export interface ContentFile<
Attributes extends Record<string, any> = Record<string, any>
> {
filename: string;
content: string;
content?: string;
attributes: Attributes;
}
26 changes: 26 additions & 0 deletions packages/content/src/lib/content-files-list-token.spec.ts
Original file line number Diff line number Diff line change
@@ -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),
};
}
});
23 changes: 23 additions & 0 deletions packages/content/src/lib/content-files-list-token.ts
Original file line number Diff line number Diff line change
@@ -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,
};
});
},
}
);
27 changes: 0 additions & 27 deletions packages/content/src/lib/content-files-token.spec.ts

This file was deleted.

32 changes: 10 additions & 22 deletions packages/content/src/lib/content-files-token.ts
Original file line number Diff line number Diff line change
@@ -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;
},
});
72 changes: 35 additions & 37 deletions packages/content/src/lib/content.spec.ts
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -101,7 +99,7 @@ describe('injectContent', () => {
customParam: string;
customFallback: string;
routeParams: { [key: string]: any };
contentFiles: ContentFile<TestAttributes>[];
contentFiles: Record<string, () => Promise<string>>;
}>
) {
TestBed.configureTestingModule({
Expand Down
50 changes: 39 additions & 11 deletions packages/content/src/lib/content.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
};
});
})
);
}
23 changes: 23 additions & 0 deletions packages/content/src/lib/get-content-files.ts
Original file line number Diff line number Diff line change
@@ -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',
});
5 changes: 0 additions & 5 deletions packages/content/src/lib/get-raw-files.ts

This file was deleted.

4 changes: 2 additions & 2 deletions packages/content/src/lib/inject-content-files.spec.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions packages/content/src/lib/inject-content-files.ts
Original file line number Diff line number Diff line change
@@ -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>[];
}
Loading

0 comments on commit 0c21771

Please sign in to comment.