From 789fa062d6a36bfbe0da6689da3509e78c41e658 Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Thu, 7 Mar 2024 21:56:39 -0600 Subject: [PATCH] feat(vite-plugin-angular): add pipeline to transform analog markdown template (#875) --- packages/vite-plugin-angular/src/index.ts | 4 ++++ .../src/lib/angular-vite-plugin.ts | 9 ++++++++ .../src/lib/authoring/markdown-transform.ts | 21 +++++++++++++++++++ packages/vite-plugin-angular/src/lib/host.ts | 18 +++++++--------- 4 files changed, 41 insertions(+), 11 deletions(-) create mode 100644 packages/vite-plugin-angular/src/lib/authoring/markdown-transform.ts diff --git a/packages/vite-plugin-angular/src/index.ts b/packages/vite-plugin-angular/src/index.ts index ee1006272..0b20eefe9 100644 --- a/packages/vite-plugin-angular/src/index.ts +++ b/packages/vite-plugin-angular/src/index.ts @@ -1,5 +1,9 @@ import { angular } from './lib/angular-vite-plugin'; export { PluginOptions } from './lib/angular-vite-plugin'; export { compileAnalogFile } from './lib/authoring/analog'; +export { + MarkdownTemplateTransform, + defaultMarkdownTemplateTransforms, +} from './lib/authoring/markdown-transform'; export default angular; diff --git a/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts b/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts index 4061e1224..5e6720065 100644 --- a/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts +++ b/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts @@ -25,6 +25,10 @@ import { SourceFileCache, } from './utils/devkit'; import { getFrontmatterMetadata } from './authoring/frontmatter'; +import { + defaultMarkdownTemplateTransforms, + MarkdownTemplateTransform, +} from './authoring/markdown-transform'; export interface PluginOptions { tsconfig?: string; @@ -46,6 +50,7 @@ export interface PluginOptions { | { include: string[]; }; + markdownTemplateTransforms?: MarkdownTemplateTransform[]; }; supportedBrowsers?: string[]; transformFilter?: (code: string, id: string) => boolean; @@ -92,6 +97,9 @@ export function angular(options?: PluginOptions): Plugin[] { supportedBrowsers: options?.supportedBrowsers ?? ['safari 15'], jit: options?.jit, supportAnalogFormat: options?.experimental?.supportAnalogFormat ?? false, + markdownTemplateTransforms: + options?.experimental?.markdownTemplateTransforms ?? + defaultMarkdownTemplateTransforms, }; // The file emitter created during `onStart` that will be used during the build in `onLoad` callbacks for TS files @@ -502,6 +510,7 @@ export function angular(options?: PluginOptions): Plugin[] { inlineStylesExtension: pluginOptions.inlineStylesExtension, supportAnalogFormat: pluginOptions.supportAnalogFormat, isProd, + markdownTemplateTransforms: pluginOptions.markdownTemplateTransforms, }); } } diff --git a/packages/vite-plugin-angular/src/lib/authoring/markdown-transform.ts b/packages/vite-plugin-angular/src/lib/authoring/markdown-transform.ts new file mode 100644 index 000000000..4eb61f19a --- /dev/null +++ b/packages/vite-plugin-angular/src/lib/authoring/markdown-transform.ts @@ -0,0 +1,21 @@ +export type MarkdownTemplateTransform = ( + content: string, + fileName: string +) => string | Promise; + +export const defaultMarkdownTemplateTransform: MarkdownTemplateTransform = + async (content: string) => { + const { MarkedSetupService } = await import('./marked-setup.service'); + + // read template sections, parse markdown + const markedSetupService = new MarkedSetupService(); + const mdContent = markedSetupService + .getMarkedInstance() + .parse(content) as unknown as Promise; + + return mdContent; + }; + +export const defaultMarkdownTemplateTransforms: MarkdownTemplateTransform[] = [ + defaultMarkdownTemplateTransform, +]; diff --git a/packages/vite-plugin-angular/src/lib/host.ts b/packages/vite-plugin-angular/src/lib/host.ts index 9518d3537..f9bbaf59e 100644 --- a/packages/vite-plugin-angular/src/lib/host.ts +++ b/packages/vite-plugin-angular/src/lib/host.ts @@ -4,6 +4,7 @@ import { readFileSync } from 'node:fs'; import * as ts from 'typescript'; import { compileAnalogFile } from './authoring/analog'; import { TEMPLATE_TAG_REGEX } from './authoring/constants'; +import { MarkdownTemplateTransform } from './authoring/markdown-transform'; export function augmentHostWithResources( host: ts.CompilerHost, @@ -21,6 +22,7 @@ export function augmentHostWithResources( }; isProd?: boolean; + markdownTemplateTransforms?: MarkdownTemplateTransform[]; } = {} ) { const resourceHost = host as CompilerHost; @@ -97,22 +99,16 @@ export function augmentHostWithResources( resourceHost.readResource = async function (fileName: string) { const filePath = normalizePath(fileName); - const content = (this as any).readFile(filePath); + let content = (this as any).readFile(filePath); + if (content === undefined) { throw new Error('Unable to locate component resource: ' + fileName); } if (fileName.includes('virtual-analog:')) { - const { MarkedSetupService } = await import( - './authoring/marked-setup.service' - ); - // read template sections, parse markdown - const markedSetupService = new MarkedSetupService(); - const mdContent = markedSetupService - .getMarkedInstance() - .parse(content) as unknown as Promise; - - return mdContent; + for (const transform of options.markdownTemplateTransforms || []) { + content = await transform(content, fileName); + } } return content;