From 5367c27a06993bdf6b5001ec40284f931d3e392b Mon Sep 17 00:00:00 2001
From: Florens Verschelde <florens@fvsch.com>
Date: Thu, 26 Jan 2023 19:22:02 +0100
Subject: [PATCH] fix(sdk): escape brackets in file paths with
 embedProject/openProject

---
 sdk/CHANGELOG.md      |  4 ++++
 sdk/package-lock.json |  4 ++--
 sdk/package.json      |  2 +-
 sdk/src/generate.ts   | 16 ++++++++++++++--
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/sdk/CHANGELOG.md b/sdk/CHANGELOG.md
index 15d58b34..6b909b69 100644
--- a/sdk/CHANGELOG.md
+++ b/sdk/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @stackblitz/sdk changelog
 
+## v1.8.2 (2023-01-26)
+
+- Fixed using the characters `[]` in file paths with the `embedProjects` and `openProjects` methods. (#TODO-PR-NUMBER)
+
 ## v1.8.1 (2022-11-10)
 
 - Fixed the case of the URL query parameters for the `hideDevTools` and `devToolsHeight` options, for backwards compatibility with StackBlitz EE. (#2154)
diff --git a/sdk/package-lock.json b/sdk/package-lock.json
index 26609acd..8cfa79fb 100644
--- a/sdk/package-lock.json
+++ b/sdk/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@stackblitz/sdk",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@stackblitz/sdk",
-      "version": "1.8.0",
+      "version": "1.8.2",
       "license": "MIT",
       "devDependencies": {
         "microbundle": "~0.14.2",
diff --git a/sdk/package.json b/sdk/package.json
index a40db83f..1c4e9e6b 100644
--- a/sdk/package.json
+++ b/sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stackblitz/sdk",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "SDK for generating and embedding StackBlitz projects.",
   "main": "./bundles/sdk.js",
   "module": "./bundles/sdk.m.js",
diff --git a/sdk/src/generate.ts b/sdk/src/generate.ts
index 3f21449a..3f6398b6 100644
--- a/sdk/src/generate.ts
+++ b/sdk/src/generate.ts
@@ -10,6 +10,16 @@ function createHiddenInput(name: string, value: string) {
   return input;
 }
 
+/**
+ * Encode file paths for use in input name attributes.
+ * We need to replace square brackets (as used by Next.js, SvelteKit, etc.),
+ * with custom escape sequences. Important: do not encodeURIComponent the
+ * whole path, for compatibility with the StackBlitz backend.
+ */
+function bracketedFilePath(path: string) {
+  return `[${path.replace(/\[/g, '%5B').replace(/\]/g, '%5D')}]`;
+}
+
 function createProjectForm(project: Project) {
   if (!PROJECT_TEMPLATES.includes(project.template)) {
     const names = PROJECT_TEMPLATES.map((t) => `'${t}'`).join(', ');
@@ -43,8 +53,10 @@ function createProjectForm(project: Project) {
   }
 
   Object.keys(project.files).forEach((path) => {
-    if (typeof project.files[path] === 'string') {
-      form.appendChild(createHiddenInput(`project[files][${path}]`, project.files[path]));
+    const name = 'project[files]' + bracketedFilePath(path);
+    const value = project.files[path];
+    if (typeof value === 'string') {
+      form.appendChild(createHiddenInput(name, value));
     }
   });