Add support for mounting script when body does not exist.

alexmacarthur · Nov 11, 2022 · 66725b8 · 66725b8
1 parent 120ffda
commit 66725b8
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ export default defineConfig({
 });
 ```
 
-At the very least, you'll need to specify a remote page you'd like to proxy, as well as which local entry point Vite should inject onto the page.
+At the very least, you'll need to specify a remote page you'd like to proxy, as well as which local entry point Vite should inject onto the page. By default, this script tag will be injected just before the closing `</body>` tag, but if that doesn't exist, it'll be attached to the end of the HTML.
 
 ```diff
 // vite.config.js

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-proxy-page",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "author": "Alex MacArthur (https://macarthur.me)",
   "homepage": "https://macarthur.me/posts/project-local-spa-onto-production-page",

diff --git a/src/steps.test.ts b/src/steps.test.ts
@@ -1,5 +1,9 @@
 import { describe, expect, it } from "vitest";
-import { remoteRemoteEntryPoint, setUpRootElement } from "./steps";
+import {
+  insertLocalEntryScript,
+  remoteRemoteEntryPoint,
+  setUpRootElement,
+} from "./steps";
 import { htmlMatches } from "./test-utils";
 
 describe("setUpRootElement()", () => {
@@ -114,3 +118,25 @@ describe("remoteRemoteEntryPoint()", () => {
     expect(patternResult).toEqual(html);
   });
 });
+
+describe("insertLocalEntryScript()", () => {
+  it("mounts script to inside of body if body element exists", () => {
+    const html = `<body><div>hello</div></body>`;
+
+    const result = insertLocalEntryScript(html, "./my-script.js");
+
+    expect(result).toEqual(
+      '<body><div>hello</div><script type="module" src="./my-script.js"></script></body>'
+    );
+  });
+
+  it("mounts script outside all HTML if body element does not exist", () => {
+    const html = `<div>hello</div>`;
+
+    const result = insertLocalEntryScript(html, "./my-script.js");
+
+    expect(result).toEqual(
+      '<div>hello</div><script type="module" src="./my-script.js"></script>'
+    );
+  });
+});
diff --git a/src/steps.ts b/src/steps.ts
@@ -57,7 +57,12 @@ export function insertLocalEntryScript(
   localEntryPoint: string
 ): string {
   const constructedScript = `<script type="module" src="${localEntryPoint}"></script>`;
-  return html.replace(/(<\/body>)/, `${constructedScript}$1`);
+
+  if (/<\/body>/.test(html)) {
+    return html.replace(/(<\/body>)/, `${constructedScript}$1`);
+  }
+
+  return `${html}${constructedScript}`;
 }
 
 const sourcesPattern = /(<[^<].*?(?:src|href)=(?:"|'))(.+?)((?:"|').*?>)/g;
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,7 @@ export default defineConfig({ @@
     });
     ```
-    At the very least, you'll need to specify a remote page you'd like to proxy, as well as which local entry point Vite should inject onto the page.
+    At the very least, you'll need to specify a remote page you'd like to proxy, as well as which local entry point Vite should inject onto the page. By default, this script tag will be injected just before the closing `</body>` tag, but if that doesn't exist, it'll be attached to the end of the HTML.
     ```diff
     // vite.config.js
@@ Expand Down @@