fix(Static Template): Ensure valid HTML formatting for static template (

#894) Co-authored-by: Danilo Woznica <danilowoz@gmail.com>
codesandbox · Apr 10, 2023 · af68579 · af68579 · vercel · Apr 10, 2023
1 parent fd40625
commit af68579
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 21 deletions.
diff --git a/sandpack-client/src/clients/static/index.ts b/sandpack-client/src/clients/static/index.ts
@@ -13,7 +13,7 @@ import { EventEmitter } from "../event-emitter";
 import { fromBundlerFilesToFS } from "../node/client.utils";
 import type { SandpackNodeMessage } from "../node/types";
 
-import { insertHtmlAfterRegex, readBuffer } from "./utils";
+import { insertHtmlAfterRegex, readBuffer, validateHtml } from "./utils";
 
 export class SandpackStatic extends SandpackClient {
   private emitter: EventEmitter;
@@ -44,7 +44,7 @@ export class SandpackStatic extends SandpackClient {
         }
         if (filepath.endsWith(".html") || filepath.endsWith(".htm")) {
           try {
-            content = this.injectDocType(content);
+            content = validateHtml(content);
             content = this.injectProtocolScript(content);
             content = this.injectExternalResources(
               content,
@@ -81,19 +81,6 @@ export class SandpackStatic extends SandpackClient {
     }
   }
 
-  private injectDocType(content: FileContent): FileContent {
-    // Make it a string
-    let contentString = readBuffer(content);
-
-    // Add the DOCTYPE tag
-    const docTypeRegex = /<!DOCTYPE.*>/gi;
-    if (!docTypeRegex.test(contentString)) {
-      contentString = `<!DOCTYPE html>\n${contentString}`;
-    }
-
-    return contentString;
-  }
-
   private injectContentIntoHead(
     content: FileContent,
     contentToInsert: string
@@ -104,11 +91,6 @@ export class SandpackStatic extends SandpackClient {
     // Inject script
     content =
       insertHtmlAfterRegex(/<head[^<>]*>/g, content, "\n" + contentToInsert) ??
-      insertHtmlAfterRegex(
-        /<html[^<>]*>/g,
-        content,
-        "<head>\n" + contentToInsert + "</head>\n"
-      ) ??
       contentToInsert + "\n" + content;
 
     return content;

diff --git a/sandpack-client/src/clients/static/utils.test.ts b/sandpack-client/src/clients/static/utils.test.ts
@@ -0,0 +1,68 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { validateHtml } from "./utils";
+
+describe(validateHtml, () => {
+  it("returns a valid HTML string", () => {
+    const content =
+      "<html><head><title>Test</title></head><body><p>Hello world!</p></body></html>";
+    const validatedContent = validateHtml(content);
+
+    expect(validatedContent).toContain("<!DOCTYPE html>");
+    expect(validatedContent).toContain(
+      '<html lang="en"><head><title>Test</title></head><body><p>Hello world!</p></body></html>'
+    );
+  });
+
+  it("adds html/head/body tags to an empty string", () => {
+    const content = "";
+    const validatedContent = validateHtml(content);
+
+    expect(validatedContent).toContain("<!DOCTYPE html>");
+    expect(validatedContent).toContain(
+      '<html lang="en"><head></head><body></body></html>'
+    );
+  });
+
+  it("shouldn't change anything if a valid document is provided ", () => {
+    const content = `<!DOCTYPE html>
+<html lang="en"><head></head>
+  <body>
+    <h1>Hello World</h1>
+  </body></html>`;
+
+    expect(validateHtml(content)).toBe(content);
+  });
+
+  it("should add the lang attribute to the html if not provided", () => {
+    const content = `<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <h1>Hello World</h1>
+</body>
+</html>`;
+
+    const validatedContent = validateHtml(content);
+
+    expect(validatedContent).toContain("<!DOCTYPE html>");
+    expect(validatedContent).toContain('<html lang="en">');
+  });
+
+  it("shouldn't change the land attr if a custom value is provided", () => {
+    const content = `<!DOCTYPE html>
+<html lang="pt-BR">
+  <head></head>
+  <body>
+    <h1>Hello World</h1>
+</body>
+</html>`;
+
+    const validatedContent = validateHtml(content);
+
+    expect(validatedContent).toContain("<!DOCTYPE html>");
+    expect(validatedContent).toContain('<html lang="pt-BR">');
+  });
+});
diff --git a/sandpack-client/src/clients/static/utils.ts b/sandpack-client/src/clients/static/utils.ts
@@ -1,3 +1,5 @@
+import type { FileContent } from "static-browser-server";
+
 export const insertHtmlAfterRegex = (
   regex: RegExp,
   content: string,
@@ -27,3 +29,19 @@ export const readBuffer = (content: string | Uint8Array): string => {
     return new TextDecoder().decode(content);
   }
 };
+
+export const validateHtml = (content: FileContent): FileContent => {
+  // Make it a string
+  const contentString = readBuffer(content);
+
+  const domParser = new DOMParser();
+  const doc = domParser.parseFromString(contentString, "text/html");
+
+  if (!doc.documentElement.getAttribute("lang")) {
+    doc.documentElement.setAttribute("lang", "en");
+  }
+
+  const html = doc.documentElement.outerHTML;
+
+  return `<!DOCTYPE html>\n${html}`;
+};
diff --git a/sandpack-react/src/utils/sandpackUtils.test.ts b/sandpack-react/src/utils/sandpackUtils.test.ts
@@ -361,7 +361,7 @@ describe(getSandpackStateFromProps, () => {
       foo: "*",
       react: "^18.0.0",
       "react-dom": "^18.0.0",
-      "react-scripts": "^4.0.0",
+      "react-scripts": "^5.0.0",
     });
   });