@aquiles-ai/renderize 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +182 -0
  2. package/dist/index.d.cts +20 -0
  3. package/dist/index.d.ts +20 -0
  4. package/dist/index.js +155 -0
  5. package/package.json +6 -3
package/dist/index.cjs ADDED
@@ -0,0 +1,182 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ Renderize: () => Renderize
24
+ });
25
+ module.exports = __toCommonJS(index_exports);
26
+
27
+ // src/Renderize.tsx
28
+ var import_react = require("react");
29
+
30
+ // src/template.ts
31
+ function buildTemplate(code) {
32
+ return (
33
+ /* html */
34
+ `
35
+ <!DOCTYPE html>
36
+ <html lang="en">
37
+ <head>
38
+ <meta charset="UTF-8" />
39
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
40
+
41
+ <!-- Tailwind CSS Play CDN -->
42
+ <script src="https://cdn.tailwindcss.com"></script>
43
+
44
+ <!-- Babel standalone: transpiles JSX at runtime -->
45
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
46
+
47
+ <!-- Import map: React + Radix UI + Lucide -->
48
+ <script type="importmap">
49
+ {
50
+ "imports": {
51
+ "react": "https://esm.sh/react@18",
52
+ "react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
53
+ "react-dom": "https://esm.sh/react-dom@18",
54
+ "react-dom/client": "https://esm.sh/react-dom@18/client",
55
+ "lucide-react": "https://esm.sh/lucide-react@latest",
56
+ "clsx": "https://esm.sh/clsx",
57
+ "class-variance-authority": "https://esm.sh/class-variance-authority",
58
+ "tailwind-merge": "https://esm.sh/tailwind-merge",
59
+ "@radix-ui/react-accordion": "https://esm.sh/@radix-ui/react-accordion",
60
+ "@radix-ui/react-alert-dialog": "https://esm.sh/@radix-ui/react-alert-dialog",
61
+ "@radix-ui/react-avatar": "https://esm.sh/@radix-ui/react-avatar",
62
+ "@radix-ui/react-checkbox": "https://esm.sh/@radix-ui/react-checkbox",
63
+ "@radix-ui/react-collapsible": "https://esm.sh/@radix-ui/react-collapsible",
64
+ "@radix-ui/react-context-menu": "https://esm.sh/@radix-ui/react-context-menu",
65
+ "@radix-ui/react-dialog": "https://esm.sh/@radix-ui/react-dialog",
66
+ "@radix-ui/react-dropdown-menu": "https://esm.sh/@radix-ui/react-dropdown-menu",
67
+ "@radix-ui/react-hover-card": "https://esm.sh/@radix-ui/react-hover-card",
68
+ "@radix-ui/react-label": "https://esm.sh/@radix-ui/react-label",
69
+ "@radix-ui/react-menubar": "https://esm.sh/@radix-ui/react-menubar",
70
+ "@radix-ui/react-navigation-menu": "https://esm.sh/@radix-ui/react-navigation-menu",
71
+ "@radix-ui/react-popover": "https://esm.sh/@radix-ui/react-popover",
72
+ "@radix-ui/react-progress": "https://esm.sh/@radix-ui/react-progress",
73
+ "@radix-ui/react-radio-group": "https://esm.sh/@radix-ui/react-radio-group",
74
+ "@radix-ui/react-scroll-area": "https://esm.sh/@radix-ui/react-scroll-area",
75
+ "@radix-ui/react-select": "https://esm.sh/@radix-ui/react-select",
76
+ "@radix-ui/react-separator": "https://esm.sh/@radix-ui/react-separator",
77
+ "@radix-ui/react-slider": "https://esm.sh/@radix-ui/react-slider",
78
+ "@radix-ui/react-slot": "https://esm.sh/@radix-ui/react-slot",
79
+ "@radix-ui/react-switch": "https://esm.sh/@radix-ui/react-switch",
80
+ "@radix-ui/react-tabs": "https://esm.sh/@radix-ui/react-tabs",
81
+ "@radix-ui/react-toast": "https://esm.sh/@radix-ui/react-toast",
82
+ "@radix-ui/react-toggle": "https://esm.sh/@radix-ui/react-toggle",
83
+ "@radix-ui/react-toggle-group": "https://esm.sh/@radix-ui/react-toggle-group",
84
+ "@radix-ui/react-toolbar": "https://esm.sh/@radix-ui/react-toolbar",
85
+ "@radix-ui/react-tooltip": "https://esm.sh/@radix-ui/react-tooltip"
86
+ }
87
+ }
88
+ </script>
89
+
90
+ <style>
91
+ * { box-sizing: border-box; }
92
+ body { margin: 0; padding: 0; }
93
+ </style>
94
+ </head>
95
+ <body>
96
+ <div id="root"></div>
97
+
98
+ <script type="text/babel" data-type="module">
99
+ import { createRoot } from "react-dom/client";
100
+
101
+ // \u2500\u2500 USER CODE START \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
102
+ ${code}
103
+ // \u2500\u2500 USER CODE END \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
104
+
105
+ const container = document.getElementById("root");
106
+ createRoot(container).render(<App />);
107
+ </script>
108
+ </body>
109
+ </html>
110
+ `.trim()
111
+ );
112
+ }
113
+
114
+ // src/Renderize.tsx
115
+ var import_jsx_runtime = require("react/jsx-runtime");
116
+ function Renderize({
117
+ code,
118
+ height = "100%",
119
+ width = "100%",
120
+ className,
121
+ style,
122
+ onError
123
+ }) {
124
+ const iframeRef = (0, import_react.useRef)(null);
125
+ const blobUrlRef = (0, import_react.useRef)(null);
126
+ const [key, setKey] = (0, import_react.useState)(0);
127
+ (0, import_react.useEffect)(() => {
128
+ if (!code?.trim()) return;
129
+ if (blobUrlRef.current) {
130
+ URL.revokeObjectURL(blobUrlRef.current);
131
+ }
132
+ const html = buildTemplate(code);
133
+ const blob = new Blob([html], { type: "text/html" });
134
+ const url = URL.createObjectURL(blob);
135
+ blobUrlRef.current = url;
136
+ if (iframeRef.current) {
137
+ iframeRef.current.src = url;
138
+ }
139
+ setKey((prev) => prev + 1);
140
+ return () => {
141
+ if (blobUrlRef.current) {
142
+ URL.revokeObjectURL(blobUrlRef.current);
143
+ blobUrlRef.current = null;
144
+ }
145
+ };
146
+ }, [code]);
147
+ (0, import_react.useEffect)(() => {
148
+ const handler = (event) => {
149
+ if (event.data?.source === "renderize" && event.data?.type === "error" && onError) {
150
+ onError(event.data.message);
151
+ }
152
+ };
153
+ window.addEventListener("message", handler);
154
+ return () => window.removeEventListener("message", handler);
155
+ }, [onError]);
156
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
157
+ "div",
158
+ {
159
+ className,
160
+ style: { width, height, overflow: "hidden", ...style },
161
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
162
+ "iframe",
163
+ {
164
+ ref: iframeRef,
165
+ title: "Renderize Sandbox",
166
+ sandbox: "allow-scripts",
167
+ style: {
168
+ width: "100%",
169
+ height: "100%",
170
+ border: "none",
171
+ display: "block"
172
+ }
173
+ },
174
+ key
175
+ )
176
+ }
177
+ );
178
+ }
179
+ // Annotate the CommonJS export names for ESM import in node:
180
+ 0 && (module.exports = {
181
+ Renderize
182
+ });
package/dist/index.d.cts ADDED
@@ -0,0 +1,20 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import React from 'react';
3
+
4
+ interface RenderizeProps {
5
+ /** React code generated by the LLM. Must export a default `App` function component. */
6
+ code: string;
7
+ /** Height of the sandbox iframe. Defaults to "100%" */
8
+ height?: string | number;
9
+ /** Width of the sandbox iframe. Defaults to "100%" */
10
+ width?: string | number;
11
+ /** Custom class name for the wrapper element */
12
+ className?: string;
13
+ /** Custom inline styles for the wrapper element */
14
+ style?: React.CSSProperties;
15
+ /** Called when the sandbox encounters a runtime error */
16
+ onError?: (error: string) => void;
17
+ }
18
+ declare function Renderize({ code, height, width, className, style, onError, }: RenderizeProps): react_jsx_runtime.JSX.Element;
19
+
20
+ export { Renderize, type RenderizeProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import React from 'react';
3
+
4
+ interface RenderizeProps {
5
+ /** React code generated by the LLM. Must export a default `App` function component. */
6
+ code: string;
7
+ /** Height of the sandbox iframe. Defaults to "100%" */
8
+ height?: string | number;
9
+ /** Width of the sandbox iframe. Defaults to "100%" */
10
+ width?: string | number;
11
+ /** Custom class name for the wrapper element */
12
+ className?: string;
13
+ /** Custom inline styles for the wrapper element */
14
+ style?: React.CSSProperties;
15
+ /** Called when the sandbox encounters a runtime error */
16
+ onError?: (error: string) => void;
17
+ }
18
+ declare function Renderize({ code, height, width, className, style, onError, }: RenderizeProps): react_jsx_runtime.JSX.Element;
19
+
20
+ export { Renderize, type RenderizeProps };
package/dist/index.js ADDED
@@ -0,0 +1,155 @@
1
+ // src/Renderize.tsx
2
+ import { useEffect, useRef, useState } from "react";
3
+
4
+ // src/template.ts
5
+ function buildTemplate(code) {
6
+ return (
7
+ /* html */
8
+ `
9
+ <!DOCTYPE html>
10
+ <html lang="en">
11
+ <head>
12
+ <meta charset="UTF-8" />
13
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
14
+
15
+ <!-- Tailwind CSS Play CDN -->
16
+ <script src="https://cdn.tailwindcss.com"></script>
17
+
18
+ <!-- Babel standalone: transpiles JSX at runtime -->
19
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
20
+
21
+ <!-- Import map: React + Radix UI + Lucide -->
22
+ <script type="importmap">
23
+ {
24
+ "imports": {
25
+ "react": "https://esm.sh/react@18",
26
+ "react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
27
+ "react-dom": "https://esm.sh/react-dom@18",
28
+ "react-dom/client": "https://esm.sh/react-dom@18/client",
29
+ "lucide-react": "https://esm.sh/lucide-react@latest",
30
+ "clsx": "https://esm.sh/clsx",
31
+ "class-variance-authority": "https://esm.sh/class-variance-authority",
32
+ "tailwind-merge": "https://esm.sh/tailwind-merge",
33
+ "@radix-ui/react-accordion": "https://esm.sh/@radix-ui/react-accordion",
34
+ "@radix-ui/react-alert-dialog": "https://esm.sh/@radix-ui/react-alert-dialog",
35
+ "@radix-ui/react-avatar": "https://esm.sh/@radix-ui/react-avatar",
36
+ "@radix-ui/react-checkbox": "https://esm.sh/@radix-ui/react-checkbox",
37
+ "@radix-ui/react-collapsible": "https://esm.sh/@radix-ui/react-collapsible",
38
+ "@radix-ui/react-context-menu": "https://esm.sh/@radix-ui/react-context-menu",
39
+ "@radix-ui/react-dialog": "https://esm.sh/@radix-ui/react-dialog",
40
+ "@radix-ui/react-dropdown-menu": "https://esm.sh/@radix-ui/react-dropdown-menu",
41
+ "@radix-ui/react-hover-card": "https://esm.sh/@radix-ui/react-hover-card",
42
+ "@radix-ui/react-label": "https://esm.sh/@radix-ui/react-label",
43
+ "@radix-ui/react-menubar": "https://esm.sh/@radix-ui/react-menubar",
44
+ "@radix-ui/react-navigation-menu": "https://esm.sh/@radix-ui/react-navigation-menu",
45
+ "@radix-ui/react-popover": "https://esm.sh/@radix-ui/react-popover",
46
+ "@radix-ui/react-progress": "https://esm.sh/@radix-ui/react-progress",
47
+ "@radix-ui/react-radio-group": "https://esm.sh/@radix-ui/react-radio-group",
48
+ "@radix-ui/react-scroll-area": "https://esm.sh/@radix-ui/react-scroll-area",
49
+ "@radix-ui/react-select": "https://esm.sh/@radix-ui/react-select",
50
+ "@radix-ui/react-separator": "https://esm.sh/@radix-ui/react-separator",
51
+ "@radix-ui/react-slider": "https://esm.sh/@radix-ui/react-slider",
52
+ "@radix-ui/react-slot": "https://esm.sh/@radix-ui/react-slot",
53
+ "@radix-ui/react-switch": "https://esm.sh/@radix-ui/react-switch",
54
+ "@radix-ui/react-tabs": "https://esm.sh/@radix-ui/react-tabs",
55
+ "@radix-ui/react-toast": "https://esm.sh/@radix-ui/react-toast",
56
+ "@radix-ui/react-toggle": "https://esm.sh/@radix-ui/react-toggle",
57
+ "@radix-ui/react-toggle-group": "https://esm.sh/@radix-ui/react-toggle-group",
58
+ "@radix-ui/react-toolbar": "https://esm.sh/@radix-ui/react-toolbar",
59
+ "@radix-ui/react-tooltip": "https://esm.sh/@radix-ui/react-tooltip"
60
+ }
61
+ }
62
+ </script>
63
+
64
+ <style>
65
+ * { box-sizing: border-box; }
66
+ body { margin: 0; padding: 0; }
67
+ </style>
68
+ </head>
69
+ <body>
70
+ <div id="root"></div>
71
+
72
+ <script type="text/babel" data-type="module">
73
+ import { createRoot } from "react-dom/client";
74
+
75
+ // \u2500\u2500 USER CODE START \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
76
+ ${code}
77
+ // \u2500\u2500 USER CODE END \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
78
+
79
+ const container = document.getElementById("root");
80
+ createRoot(container).render(<App />);
81
+ </script>
82
+ </body>
83
+ </html>
84
+ `.trim()
85
+ );
86
+ }
87
+
88
+ // src/Renderize.tsx
89
+ import { jsx } from "react/jsx-runtime";
90
+ function Renderize({
91
+ code,
92
+ height = "100%",
93
+ width = "100%",
94
+ className,
95
+ style,
96
+ onError
97
+ }) {
98
+ const iframeRef = useRef(null);
99
+ const blobUrlRef = useRef(null);
100
+ const [key, setKey] = useState(0);
101
+ useEffect(() => {
102
+ if (!code?.trim()) return;
103
+ if (blobUrlRef.current) {
104
+ URL.revokeObjectURL(blobUrlRef.current);
105
+ }
106
+ const html = buildTemplate(code);
107
+ const blob = new Blob([html], { type: "text/html" });
108
+ const url = URL.createObjectURL(blob);
109
+ blobUrlRef.current = url;
110
+ if (iframeRef.current) {
111
+ iframeRef.current.src = url;
112
+ }
113
+ setKey((prev) => prev + 1);
114
+ return () => {
115
+ if (blobUrlRef.current) {
116
+ URL.revokeObjectURL(blobUrlRef.current);
117
+ blobUrlRef.current = null;
118
+ }
119
+ };
120
+ }, [code]);
121
+ useEffect(() => {
122
+ const handler = (event) => {
123
+ if (event.data?.source === "renderize" && event.data?.type === "error" && onError) {
124
+ onError(event.data.message);
125
+ }
126
+ };
127
+ window.addEventListener("message", handler);
128
+ return () => window.removeEventListener("message", handler);
129
+ }, [onError]);
130
+ return /* @__PURE__ */ jsx(
131
+ "div",
132
+ {
133
+ className,
134
+ style: { width, height, overflow: "hidden", ...style },
135
+ children: /* @__PURE__ */ jsx(
136
+ "iframe",
137
+ {
138
+ ref: iframeRef,
139
+ title: "Renderize Sandbox",
140
+ sandbox: "allow-scripts",
141
+ style: {
142
+ width: "100%",
143
+ height: "100%",
144
+ border: "none",
145
+ display: "block"
146
+ }
147
+ },
148
+ key
149
+ )
150
+ }
151
+ );
152
+ }
153
+ export {
154
+ Renderize
155
+ };
package/package.json CHANGED
@@ -1,8 +1,10 @@
1
1
  {
2
2
  "name": "@aquiles-ai/renderize",
3
- "version": "1.0.0",
3
+ "version": "1.2.0",
4
4
  "description": "Drop-in sandbox component that executes AI-generated React code with zero configuration.",
5
- "main": "index.js",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
6
8
  "scripts": {
7
9
  "build": "tsup src/index.ts --format cjs,esm --dts --external react react-dom",
8
10
  "dev": "tsup src/index.ts --format cjs,esm --dts --external react react-dom --watch"
@@ -35,6 +37,7 @@
35
37
  },
36
38
  "dependencies": {
37
39
  "react": "^19.2.4",
38
- "react-dom": "^19.2.4"
40
+ "react-dom": "^19.2.4",
41
+ "tsup": "^8.5.1"
39
42
  }
40
43
  }