@timo9378/flow2code 0.1.9 → 0.2.1

package/CHANGELOG.md

@@ -5,6 +5,34 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [0.2.1] — 2026-03-05
+
+### Fixed
+- **Unified API handlers** — All 4 Next.js API routes (`/api/compile`, `/api/decompile`, `/api/generate`, `/api/import-openapi`) are now thin wrappers delegating to `src/server/handlers.ts`, eliminating duplicated logic and drift risk.
+- **Bundle size 97% reduction** — `server.js` 5.5MB → 145KB, `cli.js` 5.5MB → 191KB. Root cause was Prettier (not ts-morph) being inlined; externalized in `tsup.config.ts`.
+- **OpenAPI tag-based filtering** — `/api/import-openapi` tag filter now works correctly (previously was a `return true` TODO stub). Fixed by delegating to `handlers.ts` which has a proper implementation checking `flow.meta.tags`.
+
+## [0.2.0] — 2026-03-05
+
+### Added — VSCode Extension (`vscode-extension/`)
+- **Right-click Decompile** — Right-click any `.ts`/`.js` file (or selection) → "Flow2Code: Decompile to Flow IR" generates `.flow.json` side-by-side with confidence score
+- **Right-click Compile** — Right-click any `.flow.json` → "Flow2Code: Compile to TypeScript" with configurable platform (Next.js / Express / Cloudflare)
+- **Flow Preview** — SVG-based DAG visualization with pan, zoom, fit-to-view, category-colored nodes, and hover tooltips
+- **Auto-Validation Diagnostics** — Inline errors/warnings on open and save for `.flow.json` files, positioned at the offending node/edge in JSON
+- **Custom Editor** — "Open With… > Flow2Code Visual Editor" provides read-only graphical view of `.flow.json` files
+- **Status Bar** — Shows flow name and node/edge count (`$(graph) MyFlow (5N·4E)`) when a `.flow.json` is active; click to preview
+- **Configurable Settings** — `flow2code.platform`, `flow2code.autoValidate`, `flow2code.compileOnSave`
+- **esbuild Bundling** — Self-contained 6.3MB bundle with `@/` alias plugin resolving to main project source
+
+### Added — Playwright E2E Testing
+- **20 Playwright E2E tests** — Smoke tests, Node Operations, Toolbar Actions, API Compile Endpoint
+- **Playwright config** — Chromium browser with auto-start dev server on port 3000
+
+### Fixed
+- **Infinite re-render loop** — `FlowNode` badge selector `?? []` created a new array on every store update, causing infinite React setState loop with React Flow dimension measurements. Fixed by using a stable empty array constant.
+- **`useFlowLint` unconditional updates** — Lint hook always called `setNodeBadges()` even when results hadn't changed, feeding the re-render loop. Added shallow comparison before updating.
+- **Platform registration tree-shaking** — Turbopack tree-shook barrel file side effects, causing "Unknown platform" errors in API routes. Fixed by registering platforms directly in `compiler.ts`.
+
 ## [0.1.9] — 2026-03-05
 
 ### Fixed

package/README.md

@@ -53,7 +53,7 @@
 | Platform Adapters | NextjsPlatform / ExpressPlatform / CloudflarePlatform |
 | Plugin System | `createPluginRegistry()` factory (per-instance) |
 | CLI | Commander.js + Chokidar |
-| Testing | Vitest 4 — 354 tests across 31 test files |
+| Testing | Vitest 4 — 413 tests across 33 test files + 20 Playwright E2E tests |
 | CI | GitHub Actions (Node 20/22 matrix) |
 
 ## Quick Start
@@ -185,7 +185,7 @@ flow2code/
 │   │   └── storage/                 # .flow.json split/merge
 │   ├── cli/                         # CLI (compile/watch/init)
 │   └── server/                      # Standalone HTTP Server
-├── tests/                           # 354 tests (Vitest)
+├── tests/                           # 413 unit tests + 20 E2E tests
 ├── .github/workflows/ci.yml         # GitHub Actions CI
 ├── CONTRIBUTING.md
 └── vitest.config.ts
@@ -225,6 +225,19 @@ See [CONTRIBUTING.md](CONTRIBUTING.md).
 
 For detailed usage examples and workflows, see [USAGE.md](USAGE.md).
 
+## VS Code Extension
+
+Flow2Code ships a companion VS Code extension under `vscode-extension/`:
+
+- **Right-click Decompile** — Decompile any `.ts`/`.js` to a `.flow.json` visual IR
+- **Right-click Compile** — Compile `.flow.json` to TypeScript with platform selection
+- **Flow Preview** — SVG-based DAG visualization with pan, zoom, category coloring
+- **Auto-Validation** — Inline diagnostics for `.flow.json` on open/save
+- **Custom Editor** — "Open With… > Flow2Code Visual Editor" for graphical view
+- **Status Bar** — Shows node/edge count; click to preview
+
+See [vscode-extension/README.md](vscode-extension/README.md) for details.
+
 ## License
 
 MIT

package/dist/cli.js

@@ -205,14 +205,38 @@ function validateFlowIR(ir) {
       });
     }
   }
+  for (const edge of workingIR.edges) {
+    const sourceNode = workingNodeMap.get(edge.sourceNodeId);
+    const targetNode = workingNodeMap.get(edge.targetNodeId);
+    if (!sourceNode || !targetNode) continue;
+    const sourcePort = sourceNode.outputs?.find((p) => p.id === edge.sourcePortId);
+    const targetPort = targetNode.inputs?.find((p) => p.id === edge.targetPortId);
+    if (!sourcePort || !targetPort) continue;
+    if (!isTypeCompatible(sourcePort.dataType, targetPort.dataType)) {
+      errors.push({
+        code: "TYPE_MISMATCH",
+        message: `Type mismatch on edge "${edge.id}": output "${sourcePort.label}" (${sourcePort.dataType}) \u2192 input "${targetPort.label}" (${targetPort.dataType})`,
+        edgeId: edge.id,
+        severity: "warning"
+      });
+    }
+  }
   return {
-    valid: errors.length === 0,
+    valid: errors.filter((e) => e.severity !== "warning" && e.severity !== "info").length === 0,
     errors,
     migrated,
     migratedIR: migrated ? workingIR : void 0,
     migrationLog
   };
 }
+function isTypeCompatible(source, target) {
+  if (source === target) return true;
+  if (source === "any" || target === "any") return true;
+  if (target === "object" && source === "array") return true;
+  if (target === "string" && source === "number") return true;
+  if (target === "number" && source === "string") return true;
+  return false;
+}
 function detectCycles(nodes, edges) {
   const errors = [];
   const adjacency = /* @__PURE__ */ new Map();
@@ -1077,6 +1101,9 @@ var init_platforms = __esm({
   "src/lib/compiler/platforms/index.ts"() {
     "use strict";
     init_types2();
+    init_nextjs();
+    init_express();
+    init_cloudflare();
     init_types2();
     init_nextjs();
     init_express();
@@ -1838,6 +1865,13 @@ var init_symbol_table = __esm({
 });
 
 // src/lib/compiler/compiler.ts
+var compiler_exports = {};
+__export(compiler_exports, {
+  compile: () => compile,
+  compileWithPrettier: () => compileWithPrettier,
+  formatWithPrettier: () => formatWithPrettier,
+  traceLineToNode: () => traceLineToNode
+});
 import { Project } from "ts-morph";
 function compile(ir, options) {
   const pluginRegistry = createPluginRegistry();
@@ -1916,7 +1950,7 @@ function compile(ir, options) {
     indentSize: 2,
     convertTabsToSpaces: true
   });
-  const code = sourceFile.getFullText();
+  let code = sourceFile.getFullText();
   const filePath = platform.getOutputFilePath(trigger);
   collectRequiredPackages(workingIR, context);
   const sourceMap = buildSourceMap(code, workingIR, filePath);
@@ -1933,6 +1967,28 @@ function compile(ir, options) {
     sourceMap
   };
 }
+async function formatWithPrettier(code, options) {
+  try {
+    const prettier = await import("prettier");
+    return await prettier.format(code, {
+      parser: "typescript",
+      printWidth: options?.printWidth ?? 100,
+      tabWidth: 2,
+      singleQuote: options?.singleQuote ?? true,
+      trailingComma: "all",
+      semi: true
+    });
+  } catch {
+    return code;
+  }
+}
+async function compileWithPrettier(ir, options) {
+  const result = compile(ir, options);
+  if (!result.success || !result.code) return result;
+  const formatted = await formatWithPrettier(result.code);
+  const sourceMap = result.sourceMap ? buildSourceMap(formatted, ir, result.filePath ?? "formatted.ts") : void 0;
+  return { ...result, code: formatted, sourceMap };
+}
 function generateCode(sourceFile, trigger, context) {
   const { platform } = context;
   platform.generateImports(sourceFile, trigger, {
@@ -2350,6 +2406,9 @@ var init_compiler = __esm({
     init_builtin();
     init_type_inference();
     init_symbol_table();
+    registerPlatform("nextjs", () => new NextjsPlatform());
+    registerPlatform("express", () => new ExpressPlatform());
+    registerPlatform("cloudflare", () => new CloudflarePlatform());
     CONTROL_FLOW_PORT_MAP = {
       ["if_else" /* IF_ELSE */]: /* @__PURE__ */ new Set(["true", "false"]),
       ["for_loop" /* FOR_LOOP */]: /* @__PURE__ */ new Set(["body"]),
@@ -3740,7 +3799,7 @@ Return ONLY valid JSON (no markdown, no explanation). The JSON must conform to t
 // src/server/handlers.ts
 import { writeFileSync as writeFileSync2, mkdirSync as mkdirSync2, existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
 import { join as join2, dirname as dirname2, resolve } from "path";
-function handleCompile(body, projectRoot) {
+async function handleCompile(body, projectRoot) {
   try {
     const ir = body.ir;
     const shouldWrite = body.write !== false;
@@ -3754,8 +3813,16 @@ function handleCompile(body, projectRoot) {
         body: { success: false, error: result.errors?.join("\n") }
       };
     }
+    let finalCode = result.code;
+    if (finalCode) {
+      try {
+        const { formatWithPrettier: formatWithPrettier2 } = await Promise.resolve().then(() => (init_compiler(), compiler_exports));
+        finalCode = await formatWithPrettier2(finalCode);
+      } catch {
+      }
+    }
     let writtenPath = null;
-    if (shouldWrite && result.filePath && result.code) {
+    if (shouldWrite && result.filePath && finalCode) {
       const fullPath = resolve(join2(projectRoot, result.filePath));
       const resolvedRoot = resolve(projectRoot);
       const sep = resolvedRoot.endsWith("/") || resolvedRoot.endsWith("\\") ? "" : process.platform === "win32" ? "\\" : "/";
@@ -3769,7 +3836,7 @@ function handleCompile(body, projectRoot) {
       if (!existsSync2(dir)) {
         mkdirSync2(dir, { recursive: true });
       }
-      writeFileSync2(fullPath, result.code, "utf-8");
+      writeFileSync2(fullPath, finalCode, "utf-8");
       writtenPath = fullPath;
       if (result.sourceMap) {
         const mapPath = fullPath.replace(/\.ts$/, ".flow.map.json");
@@ -3796,7 +3863,7 @@ function handleCompile(body, projectRoot) {
       status: 200,
       body: {
         success: true,
-        code: result.code,
+        code: finalCode,
         filePath: result.filePath,
         writtenTo: writtenPath,
         dependencies: result.dependencies,
@@ -4141,7 +4208,7 @@ async function handleRequest(req, res, staticDir, projectRoot) {
       return;
     }
     if (pathname === "/api/compile") {
-      const result = handleCompile(body, projectRoot);
+      const result = await handleCompile(body, projectRoot);
       sendJson(res, result.status, result.body);
       return;
     }

package/dist/compiler.cjs

@@ -281,14 +281,38 @@ function validateFlowIR(ir) {
       });
     }
   }
+  for (const edge of workingIR.edges) {
+    const sourceNode = workingNodeMap.get(edge.sourceNodeId);
+    const targetNode = workingNodeMap.get(edge.targetNodeId);
+    if (!sourceNode || !targetNode) continue;
+    const sourcePort = sourceNode.outputs?.find((p) => p.id === edge.sourcePortId);
+    const targetPort = targetNode.inputs?.find((p) => p.id === edge.targetPortId);
+    if (!sourcePort || !targetPort) continue;
+    if (!isTypeCompatible(sourcePort.dataType, targetPort.dataType)) {
+      errors.push({
+        code: "TYPE_MISMATCH",
+        message: `Type mismatch on edge "${edge.id}": output "${sourcePort.label}" (${sourcePort.dataType}) \u2192 input "${targetPort.label}" (${targetPort.dataType})`,
+        edgeId: edge.id,
+        severity: "warning"
+      });
+    }
+  }
   return {
-    valid: errors.length === 0,
+    valid: errors.filter((e) => e.severity !== "warning" && e.severity !== "info").length === 0,
     errors,
     migrated,
     migratedIR: migrated ? workingIR : void 0,
     migrationLog
   };
 }
+function isTypeCompatible(source, target) {
+  if (source === target) return true;
+  if (source === "any" || target === "any") return true;
+  if (target === "object" && source === "array") return true;
+  if (target === "string" && source === "number") return true;
+  if (target === "number" && source === "string") return true;
+  return false;
+}
 function detectCycles(nodes, edges) {
   const errors = [];
   const adjacency = /* @__PURE__ */ new Map();
@@ -1848,6 +1872,9 @@ var RESERVED_WORDS = /* @__PURE__ */ new Set([
 ]);
 
 // src/lib/compiler/compiler.ts
+registerPlatform("nextjs", () => new NextjsPlatform());
+registerPlatform("express", () => new ExpressPlatform());
+registerPlatform("cloudflare", () => new CloudflarePlatform());
 function compile(ir, options) {
   const pluginRegistry = createPluginRegistry();
   pluginRegistry.registerAll(builtinPlugins);
@@ -1925,7 +1952,7 @@ function compile(ir, options) {
     indentSize: 2,
     convertTabsToSpaces: true
   });
-  const code = sourceFile.getFullText();
+  let code = sourceFile.getFullText();
   const filePath = platform.getOutputFilePath(trigger);
   collectRequiredPackages(workingIR, context);
   const sourceMap = buildSourceMap(code, workingIR, filePath);
@@ -3375,6 +3402,7 @@ function withFlowTrace(handler, options) {
             formatTraceResults(err, traces, sourceMap.generatedFile)
           );
         }
+        options.onTrace?.(traces, err);
       }
       throw err;
     }
@@ -3383,6 +3411,7 @@ function withFlowTrace(handler, options) {
 }
 function installFlowTracer(options) {
   const { sourceMap, ir, editorUrl = "http://localhost:3001", log = true } = options;
+  const { onTrace } = options;
   const handleError = (err) => {
     if (!(err instanceof Error)) return;
     const traces = traceError(err, sourceMap, ir, editorUrl);
@@ -3391,6 +3420,7 @@ function installFlowTracer(options) {
         formatTraceResults(err, traces, sourceMap.generatedFile)
       );
     }
+    onTrace?.(traces, err);
   };
   process.on("uncaughtException", handleError);
   process.on("unhandledRejection", handleError);

package/dist/compiler.d.cts

@@ -548,6 +548,8 @@ interface CompileOptions {
     platform?: PlatformName;
     /** Additional Node Plugins */
     plugins?: NodePlugin[];
+    /** Format output with Prettier (default: true) */
+    prettier?: boolean;
 }
 /**
  * Compiles FlowIR into TypeScript source code.
@@ -598,6 +600,8 @@ interface ValidationError {
     message: string;
     nodeId?: NodeId;
     edgeId?: string;
+    /** Severity level (default: "error") */
+    severity?: "error" | "warning" | "info";
 }
 interface ValidationResult {
     valid: boolean;
@@ -909,6 +913,8 @@ interface TracerOptions {
     ir?: FlowIR;
     /** Whether to print a readable error message to console (default: true) */
     log?: boolean;
+    /** Callback invoked when trace results are available (push to UI store for live badges) */
+    onTrace?: (results: TraceResult[], error: Error) => void;
 }
 /**
  * Extract all matching line numbers from an Error object's stack trace

package/dist/compiler.d.ts

@@ -548,6 +548,8 @@ interface CompileOptions {
     platform?: PlatformName;
     /** Additional Node Plugins */
     plugins?: NodePlugin[];
+    /** Format output with Prettier (default: true) */
+    prettier?: boolean;
 }
 /**
  * Compiles FlowIR into TypeScript source code.
@@ -598,6 +600,8 @@ interface ValidationError {
     message: string;
     nodeId?: NodeId;
     edgeId?: string;
+    /** Severity level (default: "error") */
+    severity?: "error" | "warning" | "info";
 }
 interface ValidationResult {
     valid: boolean;
@@ -909,6 +913,8 @@ interface TracerOptions {
     ir?: FlowIR;
     /** Whether to print a readable error message to console (default: true) */
     log?: boolean;
+    /** Callback invoked when trace results are available (push to UI store for live badges) */
+    onTrace?: (results: TraceResult[], error: Error) => void;
 }
 /**
  * Extract all matching line numbers from an Error object's stack trace

package/dist/compiler.js

@@ -214,14 +214,38 @@ function validateFlowIR(ir) {
       });
     }
   }
+  for (const edge of workingIR.edges) {
+    const sourceNode = workingNodeMap.get(edge.sourceNodeId);
+    const targetNode = workingNodeMap.get(edge.targetNodeId);
+    if (!sourceNode || !targetNode) continue;
+    const sourcePort = sourceNode.outputs?.find((p) => p.id === edge.sourcePortId);
+    const targetPort = targetNode.inputs?.find((p) => p.id === edge.targetPortId);
+    if (!sourcePort || !targetPort) continue;
+    if (!isTypeCompatible(sourcePort.dataType, targetPort.dataType)) {
+      errors.push({
+        code: "TYPE_MISMATCH",
+        message: `Type mismatch on edge "${edge.id}": output "${sourcePort.label}" (${sourcePort.dataType}) \u2192 input "${targetPort.label}" (${targetPort.dataType})`,
+        edgeId: edge.id,
+        severity: "warning"
+      });
+    }
+  }
   return {
-    valid: errors.length === 0,
+    valid: errors.filter((e) => e.severity !== "warning" && e.severity !== "info").length === 0,
     errors,
     migrated,
     migratedIR: migrated ? workingIR : void 0,
     migrationLog
   };
 }
+function isTypeCompatible(source, target) {
+  if (source === target) return true;
+  if (source === "any" || target === "any") return true;
+  if (target === "object" && source === "array") return true;
+  if (target === "string" && source === "number") return true;
+  if (target === "number" && source === "string") return true;
+  return false;
+}
 function detectCycles(nodes, edges) {
   const errors = [];
   const adjacency = /* @__PURE__ */ new Map();
@@ -1781,6 +1805,9 @@ var RESERVED_WORDS = /* @__PURE__ */ new Set([
 ]);
 
 // src/lib/compiler/compiler.ts
+registerPlatform("nextjs", () => new NextjsPlatform());
+registerPlatform("express", () => new ExpressPlatform());
+registerPlatform("cloudflare", () => new CloudflarePlatform());
 function compile(ir, options) {
   const pluginRegistry = createPluginRegistry();
   pluginRegistry.registerAll(builtinPlugins);
@@ -1858,7 +1885,7 @@ function compile(ir, options) {
     indentSize: 2,
     convertTabsToSpaces: true
   });
-  const code = sourceFile.getFullText();
+  let code = sourceFile.getFullText();
   const filePath = platform.getOutputFilePath(trigger);
   collectRequiredPackages(workingIR, context);
   const sourceMap = buildSourceMap(code, workingIR, filePath);
@@ -3311,6 +3338,7 @@ function withFlowTrace(handler, options) {
             formatTraceResults(err, traces, sourceMap.generatedFile)
           );
         }
+        options.onTrace?.(traces, err);
       }
       throw err;
     }
@@ -3319,6 +3347,7 @@ function withFlowTrace(handler, options) {
 }
 function installFlowTracer(options) {
   const { sourceMap, ir, editorUrl = "http://localhost:3001", log = true } = options;
+  const { onTrace } = options;
   const handleError = (err) => {
     if (!(err instanceof Error)) return;
     const traces = traceError(err, sourceMap, ir, editorUrl);
@@ -3327,6 +3356,7 @@ function installFlowTracer(options) {
         formatTraceResults(err, traces, sourceMap.generatedFile)
       );
     }
+    onTrace?.(traces, err);
   };
   process.on("uncaughtException", handleError);
   process.on("unhandledRejection", handleError);

package/dist/server.d.ts

@@ -21,7 +21,7 @@ export interface ServerOptions {
   onReady?: (url: string) => void;
 }
 
-export declare function handleCompile(body: CompileRequest, projectRoot: string): ApiResponse;
+export declare function handleCompile(body: CompileRequest, projectRoot: string): Promise<ApiResponse>;
 export declare function handleGenerate(body: { prompt?: string }): Promise<ApiResponse>;
 export declare function handleImportOpenAPI(body: { spec?: unknown; filter?: { tags?: string[]; paths?: string[] } }): ApiResponse;
 export declare function startServer(options?: ServerOptions): Server;