rad-coder 1.0.3 → 1.0.5

package/README.md

@@ -2,6 +2,12 @@
 
 A development environment for testing ResponsiveAds creative custom JavaScript with hot-reload.
 
+
+
+https://github.com/user-attachments/assets/ce7515c5-0920-4f02-b430-6af69fc2d44d
+
+
+
 ## Quick Start
 
 ```bash
@@ -33,14 +39,30 @@ npx rad-coder https://studio.responsiveads.com/creatives/697b80fcc6e904025f5147a
 ### Basic Usage
 
 ```bash
-# Create a new directory for your project
-mkdir my-creative
-cd my-creative
-
-# Start rad-coder with your creative ID
+# Start rad-coder with your creative ID (creates a ./<id> folder)
 npx rad-coder 697b80fcc6e904025f5147a0
 ```
 
+### Continue Working
+
+Next time, just `cd` into the project folder and run without arguments:
+
+```bash
+cd 697b80fcc6e904025f5147a0
+npx rad-coder
+```
+
+The CLI auto-detects the creative from `.rad-coder.json` (or the folder name). Your local `custom.js` is used as-is — no prompts.
+
+### Options
+
+```bash
+npx rad-coder <id> --reset       # Overwrite local custom.js with the remote version
+npx rad-coder <id> --fresh       # Delete folder and start from scratch
+npx rad-coder <id> --editor=cursor  # Use a specific editor
+npx rad-coder <id> --no-editor   # Don't auto-open editor
+```
+
 ### With AI Assistants
 
 The generated `AGENTS.md` file contains instructions for AI coding assistants. When using VS Code with Copilot or other AI tools, they can read this file to understand:
@@ -52,10 +74,11 @@ The generated `AGENTS.md` file contains instructions for AI coding assistants. W
 
 ### Workflow
 
-1. Run `npx rad-coder <creativeId>`
+1. Run `npx rad-coder <creativeId>` (first time — creates project folder)
 2. Edit `custom.js` in your favorite editor
 3. Save the file - browser auto-reloads
 4. See your changes applied to the creative instantly
+5. Next session: `cd <creativeId> && npx rad-coder` to continue
 
 ## Features
 
@@ -93,7 +116,7 @@ Instructions for developers who want to modify rad-coder itself.
 
 ```bash
 # Clone the repository
-git clone https://github.com/nicatronTg/rad-coder.git
+git clone https://github.com/ResponsiveAds/rad-coder.git
 cd rad-coder
 
 # Install dependencies

package/bin/cli.js

@@ -118,12 +118,18 @@ const args = process.argv.slice(2);
 let input = null;
 let editorFlag = null;
 let noEditor = false;
+let resetFlag = false;
+let freshFlag = false;
 
 for (const arg of args) {
   if (arg.startsWith('--editor=')) {
     editorFlag = arg.split('=')[1];
   } else if (arg === '--no-editor') {
     noEditor = true;
+  } else if (arg === '--reset') {
+    resetFlag = true;
+  } else if (arg === '--fresh') {
+    freshFlag = true;
   } else if (!arg.startsWith('--')) {
     input = arg;
   }
@@ -137,7 +143,33 @@ if (noEditor) {
   process.env.RAD_CODER_NO_EDITOR = '1';
 }
 
-const creativeId = extractCreativeId(input);
+let creativeId = extractCreativeId(input);
+
+// Auto-detect creative ID when no argument is given
+if (!creativeId) {
+  const cwd = process.cwd();
+
+  // 1. Check for .rad-coder.json in current directory
+  const configPath = path.join(cwd, '.rad-coder.json');
+  if (fs.existsSync(configPath)) {
+    try {
+      const saved = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+      if (saved.creativeId) {
+        creativeId = saved.creativeId;
+        console.log(`Detected creative from .rad-coder.json: ${creativeId}`);
+      }
+    } catch (_) { /* ignore malformed config */ }
+  }
+
+  // 2. Check if current directory name looks like a creative ID (24-char hex)
+  if (!creativeId) {
+    const dirName = path.basename(cwd);
+    if (/^[a-f0-9]{24}$/i.test(dirName)) {
+      creativeId = dirName;
+      console.log(`Detected creative from folder name: ${creativeId}`);
+    }
+  }
+}
 
 if (!creativeId) {
   console.log('Usage: npx rad-coder <creativeId or previewUrl> [options]');
@@ -145,11 +177,16 @@ if (!creativeId) {
   console.log('Options:');
   console.log('  --editor=<cmd>   Set code editor command (default: code)');
   console.log('  --no-editor      Don\'t auto-open code editor');
+  console.log('  --reset          Overwrite local custom.js with remote version');
+  console.log('  --fresh          Delete local folder and start from scratch');
   console.log('');
   console.log('Examples:');
   console.log('  npx rad-coder 697b80fcc6e904025f5147a0');
   console.log('  npx rad-coder https://studio.responsiveads.com/creatives/697b80fcc6e904025f5147a0/preview');
   console.log('  npx rad-coder 697b80fcc6e904025f5147a0 --editor=cursor');
+  console.log('');
+  console.log('Continue working (from inside a project folder):');
+  console.log('  cd 697b80fcc6e904025f5147a0 && npx rad-coder');
   process.exit(1);
 }
 
@@ -158,22 +195,36 @@ async function main() {
   const cwd = process.cwd();
   const currentDirName = path.basename(cwd);
   let userDir;
+  let isNewProject = false;
+
+  // Check if a .rad-coder.json exists in cwd (we're inside a project folder)
+  const cwdConfigPath = path.join(cwd, '.rad-coder.json');
+  const inProjectDir = fs.existsSync(cwdConfigPath) || currentDirName === creativeId;
 
-  if (currentDirName === creativeId) {
+  if (inProjectDir) {
     // Already in the correct folder
     userDir = cwd;
-    console.log(`Using existing folder: ./${creativeId}`);
+    console.log(`Using existing project: ${userDir}`);
   } else {
     // Create or use a folder with the creative ID
     userDir = path.join(cwd, creativeId);
     if (!fs.existsSync(userDir)) {
       fs.mkdirSync(userDir);
+      isNewProject = true;
       console.log(`Created folder: ./${creativeId}`);
     } else {
       console.log(`Using existing folder: ./${creativeId}`);
     }
   }
 
+  // Handle --fresh: delete folder and recreate
+  if (freshFlag && fs.existsSync(userDir)) {
+    fs.rmSync(userDir, { recursive: true, force: true });
+    fs.mkdirSync(userDir);
+    isNewProject = true;
+    console.log(`  Fresh start: deleted and recreated ./${creativeId}`);
+  }
+
   // Set environment variables for the server
   process.env.RAD_CODER_USER_DIR = userDir;
   process.env.RAD_CODER_PACKAGE_DIR = packageRoot;
@@ -189,56 +240,40 @@ async function main() {
   const hasCreativeCustomJs = config.customjs && config.customjs.trim().length > 0;
 
   // Handle custom.js file creation/update
-  if (hasCreativeCustomJs) {
-    if (!customJsExists) {
-      // custom.js doesn't exist - ask user what to use
-      const choice = await promptUser(
-        'Found customJS in this creative. What would you like to use?',
-        [
-          'Use customJS from the creative (recommended)',
-          'Start with blank template'
-        ]
-      );
-
-      if (choice === 0) {
-        // Use customjs from creative
-        fs.writeFileSync(customJsPath, config.customjs, 'utf-8');
-        console.log('  Created custom.js (from creative)');
-      } else {
-        // Use template
-        const templatePath = path.join(packageRoot, 'templates', 'custom.js');
-        if (fs.existsSync(templatePath)) {
-          fs.copyFileSync(templatePath, customJsPath);
-          console.log('  Created custom.js (from template)');
-        }
-      }
+  if (resetFlag && hasCreativeCustomJs) {
+    // --reset: overwrite local custom.js with remote version
+    fs.writeFileSync(customJsPath, config.customjs, 'utf-8');
+    console.log('  Reset custom.js (from creative)');
+  } else if (customJsExists) {
+    // custom.js already exists — use it silently (zero-friction repeat run)
+    console.log('  Using existing custom.js');
+  } else if (hasCreativeCustomJs) {
+    // First run with remote customjs available — prompt
+    const choice = await promptUser(
+      'Found customJS in this creative. What would you like to use?',
+      [
+        'Use customJS from the creative (recommended)',
+        'Start with blank template'
+      ]
+    );
+
+    if (choice === 0) {
+      fs.writeFileSync(customJsPath, config.customjs, 'utf-8');
+      console.log('  Created custom.js (from creative)');
     } else {
-      // custom.js exists - ask user if they want to overwrite
-      const choice = await promptUser(
-        'Found customJS in this creative. Your custom.js already exists.',
-        [
-          'Keep existing custom.js',
-          'Overwrite with customJS from creative'
-        ]
-      );
-
-      if (choice === 1) {
-        // Overwrite with creative's customjs
-        fs.writeFileSync(customJsPath, config.customjs, 'utf-8');
-        console.log('  Overwrote custom.js with creative\'s customJS');
-      } else {
-        console.log('  Keeping existing custom.js');
-      }
-    }
-  } else {
-    // No customjs in creative - use template if custom.js doesn't exist
-    if (!customJsExists) {
       const templatePath = path.join(packageRoot, 'templates', 'custom.js');
       if (fs.existsSync(templatePath)) {
         fs.copyFileSync(templatePath, customJsPath);
         console.log('  Created custom.js (from template)');
       }
     }
+  } else {
+    // No customjs in creative — use template if custom.js doesn't exist
+    const templatePath = path.join(packageRoot, 'templates', 'custom.js');
+    if (fs.existsSync(templatePath)) {
+      fs.copyFileSync(templatePath, customJsPath);
+      console.log('  Created custom.js (from template)');
+    }
   }
 
   // Copy AGENTS.md if it doesn't exist
@@ -251,6 +286,22 @@ async function main() {
     }
   }
 
+  // Save .rad-coder.json config for future no-arg runs
+  const radCoderConfigPath = path.join(userDir, '.rad-coder.json');
+  const savedConfig = {
+    creativeId: config.creativeId,
+    flowlineId: config.flowlineId,
+    flowlineName: config.flowlineName,
+    createdAt: fs.existsSync(radCoderConfigPath)
+      ? JSON.parse(fs.readFileSync(radCoderConfigPath, 'utf-8')).createdAt
+      : new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  };
+  fs.writeFileSync(radCoderConfigPath, JSON.stringify(savedConfig, null, 2) + '\n', 'utf-8');
+  if (isNewProject) {
+    console.log('  Created .rad-coder.json');
+  }
+
   // Start the server with pre-fetched config
   await startServer(config);
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "rad-coder",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Development environment for testing ResponsiveAds creative custom JS with hot-reload",
   "bin": {
-    "rad-coder": "./bin/cli.js"
+    "rad-coder": "bin/cli.js"
   },
   "scripts": {
     "dev": "node bin/cli.js",
@@ -26,7 +26,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/ResponsiveAds/rad-coder"
+    "url": "git+https://github.com/ResponsiveAds/rad-coder.git"
   },
   "author": "ResponsiveAds",
   "license": "MIT",

package/public/test.html

@@ -87,23 +87,8 @@
     }
     
     .ad-container {
-      padding: 20px;
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-    }
-    
-    .ad-wrapper {
-      background: #fff;
-      border-radius: 8px;
-      overflow: hidden;
-      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
     }
     
-    .inner-content {
-      width: 100%;
-      min-height: 300px;
-    }
     
     /* Toast notification for reload */
     .toast {
@@ -180,6 +165,8 @@
         document.getElementById('creative-id').textContent = 'Loading...';
         
         const config = await fetchConfigWithRetry();
+        //not sure why we get URL that does not work https://edit.responsiveads.com/flowlines
+        config.flSource = 'https://s3-eu-west-1.amazonaws.com/publish.responsiveads.com/flowlines/';
         
         // Update UI
         document.getElementById('creative-id').textContent = `ID: ${config.creativeId}`;
@@ -231,7 +218,7 @@
         tracking: false,
         isFluid: config.isFluid,
         screenshot: false,
-        crossOrigin: true,
+        crossOrigin: false,
         flSource: config.flSource,
         config: { 
           _default: { 

package/server/index.js

@@ -315,7 +315,15 @@ async function fetchCreativeConfig(creativeId) {
 // ============================================================
 
 const app = express();
-const server = http.createServer(app);
+const server = http.createServer({ maxHeaderSize: 65536 }, app);
+
+// Track active HTTP sockets so shutdown can force-close stragglers.
+const activeSockets = new Set();
+server.on('connection', (socket) => {
+  activeSockets.add(socket);
+  socket.on('close', () => activeSockets.delete(socket));
+});
+let isShuttingDown = false;
 
 // WebSocket server for hot-reload
 const wss = new WebSocketServer({ server });
@@ -608,13 +616,53 @@ if (!isModule) {
 
 // Graceful shutdown
 function gracefulShutdown() {
+  if (isShuttingDown) {
+    console.log('\n Force exiting...\n');
+    process.exit(130);
+  }
+  isShuttingDown = true;
+
   if (tui) {
     tui.destroy();
   }
   console.log('\n Shutting down...');
-  watcher.close();
-  wss.close();
-  server.close(() => {
+  console.log(' Press Ctrl+C again to force exit');
+
+  // Ensure websocket clients do not keep the process alive.
+  clients.forEach((client) => {
+    try {
+      client.terminate();
+    } catch (_) {
+      // Ignore client termination failures during shutdown.
+    }
+  });
+
+  if (typeof server.closeIdleConnections === 'function') {
+    server.closeIdleConnections();
+  }
+
+  if (typeof server.closeAllConnections === 'function') {
+    server.closeAllConnections();
+  }
+
+  const forceTimer = setTimeout(() => {
+    activeSockets.forEach((socket) => {
+      try {
+        socket.destroy();
+      } catch (_) {
+        // Ignore socket destroy failures during forced shutdown.
+      }
+    });
+    console.log(' Forced shutdown: closed remaining connections');
+    process.exit(0);
+  }, 2000);
+
+  Promise.allSettled([
+    Promise.resolve().then(() => watcher.close()),
+    new Promise((resolve) => wss.close(resolve)),
+    new Promise((resolve) => server.close(resolve)),
+  ]).finally(() => {
+    clearTimeout(forceTimer);
     console.log(' Server stopped\n');
     process.exit(0);
   });

package/templates/AGENTS.md

@@ -4,6 +4,9 @@ You are an agent writing only JS for a responsive creative. The creative was bui
 
 To do this you can only edit the `custom.js` file in this directory. When you edit and save this file the creative will be automatically loaded on the test page: http://localhost:3000/test.html. The code you wrote in `custom.js` will be applied to the creative.
 
+Use the http://localhost:3000/test.html URL to open creative in the browser. Inspect the HTML dom so that you can use IDs from elements inside the custom.js code. Alo use the browser to test the code and make sure there are no console.log errors. 
+
+
 Use modern JS standards and code practices.
 
 We can use custom in situations when we want to add extra interactivity to our responsive creative. Use the Radical API to access elements added from the editor, update their behavior, and add custom functionalities to your ad.
@@ -16,6 +19,32 @@ You can use all available JavaScript functions to manipulate element position an
 
 This document outlines the specific implementation patterns and lifecycle hooks for the Radical API. Use this guide to programmatically control elements, manage dynamic data (DCO), and handle cross-window interactions in ResponsiveAds creatives.
 
+Use this as a good starting point always call functions from `!rad.getMergedContent().inEditor` check to prevent messing up the editor code. 
+
+```
+var rad = Radical.getAdByWindow(window);
+var container = rad.getContainer();
+
+var inScreenshot = window.location.href.indexOf('preview?screenshot=1') > -1 ? true : false;
+
+
+if (!rad.getMergedContent().inEditor) {
+    rad.onLoad(onAdLoaded);
+    rad.onBeforeRender(onBeforeRender);  
+    rad.onRender(onAdRender);
+    
+}
+function onAdLoaded() {}
+function onBeforeRender(arg) {
+    console.log('onBeforeRender', arg);
+}
+function onAdRender() {
+    console.log('onAdRender');
+    const el = rad.getElementById('a2');
+    console.log(el);
+}
+```
+
 ## 1. Initializing the Controller
 
 Every script must first reference the ad instance and its container.