From cc70305c22dea591bea14e830c7ca880f701f048 Mon Sep 17 00:00:00 2001
From: dobromirts <dobromir.ts@gmail.com>
Date: Thu, 28 May 2026 10:24:33 +0300
Subject: [PATCH 1/2] Fix code-viewer JSON paths and add boilerplate files for
 StackBlitz sdk.openProject()

---
 browser/tasks/gulp-samples.js | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/browser/tasks/gulp-samples.js b/browser/tasks/gulp-samples.js
index 4ce965ba70..f0bc943d7d 100644
--- a/browser/tasks/gulp-samples.js
+++ b/browser/tasks/gulp-samples.js
@@ -640,19 +640,23 @@ function updateCodeViewer(cb) {
 
         var dataFiles = [];
         var contentItems = [];
-        var tsxItem = new CodeViewer(sample.SampleFilePath, sample.SampleFileSourceCode, "tsx", "tsx", true);
+        // Strip "../samples/{group}/{component}/{name}/" prefix so StackBlitz sdk.openProject() gets
+        // project-relative paths like "src/index.tsx" instead of "../samples/.../src/index.tsx".
+        var tsxPath = sample.SampleFilePath.replace(sample.SampleFolderPath + '/', '');
+        var tsxItem = new CodeViewer(tsxPath, sample.SampleFileSourceCode, "tsx", "tsx", true);
 
         contentItems.push(tsxItem);
 
         for (const file of sample.SampleFilePaths) {
+            var filePath = file.replace(sample.SampleFolderPath + '/', '');
             if (file.indexOf(".css") > 0) {
                 var cssContent = fs.readFileSync(file, "utf8");
-                var cssItem = new CodeViewer(file, cssContent, "css", "css", true);
+                var cssItem = new CodeViewer(filePath, cssContent, "css", "css", true);
                 contentItems.push(cssItem);
             }
             else if (file.indexOf(".ts") > 0 && file.indexOf("index.tsx") === -1) {
                 var tsContent = fs.readFileSync(file, "utf8");
-                var tsItem = new CodeViewer(file, tsContent, "ts", "DATA", true);
+                var tsItem = new CodeViewer(filePath, tsContent, "ts", "DATA", true);
                 dataFiles.push(tsItem);
             }
         }
@@ -673,6 +677,22 @@ function updateCodeViewer(cb) {
             contentItems.push(dataItem);
         }
 
+        // Add boilerplate files so StackBlitz sdk.openProject() has a complete runnable project.
+        var boilerplateFiles = [
+            { file: "index.html",     ext: "html", header: "html" },
+            { file: "tsconfig.json",  ext: "json", header: "json" },
+            { file: "vite.config.js", ext: "js",   header: "js"   },
+            { file: "package.json",   ext: "json", header: "json" },
+        ];
+        for (const bConfig of boilerplateFiles) {
+            var bPath = sample.SampleFolderPath + "/" + bConfig.file;
+            if (fs.existsSync(bPath)) {
+                var bContent = fs.readFileSync(bPath, "utf8");
+                var bItem = new CodeViewer(bConfig.file, bContent, bConfig.ext, bConfig.header, false);
+                contentItems.push(bItem);
+            }
+        }
+
         content += JSON.stringify(contentItems, null, ' ');
         content += "\r\n}";
 

From 4218854587537995e4a9f423a68c8751b73f9508 Mon Sep 17 00:00:00 2001
From: dobromirts <dobromir.ts@gmail.com>
Date: Thu, 28 May 2026 13:14:24 +0300
Subject: [PATCH 2/2] fix missing JSON data files in code-viewe

---
 browser/tasks/gulp-samples.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/browser/tasks/gulp-samples.js b/browser/tasks/gulp-samples.js
index f0bc943d7d..49d2aa90d7 100644
--- a/browser/tasks/gulp-samples.js
+++ b/browser/tasks/gulp-samples.js
@@ -659,22 +659,19 @@ function updateCodeViewer(cb) {
                 var tsItem = new CodeViewer(filePath, tsContent, "ts", "DATA", true);
                 dataFiles.push(tsItem);
             }
+            else if (file.endsWith(".json")) {
+                // e.g. NwindData.json — imported directly by index.tsx, must be in StackBlitz.
+                var jsonContent = fs.readFileSync(file, "utf8");
+                var jsonItem = new CodeViewer(filePath, jsonContent, "json", "json", false);
+                contentItems.push(jsonItem);
+            }
         }
 
-        if (dataFiles.length === 1) {
-            contentItems.push(dataFiles[0]);
-        } else if (dataFiles.length > 1) {
-            // combining multiple data files into one data source
-            var dataPath = dataFiles[0].path;
-            var dataFolder = dataPath.substring(0, dataPath.lastIndexOf("/"));
-            var dataContent = "// NOTE this file contains multiple data sources:\r\n";
-            for (let i = 0; i < dataFiles.length; i++) {
-                const data = dataFiles[i];
-                dataContent += "\r\n\r\n" + "// Data Source #" + (i + 1) + "\r\n";
-                dataContent += data.content + "\r\n";
-            }
-            var dataItem = new CodeViewer(dataFolder + "/DataSources.ts", dataContent, "ts", "DATA", true);
-            contentItems.push(dataItem);
+        // Add every data file individually so StackBlitz sdk.openProject() receives each file
+        // under its original name. Combining them into DataSources.ts would break import
+        // statements in index.tsx that reference the original file names.
+        for (const df of dataFiles) {
+            contentItems.push(df);
         }
 
         // Add boilerplate files so StackBlitz sdk.openProject() has a complete runnable project.