\n\n\n \n \n My React App\n \n \n \n \n
\n\n \n \n \n \n \n \n \n
\\n \\n \\n \\n\\n","main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nimport \"./styles.css\"; // Import the custom styles\n\n// Find the root element in the HTML\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n // Create a root and render the App component\n const root = createRoot(rootElement);\n root.render(\n \n \n \n );\n }\n});","src/styles.css":"body {\n background-color: #22c55e; /* Set the page background to green */\n}\n\nh1 {\n font-family: 'Inter', sans-serif;\n font-size: 4rem;\n line-height: 1.1;\n font-weight: 800;\n color: #ffffff; /* White color for text */\n}\n\n/* Additional custom styles can be added here */"}; // Raw source code files
function normalizePath(path) {
return path.replace(/\.\//g, '').replace(/^\//, ''); // Remove leading ./ and /
}
function resolvePath(base, relative) {
if (!relative.startsWith('.')) {
// Absolute or bare module import (e.g., 'react', 'App')
const possibleRelativeToFile = normalizePath(relative);
if (window.__SOURCES__[possibleRelativeToFile]) return possibleRelativeToFile;
return relative; // Assume it's an external bare module
}
const stack = base.split('/');
stack.pop(); // Remove current file name
const parts = relative.split('/');
for (let i = 0; i < parts.length; i++) {
if (parts[i] === '.') continue;
if (parts[i] === '..') stack.pop();
else stack.push(parts[i]);
}
return stack.join('/');
}
function getFileContent(path) {
const cleanPath = normalizePath(path);
if (window.__SOURCES__[cleanPath]) return { content: window.__SOURCES__[cleanPath], finalPath: cleanPath };
const extensions = ['.tsx', '.ts', '.jsx', '.js', '.css', '.json'];
for (let ext of extensions) {
if (window.__SOURCES__[cleanPath + ext]) return { content: window.__SOURCES__[cleanPath + ext], finalPath: cleanPath + ext };
}
// Try '/index' for directory imports (e.g., import 'components/Button' -> 'components/Button/index.tsx')
for (let ext of extensions) {
if (window.__SOURCES__[cleanPath + '/index' + ext]) return { content: window.__SOURCES__[cleanPath + '/index' + ext], finalPath: cleanPath + '/index' + ext };
}
return null;
}
// The core 'require' function that transpiles and evaluates modules
window.require = function(path, base = '') {
// --- BUILT-INS (ALIASES TO GLOBALS) ---
if (path === 'react') return window.React;
if (path === 'react-dom') return window.ReactDOM;
if (path === 'react-dom/client') {
const dom = window.ReactDOM;
return {
__esModule: true,
default: dom,
createRoot: dom?.createRoot || ((c) => createSafeProxy({}, 'ReactDOM.createRoot')), // Fallback
hydrateRoot: dom?.hydrateRoot || ((c) => createSafeProxy({}, 'ReactDOM.hydrateRoot')),
};
}
if (path === '@supabase/supabase-js') return window.supabase || createSafeProxy({}, '@supabase/supabase-js');
if (path === 'lucide-react') return window.lucideReact || createSafeProxy({}, 'lucide-react');
if (path === 'react-router-dom' || path === 'react-router') {
const rrd = window.ReactRouterDOM;
if (rrd) {
return {
...rrd,
BrowserRouter: rrd.HashRouter, // Force HashRouter for iframe srcdoc compatibility
Routes: rrd.Routes,
Route: rrd.Route,
Link: rrd.Link,
useNavigate: rrd.useNavigate,
useLocation: rrd.useLocation,
useParams: rrd.useParams,
};
}
return createSafeProxy({}, path);
}
const resolvedPath = resolvePath(base, path);
const fileInfo = getFileContent(resolvedPath);
if (!fileInfo) {
console.warn('Module not found:', path, 'Resolved:', resolvedPath, 'Base:', base);
return createSafeProxy({}, path);
}
const { content, finalPath } = fileInfo;
if (window.__MODULES__[finalPath]) return window.__MODULES__[finalPath].exports;
if (finalPath.endsWith('.css')) {
const style = document.createElement('style');
style.textContent = content;
document.head.appendChild(style);
window.__MODULES__[finalPath] = { exports: {} };
return {};
}
if (finalPath.endsWith('.json')) {
try {
const json = JSON.parse(content);
window.__MODULES__[finalPath] = { exports: json };
return json;
} catch(e) {
console.error('JSON Parse Error in ' + finalPath, e);
return createSafeProxy({}, finalPath);
}
}
const module = { exports: {} };
window.__MODULES__[finalPath] = module;
try {
const presets = [['env', { modules: 'commonjs' }], 'react'];
if (finalPath.endsWith('.ts') || finalPath.endsWith('.tsx')) {
presets.push('typescript');
}
const transformed = Babel.transform(content, { presets, filename: finalPath }).code;
const wrapper = new Function('module', 'exports', 'require', transformed);
wrapper(module, module.exports, (p) => window.require(p, finalPath));
return module.exports;
} catch (e) {
console.error('Compilation or Execution Error in ' + finalPath, e);
const ErrorComponent = () => window.React.createElement('div', {
style: {
color: 'red',
padding: 10,
background: '#fee2e2',
border: '1px solid red',
margin: '10px',
borderRadius: '5px',
fontFamily: 'monospace',
whiteSpace: 'pre-wrap'
}
}, 'Error in ' + finalPath + ':\n' + (e.message || String(e)));
window.__MODULES__[finalPath].exports = { default: ErrorComponent, ErrorComponent };
return window.__MODULES__[finalPath].exports;
}
};
// --- APPLICATION BOOTSTRAP (runs after DOM is ready) ---
(function() {
document.addEventListener('DOMContentLoaded', function() {
console.info('[Rafiei Builder] DOMContentLoaded fired. Bootstrapping preview...');
try {
const rootEl = document.getElementById('root');
if (!rootEl) {
throw new Error("Bootstrap failed: #root element not found in the preview document.");
}
// If it's a static HTML site (no main JS entry point), do not attempt React bootstrap.
if (false) {
console.info('[Rafiei Builder] Static HTML site detected. No JS bootstrap needed.');
return; // The HTML is already rendered
}
const entry = "main.tsx"; // e.g., 'App.tsx' or 'index.tsx'
if (entry && window.__SOURCES__[entry]) {
console.info('[Rafiei Builder] Executing entry file: ' + entry);
const AppModule = window.require(entry);
const App = AppModule.default || AppModule; // Get default export or the module itself
if (typeof window.ReactDOM !== 'undefined' && typeof window.ReactDOM.createRoot === 'function' && typeof App === 'function') {
window.ReactDOM.createRoot(rootEl).render(window.React.createElement(App));
console.info('[Rafiei Builder] React App rendered successfully.');
} else {
rootEl.innerHTML = 'Error: React or ReactDOM not available, or App is not a valid component.
';
console.error('[Rafiei Builder] React/ReactDOM or App component issue.', {ReactDOM: typeof window.ReactDOM, createRoot: typeof window.ReactDOM?.createRoot, AppType: typeof App});
}
} else {
console.warn('[Rafiei Builder] No valid JS/TS entry file found to execute. Entry path: "' + entry + '"');
rootEl.innerHTML = 'Preview boot failed: No executable entry file found.
';
}
} catch (e) {
console.error('[Rafiei Builder] Bootstrap Error:', e);
const overlay = document.getElementById('error-overlay');
if(overlay) {
overlay.style.display = 'block';
overlay.innerHTML = 'Bootstrap Error
' +
'' + (e.message || String(e)) + '
';
}
}
});
})();
\n