Rendering Docs

The Docs aspect uses the Preview aspect to register its docs file and templates for bundling and for rendering in the browser.

1. The docs template is registered by the Envs via the getDocsTemplate() service handler.
2. The Docs Aspect then registers the template returned from the Env, as well as the env's component docs files, to the Preview aspect.

// docs.main.runtime.ts

// ...

class DocsPreviewDefinition implements PreviewDefinition {
  readonly prefix = 'overview';

  // ...
  async renderTemplatePath(context: ExecutionContext): Promise<string> {
    // ...
  }

  async getModuleMap(components: Component[]): Promise<ComponentMap<AbstractVinyl[]>> {
    // ...
  }
}

// ...
export class DocsMain {
  // ...
  static async provider() {
    // ...
    preview.registerDefinition(new DocsPreviewDefinition(docs));
    // ...
  }
}

// ...
Copied

To make the bundled doc files and templates available for the browser:

1. The docs Aspect registers to the Preview aspect for rendering.

// docs.preview.runtime.tsx

// ...

export class DocsPreview {
  // ...

  static async provider([preview]: [PreviewPreview]) {
    // Creates an instance of a Preview plugin
    const docsPreview = new DocsPreview(preview);
    // Registers the docs' preview plugin
    preview.registerPreview({
      // Provides the name for the link file (see the Preview section to learn more about link files)
      name: 'overview',
      // Returns the 'render' function to execute for the template rendering
      render: docsPreview.render.bind(docsPreview),
      // Returns the docs files to render
      selectPreviewModel: docsPreview.selectPreviewModel.bind(docsPreview),
      // Includes the 'composition' preview as part of the 'overview' preview
      include: ['compositions'],
    });

    return docsPreview;
  }
}
// ...
Copied

2. The Preview Aspect registers routes to the docs files and templates in the Express Aspect.

See Preview overview, to learn more about the previewing process.