Merge pull request #292 from fastrodev/react

React
fastrodev · Nov 1, 2023 · 53dc0a2 · 53dc0a2
2 parents 2fb9232 + 0462bee
commit 53dc0a2
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 32 deletions.
diff --git a/http/render.tsx b/http/render.tsx
@@ -115,6 +115,60 @@ export class Render {
         this.#options.props,
       );
     if (!html) return el;
+
+    const RootElement = () => {
+      if (this.#options.theme && this.#options.themeColor === "auto") {
+        return (
+          <div
+            id="root"
+            className={this.#options.html?.body?.root.class}
+            style={this.#options.html?.body?.root.style}
+            data-color-mode="auto"
+            data-light-theme="light"
+            data-dark-theme="dark"
+          >
+            {el}
+          </div>
+        );
+      }
+
+      if (this.#options.theme && this.#options.themeColor === "dark") {
+        return (
+          <div
+            id="root"
+            className={this.#options.html?.body?.root.class}
+            style={this.#options.html?.body?.root.style}
+            data-dark-theme="dark"
+          >
+            {el}
+          </div>
+        );
+      }
+
+      if (this.#options.theme && this.#options.themeColor === "light") {
+        return (
+          <div
+            id="root"
+            className={this.#options.html?.body?.root.class}
+            style={this.#options.html?.body?.root.style}
+            data-dark-theme="light"
+          >
+            {el}
+          </div>
+        );
+      }
+
+      return (
+        <div
+          id="root"
+          className={this.#options.html?.body?.root.class}
+          style={this.#options.html?.body?.root.style}
+        >
+          {el}
+        </div>
+      );
+    };
+
     return (
       <html
         lang={this.#options.html?.lang}
@@ -184,38 +238,56 @@ export class Render {
               </script>
             )}
         </head>
-        <body
-          data-bs-theme={this.#options.html?.body?.theme ?? "dark"}
-          className={this.#options.html?.body?.class}
-          style={this.#options.html?.body?.style}
-        >
-          <div
-            id="root"
-            className={this.#options.html?.body?.root.class}
-            style={this.#options.html?.body?.root.style}
-            data-color-mode="auto"
-            data-light-theme="light"
-            data-dark-theme="dark"
-          >
-            {el}
-          </div>
-          {this.#options.props && (
-            <div
-              dangerouslySetInnerHTML={{
-                __html: await this.#createInitScript(),
-              }}
-            />
+        {this.#options.theme
+          ? (
+            <body
+              data-bs-theme={this.#options.html?.body?.theme ?? "dark"}
+              className={this.#options.html?.body?.class}
+              style={this.#options.html?.body?.style}
+            >
+              <RootElement />
+              {this.#options.props && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: await this.#createInitScript(),
+                  }}
+                />
+              )}
+              {this.#options.html?.body?.script &&
+                this.#options.html?.body?.script.map((s) => (
+                  <script
+                    src={s.src}
+                    type={s.type}
+                    crossOrigin={s.crossorigin}
+                    nonce={s.nonce}
+                  />
+                ))}
+            </body>
+          )
+          : (
+            <body
+              className={this.#options.html?.body?.class}
+              style={this.#options.html?.body?.style}
+            >
+              <RootElement />
+              {this.#options.props && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: await this.#createInitScript(),
+                  }}
+                />
+              )}
+              {this.#options.html?.body?.script &&
+                this.#options.html?.body?.script.map((s) => (
+                  <script
+                    src={s.src}
+                    type={s.type}
+                    crossOrigin={s.crossorigin}
+                    nonce={s.nonce}
+                  />
+                ))}
+            </body>
           )}
-          {this.#options.html?.body?.script &&
-            this.#options.html?.body?.script.map((s) => (
-              <script
-                src={s.src}
-                type={s.type}
-                crossOrigin={s.crossorigin}
-                nonce={s.nonce}
-              />
-            ))}
-        </body>
       </html>
     );
   };

diff --git a/http/server.ts b/http/server.ts
@@ -94,6 +94,8 @@ export type RenderOptions = {
   props?: any;
   development?: boolean;
   hydrate?: boolean;
+  theme?: boolean;
+  themeColor?: string;
   html?: {
     lang?: string;
     class?: string;

diff --git a/http/server_test.tsx b/http/server_test.tsx
@@ -150,7 +150,7 @@ Deno.test(
       const page = await fetch(host + "/page", { method: "GET" });
       assertEquals(
         await page.text(),
-        `<!DOCTYPE html><html><head></head><body data-bs-theme="dark"><div id="root" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">Page</div></body></html>`,
+        `<!DOCTYPE html><html><head></head><body><div id="root">Page</div></body></html>`,
       );
 
       const nest = await fetch(host + "/nest", { method: "GET" });

diff --git a/middlewares/markdown.tsx b/middlewares/markdown.tsx
@@ -66,6 +66,8 @@ export default class Instance {
   #getDefaultOptions = (md: Post) => {
     return {
       cache: true,
+      theme: true,
+      themeColor: "auto",
       html: {
         lang: "en",
         class: "h-100",