Showcase / host composition

Diff viewer.

diff-viewer.tsx: host chrome for unified and split patches as escaped line markup. No parse/runtime — the host emits au-diff__add / au-diff__del / context lines.

diff-viewer.tsxhost-chromecompose

unifiedexample.ts

Proposed typing fix:

example.ts unified

@@ -1,5 +1,7 @@
-function greet(name) {
- console.log("Hello, " + name);
+function greet(name: string): void {
+ console.log(`Hello, ${name}!`);
 }
-greet("World");
+/ Call the function
+greet("World");
+greet("TypeScript");

splitbefore · after

example.ts split

Before
-function greet(name) {
- console.log("Hello, " + name);
 }
-greet("World");

After
+function greet(name: string): void {
+ console.log(`Hello, ${name}!`);
 }
+/ Call the function
+greet("World");
+greet("TypeScript");

Deferred: patch parser, Shiki, view-mode toggle JS, apply/reject. Until v1 code-block, keep escaped host chrome.

Install

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/chat-message/chat-message.css">
<link rel="stylesheet" href="host-chrome.css">
<link rel="stylesheet" href="host-extracts.css">