feat(vite-plugin-angular): add pipeline to transform analog markdown template (#875)

Author: brandonroberts

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;

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,
       });
     }
   }

packages/vite-plugin-angular/src/lib/authoring/markdown-transform.ts

@@ -0,0 +1,21 @@
+export type MarkdownTemplateTransform = (
+  content: string,
+  fileName: string
+) => string | Promise<string>;
+
+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<string>;
+
+    return mdContent;
+  };
+
+export const defaultMarkdownTemplateTransforms: MarkdownTemplateTransform[] = [
+  defaultMarkdownTemplateTransform,
+];

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<string>;
-
-      return mdContent;
+      for (const transform of options.markdownTemplateTransforms || []) {
+        content = await transform(content, fileName);
+      }
     }
 
     return content;