Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from
Apr 10, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5c792f5
Use DOMParser
joshwcomeau Apr 7, 2023
64eb3cf
TEMP: Check how performant DOMParser is
joshwcomeau Apr 7, 2023
30cf98d
Be gone, stray whitespace!
joshwcomeau Apr 7, 2023
1603145
Merge branch 'main' into validate-dom
joshwcomeau Apr 9, 2023
23ac81d
Update 3 files
danilowoz Apr 10, 2023
0b8e280
Merge pull request #1 from danilowoz/csb-ydtpc8/draft/gifted-archimedes
joshwcomeau Apr 10, 2023
92b797e
Update sandpackUtils.test.ts
danilowoz Apr 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 2 additions & 20 deletions sandpack-client/src/clients/static/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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;
Expand Down
68 changes: 68 additions & 0 deletions sandpack-client/src/clients/static/utils.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">');
});
});
18 changes: 18 additions & 0 deletions sandpack-client/src/clients/static/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import type { FileContent } from "static-browser-server";

export const insertHtmlAfterRegex = (
regex: RegExp,
content: string,
Expand Down Expand Up @@ -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}`;
};
2 changes: 1 addition & 1 deletion sandpack-react/src/utils/sandpackUtils.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
});
});

Expand Down