improved a lot of things
This commit is contained in:
SinachPat
@@ -43,10 +43,17 @@ export function LiveArtboard({
|
||||
onComponentSelected,
|
||||
style,
|
||||
}: LiveArtboardProps) {
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
// Track whether the iframe has sent READY so we don't send messages too early.
|
||||
const isReadyRef = useRef(false);
|
||||
|
||||
// Reset ready state whenever src changes. Without this, isReadyRef stays
|
||||
// true from the previous page, causing design-token / selection effects to
|
||||
// fire against a half-loaded iframe between navigation and the new READY.
|
||||
useEffect(() => {
|
||||
isReadyRef.current = false;
|
||||
}, [src]);
|
||||
|
||||
// ── Send a typed message to the iframe ───────────────────────────────────
|
||||
const sendMessage = useCallback(
|
||||
(type: Parameters<typeof createHostEnvelope>[1]['type'], payload?: Record<string, unknown>) => {
|
||||
@@ -85,6 +92,10 @@ export function LiveArtboard({
|
||||
case 'COMPONENT_SELECTED':
|
||||
onComponentSelected?.(msg.nodeId);
|
||||
break;
|
||||
case 'COMPONENT_DESELECTED':
|
||||
// Renderer clicked empty space — clear the host-side selection.
|
||||
onComponentSelected?.('');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -107,7 +107,9 @@ export const TOUR_STEPS: TourStep[] = [
|
||||
</>
|
||||
),
|
||||
codeBlock: `# Terminal 2 — keep your dev server running in Terminal 1
|
||||
npx @originmain/cli dev --target http://localhost:3000
|
||||
# From the monorepo root:
|
||||
pnpm cli:build # one-time build (skip if already built)
|
||||
pnpm cli:dev --target http://localhost:3000
|
||||
|
||||
# ✓ Proxy listening on http://localhost:4170
|
||||
# Paste http://localhost:4170 into the artboard URL input`,
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
#!/usr/bin/env node
|
||||
// ── CLI bundle script ─────────────────────────────────────────────────────────
|
||||
// Produces two self-contained ESM bundles under dist/:
|
||||
//
|
||||
// dist/cli.js — the `originmain` binary (has shebang, chmod +x)
|
||||
// dist/index.js — programmatic API: startProxy(), injectFiberHook()
|
||||
//
|
||||
// Run: node build.mjs (or via "pnpm build")
|
||||
|
||||
import { build } from 'esbuild';
|
||||
import { readFileSync, writeFileSync, chmodSync } from 'node:fs';
|
||||
|
||||
// Node.js built-in module names (without and with the node: prefix).
|
||||
// Both forms must be listed so esbuild leaves them as-is whether the
|
||||
// source imports 'http' or 'node:http'.
|
||||
const NODE_BUILTINS = [
|
||||
'node:*',
|
||||
'assert', 'buffer', 'child_process', 'cluster', 'console', 'constants',
|
||||
'crypto', 'dgram', 'dns', 'domain', 'events', 'fs', 'http', 'http2',
|
||||
'https', 'module', 'net', 'os', 'path', 'perf_hooks', 'process',
|
||||
'punycode', 'querystring', 'readline', 'repl', 'stream', 'string_decoder',
|
||||
'sys', 'timers', 'tls', 'trace_events', 'tty', 'url', 'util', 'v8',
|
||||
'vm', 'worker_threads', 'zlib',
|
||||
];
|
||||
|
||||
const SHARED_OPTIONS = {
|
||||
bundle: true,
|
||||
platform: 'node',
|
||||
format: 'esm',
|
||||
target: 'node22',
|
||||
external: NODE_BUILTINS,
|
||||
logLevel: 'info',
|
||||
};
|
||||
|
||||
// ── Build both entry points in parallel ──────────────────────────────────────
|
||||
|
||||
await Promise.all([
|
||||
build({ ...SHARED_OPTIONS, entryPoints: ['src/cli.ts'], outfile: 'dist/cli.js' }),
|
||||
build({ ...SHARED_OPTIONS, entryPoints: ['src/index.ts'], outfile: 'dist/index.js' }),
|
||||
]);
|
||||
|
||||
// ── Add shebang + executable bit to the CLI binary ───────────────────────────
|
||||
|
||||
const SHEBANG = '#!/usr/bin/env node\n';
|
||||
const cliContent = readFileSync('dist/cli.js', 'utf-8');
|
||||
|
||||
if (!cliContent.startsWith('#!')) {
|
||||
writeFileSync('dist/cli.js', SHEBANG + cliContent, 'utf-8');
|
||||
}
|
||||
chmodSync('dist/cli.js', 0o755);
|
||||
|
||||
console.log(' ✓ dist/cli.js (binary)');
|
||||
console.log(' ✓ dist/index.js (programmatic API)');
|
||||
@@ -8,17 +8,25 @@
|
||||
"originmain": "./dist/cli.js"
|
||||
},
|
||||
"exports": {
|
||||
".": "./src/index.ts"
|
||||
".": {
|
||||
"import": "./dist/index.js",
|
||||
"default": "./dist/index.js"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/cli.js",
|
||||
"dist/index.js",
|
||||
"README.md"
|
||||
],
|
||||
"scripts": {
|
||||
"typecheck": "tsc --noEmit",
|
||||
"build": "tsc -p tsconfig.build.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@originmain/renderer": "workspace:*"
|
||||
"build": "node build.mjs"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@originmain/renderer": "workspace:*",
|
||||
"@types/node": "^22.0.0",
|
||||
"esbuild": "^0.28.0",
|
||||
"typescript": "^5.5.0"
|
||||
},
|
||||
"engines": {
|
||||
|
||||
@@ -47,7 +47,8 @@ function main(): void {
|
||||
|
||||
if (values.help || !command) {
|
||||
printUsage();
|
||||
process.exit(command ? 0 : 1);
|
||||
// --help is a success; missing command is a usage error.
|
||||
process.exit(values.help ? 0 : 1);
|
||||
}
|
||||
|
||||
if (command !== 'dev') {
|
||||
|
||||
+30
-10
@@ -15,31 +15,51 @@ function getScriptTag(): string {
|
||||
return cachedScriptTag;
|
||||
}
|
||||
|
||||
/**
|
||||
* Strip inline Content-Security-Policy meta tags from HTML.
|
||||
*
|
||||
* The proxy already removes the CSP response header, but some frameworks
|
||||
* (e.g. Next.js with a custom _document) also embed CSP inside a meta tag.
|
||||
* A meta CSP applies to the entire document — including scripts parsed before
|
||||
* it — so our injected hook can be silently blocked even though it runs first.
|
||||
* Removing these tags lets the hook execute freely inside the sandboxed iframe.
|
||||
*/
|
||||
function stripMetaCsp(html: string): string {
|
||||
return html.replace(
|
||||
/<meta[^>]+http-equiv\s*=\s*["']?\s*content-security-policy\s*["']?[^>]*\/?>/gi,
|
||||
'',
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Inject the fiber hook script into an HTML string.
|
||||
*
|
||||
* Injection strategy (in order of preference):
|
||||
* 1. After `<head...>` — standard position for early scripts
|
||||
* 2. After `<html...>` — fallback if <head> is missing
|
||||
* 3. Prepend to document — final fallback
|
||||
* Steps:
|
||||
* 1. Strip any inline Content-Security-Policy meta tags that could block the
|
||||
* injected script (the CSP response header is stripped by the proxy itself).
|
||||
* 2. Insert the hook script immediately after the opening <head> tag
|
||||
* (preferred), after <html> (fallback), or prepend to the document (final
|
||||
* fallback). Placing it first ensures __REACT_DEVTOOLS_GLOBAL_HOOK__ is
|
||||
* registered before React's module body runs.
|
||||
*/
|
||||
export function injectFiberHook(html: string): string {
|
||||
const tag = getScriptTag();
|
||||
const tag = getScriptTag();
|
||||
const cleaned = stripMetaCsp(html);
|
||||
|
||||
// Try after <head>
|
||||
const headMatch = /<head[^>]*>/i.exec(html);
|
||||
const headMatch = /<head[^>]*>/i.exec(cleaned);
|
||||
if (headMatch) {
|
||||
const insertAt = headMatch.index + headMatch[0].length;
|
||||
return html.slice(0, insertAt) + tag + html.slice(insertAt);
|
||||
return cleaned.slice(0, insertAt) + tag + cleaned.slice(insertAt);
|
||||
}
|
||||
|
||||
// Try after <html>
|
||||
const htmlMatch = /<html[^>]*>/i.exec(html);
|
||||
const htmlMatch = /<html[^>]*>/i.exec(cleaned);
|
||||
if (htmlMatch) {
|
||||
const insertAt = htmlMatch.index + htmlMatch[0].length;
|
||||
return html.slice(0, insertAt) + tag + html.slice(insertAt);
|
||||
return cleaned.slice(0, insertAt) + tag + cleaned.slice(insertAt);
|
||||
}
|
||||
|
||||
// Final fallback: prepend
|
||||
return tag + html;
|
||||
return tag + cleaned;
|
||||
}
|
||||
|
||||
+154
-64
@@ -1,17 +1,20 @@
|
||||
// ── Reverse Proxy ────────────────────────────────────────────────────────────
|
||||
// HTTP reverse proxy that:
|
||||
// 1. Forwards all requests to the target dev server
|
||||
// HTTP(S) reverse proxy that:
|
||||
// 1. Forwards all requests to the target dev server (http or https)
|
||||
// 2. Strips X-Frame-Options and CSP frame-ancestors from responses
|
||||
// 3. Injects the Originmain fiber hook into HTML responses
|
||||
// 4. Passes WebSocket upgrades through for HMR
|
||||
//
|
||||
// Uses only Node.js built-ins — no external dependencies.
|
||||
|
||||
import { createServer, request as httpRequest } from 'node:http';
|
||||
import { connect as netConnect } from 'node:net';
|
||||
import type { IncomingMessage, ServerResponse } from 'node:http';
|
||||
import type { Socket } from 'node:net';
|
||||
import { injectFiberHook } from './inject.js';
|
||||
import { createServer } from 'node:http';
|
||||
import { request as httpRequest } from 'node:http';
|
||||
import { request as httpsRequest } from 'node:https';
|
||||
import { connect as netConnect } from 'node:net';
|
||||
import type { IncomingMessage, ServerResponse,
|
||||
RequestOptions, ClientRequest } from 'node:http';
|
||||
import type { Socket } from 'node:net';
|
||||
import { injectFiberHook } from './inject.js';
|
||||
|
||||
export interface ProxyOptions {
|
||||
/** Target dev server URL, e.g. "http://localhost:3000" */
|
||||
@@ -27,88 +30,141 @@ const STRIP_RESPONSE_HEADERS = new Set([
|
||||
'content-security-policy-report-only',
|
||||
]);
|
||||
|
||||
/** CORS headers added to every response for cross-origin API compatibility. */
|
||||
/** CORS headers appended to every response so the canvas can reach the app. */
|
||||
const CORS_HEADERS: Record<string, string> = {
|
||||
'access-control-allow-origin': '*',
|
||||
'access-control-allow-methods': '*',
|
||||
'access-control-allow-headers': '*',
|
||||
'access-control-allow-origin': '*',
|
||||
'access-control-allow-methods': '*',
|
||||
'access-control-allow-headers': '*',
|
||||
'access-control-allow-credentials': 'true',
|
||||
};
|
||||
|
||||
// ── Outgoing request helper ────────────────────────────────────────────────
|
||||
// Chooses http / https based on the target protocol.
|
||||
// rejectUnauthorized is disabled for HTTPS because dev / staging servers
|
||||
// frequently use self-signed certificates.
|
||||
|
||||
function doRequest(
|
||||
isHttps: boolean,
|
||||
options: RequestOptions,
|
||||
cb: (res: IncomingMessage) => void,
|
||||
): ClientRequest {
|
||||
if (isHttps) {
|
||||
return httpsRequest({ ...options, rejectUnauthorized: false }, cb);
|
||||
}
|
||||
return httpRequest(options, cb);
|
||||
}
|
||||
|
||||
/**
|
||||
* Start the reverse proxy server.
|
||||
* Returns a cleanup function that shuts down the server.
|
||||
* Returns an object with a `close()` method for graceful shutdown.
|
||||
*/
|
||||
export function startProxy(opts: ProxyOptions): { close: () => void } {
|
||||
const targetUrl = new URL(opts.target);
|
||||
const targetUrl = new URL(opts.target);
|
||||
const isHttps = targetUrl.protocol === 'https:';
|
||||
const targetHost = targetUrl.hostname;
|
||||
const targetPort = parseInt(targetUrl.port || '80', 10);
|
||||
// Default port: 443 for HTTPS, 80 for HTTP — matches browser behaviour.
|
||||
const targetPort = parseInt(targetUrl.port || (isHttps ? '443' : '80'), 10);
|
||||
|
||||
const server = createServer((clientReq: IncomingMessage, clientRes: ServerResponse) => {
|
||||
// ── Build the outgoing request to the target ─────────────────────────
|
||||
// ── Build the outgoing request headers ────────────────────────────────
|
||||
|
||||
// Clone headers, stripping Accept-Encoding so the target sends
|
||||
// uncompressed HTML (avoids needing to decompress before injection).
|
||||
const outHeaders: Record<string, string | string[]> = {};
|
||||
|
||||
for (const [key, val] of Object.entries(clientReq.headers)) {
|
||||
if (key.toLowerCase() === 'accept-encoding') continue;
|
||||
if (key.toLowerCase() === 'host') {
|
||||
const lower = key.toLowerCase();
|
||||
|
||||
// Strip Accept-Encoding — we replace it with 'identity' below so the
|
||||
// target always returns uncompressed HTML that we can decode and inject.
|
||||
if (lower === 'accept-encoding') continue;
|
||||
|
||||
// Rewrite Host to point at the actual target, not the proxy.
|
||||
if (lower === 'host') {
|
||||
outHeaders[key] = `${targetHost}:${targetPort}`;
|
||||
continue;
|
||||
}
|
||||
if (val !== undefined) {
|
||||
outHeaders[key] = val;
|
||||
}
|
||||
|
||||
if (val !== undefined) outHeaders[key] = val as string | string[];
|
||||
}
|
||||
|
||||
const proxyReq = httpRequest(
|
||||
// Explicitly ask for uncompressed content.
|
||||
outHeaders['accept-encoding'] = 'identity';
|
||||
|
||||
const method = clientReq.method ?? 'GET';
|
||||
const isHeadReq = method === 'HEAD';
|
||||
|
||||
const proxyReq = doRequest(
|
||||
isHttps,
|
||||
{
|
||||
hostname: targetHost,
|
||||
port: targetPort,
|
||||
path: clientReq.url ?? '/',
|
||||
method: clientReq.method,
|
||||
headers: outHeaders,
|
||||
port: targetPort,
|
||||
path: clientReq.url ?? '/',
|
||||
method,
|
||||
headers: outHeaders,
|
||||
},
|
||||
(proxyRes) => {
|
||||
// ── Process response headers ───────────────────────────────────
|
||||
(proxyRes: IncomingMessage) => {
|
||||
// ── Build clean response headers ──────────────────────────────────
|
||||
|
||||
const resHeaders: Record<string, string | string[]> = {};
|
||||
|
||||
for (const [key, val] of Object.entries(proxyRes.headers)) {
|
||||
if (STRIP_RESPONSE_HEADERS.has(key.toLowerCase())) continue;
|
||||
if (val !== undefined) {
|
||||
resHeaders[key] = val;
|
||||
}
|
||||
if (val !== undefined) resHeaders[key] = val as string | string[];
|
||||
}
|
||||
|
||||
// Add CORS headers
|
||||
// Append CORS.
|
||||
for (const [key, val] of Object.entries(CORS_HEADERS)) {
|
||||
resHeaders[key] = val;
|
||||
}
|
||||
|
||||
// ── Determine if this is an HTML response ──────────────────────
|
||||
// ── Detect HTML responses ─────────────────────────────────────────
|
||||
|
||||
const contentType = (proxyRes.headers['content-type'] ?? '').toLowerCase();
|
||||
const isHtml = contentType.includes('text/html');
|
||||
const isHtml = contentType.includes('text/html');
|
||||
|
||||
if (!isHtml) {
|
||||
// Non-HTML: stream through unchanged (headers already stripped)
|
||||
// HEAD and non-HTML responses: stream (or drain) through unchanged.
|
||||
// HEAD: RFC 7231 §4.3.2 — response MUST NOT include a body.
|
||||
// We must drain the response to free the socket, but send no body.
|
||||
// Non-HTML: no injection needed, stream straight through.
|
||||
if (isHeadReq || !isHtml) {
|
||||
clientRes.writeHead(proxyRes.statusCode ?? 200, resHeaders);
|
||||
proxyRes.pipe(clientRes);
|
||||
proxyRes.on('error', (err: Error) => {
|
||||
console.error(`[originmain proxy] Response stream error: ${err.message}`);
|
||||
clientRes.destroy();
|
||||
});
|
||||
if (isHeadReq) {
|
||||
// Drain + end without sending body.
|
||||
proxyRes.resume();
|
||||
proxyRes.on('end', () => clientRes.end());
|
||||
} else {
|
||||
proxyRes.pipe(clientRes);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// HTML: buffer the full body, inject the script, then send.
|
||||
const chunks: Buffer[] = [];
|
||||
proxyRes.on('data', (chunk: Buffer) => chunks.push(chunk));
|
||||
proxyRes.on('end', () => {
|
||||
const rawHtml = Buffer.concat(chunks).toString('utf-8');
|
||||
const injectedHtml = injectFiberHook(rawHtml);
|
||||
const body = Buffer.from(injectedHtml, 'utf-8');
|
||||
// HTML GET/POST: buffer, inject the fiber hook script, then send.
|
||||
// Strip Content-Encoding — we decode to UTF-8, so the encoding header
|
||||
// would be incorrect after injection.
|
||||
delete resHeaders['content-encoding'];
|
||||
|
||||
// Update Content-Length to match the injected body
|
||||
const chunks: Buffer[] = [];
|
||||
|
||||
proxyRes.on('data', (chunk: Buffer) => chunks.push(chunk));
|
||||
|
||||
proxyRes.on('error', (err: Error) => {
|
||||
console.error(`[originmain proxy] HTML response stream error: ${err.message}`);
|
||||
if (!clientRes.headersSent) {
|
||||
clientRes.writeHead(502, { 'content-type': 'text/plain' });
|
||||
}
|
||||
clientRes.destroy();
|
||||
});
|
||||
|
||||
proxyRes.on('end', () => {
|
||||
const rawHtml = Buffer.concat(chunks).toString('utf-8');
|
||||
const injectedHtml = injectFiberHook(rawHtml);
|
||||
const body = Buffer.from(injectedHtml, 'utf-8');
|
||||
|
||||
// Correct Content-Length and drop Transfer-Encoding: chunked.
|
||||
resHeaders['content-length'] = String(body.byteLength);
|
||||
// Remove Transfer-Encoding: chunked since we send the full body
|
||||
delete resHeaders['transfer-encoding'];
|
||||
|
||||
clientRes.writeHead(proxyRes.statusCode ?? 200, resHeaders);
|
||||
@@ -117,51 +173,82 @@ export function startProxy(opts: ProxyOptions): { close: () => void } {
|
||||
},
|
||||
);
|
||||
|
||||
proxyReq.on('error', (err) => {
|
||||
// ── Handle target-unreachable errors ──────────────────────────────────
|
||||
|
||||
proxyReq.on('error', (err: Error) => {
|
||||
console.error(`[originmain proxy] Target request failed: ${err.message}`);
|
||||
if (!clientRes.headersSent) {
|
||||
clientRes.writeHead(502, { 'content-type': 'text/plain' });
|
||||
clientRes.end(
|
||||
`Originmain proxy: could not reach target at ${opts.target}\n${err.message}`,
|
||||
);
|
||||
} else {
|
||||
// Headers already on the wire — tear down the connection cleanly.
|
||||
clientRes.destroy();
|
||||
}
|
||||
clientRes.end(`Originmain proxy: could not reach target at ${opts.target}\n${err.message}`);
|
||||
});
|
||||
|
||||
// Pipe the client request body to the target
|
||||
// ── Handle client disconnects ─────────────────────────────────────────
|
||||
|
||||
clientReq.on('error', (err: Error) => {
|
||||
console.error(`[originmain proxy] Client request error: ${err.message}`);
|
||||
proxyReq.destroy();
|
||||
});
|
||||
|
||||
// Pipe the request body (relevant for POST / PUT / PATCH).
|
||||
clientReq.pipe(proxyReq);
|
||||
});
|
||||
|
||||
// ── WebSocket upgrade passthrough (for HMR) ─────────────────────────────
|
||||
// ── Friendly error for port conflicts ─────────────────────────────────────
|
||||
|
||||
server.on('error', (err: NodeJS.ErrnoException) => {
|
||||
if (err.code === 'EADDRINUSE') {
|
||||
console.error(`\n \x1b[31mError:\x1b[0m Port ${opts.port} is already in use.`);
|
||||
console.error(
|
||||
` Try a different port: originmain dev --target ${opts.target} --port ${opts.port + 1}\n`,
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
throw err;
|
||||
});
|
||||
|
||||
// ── WebSocket upgrade passthrough (for HMR) ───────────────────────────────
|
||||
|
||||
server.on('upgrade', (req: IncomingMessage, clientSocket: Socket, head: Buffer) => {
|
||||
// Open a TCP connection to the target and forward the HTTP upgrade
|
||||
const targetSocket = netConnect(targetPort, targetHost, () => {
|
||||
// Reconstruct the raw HTTP upgrade request
|
||||
const reqLine = `${req.method} ${req.url} HTTP/${req.httpVersion}\r\n`;
|
||||
const headers = Object.entries(req.headers)
|
||||
// Reconstruct the raw HTTP upgrade request.
|
||||
const reqLine = `${req.method ?? 'GET'} ${req.url ?? '/'} HTTP/${req.httpVersion}\r\n`;
|
||||
const hostHdr = `host: ${targetHost}:${targetPort}`;
|
||||
const otherHdr = Object.entries(req.headers)
|
||||
.filter(([key]) => key.toLowerCase() !== 'host')
|
||||
.map(([key, val]) => `${key}: ${Array.isArray(val) ? val.join(', ') : val ?? ''}`)
|
||||
.map(([key, val]) => `${key}: ${Array.isArray(val) ? val.join(', ') : (val ?? '')}`)
|
||||
.join('\r\n');
|
||||
const hostHeader = `host: ${targetHost}:${targetPort}`;
|
||||
|
||||
targetSocket.write(`${reqLine}${hostHeader}\r\n${headers}\r\n\r\n`);
|
||||
if (head.length > 0) {
|
||||
targetSocket.write(head);
|
||||
}
|
||||
targetSocket.write(`${reqLine}${hostHdr}\r\n${otherHdr}\r\n\r\n`);
|
||||
if (head.length > 0) targetSocket.write(head);
|
||||
|
||||
// Pipe bidirectionally
|
||||
// Bidirectional pipe.
|
||||
targetSocket.pipe(clientSocket);
|
||||
clientSocket.pipe(targetSocket);
|
||||
});
|
||||
|
||||
targetSocket.on('error', (err) => {
|
||||
// Ensure both sockets are torn down when either side closes.
|
||||
targetSocket.on('close', () => clientSocket.destroy());
|
||||
clientSocket.on('close', () => targetSocket.destroy());
|
||||
|
||||
targetSocket.on('error', (err: Error) => {
|
||||
console.error(`[originmain proxy] WebSocket proxy error: ${err.message}`);
|
||||
clientSocket.destroy();
|
||||
});
|
||||
|
||||
clientSocket.on('error', () => {
|
||||
clientSocket.on('error', (err: Error) => {
|
||||
console.error(`[originmain proxy] WebSocket client error: ${err.message}`);
|
||||
targetSocket.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
// ── Start listening ───────────────────────────────────────────────────────
|
||||
|
||||
server.listen(opts.port, () => {
|
||||
const proxyUrl = `http://localhost:${opts.port}`;
|
||||
console.log('');
|
||||
@@ -176,6 +263,9 @@ export function startProxy(opts: ProxyOptions): { close: () => void } {
|
||||
console.log(' \x1b[2mFiber hook injection ........ active\x1b[0m');
|
||||
console.log(' \x1b[2mX-Frame-Options stripping ... active\x1b[0m');
|
||||
console.log(' \x1b[2mWebSocket passthrough ....... active\x1b[0m');
|
||||
if (isHttps) {
|
||||
console.log(' \x1b[2mHTTPS → HTTP bridge ......... active\x1b[0m');
|
||||
}
|
||||
console.log('');
|
||||
});
|
||||
|
||||
|
||||
@@ -133,10 +133,10 @@ export function buildProxyFiberHookScript(): string {
|
||||
var HOST_SOURCE = ${JSON.stringify(HOST_SOURCE)};
|
||||
|
||||
// ── Runtime state ─────────────────────────────────────────────────────────
|
||||
var currentTree = null; // latest serialized FiberNode tree
|
||||
var nodeMap = {}; // nodeId → { domRect } (flat for O(1) lookup)
|
||||
var selectedNodeId = null; // currently highlighted component
|
||||
var highlightEl = null; // the blue-ring DOM overlay element
|
||||
var nodeMap = {}; // nodeId → { domRect, fiber }
|
||||
var fiberMap = new WeakMap(); // fiber → nodeId (reverse lookup for click)
|
||||
var selectedNodeId = null; // currently highlighted component
|
||||
var highlightEl = null; // the blue-ring DOM overlay element
|
||||
|
||||
// ── postMessage helper ────────────────────────────────────────────────────
|
||||
function post(msg) {
|
||||
@@ -165,11 +165,15 @@ export function buildProxyFiberHookScript(): string {
|
||||
catch (e) { /* don't break existing DevTools */ }
|
||||
}
|
||||
try {
|
||||
// Reset maps before each walk so stale entries from the previous tree
|
||||
// don't accumulate. fiberMap is a WeakMap so it self-cleans, but we
|
||||
// rebuild nodeMap from scratch on every commit.
|
||||
nodeMap = {};
|
||||
fiberMap = new WeakMap();
|
||||
|
||||
var tree = serializeFiber(root.current, '');
|
||||
currentTree = tree;
|
||||
rebuildNodeMap(tree);
|
||||
post({ type: 'FIBER_TREE_UPDATE', root: tree });
|
||||
// Re-sync the highlight ring after each React commit (position may shift).
|
||||
// Re-sync the highlight ring after each React commit (layout may shift).
|
||||
if (selectedNodeId) updateHighlight();
|
||||
} catch (err) {
|
||||
post({ type: 'ERROR', message: String(err) });
|
||||
@@ -178,22 +182,24 @@ export function buildProxyFiberHookScript(): string {
|
||||
|
||||
// ── Fiber serialization (stable path-based IDs) ───────────────────────────
|
||||
// ID format: "ComponentName:siblingIndex/ChildName:siblingIndex/..."
|
||||
// Stable across re-renders provided the tree structure doesn't change.
|
||||
//
|
||||
// IMPORTANT: unnamed fibers (Fragment, Context.Provider, React.memo wrappers)
|
||||
// are transparent — their children are collected directly into their parent's
|
||||
// children array. Returning only the first named child (the old approach)
|
||||
// caused entire subtrees to vanish from the tree.
|
||||
|
||||
function serializeFiber(fiber, parentId) {
|
||||
if (!fiber) return null;
|
||||
var name = getDisplayName(fiber);
|
||||
|
||||
if (!name) {
|
||||
// Unnamed fiber (Fragment, Context, Provider) — skip this level,
|
||||
// but keep walking children so named descendants are not lost.
|
||||
var c = fiber.child;
|
||||
while (c) {
|
||||
var s = serializeFiber(c, parentId);
|
||||
if (s) return s;
|
||||
c = c.sibling;
|
||||
}
|
||||
return null;
|
||||
// Unnamed root fiber (HostRoot) — skip to first named child.
|
||||
// collectChildren handles the Fragment case recursively.
|
||||
var children = [];
|
||||
collectChildren(fiber, parentId, children);
|
||||
if (children.length === 1) return children[0];
|
||||
if (children.length === 0) return null;
|
||||
// Multiple named children at root — wrap in a synthetic root node.
|
||||
return { id: '__root__', name: '__root__', props: {}, children: children };
|
||||
}
|
||||
|
||||
var nodeId = (parentId ? parentId + '/' : '') + name + ':' + String(fiber.index);
|
||||
@@ -201,13 +207,31 @@ export function buildProxyFiberHookScript(): string {
|
||||
var node = { id: nodeId, name: name, props: serializeProps(fiber.memoizedProps), children: [] };
|
||||
if (rect) node.domRect = rect;
|
||||
|
||||
// Register in both maps for O(1) lookup.
|
||||
nodeMap[nodeId] = { domRect: rect || null, fiber: fiber };
|
||||
fiberMap.set(fiber, nodeId);
|
||||
|
||||
collectChildren(fiber, nodeId, node.children);
|
||||
return node;
|
||||
}
|
||||
|
||||
// Collect all NAMED descendants of fiber.child into out[], transparently
|
||||
// flattening unnamed intermediates (Fragments, Providers, wrappers).
|
||||
function collectChildren(fiber, parentId, out) {
|
||||
var child = fiber.child;
|
||||
while (child) {
|
||||
var serialized = serializeFiber(child, nodeId);
|
||||
if (serialized) node.children.push(serialized);
|
||||
var name = getDisplayName(child);
|
||||
if (name) {
|
||||
var serialized = serializeFiber(child, parentId);
|
||||
if (serialized) out.push(serialized);
|
||||
} else {
|
||||
// Unnamed (Fragment / Context / Provider / forwardRef wrapper etc.):
|
||||
// flatten its children directly into our level — they share parentId.
|
||||
fiberMap.set(child, null); // mark as non-selectable
|
||||
collectChildren(child, parentId, out);
|
||||
}
|
||||
child = child.sibling;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
function getDisplayName(fiber) {
|
||||
@@ -242,23 +266,20 @@ export function buildProxyFiberHookScript(): string {
|
||||
return out;
|
||||
}
|
||||
|
||||
// ── Node map: flat O(1) lookup by stable ID ───────────────────────────────
|
||||
function rebuildNodeMap(node) {
|
||||
nodeMap = {};
|
||||
fillMap(node);
|
||||
}
|
||||
function fillMap(node) {
|
||||
if (!node) return;
|
||||
nodeMap[node.id] = { domRect: node.domRect || null };
|
||||
var children = node.children;
|
||||
for (var i = 0; i < children.length; i++) fillMap(children[i]);
|
||||
}
|
||||
|
||||
// ── Highlight overlay (blue ring inside the iframe) ───────────────────────
|
||||
// updateHighlight re-measures from the live fiber stateNode so the ring
|
||||
// stays accurate even after scroll (between React commits).
|
||||
function updateHighlight() {
|
||||
var info = nodeMap[selectedNodeId];
|
||||
if (info && info.domRect) renderHighlight(info.domRect);
|
||||
else removeHighlight();
|
||||
var info = selectedNodeId ? nodeMap[selectedNodeId] : null;
|
||||
if (!info) { removeHighlight(); return; }
|
||||
|
||||
// Re-measure from the live DOM element for scroll accuracy.
|
||||
var rect = info.fiber ? getDomRect(info.fiber) : info.domRect;
|
||||
if (rect && rect.width > 0 && rect.height > 0) {
|
||||
renderHighlight(rect);
|
||||
} else {
|
||||
removeHighlight();
|
||||
}
|
||||
}
|
||||
|
||||
function renderHighlight(rect) {
|
||||
@@ -266,8 +287,6 @@ export function buildProxyFiberHookScript(): string {
|
||||
highlightEl = document.createElement('div');
|
||||
highlightEl.id = '__om_sel__';
|
||||
highlightEl.setAttribute('aria-hidden', 'true');
|
||||
// CSS kept inline so no stylesheet dependency. Transition animates when
|
||||
// the selected component moves (e.g. during a re-render or scroll).
|
||||
highlightEl.style.cssText = [
|
||||
'position:fixed', 'pointer-events:none', 'z-index:2147483647',
|
||||
'box-shadow:0 0 0 2px #3385FF',
|
||||
@@ -290,42 +309,63 @@ export function buildProxyFiberHookScript(): string {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Click-to-select (capturing phase) ────────────────────────────────────
|
||||
// Finds the deepest named fiber node at the click point and reports it back.
|
||||
// In normal canvas usage the SelectionOverlay sits on top of the iframe and
|
||||
// this listener fires when the overlay is bypassed (e.g. direct preview mode).
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
var node = findDeepestAt(currentTree, event.clientX, event.clientY);
|
||||
if (node && node.domRect) {
|
||||
post({ type: 'COMPONENT_SELECTED', nodeId: node.id, rect: node.domRect });
|
||||
}
|
||||
// Re-measure on scroll so the ring follows the element without needing
|
||||
// a React commit (which only fires on state/prop changes).
|
||||
window.addEventListener('scroll', function() {
|
||||
if (selectedNodeId) updateHighlight();
|
||||
}, true);
|
||||
|
||||
function findDeepestAt(node, x, y) {
|
||||
if (!node) return null;
|
||||
var r = node.domRect;
|
||||
var hit = r && x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height;
|
||||
// ── Click-to-select (capturing phase) ────────────────────────────────────
|
||||
// Uses document.elementFromPoint to get the live DOM element at the click
|
||||
// position (accurate even after scroll), then walks the React fiber tree
|
||||
// upward via __reactFiber$ keys to find the nearest tracked component.
|
||||
// Falls back to a tree-based hit test if the fiber key is not present
|
||||
// (e.g. in some SSR-hydrated contexts).
|
||||
|
||||
if (hit) {
|
||||
// Matched — recurse children for a deeper (more specific) match.
|
||||
var children = node.children;
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
var deeper = findDeepestAt(children[i], x, y);
|
||||
if (deeper) return deeper;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
// No hit on this node — still check children for overflow:visible cases.
|
||||
var children = node.children;
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
var found = findDeepestAt(children[i], x, y);
|
||||
if (found) return found;
|
||||
function getFiberKey(el) {
|
||||
var keys = Object.keys(el);
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
if (keys[i].indexOf('__reactFiber$') === 0) return keys[i];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
// Ignore clicks on our own highlight overlay.
|
||||
if (event.target === highlightEl) return;
|
||||
|
||||
var el = document.elementFromPoint(event.clientX, event.clientY);
|
||||
|
||||
// Walk the DOM upward, trying to find a tracked React fiber at each level.
|
||||
var current = el;
|
||||
while (current && current !== document.documentElement) {
|
||||
var fiberKey = current ? getFiberKey(current) : null;
|
||||
if (fiberKey) {
|
||||
// Walk the fiber's return (parent) chain to find the nearest node we track.
|
||||
var fiber = current[fiberKey];
|
||||
while (fiber) {
|
||||
var nodeId = fiberMap.get(fiber);
|
||||
if (nodeId) {
|
||||
// Re-measure from the live element for accurate post-scroll rect.
|
||||
var liveEl = fiber.stateNode;
|
||||
var rect = (liveEl && typeof liveEl.getBoundingClientRect === 'function')
|
||||
? (function(r) { return { x: r.x, y: r.y, width: r.width, height: r.height }; })(liveEl.getBoundingClientRect())
|
||||
: null;
|
||||
if (rect) {
|
||||
post({ type: 'COMPONENT_SELECTED', nodeId: nodeId, rect: rect });
|
||||
return;
|
||||
}
|
||||
}
|
||||
fiber = fiber.return;
|
||||
}
|
||||
}
|
||||
current = current.parentElement;
|
||||
}
|
||||
|
||||
// Nothing found — clear the selection.
|
||||
post({ type: 'COMPONENT_DESELECTED' });
|
||||
}, true);
|
||||
|
||||
// ── Host → Renderer message handler ──────────────────────────────────────
|
||||
window.addEventListener('message', function(event) {
|
||||
var data = event.data;
|
||||
|
||||
Reference in New Issue
Block a user