react-state-flow 0.0.3 → 0.1.1

package/dist/parser/index.d.ts

@@ -0,0 +1,4 @@
+import type { GraphData } from './types.js';
+export type { GraphData, GraphNode, GraphEdge } from './types.js';
+export declare function parseProject(projectRoot: string): GraphData;
+//# sourceMappingURL=index.d.ts.map

package/dist/parser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/parser/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAwB,MAAM,YAAY,CAAA;AAEjE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAqBjE,wBAAgB,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAgD3D"}

package/dist/parser/index.js

@@ -0,0 +1,65 @@
+import { readFileSync, readdirSync, statSync } from 'fs';
+import { join, relative } from 'path';
+import { parseFile } from './parse-file.js';
+const EXTENSIONS = ['.tsx', '.jsx', '.ts', '.js'];
+function collectFiles(dir) {
+    const results = [];
+    const IGNORE = ['node_modules', '.git', 'dist', 'build', '.next'];
+    for (const entry of readdirSync(dir)) {
+        if (IGNORE.includes(entry))
+            continue;
+        const full = join(dir, entry);
+        const stat = statSync(full);
+        if (stat.isDirectory()) {
+            results.push(...collectFiles(full));
+        }
+        else if (EXTENSIONS.some((ext) => full.endsWith(ext))) {
+            results.push(full);
+        }
+    }
+    return results;
+}
+export function parseProject(projectRoot) {
+    const files = collectFiles(projectRoot);
+    // Pass 1: collect all component node ids for cross-file edge resolution
+    const globalComponentSet = new Set();
+    for (const file of files) {
+        const code = readFileSync(file, 'utf-8');
+        const relPath = relative(projectRoot, file);
+        const { nodes } = parseFile(code, relPath);
+        for (const n of nodes) {
+            if (n.type === 'component')
+                globalComponentSet.add(n.id);
+        }
+    }
+    // Pass 2: full parse with global component set for cross-file edges
+    const allNodes = [];
+    const allEdges = [];
+    for (const file of files) {
+        const code = readFileSync(file, 'utf-8');
+        const relPath = relative(projectRoot, file);
+        const { nodes, edges } = parseFile(code, relPath, globalComponentSet);
+        allNodes.push(...nodes);
+        allEdges.push(...edges);
+    }
+    // Deduplicate nodes by id (keep first occurrence)
+    const seen = new Set();
+    const uniqueNodes = allNodes.filter((n) => {
+        if (seen.has(n.id))
+            return false;
+        seen.add(n.id);
+        return true;
+    });
+    // Remove edges referencing unknown nodes
+    const nodeIds = new Set(uniqueNodes.map((n) => n.id));
+    const validEdges = allEdges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target));
+    // Deduplicate edges
+    const edgeSeen = new Set();
+    const uniqueEdges = validEdges.filter((e) => {
+        if (edgeSeen.has(e.id))
+            return false;
+        edgeSeen.add(e.id);
+        return true;
+    });
+    return { nodes: uniqueNodes, edges: uniqueEdges };
+}

package/dist/parser/parse-file.d.ts

@@ -0,0 +1,8 @@
+import type { GraphNode, GraphEdge } from './types.js';
+interface FileResult {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+}
+export declare function parseFile(code: string, filePath: string, externalComponents?: Set<string>): FileResult;
+export {};
+//# sourceMappingURL=parse-file.d.ts.map

package/dist/parser/parse-file.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-file.d.ts","sourceRoot":"","sources":["../../src/parser/parse-file.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAKtD,UAAU,UAAU;IAClB,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,KAAK,EAAE,SAAS,EAAE,CAAA;CACnB;AA8CD,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,kBAAkB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAC/B,UAAU,CA8LZ"}

package/dist/parser/parse-file.js

@@ -0,0 +1,251 @@
+import { parse } from '@babel/parser';
+import _traverse from '@babel/traverse';
+import * as t from '@babel/types';
+// @babel/traverse ESM interop
+const traverse = _traverse.default ?? _traverse;
+function isComponentName(name) {
+    return /^[A-Z]/.test(name);
+}
+function getStateSlots(path) {
+    const slots = [];
+    path.traverse({
+        CallExpression(innerPath) {
+            const callee = innerPath.node.callee;
+            const isHook = (t.isIdentifier(callee, { name: 'useState' }) ||
+                t.isIdentifier(callee, { name: 'useReducer' })) &&
+                t.isIdentifier(callee);
+            if (!isHook)
+                return;
+            // useState([initialValue]) → destructure [state, setState]
+            const parent = innerPath.parentPath;
+            if (parent?.isVariableDeclarator() &&
+                t.isArrayPattern(parent.node.id)) {
+                const first = parent.node.id.elements[0];
+                if (t.isIdentifier(first))
+                    slots.push(first.name);
+            }
+        },
+    });
+    return slots;
+}
+function getContextUsages(path) {
+    const names = [];
+    path.traverse({
+        CallExpression(innerPath) {
+            const callee = innerPath.node.callee;
+            if (!t.isIdentifier(callee, { name: 'useContext' }))
+                return;
+            const arg = innerPath.node.arguments[0];
+            if (t.isIdentifier(arg))
+                names.push(arg.name);
+        },
+    });
+    return names;
+}
+// A1: Accept optional externalComponents for cross-file edge resolution
+export function parseFile(code, filePath, externalComponents) {
+    const nodes = [];
+    const edges = [];
+    let ast;
+    try {
+        ast = parse(code, {
+            sourceType: 'module',
+            plugins: ['jsx', 'typescript', 'decorators-legacy'],
+        });
+    }
+    catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        console.warn(`[RSF] Failed to parse ${filePath}: ${msg}`);
+        return { nodes, edges };
+    }
+    // Map: context variable name → node id
+    const contextMap = new Map();
+    // Track component names found in this file for JSX child resolution
+    const componentSet = new Set();
+    // A5: Use Set for O(1) edge deduplication
+    const edgeIdSet = new Set();
+    function registerComponent(name, path, line) {
+        const stateSlots = getStateSlots(path);
+        const contextUsages = getContextUsages(path);
+        // Detect if this component renders a Context.Provider
+        let isContextProvider = false;
+        let contextName;
+        path.traverse({
+            JSXOpeningElement(innerPath) {
+                const el = innerPath.node.name;
+                // <XxxContext.Provider>
+                if (t.isJSXMemberExpression(el) &&
+                    t.isJSXIdentifier(el.property, { name: 'Provider' }) &&
+                    t.isJSXIdentifier(el.object)) {
+                    isContextProvider = true;
+                    contextName = el.object.name;
+                }
+            },
+        });
+        const node = {
+            id: name,
+            type: 'component',
+            label: name,
+            file: filePath,
+            line,
+            stateSlots,
+            isContextProvider,
+            contextName,
+        };
+        nodes.push(node);
+        componentSet.add(name);
+        // Add context-subscription edges
+        for (const ctxName of contextUsages) {
+            const ctxId = contextMap.get(ctxName) ?? ctxName;
+            const edgeId = `${ctxId}->${name}`;
+            if (!edgeIdSet.has(edgeId)) {
+                edgeIdSet.add(edgeId);
+                edges.push({
+                    id: edgeId,
+                    source: ctxId,
+                    target: name,
+                    type: 'context-subscription',
+                });
+            }
+        }
+        // A4: Create Provider → Context edge
+        if (isContextProvider && contextName) {
+            const ctxId = contextMap.get(contextName) ?? contextName;
+            const edgeId = `${name}->${ctxId}:provides`;
+            if (!edgeIdSet.has(edgeId)) {
+                edgeIdSet.add(edgeId);
+                edges.push({
+                    id: edgeId,
+                    source: name,
+                    target: ctxId,
+                    type: 'context-provision',
+                });
+            }
+        }
+        return node;
+    }
+    // First pass: find createContext calls to build contextMap
+    traverse(ast, {
+        VariableDeclarator(path) {
+            if (t.isCallExpression(path.node.init) &&
+                t.isIdentifier(path.node.init.callee, {
+                    name: 'createContext',
+                }) &&
+                t.isIdentifier(path.node.id)) {
+                const ctxVarName = path.node.id.name;
+                const nodeId = ctxVarName;
+                contextMap.set(ctxVarName, nodeId);
+                nodes.push({
+                    id: nodeId,
+                    type: 'context',
+                    label: ctxVarName,
+                    file: filePath,
+                    line: path.node.loc?.start.line ?? 0,
+                    stateSlots: [],
+                    isContextProvider: false,
+                });
+            }
+        },
+    });
+    // Second pass: find component declarations
+    traverse(ast, {
+        // function MyComponent() { ... }
+        FunctionDeclaration(path) {
+            const name = path.node.id?.name;
+            if (name && isComponentName(name)) {
+                registerComponent(name, path, path.node.loc?.start.line ?? 0);
+            }
+        },
+        // const MyComponent = () => { ... } or function() { ... } or memo(...) etc.
+        VariableDeclarator(path) {
+            if (!t.isIdentifier(path.node.id))
+                return;
+            const name = path.node.id.name;
+            if (!isComponentName(name))
+                return;
+            const init = path.node.init;
+            if (t.isArrowFunctionExpression(init) || t.isFunctionExpression(init)) {
+                registerComponent(name, path, path.node.loc?.start.line ?? 0);
+                return;
+            }
+            // A2: HOC / memo / forwardRef wrapping a function
+            if (t.isCallExpression(init)) {
+                const firstArg = init.arguments[0];
+                if (firstArg &&
+                    (t.isArrowFunctionExpression(firstArg) ||
+                        t.isFunctionExpression(firstArg) ||
+                        t.isIdentifier(firstArg))) {
+                    registerComponent(name, path, path.node.loc?.start.line ?? 0);
+                }
+            }
+        },
+        // A3: export default function() { ... } — derive name from filename
+        ExportDefaultDeclaration(path) {
+            const decl = path.node.declaration;
+            const isAnonFn = (t.isFunctionDeclaration(decl) || t.isArrowFunctionExpression(decl)) &&
+                !decl.id;
+            if (!isAnonFn)
+                return;
+            const base = filePath.split('/').pop() ?? filePath;
+            const name = base.replace(/\.[^.]+$/, '');
+            if (!isComponentName(name))
+                return;
+            registerComponent(name, path, path.node.loc?.start.line ?? 0);
+        },
+    });
+    // Third pass: find JSX parent→child relationships
+    traverse(ast, {
+        FunctionDeclaration(path) {
+            extractJSXChildren(path, edges, edgeIdSet, componentSet, externalComponents);
+        },
+        VariableDeclarator(path) {
+            if (!t.isIdentifier(path.node.id))
+                return;
+            const name = path.node.id.name;
+            if (!isComponentName(name))
+                return;
+            const init = path.node.init;
+            const isFn = t.isArrowFunctionExpression(init) || t.isFunctionExpression(init);
+            const isWrapped = t.isCallExpression(init);
+            if (isFn || isWrapped) {
+                extractJSXChildren(path, edges, edgeIdSet, componentSet, externalComponents, name);
+            }
+        },
+    });
+    return { nodes, edges };
+}
+function extractJSXChildren(path, edges, edgeIdSet, componentSet, externalComponents, parentNameOverride) {
+    const parentName = parentNameOverride ??
+        path.node.id?.name;
+    if (!parentName || !isComponentName(parentName))
+        return;
+    // A1: Use externalComponents (global set) when available for cross-file resolution
+    const allKnown = externalComponents ?? componentSet;
+    path.traverse({
+        JSXOpeningElement(innerPath) {
+            const el = innerPath.node.name;
+            let childName;
+            if (t.isJSXIdentifier(el) && isComponentName(el.name)) {
+                childName = el.name;
+            }
+            // A6: Handle <Namespace.Component /> — use namespace as the component reference
+            if (!childName && t.isJSXMemberExpression(el)) {
+                const ns = t.isJSXIdentifier(el.object) ? el.object.name : undefined;
+                if (ns && allKnown.has(ns))
+                    childName = ns;
+            }
+            if (!childName || !allKnown.has(childName))
+                return;
+            const edgeId = `${parentName}->${childName}`;
+            if (edgeIdSet.has(edgeId))
+                return; // A5: O(1) check
+            edgeIdSet.add(edgeId);
+            edges.push({
+                id: edgeId,
+                source: parentName,
+                target: childName,
+                type: 'parent-child',
+            });
+        },
+    });
+}

package/dist/parser/types.d.ts

@@ -0,0 +1,23 @@
+export type NodeType = 'component' | 'context';
+export interface GraphNode {
+    id: string;
+    type: NodeType;
+    label: string;
+    file: string;
+    line: number;
+    stateSlots: string[];
+    isContextProvider: boolean;
+    contextName?: string;
+}
+export type EdgeType = 'parent-child' | 'context-subscription' | 'context-provision';
+export interface GraphEdge {
+    id: string;
+    source: string;
+    target: string;
+    type: EdgeType;
+}
+export interface GraphData {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/parser/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/parser/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAA;AAE9C,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,sBAAsB,GAAG,mBAAmB,CAAA;AAEpF,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,KAAK,EAAE,SAAS,EAAE,CAAA;CACnB"}

package/dist/parser/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * react-state-flow/runtime
+ *
+ * Import này TRƯỚC khi React mount để hook vào React DevTools global hook.
+ * Sends render events via WebSocket to the RSF CLI server.
+ *
+ * Usage:
+ *   import 'react-state-flow/runtime'   // top of main.tsx / index.tsx
+ */
+export interface RenderEvent {
+    type: 'render';
+    componentName: string;
+    renderCount: number;
+    timestamp: number;
+}
+declare global {
+    interface Window {
+        __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
+        __RSF_WS__: WebSocket | null;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/runtime/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,QAAQ,CAAA;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,8BAA8B,EAAE,GAAG,CAAA;QACnC,UAAU,EAAE,SAAS,GAAG,IAAI,CAAA;KAC7B;CACF"}

package/dist/runtime/index.js

@@ -0,0 +1,109 @@
+/**
+ * react-state-flow/runtime
+ *
+ * Import này TRƯỚC khi React mount để hook vào React DevTools global hook.
+ * Sends render events via WebSocket to the RSF CLI server.
+ *
+ * Usage:
+ *   import 'react-state-flow/runtime'   // top of main.tsx / index.tsx
+ */
+const RSF_PORT = window.__RSF_PORT__ ?? 7272;
+const WS_URL = `ws://localhost:${RSF_PORT}/runtime`;
+// B2: Render counter per component with max-size cap to prevent memory leak
+const renderCounts = new Map();
+const MAX_RENDER_COUNT_ENTRIES = 500;
+function incrementRenderCount(name) {
+    if (!renderCounts.has(name) && renderCounts.size >= MAX_RENDER_COUNT_ENTRIES) {
+        // Evict oldest entry (insertion order)
+        const firstKey = renderCounts.keys().next().value;
+        if (firstKey !== undefined)
+            renderCounts.delete(firstKey);
+    }
+    const count = (renderCounts.get(name) ?? 0) + 1;
+    renderCounts.set(name, count);
+    return count;
+}
+function send(event) {
+    if (!window.__RSF_WS__ || window.__RSF_WS__.readyState !== WebSocket.OPEN)
+        return;
+    window.__RSF_WS__.send(JSON.stringify(event));
+}
+// B3: Exponential backoff reconnect
+let reconnectDelay = 2000;
+function connect() {
+    const ws = new WebSocket(WS_URL);
+    window.__RSF_WS__ = ws;
+    ws.addEventListener('open', () => {
+        reconnectDelay = 2000; // reset on successful connection
+        renderCounts.clear(); // B2: sync counts with server on reconnect
+        console.debug('[RSF] Runtime connected');
+    });
+    ws.addEventListener('close', () => {
+        console.debug(`[RSF] Runtime disconnected, retrying in ${reconnectDelay / 1000}s...`);
+        setTimeout(connect, reconnectDelay);
+        reconnectDelay = Math.min(reconnectDelay * 2, 30000);
+    });
+    ws.addEventListener('error', () => {
+        // suppress — will retry on close
+    });
+}
+function hookIntoReact() {
+    // React checks for this global hook on load and calls it during reconciliation
+    const existing = window.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? {};
+    const originalOnCommitFiberRoot = existing.onCommitFiberRoot?.bind(existing) ?? (() => { });
+    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+        ...existing,
+        isDisabled: false,
+        supportsFiber: true,
+        onCommitFiberRoot(rendererID, root, priorityLevel) {
+            // Call through so React DevTools still works
+            originalOnCommitFiberRoot(rendererID, root, priorityLevel);
+            // B1: Pass per-commit Set to avoid counting sibling instances multiple times
+            try {
+                walkFiber(root.current, new Set());
+            }
+            catch {
+                // Never break the app
+            }
+        },
+    };
+}
+function getFiberName(fiber) {
+    const type = fiber?.type;
+    if (!type)
+        return null;
+    if (typeof type === 'string')
+        return null; // DOM element
+    if (typeof type === 'function')
+        return type.displayName ?? type.name ?? null;
+    if (typeof type === 'object' && type !== null) {
+        // forwardRef, memo, etc.
+        return (type.displayName ??
+            type.render?.displayName ??
+            type.render?.name ??
+            null);
+    }
+    return null;
+}
+// B1: seenInCommit prevents counting sibling instances multiple times per commit
+function walkFiber(fiber, seenInCommit) {
+    if (!fiber)
+        return;
+    const name = getFiberName(fiber);
+    if (name && /^[A-Z]/.test(name) && !seenInCommit.has(name)) {
+        seenInCommit.add(name);
+        const count = incrementRenderCount(name);
+        send({ type: 'render', componentName: name, renderCount: count, timestamp: Date.now() });
+    }
+    walkFiber(fiber.child, seenInCommit);
+    walkFiber(fiber.sibling, seenInCommit);
+}
+// Bootstrap — only in development
+const isDev = typeof process !== 'undefined'
+    ? process.env.NODE_ENV !== 'production'
+    : import.meta.env?.MODE !== 'production';
+if (typeof window !== 'undefined' && isDev) {
+    hookIntoReact();
+    connect();
+}
+export {};

package/package.json

@@ -1,34 +1,60 @@
 {
   "name": "react-state-flow",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "description": "Visualize React component hierarchy, state flow, and real-time render events",
   "type": "module",
+  "license": "MIT",
   "bin": {
     "react-state-flow": "./dist/index.js"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./runtime": {
+      "import": "./dist/runtime/index.js",
+      "types": "./dist/runtime/index.d.ts"
+    }
+  },
   "files": [
-    "dist"
+    "dist",
+    "ui/dist"
   ],
   "engines": {
     "node": ">=18"
   },
   "scripts": {
-    "start": "tsx src/index.ts",
-    "build": "pnpm --filter @rsf/ui build && node build.mjs"
+    "build": "npm run build:ts && npm run build:ui",
+    "build:ts": "tsc -p tsconfig.json",
+    "build:ui": "vite build --config ui/vite.config.ts",
+    "dev": "tsx src/index.ts",
+    "ui:dev": "vite --config ui/vite.config.ts",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@babel/parser": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
+    "@babel/types": "^7.24.0",
     "chokidar": "^3.6.0",
     "express": "^4.19.0",
-    "ws": "^8.17.0",
     "open": "^10.1.0",
-    "picocolors": "^1.0.1"
+    "picocolors": "^1.0.1",
+    "ws": "^8.17.0"
   },
   "devDependencies": {
-    "@rsf/parser": "workspace:*",
+    "@dagrejs/dagre": "^1.0.0",
+    "@types/babel__traverse": "^7.20.6",
     "@types/express": "^4.17.21",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@types/ws": "^8.5.10",
-    "esbuild": "^0.21.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@xyflow/react": "^12.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "tsx": "^4.15.0",
-    "typescript": "^5.4.0"
+    "typescript": "^5.4.0",
+    "vite": "^5.3.0"
   }
 }