fix: escape only few chars

packages/backend/server/utils/template.ts

@@ -9,10 +9,8 @@ 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][${encodeURIComponent(file)}]" value="${escapeHtml(contentOrUrl)}">`,
+    ([file, contentOrUrl]) =>
+      `<input type="hidden" name="project[files][${escapeFilename(file)}]" value="${escapeHtml(contentOrUrl)}">`,
   )
   .join("\n")}
 <input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
@@ -24,6 +22,25 @@ ${Object.entries(files)
 </body></html>`;
 }
 
+const escapableChars = "[]";
+
+function escapeFilename(file: string): string {
+  let encodedStr = "";
+
+  for (let i = 0; i < file.length; i++) {
+    const char = file[i];
+
+    // Only encode [ and ]
+    if (escapableChars.includes(char)) {
+      encodedStr += encodeURIComponent(char);
+    } else {
+      encodedStr += char;
+    }
+  }
+
+  return encodedStr;
+}
+
 // https://github.com/component/escape-html/blob/master/LICENSE
 
 // (The MIT License)
@@ -51,51 +68,49 @@ ${Object.entries(files)
 // TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 // SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-var matchHtmlRegExp = /["'&<>]/
+var matchHtmlRegExp = /["'&<>]/;
 
-function escapeHtml (string: string) {
-  var str = '' + string
-  var match = matchHtmlRegExp.exec(str)
+function escapeHtml(string: string) {
+  var str = "" + string;
+  var match = matchHtmlRegExp.exec(str);
 
   if (!match) {
-    return str
+    return str;
   }
 
-  var escape
-  var html = ''
-  var index = 0
-  var lastIndex = 0
+  var escape;
+  var html = "";
+  var index = 0;
+  var lastIndex = 0;
 
   for (index = match.index; index < str.length; index++) {
     switch (str.charCodeAt(index)) {
       case 34: // "
-        escape = '&quot;'
-        break
+        escape = "&quot;";
+        break;
       case 38: // &
-        escape = '&amp;'
-        break
+        escape = "&amp;";
+        break;
       case 39: // '
-        escape = '&#39;'
-        break
+        escape = "&#39;";
+        break;
       case 60: // <
-        escape = '&lt;'
-        break
+        escape = "&lt;";
+        break;
       case 62: // >
-        escape = '&gt;'
-        break
+        escape = "&gt;";
+        break;
       default:
-        continue
+        continue;
     }
 
     if (lastIndex !== index) {
-      html += str.substring(lastIndex, index)
+      html += str.substring(lastIndex, index);
     }
 
-    lastIndex = index + 1
-    html += escape
+    lastIndex = index + 1;
+    html += escape;
   }
 
-  return lastIndex !== index
-    ? html + str.substring(lastIndex, index)
-    : html
+  return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
 }

templates/example-2/src/+page.jsx

@@ -0,0 +1 @@
+// nothing

templates/example-2/src/[route].jsx

@@ -0,0 +1 @@
+// nothing

templates/example-2/src/utils.js

@@ -0,0 +1 @@
+// nothing