@wire-dsl/web 0.0.7 → 0.1.0

package/src/hooks/useFileSystemAccess.ts

@@ -0,0 +1,123 @@
+import { useCallback, useState } from 'react';
+
+declare global {
+  interface Window {
+    showOpenFilePicker?: (options?: any) => Promise<FileSystemFileHandle[]>;
+    showSaveFilePicker?: (options?: any) => Promise<FileSystemFileHandle>;
+  }
+}
+
+export interface FileSystemFileHandle {
+  name: string;
+  getFile(): Promise<File>;
+  createWritable(): Promise<FileSystemWritableFileStream>;
+}
+
+export interface FileSystemWritableFileStream {
+  write(data: string | ArrayBuffer | Blob): Promise<void>;
+  close(): Promise<void>;
+}
+
+export interface FileHandle {
+  name: string;
+  handle: FileSystemFileHandle;
+}
+
+interface UseFileSystemAccessReturn {
+  fileHandle: FileHandle | null;
+  setFileHandle: (handle: FileHandle | null) => void;
+  openFile: () => Promise<{ name: string; content: string; handle: FileSystemFileHandle } | null>;
+  saveFile: (content: string) => Promise<boolean>;
+  saveFileAs: (content: string, suggestedName?: string) => Promise<{ name: string; handle: FileSystemFileHandle } | false | null>;
+}
+
+export const useFileSystemAccess = (): UseFileSystemAccessReturn => {
+  const [fileHandle, setFileHandle] = useState<FileHandle | null>(null);
+
+  const openFile = useCallback(async (): Promise<{ name: string; content: string; handle: FileSystemFileHandle } | null> => {
+    try {
+      const handles = await (window.showOpenFilePicker as any)({
+        types: [
+          {
+            description: 'Wire Files',
+            accept: { 'text/plain': ['.wire'] },
+          },
+        ],
+        multiple: false,
+      });
+
+      if (handles.length === 0) return null;
+
+      const handle = handles[0];
+      const file = await handle.getFile();
+      const content = await file.text();
+
+      setFileHandle({ name: file.name, handle });
+      return { name: file.name, content, handle };
+    } catch (error) {
+      if (error instanceof DOMException && error.name !== 'AbortError') {
+        console.error('Error opening file:', error);
+      }
+      return null;
+    }
+  }, []);
+
+  const saveFile = useCallback(
+    async (content: string): Promise<boolean> => {
+      if (!fileHandle) return false;
+
+      try {
+        const writable = await fileHandle.handle.createWritable();
+        await writable.write(content);
+        await writable.close();
+        return true;
+      } catch (error) {
+        console.error('Error saving file:', error);
+        return false;
+      }
+    },
+    [fileHandle]
+  );
+
+  const saveFileAs = useCallback(
+    async (content: string, suggestedName?: string): Promise<{ name: string; handle: FileSystemFileHandle } | false | null> => {
+      try {
+        const handle = await (window.showSaveFilePicker as any)({
+          types: [
+            {
+              description: 'Wire Files',
+              accept: { 'text/plain': ['.wire'] },
+            },
+          ],
+          suggestedName: suggestedName || 'untitled.wire',
+        });
+
+        const writable = await handle.createWritable();
+        await writable.write(content);
+        await writable.close();
+
+        setFileHandle({ name: handle.name, handle });
+        return { name: handle.name, handle };
+      } catch (error) {
+        // Usuario canceló el diálogo
+        if (error instanceof DOMException && error.name === 'AbortError') {
+          return false;
+        }
+        // Error real
+        if (error instanceof DOMException && error.name !== 'AbortError') {
+          console.error('Error saving file:', error);
+        }
+        return null;
+      }
+    },
+    []
+  );
+
+  return {
+    fileHandle,
+    setFileHandle,
+    openFile,
+    saveFile,
+    saveFileAs,
+  };
+};

package/src/hooks/useWireParser.ts

@@ -0,0 +1,222 @@
+import { useState, useEffect } from 'react';
+import {
+  parseWireDSL,
+  generateIR,
+  calculateLayout,
+  renderToSVG,
+} from '@wire-dsl/engine';
+import type { IRContract } from '@wire-dsl/engine';
+
+export interface WireRenderResult {
+  svg: string;
+  width: number;
+  height: number;
+  projectName: string;
+  screenCount: number;
+  componentCount: number;
+  screens: Array<{ name: string; id: string }>;
+  selectedScreenName: string;
+}
+
+export interface WireDiagnostic {
+  line: number;
+  column: number;
+  message: string;
+  severity: 'error' | 'warning';
+}
+
+/**
+ * Hook to parse Wire DSL code and render to SVG
+ *
+ * Uses @wire-dsl/engine for parsing, IR generation, layout calculation, and rendering.
+ * All operations run in the browser (engine is pure JS/TS with no Node.js dependencies).
+ *
+ * Pipeline:
+ * 1. Parse DSL code to AST using Chevrotain parser
+ * 2. Generate IR (Intermediate Representation) with validation
+ * 3. Calculate layout positions and dimensions
+ * 4. Render to SVG with all visual properties
+ */
+export function useWireParser(code: string, selectedScreenName?: string | null) {
+  const [renderResult, setRenderResult] = useState<WireRenderResult | null>(null);
+  const [diagnostics, setDiagnostics] = useState<WireDiagnostic[]>([]);
+  const [renderState, setRenderState] = useState<'idle' | 'parsing' | 'rendering'>('idle');
+
+  useEffect(() => {
+    if (!code || code.trim().length === 0) {
+      setRenderResult(null);
+      setDiagnostics([]);
+      return;
+    }
+
+    const processWireCode = async () => {
+      try {
+        setRenderState('parsing');
+        const errors: WireDiagnostic[] = [];
+
+        // 1. Parse DSL to AST
+        let ast;
+        try {
+          ast = parseWireDSL(code);
+        } catch (parseError) {
+          const message =
+            parseError instanceof Error
+              ? parseError.message
+              : 'Failed to parse Wire DSL';
+          errors.push({
+            line: 1,
+            column: 1,
+            message,
+            severity: 'error',
+          });
+          setDiagnostics(errors);
+          setRenderResult(null);
+          setRenderState('idle');
+          return;
+        }
+
+        // 2. Generate IR
+        let ir: IRContract;
+        try {
+          ir = generateIR(ast);
+        } catch (irError) {
+          const message =
+            irError instanceof Error
+              ? irError.message
+              : 'Failed to generate IR';
+          errors.push({
+            line: 1,
+            column: 1,
+            message,
+            severity: 'error',
+          });
+          setDiagnostics(errors);
+          setRenderResult(null);
+          setRenderState('idle');
+          return;
+        }
+
+        // 3. Calculate layout
+        setRenderState('rendering');
+        let layout;
+        try {
+          layout = calculateLayout(ir);
+        } catch (layoutError) {
+          const message =
+            layoutError instanceof Error
+              ? layoutError.message
+              : 'Failed to calculate layout';
+          errors.push({
+            line: 1,
+            column: 1,
+            message,
+            severity: 'error',
+          });
+          setDiagnostics(errors);
+          setRenderResult(null);
+          setRenderState('idle');
+          return;
+        }
+
+        // 4. Render to SVG
+        let svgOutput: string;
+        const screenToRender = selectedScreenName
+          ? ir.project.screens.find((s) => s.name === selectedScreenName)
+          : null;
+        
+        const screenName = screenToRender?.name || ir.project.screens[0]?.name;
+        
+        try {
+          svgOutput = renderToSVG(ir, layout, { screenName });
+        } catch (renderError) {
+          const message =
+            renderError instanceof Error
+              ? renderError.message
+              : 'Failed to render SVG';
+          errors.push({
+            line: 1,
+            column: 1,
+            message,
+            severity: 'error',
+          });
+          setDiagnostics(errors);
+          setRenderResult(null);
+          setRenderState('idle');
+          return;
+        }
+
+        // Success: extract metadata and set result
+        const screenCount = ir.project.screens.length;
+        const componentCount = ir.project.screens.reduce(
+          (total: number, screen: any) => total + countComponents(screen),
+          0
+        );
+
+        // Get dimensions for the rendered screen
+        const renderedScreen = ir.project.screens.find((s) => s.name === screenName);
+        const width = renderedScreen?.viewport.width || 800;
+        const height = renderedScreen?.viewport.height || 600;
+
+        // Build screens list with name and id
+        const screens = ir.project.screens.map((screen) => ({
+          name: screen.name,
+          id: screen.id,
+        }));
+
+        setRenderResult({
+          svg: svgOutput,
+          width,
+          height,
+          projectName: ir.project.name,
+          screenCount,
+          componentCount,
+          screens,
+          selectedScreenName: screenName,
+        });
+
+        setDiagnostics([]);
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : 'Unknown error';
+        setDiagnostics([
+          {
+            line: 1,
+            column: 1,
+            message,
+            severity: 'error',
+          },
+        ]);
+        setRenderResult(null);
+      } finally {
+        setRenderState('idle');
+      }
+    };
+
+    processWireCode();
+  }, [code, selectedScreenName]);
+
+  return {
+    renderResult,
+    diagnostics,
+    renderState,
+  };
+}
+
+/**
+ * Helper to count components in a screen
+ */
+function countComponents(screen: any): number {
+  if (!screen.layout) return 0;
+
+  let count = 0;
+  const countInNode = (node: any) => {
+    if (node.type === 'component') {
+      count++;
+    } else if (node.children) {
+      node.children.forEach(countInNode);
+    }
+  };
+
+  countInNode(screen.layout);
+  return count;
+}

package/src/index.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 body {
     margin: 0;

package/src/main.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
+import { registerWireLanguage } from './monaco/wireLanguage';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+// Registrar lenguaje Wire en Monaco
+registerWireLanguage();
+
+// Render app
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<App />);