test

Author: AmirSa12

packages/app/server/utils/template.ts

@@ -8,10 +8,12 @@ export function generateTemplateHtml(
 
 <form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
 ${Object.entries(files)
-  .map(
-    ([file, contentOrUrl]) =>
-      `<input type="hidden" name="project[files][${escapeFilename(file)}]" value="${escapeHtml(contentOrUrl)}">`,
-  )
+  .map(([file, contentOrUrl]) => {
+    const escapedFilename = escapeFilename(file);
+    let escapedContent = escapeFileContent(file, contentOrUrl);
+
+    return `<input type="hidden" name="project[files][${escapedFilename}]" value="${escapedContent}">`;
+  })
   .join("\n")}
 <input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
 <input type="hidden" name="project[template]" value="node">
@@ -67,50 +69,55 @@ function escapeFilename(file: string): string {
 // CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 // TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 // SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+function escapeFileContent(filename: string, content: string): string {
+  // Special handling for package.json to preserve formatting
+  if (filename === "package.json") {
+    try {
+      // Parse and re-format the JSON to ensure it's properly formatted
+      const parsedJson = JSON.parse(content);
+      const formattedJson = JSON.stringify(parsedJson, null, 2);
+
+      // URL-encode the entire formatted JSON content
+      // This will preserve all whitespace and formatting when sent through an HTML form
+      // StackBlitz will automatically decode this when loading the file
+      return encodeURIComponent(formattedJson);
+    } catch (e) {
+      console.error("Failed to parse package.json content:", e);
+      return escapeHtml(content);
+    }
+  }
+  return escapeHtml(content);
+}
 
-const matchHtmlRegExp = /["'&<>]/;
-
+// Custom HTML escape function that preserves whitespace and newlines
 function escapeHtml(string: string) {
   const str = `${string}`;
-  const match = matchHtmlRegExp.exec(str);
+  let result = "";
 
-  if (!match) {
-    return str;
-  }
-
-  let escape;
-  let html = "";
-  let index = 0;
-  let lastIndex = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str[i];
+    const code = str.charCodeAt(i);
 
-  for (index = match.index; index < str.length; index++) {
-    switch (str.charCodeAt(index)) {
+    switch (code) {
       case 34: // "
-        escape = "&quot;";
+        result += "&quot;";
         break;
       case 38: // &
-        escape = "&amp;";
+        result += "&amp;";
         break;
       case 39: // '
-        escape = "&#39;";
+        result += "&#39;";
         break;
       case 60: // <
-        escape = "&lt;";
+        result += "&lt;";
         break;
       case 62: // >
-        escape = "&gt;";
+        result += "&gt;";
         break;
       default:
-        continue;
+        result += char;
     }
-
-    if (lastIndex !== index) {
-      html += str.substring(lastIndex, index);
-    }
-
-    lastIndex = index + 1;
-    html += escape;
   }
 
-  return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
+  return result;
 }