[RFC] Split markdown rendering to a separate package.

.github/workflows/lit_samples_build.yml

@@ -35,21 +35,9 @@ jobs:
         with:
           node-version: '20'
 
-      - name: Install web_core deps
-        working-directory: ./renderers/web_core
-        run: npm ci
-
-      - name: Build web_core
-        working-directory: ./renderers/web_core
-        run: npm run build
-
-      - name: Install lib's deps
-        working-directory: ./renderers/lit
-        run: npm i
-
-      - name: Build lib
-        working-directory: ./renderers/lit
-        run: npm run build
+      - name: Build lit renderer and its dependencies
+        working-directory: ./samples/client/lit
+        run: npm run build:renderer
 
       - name: Install all lit samples workspaces' dependencies
         working-directory: ./samples/client/lit

renderers/lit/src/0.8/ui/context/context.ts

@@ -0,0 +1,24 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import {markdownContext} from "./markdown.js";
+import {themeContext} from "./theme.js";
+
+export { 
+  markdownContext as markdown, 
+  themeContext as theme, 
+  themeContext, // Preserved for backwards compatibility. Prefer using `theme`.
+};

renderers/lit/src/0.8/ui/context/markdown.ts

@@ -0,0 +1,26 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+import {
+  DirectiveResult,
+} from "lit/directive.js";
+import { createContext } from "@lit/context";
+
+/**
+ * A Lit Context to override the default (noop) markdown renderer.
+ */
+export const markdownContext = createContext<DirectiveResult>(
+  Symbol("a2ui-lit-markdown-renderer")
+);

renderers/lit/src/0.8/ui/directives/directives.ts

@@ -14,4 +14,4 @@
  limitations under the License.
  */
 
-export { markdown } from "./markdown.js";
+export { minimalMarkdown } from "./minimal_markdown.js";

renderers/lit/src/0.8/ui/directives/minimal_markdown.ts

@@ -0,0 +1,92 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, TemplateResult } from "lit";
+import {
+  directive,
+  Directive,
+  PartInfo,
+} from "lit/directive.js";
+
+/**
+ * A minimal Markdown renderer that only supports a few tags.
+ *
+ * Configure @a2ui/lit-markdown, or your custom Markdown renderer
+ * to actually parse and render Markdown in your app.
+ */
+class MinimalMarkdownRendererDirective extends Directive {
+  static _warned = false;
+
+  constructor(partInfo: PartInfo) {
+    super(partInfo);
+    /**
+     * Warn the user in case they need actual Markdown rendering.
+     */
+    if (!MinimalMarkdownRendererDirective._warned) {
+      console.warn("[MinimalMarkdownRendererDirective]",
+        "is a placeholder Markdown renderer. Most features are not supported.\n",
+        "Install `@a2ui/lit-markdown` for a fully-featured Markdown renderer.");
+      MinimalMarkdownRendererDirective._warned = true;
+    }
+  }
+
+  /**
+   * Attempts to render some Markdown.
+   *
+   * Resist the urge to "improve" this method. Instead, use a more proper
+   * Markdown renderer. This is just a placeholder.
+   */
+  render(markdown: string, _tagClassMap?: Record<string, string[]>) : TemplateResult {
+    if (markdown.startsWith('# ')) {
+      let classes = this.getClasses("h1", _tagClassMap);
+      return html`<h1 class="${classes}">${markdown.substring(2)}</h1>`;
+    }
+    if (markdown.startsWith('## ')) {
+      let classes = this.getClasses("h2", _tagClassMap);
+      return html`<h2 class="${classes}">${markdown.substring(3)}</h2>`;
+    }
+    if (markdown.startsWith('### ')) {
+      let classes = this.getClasses("h3", _tagClassMap);
+      return html`<h3 class="${classes}">${markdown.substring(4)}</h3>`;
+    }
+    if (markdown.startsWith('#### ')) {
+      let classes = this.getClasses("h4", _tagClassMap);
+      return html`<h4 class="${classes}">${markdown.substring(5)}</h4>`;
+    }
+    if (markdown.startsWith('##### ')) {
+      let classes = this.getClasses("h5", _tagClassMap);
+      return html`<h5 class="${classes}">${markdown.substring(6)}</h5>`;
+    }
+    if (markdown.startsWith('*') && markdown.endsWith('*')) {
+      let classes = this.getClasses("strong", _tagClassMap);
+      return html`<strong class="${classes}">${markdown.substring(1, markdown.length - 1)}</strong>`;
+    }
+    let classes = this.getClasses("p", _tagClassMap);
+    return html`<p class="${classes}">${markdown}</p>`;
+  }
+
+  /**
+   * Returns a space-separated lists of clases for `tag` from `_tagClassMap`.
+   * @param tag The name of the tag ("h1", "p", etc.)
+   * @param _tagClassMap The class map to use.
+   * @returns A space-separated list of class names.
+   */
+  getClasses(tag: string, _tagClassMap?: Record<string, string[]>) {
+    return _tagClassMap?.[tag]?.join(' ') ?? '';
+  }
+}
+
+export const minimalMarkdown = directive(MinimalMarkdownRendererDirective);

renderers/lit/src/0.8/ui/text.ts

@@ -16,7 +16,9 @@
 
 import { html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { markdown } from "./directives/directives.js";
+import { consume } from '@lit/context';
+import { minimalMarkdown } from "./directives/directives.js";
+import * as Context from "./context/context.js";
 import { Root } from "./root.js";
 import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
 import * as Primitives from "@a2ui/web_core/types/primitives";
@@ -44,6 +46,9 @@ export class Text extends Root {
   @property({ reflect: true, attribute: "usage-hint" })
   accessor usageHint: Types.ResolvedText["usageHint"] | null = null;
 
+  @consume({context: Context.markdown})
+  accessor markdownRenderer = minimalMarkdown;
+
   static styles = [
     structuralStyles,
     css`
@@ -116,7 +121,7 @@ export class Text extends Root {
         break; // Body.
     }
 
-    return html`${markdown(
+    return html`${this.markdownRenderer(
       markdownText,
       Styles.appendToAll(this.theme.markdown, ["ol", "ul", "li"], {})
     )}`;

renderers/lit/src/0.8/ui/ui.ts

@@ -43,7 +43,7 @@ import { TextField } from "./text-field.js";
 import { Text } from "./text.js";
 import { Video } from "./video.js";
 
-export * as Context from "./context/theme.js";
+export * as Context from "./context/context.js";
 export * as Utils from "./utils/utils.js";
 export { ComponentRegistry, componentRegistry } from "./component-registry.js";
 export { registerCustomComponents } from "./custom-components/index.js";

renderers/markdown/README.md

@@ -0,0 +1,10 @@
+This directory contains the default markdown implementations for A2UI.
+
+* `markdown-it-shared` is a shared markdown renderer that uses markdown-it and
+  DOMPurify to render markdown content in general.
+* `markdown-it-lit` is the Lit facade of the markdown renderer for Lit.
+* `markdown-it-angular` is the Angular facade of the markdown renderer
+  for Angular.
+
+Users should use the facade packages in their apps. There's nothing of interest
+in the shared renderer package.

renderers/markdown/markdown-it-lit/.npmrc

@@ -0,0 +1,2 @@
+@a2ui:registry=https://us-npm.pkg.dev/oss-exit-gate-prod/a2ui--npm/
+//us-npm.pkg.dev/oss-exit-gate-prod/a2ui--npm/:always-auth=true

renderers/markdown/markdown-it-lit/README.md

@@ -0,0 +1 @@
+A2UI markdown renderer for Lit.