From 9c425c7e8ba1ed9f588bebc38bf971a2b26d806f Mon Sep 17 00:00:00 2001
From: Ryan Toronto <ryanto@gmail.com>
Date: Sat, 26 Oct 2024 19:58:57 +0000
Subject: [PATCH] Add more escape characters to the inline stream component
 (#34)

---
 examples/kitchen-sink/src/pages/nav.tsx       |  5 ++++
 .../pages/react/logging/client-component.tsx  |  5 ++++
 .../src/pages/react/logging/index.page.tsx    | 25 +++++++++++++++++++
 .../src/components/inline-rsc-stream.tsx      | 12 +++++----
 4 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 examples/kitchen-sink/src/pages/react/logging/client-component.tsx
 create mode 100644 examples/kitchen-sink/src/pages/react/logging/index.page.tsx

diff --git a/examples/kitchen-sink/src/pages/nav.tsx b/examples/kitchen-sink/src/pages/nav.tsx
index 2d76eba..7bddf85 100644
--- a/examples/kitchen-sink/src/pages/nav.tsx
+++ b/examples/kitchen-sink/src/pages/nav.tsx
@@ -88,6 +88,11 @@ export default function Nav() {
                         description="Dedupe data requests with React's cache helper."
                         href="/react/cache"
                       />
+                      <ExampleLink
+                        title="Logging"
+                        description="RSC server to client logging."
+                        href="/react/logging"
+                      />
                     </ExampleGroup>
 
                     <ExampleGroup name="Server actions" path="/server-actions">
diff --git a/examples/kitchen-sink/src/pages/react/logging/client-component.tsx b/examples/kitchen-sink/src/pages/react/logging/client-component.tsx
new file mode 100644
index 0000000..49ae7eb
--- /dev/null
+++ b/examples/kitchen-sink/src/pages/react/logging/client-component.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export function DisplayText({ text }: { text: string }) {
+  return <p>{text}</p>;
+}
diff --git a/examples/kitchen-sink/src/pages/react/logging/index.page.tsx b/examples/kitchen-sink/src/pages/react/logging/index.page.tsx
new file mode 100644
index 0000000..97875d3
--- /dev/null
+++ b/examples/kitchen-sink/src/pages/react/logging/index.page.tsx
@@ -0,0 +1,25 @@
+import { DisplayText } from "./client-component";
+
+export default function LoggingPage() {
+  console.log("Hello world!");
+  console.log("Hello <b>html</b> world!");
+  console.log("Hello <script></script> world!");
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2>These should be escaped</h2>
+        <p>{"A string with some HTML: <b>Hello</b><script></script>"}</p>
+        <DisplayText text="Hello <b>world!</b><script></script>" />
+      </div>
+      <div>
+        <h2>This should contain HTML</h2>
+        <p
+          dangerouslySetInnerHTML={{
+            __html: "A string with some <b>HTML</b><script></script>",
+          }}
+        ></p>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/framework/src/components/inline-rsc-stream.tsx b/packages/framework/src/components/inline-rsc-stream.tsx
index de2074a..aeebab0 100644
--- a/packages/framework/src/components/inline-rsc-stream.tsx
+++ b/packages/framework/src/components/inline-rsc-stream.tsx
@@ -99,19 +99,21 @@ async function Inline({
 
 // From https://github.com/cyco130/vite-rsc/blob/2e3d0ad9915e57c4b2eaa3ea24b46c1b477a4cce/packages/fully-react/src/server/htmlescape.ts#L25C1-L38C2
 
-const TERMINATORS_LOOKUP: Record<string, string> = {
+let ESCAPE_LOOKUP: Record<string, string> = {
+  ">": "\\u003e",
+  "<": "\\u003c",
   "\u2028": "\\u2028",
   "\u2029": "\\u2029",
 };
 
-const TERMINATORS_REGEX = /[\u2028\u2029]/g;
+let ESCAPE_REGEX = /[><\u2028\u2029]/g;
 
-function sanitizer(match: string | number) {
-  return TERMINATORS_LOOKUP[match];
+function escaper(match: string | number) {
+  return ESCAPE_LOOKUP[match];
 }
 
 function sanitize(str: string) {
-  return str.replace(TERMINATORS_REGEX, sanitizer);
+  return str.replace(ESCAPE_REGEX, escaper);
 }
 
 export class TeardownOnError extends Component<