fix(sdk): escape brackets in file paths with embedProject/openProject

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 `embedProject` and `openProject` methods. (#2295)
+
 ## 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)

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",

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));
     }
   });