rad-coder 1.0.3 → 1.0.4

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

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "rad-coder",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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/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.