[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 { noopMarkdown } from "./noop_markdown.js";

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

@@ -0,0 +1,35 @@
+/*
+ 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,
+} from "lit/directive.js";
+
+/**
+ * "Handles" Markdown rendering by doing nothing.
+ *
+ * Configure @a2ui/lit-markdown, or your custom Markdown renderer
+ * to actually parse and render Markdown in your app.
+ */
+class NoopMarkdownRendererDirective extends Directive {
+  render(markdown: string, _tagClassMap?: Record<string, string[]>) : TemplateResult {
+    return html`<pre>${markdown}</pre>`;
+  }
+}
+
+export const noopMarkdown = directive(NoopMarkdownRendererDirective);

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 { noopMarkdown } from "./directives/noop_markdown.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 = noopMarkdown;
+
   static styles = [
     structuralStyles,
     css`
@@ -116,8 +121,8 @@ export class Text extends Root {
         break; // Body.
     }
 
-    return html`${markdown(
-      markdownText,
+    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.