Skip to content

Fix code-viewer JSON paths and add boilerplate files for StackBlitz sdk.openProject() #1076

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dobromirts wants to merge 2 commits into
base: vnext
Choose a base branch
from
Open

Fix code-viewer JSON paths and add boilerplate files for StackBlitz sdk.openProject() #1076

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc70305
Fix code-viewer JSON paths and add boilerplate files for StackBlitz s…
dobromirts May 28, 2026
4218854
fix missing JSON data files in code-viewe
dobromirts May 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 33 additions & 16 deletions browser/tasks/gulp-samples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -640,37 +640,54 @@ 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);
}
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);
}
}

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

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";
// 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);
}
var dataItem = new CodeViewer(dataFolder + "/DataSources.ts", dataContent, "ts", "DATA", true);
contentItems.push(dataItem);
}

content += JSON.stringify(contentItems, null, ' ');
Expand Down
Loading