@aquiles-ai/renderize 1.2.0 → 1.4.0

package/dist/index.cjs

@@ -121,26 +121,22 @@ function Renderize({
   style,
   onError
 }) {
-  const iframeRef = (0, import_react.useRef)(null);
-  const blobUrlRef = (0, import_react.useRef)(null);
-  const [key, setKey] = (0, import_react.useState)(0);
+  const prevUrlRef = (0, import_react.useRef)(null);
+  const [blobUrl, setBlobUrl] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
     if (!code?.trim()) return;
-    if (blobUrlRef.current) {
-      URL.revokeObjectURL(blobUrlRef.current);
+    if (prevUrlRef.current) {
+      URL.revokeObjectURL(prevUrlRef.current);
     }
     const html = buildTemplate(code);
     const blob = new Blob([html], { type: "text/html" });
     const url = URL.createObjectURL(blob);
-    blobUrlRef.current = url;
-    if (iframeRef.current) {
-      iframeRef.current.src = url;
-    }
-    setKey((prev) => prev + 1);
+    prevUrlRef.current = url;
+    setBlobUrl(url);
     return () => {
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
+      if (prevUrlRef.current) {
+        URL.revokeObjectURL(prevUrlRef.current);
+        prevUrlRef.current = null;
       }
     };
   }, [code]);
@@ -158,10 +154,10 @@ function Renderize({
     {
       className,
       style: { width, height, overflow: "hidden", ...style },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: blobUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "iframe",
         {
-          ref: iframeRef,
+          src: blobUrl,
           title: "Renderize Sandbox",
           sandbox: "allow-scripts",
           style: {
@@ -171,7 +167,7 @@ function Renderize({
             display: "block"
           }
         },
-        key
+        blobUrl
       )
     }
   );

package/dist/index.js

@@ -95,26 +95,22 @@ function Renderize({
   style,
   onError
 }) {
-  const iframeRef = useRef(null);
-  const blobUrlRef = useRef(null);
-  const [key, setKey] = useState(0);
+  const prevUrlRef = useRef(null);
+  const [blobUrl, setBlobUrl] = useState(null);
   useEffect(() => {
     if (!code?.trim()) return;
-    if (blobUrlRef.current) {
-      URL.revokeObjectURL(blobUrlRef.current);
+    if (prevUrlRef.current) {
+      URL.revokeObjectURL(prevUrlRef.current);
     }
     const html = buildTemplate(code);
     const blob = new Blob([html], { type: "text/html" });
     const url = URL.createObjectURL(blob);
-    blobUrlRef.current = url;
-    if (iframeRef.current) {
-      iframeRef.current.src = url;
-    }
-    setKey((prev) => prev + 1);
+    prevUrlRef.current = url;
+    setBlobUrl(url);
     return () => {
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
+      if (prevUrlRef.current) {
+        URL.revokeObjectURL(prevUrlRef.current);
+        prevUrlRef.current = null;
       }
     };
   }, [code]);
@@ -132,10 +128,10 @@ function Renderize({
     {
       className,
       style: { width, height, overflow: "hidden", ...style },
-      children: /* @__PURE__ */ jsx(
+      children: blobUrl && /* @__PURE__ */ jsx(
         "iframe",
         {
-          ref: iframeRef,
+          src: blobUrl,
           title: "Renderize Sandbox",
           sandbox: "allow-scripts",
           style: {
@@ -145,7 +141,7 @@ function Renderize({
             display: "block"
           }
         },
-        key
+        blobUrl
       )
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiles-ai/renderize",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Drop-in sandbox component that executes AI-generated React code with zero configuration.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/Renderize.tsx

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 import React, { useEffect, useRef, useState } from "react";
 import { buildTemplate } from "./template.js";
 
@@ -24,35 +25,30 @@ export function Renderize({
   style,
   onError,
 }: RenderizeProps) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const blobUrlRef = useRef<string | null>(null);
-  const [key, setKey] = useState(0);
+  const prevUrlRef = useRef<string | null>(null);
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
 
   useEffect(() => {
     if (!code?.trim()) return;
 
     // Revoke previous blob URL to free memory
-    if (blobUrlRef.current) {
-      URL.revokeObjectURL(blobUrlRef.current);
+    if (prevUrlRef.current) {
+      URL.revokeObjectURL(prevUrlRef.current);
     }
 
     const html = buildTemplate(code);
     const blob = new Blob([html], { type: "text/html" });
     const url = URL.createObjectURL(blob);
 
-    blobUrlRef.current = url;
-
-    if (iframeRef.current) {
-      iframeRef.current.src = url;
-    }
-
-    // Force iframe remount when code changes to ensure clean state
-    setKey((prev) => prev + 1);
+    prevUrlRef.current = url;
+    // Storing the URL in state ensures the iframe src prop
+    // and the actual DOM element are always in sync
+    setBlobUrl(url);
 
     return () => {
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
+      if (prevUrlRef.current) {
+        URL.revokeObjectURL(prevUrlRef.current);
+        prevUrlRef.current = null;
       }
     };
   }, [code]);
@@ -77,18 +73,22 @@ export function Renderize({
       className={className}
       style={{ width, height, overflow: "hidden", ...style }}
     >
-      <iframe
-        key={key}
-        ref={iframeRef}
-        title="Renderize Sandbox"
-        sandbox="allow-scripts"
-        style={{
-          width: "100%",
-          height: "100%",
-          border: "none",
-          display: "block",
-        }}
-      />
+      {blobUrl && (
+        <iframe
+          // key forces a full remount when the URL changes,
+          // guaranteeing a clean JS context on every new code
+          key={blobUrl}
+          src={blobUrl}
+          title="Renderize Sandbox"
+          sandbox="allow-scripts"
+          style={{
+            width: "100%",
+            height: "100%",
+            border: "none",
+            display: "block",
+          }}
+        />
+      )}
     </div>
   );
 }