[DASH-1732] [templates] add build step to create javascript templates#75
[DASH-1732] [templates] add build step to create javascript templates#75syd-shields wants to merge 24 commits into
Conversation
|
This change is part of the following stack: Change managed by git-spice. |
syd-shields
changed the title
|
In the templates repo, all scripts should be runnable out of the box. Some templates have package.json files that need to be copied over to the JavaScript versions. However, we can't just copy them as-is — they still reference TypeScript. For example, they contain "start": "tsx index.ts" and TypeScript devDependencies. These need to be rewritten for JS (e.g., "start": "node index.js", remove tsx, typescript, @types/*). We should also copy over the READMEs if possible. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Autofix Details
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Build script copies READMEs without transforming TypeScript references
- The build script now rewrites README content when copying so TypeScript paths/extensions are converted to JavaScript equivalents and regenerated JavaScript READMEs contain correct
javascript/and.jsreferences.
- The build script now rewrites README content when copying so TypeScript paths/extensions are converted to JavaScript equivalents and regenerated JavaScript READMEs contain correct
Or push these changes by commenting:
@cursor push 94170f2cf4
Preview (94170f2cf4)
diff --git a/javascript/amazon-product-scraping/README.md b/javascript/amazon-product-scraping/README.md
--- a/javascript/amazon-product-scraping/README.md
+++ b/javascript/amazon-product-scraping/README.md
@@ -17,11 +17,11 @@
## QUICKSTART
-1. cd typescript/amazon-product-scraping
+1. cd javascript/amazon-product-scraping
2. npm install
3. cp .env.example .env (or create .env with required keys)
4. Add BROWSERBASE_PROJECT_ID, BROWSERBASE_API_KEY, and GOOGLE_API_KEY to .env
-5. Optionally edit SEARCH_QUERY in index.ts
+5. Optionally edit SEARCH_QUERY in index.js
6. npm start
## EXPECTED OUTPUT
@@ -49,7 +49,7 @@
## NEXT STEPS
-• Switch to direct URL: Uncomment the URL-based search block in index.ts for faster runs without LLM search actions.
+• Switch to direct URL: Uncomment the URL-based search block in index.js for faster runs without LLM search actions.
• Parameterize query: Accept SEARCH_QUERY from CLI or env for different products without editing code.
• Paginate: Extend extraction to multiple pages or increase the number of products per run.
diff --git a/javascript/company-address-finder/README.md b/javascript/company-address-finder/README.md
--- a/javascript/company-address-finder/README.md
+++ b/javascript/company-address-finder/README.md
@@ -27,7 +27,7 @@
2. npm install
3. cp .env.example .env
4. Add your Browserbase API key, Project ID, and Google Generative AI API key to .env
-5. Edit COMPANY_NAMES array in index.ts to specify which companies to process
+5. Edit COMPANY_NAMES array in index.js to specify which companies to process
6. npm start
## EXPECTED OUTPUT
diff --git a/javascript/company-value-prop-generator/README.md b/javascript/company-value-prop-generator/README.md
--- a/javascript/company-value-prop-generator/README.md
+++ b/javascript/company-value-prop-generator/README.md
@@ -16,7 +16,7 @@
## QUICKSTART
-1. cd typescript/company-value-prop-generator
+1. cd javascript/company-value-prop-generator
2. npm install
3. cp .env.example .env
4. Add required API keys/IDs to .env
diff --git a/javascript/dynamic-form-filling/README.md b/javascript/dynamic-form-filling/README.md
--- a/javascript/dynamic-form-filling/README.md
+++ b/javascript/dynamic-form-filling/README.md
@@ -21,7 +21,7 @@
1. pnpm install
2. cp .env.example .env
3. Add required API keys/IDs to .env (BROWSERBASE_PROJECT_ID, BROWSERBASE_API_KEY, GOOGLE_GENERATIVE_AI_API_KEY)
-4. Customize the `tripDetails` variable in index.ts with your own form data
+4. Customize the `tripDetails` variable in index.js with your own form data
5. Update the form URL if using a different form
6. pnpm start
diff --git a/javascript/extend-browserbase/README.md b/javascript/extend-browserbase/README.md
--- a/javascript/extend-browserbase/README.md
+++ b/javascript/extend-browserbase/README.md
@@ -23,7 +23,7 @@
## QUICKSTART
-1. cd typescript/extend-browserbase
+1. cd javascript/extend-browserbase
2. pnpm install
3. cp .env.example .env
4. Add required API keys to .env:
diff --git a/javascript/getting-started-with-browserbase/README.md b/javascript/getting-started-with-browserbase/README.md
--- a/javascript/getting-started-with-browserbase/README.md
+++ b/javascript/getting-started-with-browserbase/README.md
@@ -31,7 +31,7 @@
### TypeScript
-1. cd typescript/getting-started-with-browserbase
+1. cd javascript/getting-started-with-browserbase
2. npm install
3. cp .env.example .env
4. Add BROWSERBASE_API_KEY to .env (get it from https://browserbase.com/settings)
diff --git a/javascript/image-url-download/README.md b/javascript/image-url-download/README.md
--- a/javascript/image-url-download/README.md
+++ b/javascript/image-url-download/README.md
@@ -15,7 +15,7 @@
Docs → https://docs.stagehand.dev/basics/extract
- page.evaluate: run a JavaScript function directly inside the browser context — inherits proxy, cookies, and headers.
Docs → https://playwright.dev/docs/evaluating
-- MAX_IMAGES: configurable cap (default: 10) on how many images to download per run. Set via the `MAX_IMAGES` env var or the constant at the top of `index.ts`.
+- MAX_IMAGES: configurable cap (default: 10) on how many images to download per run. Set via the `MAX_IMAGES` env var or the constant at the top of `index.js`.
## QUICKSTART
@@ -43,7 +43,7 @@
- Empty images folder: some pages load images lazily — try scrolling the page before extraction, or increase the page load wait
- Zero images found: the page may use CSS background images not captured by `<img>` tags — adjust the extract instruction to target specific selectors
- CORS / auth-gated images: images behind login walls or strict CORS policies may fail in `page.evaluate()` — ensure you are authenticated before running the script
-- MAX_IMAGES cap: if you need more than 10 images, set `MAX_IMAGES=50` in your .env or edit the constant at the top of `index.ts`
+- MAX_IMAGES cap: if you need more than 10 images, set `MAX_IMAGES=50` in your .env or edit the constant at the top of `index.js`
- Large pages: pages with hundreds of images may slow down `extract()` — use MAX_IMAGES to limit the download set
## USE CASES
@@ -58,7 +58,7 @@
• Scroll before extracting: call `page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))` before `extract()` to trigger lazy-loaded images.
• Concurrent downloads: fan out the `page.evaluate` fetch calls with `Promise.allSettled` for faster bulk downloads.
• Metadata CSV: write a `manifest.csv` alongside the images recording original URL, filename, MIME type, byte size, and download timestamp.
-• Extend MIME support: add entries to the `MIME_TO_EXT` map at the top of `index.ts` for any formats not already covered.
+• Extend MIME support: add entries to the `MIME_TO_EXT` map at the top of `index.js` for any formats not already covered.
## HELPFUL RESOURCES
diff --git a/javascript/playwright/basic-recaptcha/README.md b/javascript/playwright/basic-recaptcha/README.md
--- a/javascript/playwright/basic-recaptcha/README.md
+++ b/javascript/playwright/basic-recaptcha/README.md
@@ -67,7 +67,7 @@
## QUICKSTART
-1. cd typescript/playwright/basic-recaptcha
+1. cd javascript/playwright/basic-recaptcha
2. pnpm install
3. cp .env.example .env
4. Add your Browserbase API key to .env
diff --git a/javascript/sec-filing-research/README.md b/javascript/sec-filing-research/README.md
--- a/javascript/sec-filing-research/README.md
+++ b/javascript/sec-filing-research/README.md
@@ -25,7 +25,7 @@
2. npm install
3. cp .env.example .env
4. Add BROWSERBASE_PROJECT_ID, BROWSERBASE_API_KEY, and GOOGLE_API_KEY to .env
-5. (Optional) Edit SEARCH_QUERY and NUM_FILINGS in index.ts
+5. (Optional) Edit SEARCH_QUERY and NUM_FILINGS in index.js
6. npm start
## EXPECTED OUTPUT
diff --git a/javascript/website-link-tester/README.md b/javascript/website-link-tester/README.md
--- a/javascript/website-link-tester/README.md
+++ b/javascript/website-link-tester/README.md
@@ -18,7 +18,7 @@
### QUICKSTART
1. **cd into the template**
- - `cd typescript/website-link-tester`
+ - `cd javascript/website-link-tester`
2. **Install dependencies**
- `npm install`
3. **Configure environment**
@@ -76,7 +76,7 @@
### TUNING BATCH SIZE & CONCURRENCY
-- **`MAX_CONCURRENT_LINKS` in `index.ts`**
+- **`MAX_CONCURRENT_LINKS` in `index.js`**
- Default: `1` → sequential link verification (works on all plans)
- Set to `> 1` → more concurrent link verifications per batch (requires higher Browserbase concurrency limits)
- **Using Semaphores for advanced control**
diff --git a/scripts/build-javascript.mjs b/scripts/build-javascript.mjs
--- a/scripts/build-javascript.mjs
+++ b/scripts/build-javascript.mjs
@@ -76,6 +76,15 @@
return pkg;
}
+function adaptReadmeForJavaScript(content) {
+ return content
+ .replaceAll("typescript/", "javascript/")
+ .replaceAll(/\.d\.ts\b/g, "__PRESERVE_D_TS__")
+ .replaceAll(/\.tsx\b/g, ".jsx")
+ .replaceAll(/\.ts\b/g, ".js")
+ .replaceAll(/__PRESERVE_D_TS__/g, ".d.ts");
+}
+
function normalizeRelativePath(filePath) {
return filePath.split(path.sep).join("/");
}
@@ -187,6 +196,15 @@
await writeFile(outputPath, `${JSON.stringify(adapted, null, 2)}\n`, "utf8");
}
+async function writeAdaptedReadme(sourcePath) {
+ const relativePath = path.relative(TYPESCRIPT_DIR, sourcePath);
+ const outputPath = path.join(JAVASCRIPT_DIR, relativePath);
+ const source = await readFile(sourcePath, "utf8");
+ const adapted = adaptReadmeForJavaScript(source);
+ await mkdir(path.dirname(outputPath), { recursive: true });
+ await writeFile(outputPath, adapted, "utf8");
+}
+
async function transpileFile(sourcePath) {
const relativePath = path.relative(TYPESCRIPT_DIR, sourcePath);
const outputPath = path
@@ -260,6 +278,8 @@
assetFiles.map(async (filePath) => {
if (path.basename(filePath) === "package.json") {
await writeAdaptedPackageJson(filePath);
+ } else if (path.basename(filePath) === "README.md") {
+ await writeAdaptedReadme(filePath);
} else {
await copyAssetFile(filePath);
}This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.
…ed and rewritten with new build
syd-shields
force-pushed
the
sydshields/dash-1732-turn-existing-templates-in-js-files
branch
from
8d8479e to
3173ce4
Compare
| const argv = ["scripts/build-javascript.mjs"]; | ||
| for (const name of dirs) { | ||
| argv.push("--include-template", name); | ||
| } |
There was a problem hiding this comment.
Empty API response causes CI to build all templates
Medium Severity
When fetchPlaygroundTypescriptDirNames returns an empty array (e.g., the templates API returns zero playground-runnable templates), the for loop adds no --include-template flags to argv. The build script then receives no filter arguments, causing includeTemplates.size to be 0 and falling through to the else branch that wipes javascript/ and rebuilds every template instead of none. The CI workflow would then commit all templates to the production branch, which is the opposite of the intended behavior.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit b17759b. Configure here.
| const argv = ["scripts/build-javascript.mjs"]; | ||
| for (const name of dirs) { | ||
| argv.push("--include-template", name); | ||
| } |
There was a problem hiding this comment.
Empty API response causes CI to build all templates
Medium Severity
When fetchPlaygroundTypescriptDirNames returns an empty array (e.g., the templates API returns zero playground-runnable templates), the for loop adds no --include-template flags to argv. The build script then receives no filter arguments, causing includeTemplates.size to be 0 and falling through to the else branch that wipes javascript/ and rebuilds every template instead of none. The CI workflow would then commit all templates to the production branch, which is the opposite of the intended behavior.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit b17759b. Configure here.
|
|
||
| const includeTemplates = new Set(parseListFlag(argv, "--include-template")); | ||
| const includePaths = parseListFlag(argv, "--include-path"); | ||
| const excludePathOnly = parseListFlag(argv, "--exclude-path"); |
There was a problem hiding this comment.
Flags parsed redundantly in filter and main function
Low Severity
parseListFlag is called for --include-template, --include-path, and --exclude-path in buildJavaScriptTemplates (lines 29–31), duplicating the exact same parsing already done inside createFileFilter (lines 92, 98, 99). This duplication means changes to flag names or parsing logic need to be synchronized in two places — if one is updated and the other is not, the file-filtering and directory-cleanup behaviors would silently diverge.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit ed33a0c. Configure here.
| } | ||
| if (typeof scripts.build === "string" && /^\s*tsc(\s|$)/u.test(scripts.build)) { | ||
| delete scripts.build; | ||
| } |
There was a problem hiding this comment.
Build script deletion too aggressive for compound commands
Medium Severity
The regex /^\s*tsc(\s|$)/u deletes the entire build script if it merely starts with tsc, even in compound commands like "tsc && next build" or "tsc --noEmit && vite build". The (\s|$) after tsc matches a space, so tsc && next build passes the test and the whole script is removed — silently dropping the non-TypeScript next build step. The check intends to strip pure-tsc build scripts but doesn't account for &&/;/|| chained commands.
Reviewed by Cursor Bugbot for commit ed33a0c. Configure here.
…itionally set for all generated JS templates
…ke updates to it twice
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 5 total unresolved issues (including 4 from previous reviews).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit a143d03. Configure here.
jay-sahnan
left a comment
jay-sahnan
left a comment
There was a problem hiding this comment.
Syd, this looks great! Thank you!
Tiny NITS:
- We should add javascript/ to .gitignore
- How do we test/validate that the conversion to JS? Is this a CI job on future PRs to the dev branch?
2 participants
This PR adds a playground-production CI workflow that builds Typescript templates into playground compatible templates as deemed by the website-api templates API.
In order to marke this Linear issue as done:
sydshields/dash-1732-turn-existing-templates-in-js-filesintodevproductionbranch, enable branch protectiondevintoproductionAdded a JS build script
build:javascript. This command runs build TS files into JS ones in CIscripts/build-javascript.mjswhich builds the JS files to /javascriptAdded a production branch for dashboard use
.github/workflows/playground-productiont.yml. This only runs on theproductionbranchscripts/playground-ci.mjswhich is ran in the playground-production workflow. It callsfetchPlaygroundTypescriptDirNamesand runsscripts/build-javascript.mjsEnsure playground compatibility by delegating templates API as source of truth
fetchPlaygroundTypescriptDirNameswhich uses the wesbite-api templates API to grab playground compatible templates from the source of truthhasStagehandUsageto ensure Stagehand is being used correctlyWhat's not included:
Note
Medium Risk
Adds new GitHub Actions workflows that fetch a remote templates list, generate
javascript/output, and auto-commit/push to protected branches; failures or API changes could impact release CI and repo state.Overview
Introduces a playground-only TypeScript→JavaScript generation pipeline:
pnpm run ci:playgroundnow buildsjavascript/from a filtered set oftypescript/templates determined by the public templates API, then validates those sources.Adds reusable GitHub Actions (
.github/workflows/playground.yml) plus branch-specific triggers forproductionandtest-productionthat run the pipeline and auto-commit/push regeneratedjavascript/on pushes.Adds local tooling via
scripts/build-javascript.mjs(pnpm run build:javascript) with include/exclude filters andpackage.jsonrewriting, plus validation checks inscripts/validate-playground-templates.mjs(parse diagnostics + forbiddenconnectOverCDPusage + Stagehand constructor enforcement). Also adds CODEOWNERS coverage for the new workflows/scripts and documents the new source-of-truth behavior inREADME.md.Reviewed by Cursor Bugbot for commit 3e85383. Bugbot is set up for automated code reviews on this repo. Configure here.