Skip to content

[DASH-1732] [templates] add build step to create javascript templates#75

Open
syd-shields wants to merge 10 commits intodevfrom
sydshields/dash-1732-turn-existing-templates-in-js-files
Open

[DASH-1732] [templates] add build step to create javascript templates#75
syd-shields wants to merge 10 commits intodevfrom
sydshields/dash-1732-turn-existing-templates-in-js-files

Conversation

@syd-shields
Copy link
Copy Markdown

@syd-shields syd-shields commented Mar 30, 2026

  • Adds a build script in package.json build:javascript.
  • Added scripts/build-javascript.mjs
  • Scans typescript/ for .ts and .tsx and transpiles each file with the TypeScript compiler API
  • Outputs to javascript/
  • Added GitHub Actions workflow at .github/workflows/build-javascript.yml
  • Auto-commits updates in javascript/** back to the branch

Note

Medium Risk
Adds an automated build-and-auto-commit GitHub Action that writes to javascript/** on pushes, which could unexpectedly change committed artifacts and create CI churn if the generator is unstable. Changes are mostly additive and isolated to template generation infrastructure.

Overview
Adds a new JS-template generation pipeline: pnpm run build:javascript runs scripts/build-javascript.mjs to transpile typescript/** sources to javascript/**, copy non-TS assets, and rewrite per-template package.json files (script commands, entrypoints, and TypeScript-only dev deps).

Introduces a GitHub Actions workflow (build-javascript.yml) that runs this generator on pushes/PRs affecting templates and auto-commits regenerated javascript/** artifacts back to main/dev (skipped for PR events).

Checks in newly generated javascript/** template directories (e.g., Amazon price comparison, scraping, caching, captcha, downloads/parsing integrations, agents) as the output of the new build step.

Reviewed by Cursor Bugbot for commit 189e4b0. Bugbot is set up for automated code reviews on this repo. Configure here.

@syd-shields
Copy link
Copy Markdown
Author

syd-shields commented Mar 30, 2026

This change is part of the following stack:

Change managed by git-spice.

@syd-shields syd-shields changed the title add build step to create javascript templates [DASH-1732] [templates] add build step to create javascript templates Mar 30, 2026
@syd-shields syd-shields requested a review from jay-sahnan April 1, 2026 14:38
async function getTypeScriptFiles(dir) {
const entries = await readdir(dir, { withFileTypes: true });
const files = await Promise.all(
entries.map(async (entry) => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we add more templates and nextjs apps (see Human in the loop example), would we want to add some more filtering here?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added some more filtering as well as the ability to specify which files to build.

@jay-sahnan
Copy link
Copy Markdown
Contributor

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.

Comment thread scripts/build-javascript.mjs
Comment thread scripts/build-javascript.mjs Outdated
Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

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 .js references.

Create PR

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.

Reviewed by Cursor Bugbot for commit 189e4b0. Configure here.

const outputPath = path.join(JAVASCRIPT_DIR, relativePath);
await mkdir(path.dirname(outputPath), { recursive: true });
await copyFile(sourcePath, outputPath);
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Build script copies READMEs without transforming TypeScript references

Medium Severity

The copyAssetFile function copies READMEs verbatim from typescript/ to javascript/ without transforming TypeScript-specific content. While package.json files get adapted via adaptPackageJsonForJavaScript, README files receive no such treatment. This causes multiple JavaScript READMEs to contain incorrect references: cd typescript/amazon-product-scraping instead of javascript/..., index.ts instead of index.js, etc. Affected READMEs include amazon-product-scraping, company-value-prop-generator, extend-browserbase, dynamic-form-filling, company-address-finder, and getting-started-with-browserbase. Users following these instructions will be directed to the wrong directory and wrong files.

Additional Locations (2)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 189e4b0. Configure here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants