@aprovan/patchwork 0.1.0 → 0.1.1

package/packages/compiler/src/vfs/sync/engine.ts

@@ -0,0 +1,398 @@
+import type {
+  ChangeRecord,
+  ConflictRecord,
+  ConflictStrategy,
+  DirEntry,
+  FSProvider,
+  SyncEventCallback,
+  SyncEventType,
+  SyncResult,
+  SyncStatus,
+  WatchEventType,
+} from "../core/types.js";
+import type { VirtualFS } from "../core/virtual-fs.js";
+import { join, normalizePath } from "../core/utils.js";
+import { readChecksums } from "./differ.js";
+import { resolveConflict } from "./resolver.js";
+
+export interface SyncEngineConfig {
+  conflictStrategy?: ConflictStrategy;
+  basePath?: string;
+}
+
+type EventMap = {
+  change: ChangeRecord;
+  conflict: ConflictRecord;
+  error: Error;
+  status: SyncStatus;
+};
+
+/**
+ * Bidirectional sync engine between local VirtualFS and remote FSProvider
+ */
+export class SyncEngineImpl {
+  status: SyncStatus = "idle";
+  private intervalId?: ReturnType<typeof setInterval>;
+  private listeners = new Map<SyncEventType, Set<SyncEventCallback<unknown>>>();
+  private conflictStrategy: ConflictStrategy;
+  private basePath: string;
+
+  constructor(
+    private local: VirtualFS,
+    private remote: FSProvider,
+    config: SyncEngineConfig = {},
+  ) {
+    this.conflictStrategy = config.conflictStrategy ?? "local-wins";
+    this.basePath = config.basePath ?? "";
+    this.startRemoteWatch();
+  }
+
+  async sync(): Promise<SyncResult> {
+    if (this.status === "syncing") {
+      return { pushed: 0, pulled: 0, conflicts: [] };
+    }
+
+    this.setStatus("syncing");
+    const result: SyncResult = { pushed: 0, pulled: 0, conflicts: [] };
+
+    try {
+      const localChanges = this.local.getChanges();
+      const localChangeMap = new Map(
+        localChanges.map((change) => [change.path, change]),
+      );
+      const syncedPaths: string[] = [];
+
+      const remoteFiles = await this.listFiles(this.remote, this.basePath);
+      const localFiles = await this.listFiles(this.local, "");
+      const remoteLocalPaths = new Set(
+        remoteFiles.map((path) => this.localPath(path)),
+      );
+
+      for (const remotePath of remoteFiles) {
+        const localPath = this.localPath(remotePath);
+        const localChange = localChangeMap.get(localPath);
+
+        if (localChange) {
+          const conflict = await this.checkConflict(localChange, remotePath);
+          if (conflict) {
+            result.conflicts.push(conflict);
+            this.emit("conflict", conflict);
+            if (conflict.resolved === "remote") {
+              if (await this.pullRemoteFile(localPath, remotePath)) {
+                result.pulled++;
+                this.emit("change", {
+                  path: localPath,
+                  type: "update",
+                  mtime: new Date(),
+                });
+              }
+              syncedPaths.push(localPath);
+            }
+          }
+          continue;
+        }
+
+        if (await this.pullRemoteFile(localPath, remotePath)) {
+          result.pulled++;
+          this.emit("change", {
+            path: localPath,
+            type: "update",
+            mtime: new Date(),
+          });
+        }
+      }
+
+      for (const localPath of localFiles) {
+        if (remoteLocalPaths.has(localPath)) continue;
+        if (localChangeMap.has(localPath)) continue;
+        await this.local.applyRemoteDelete(localPath);
+        result.pulled++;
+        this.emit("change", {
+          path: localPath,
+          type: "delete",
+          mtime: new Date(),
+        });
+      }
+
+      for (const change of localChanges) {
+        if (syncedPaths.includes(change.path)) continue;
+        const remotePath = this.remotePath(change.path);
+
+        try {
+          const conflict = await this.checkConflict(change, remotePath);
+          if (conflict) {
+            result.conflicts.push(conflict);
+            this.emit("conflict", conflict);
+            if (conflict.resolved === "remote") {
+              if (await this.pullRemoteFile(change.path, remotePath)) {
+                result.pulled++;
+                this.emit("change", {
+                  path: change.path,
+                  type: "update",
+                  mtime: new Date(),
+                });
+              }
+              syncedPaths.push(change.path);
+            }
+            if (conflict.resolved !== "local") continue;
+          }
+
+          if (change.type === "delete") {
+            if (await this.remote.exists(remotePath)) {
+              await this.remote.unlink(remotePath);
+            }
+            result.pushed++;
+            syncedPaths.push(change.path);
+            this.emit("change", change);
+            continue;
+          }
+
+          const content = await this.local.readFile(change.path);
+          await this.remote.writeFile(remotePath, content);
+          result.pushed++;
+          syncedPaths.push(change.path);
+          this.emit("change", change);
+        } catch (err) {
+          this.emit(
+            "error",
+            err instanceof Error ? err : new Error(String(err)),
+          );
+        }
+      }
+
+      if (syncedPaths.length > 0) {
+        this.local.markSynced(syncedPaths);
+      }
+      this.setStatus("idle");
+    } catch (err) {
+      this.setStatus("error");
+      this.emit("error", err instanceof Error ? err : new Error(String(err)));
+    }
+
+    return result;
+  }
+
+  startAutoSync(intervalMs: number): void {
+    this.stopAutoSync();
+    this.intervalId = setInterval(() => this.sync(), intervalMs);
+  }
+
+  stopAutoSync(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = undefined;
+    }
+  }
+
+  on<T extends SyncEventType>(
+    event: T,
+    callback: SyncEventCallback<EventMap[T]>,
+  ): () => void {
+    let set = this.listeners.get(event);
+    if (!set) {
+      set = new Set();
+      this.listeners.set(event, set);
+    }
+    set.add(callback as SyncEventCallback<unknown>);
+    return () => set!.delete(callback as SyncEventCallback<unknown>);
+  }
+
+  private emit<T extends SyncEventType>(event: T, data: EventMap[T]): void {
+    const set = this.listeners.get(event);
+    if (set) {
+      for (const cb of set) cb(data);
+    }
+  }
+
+  private setStatus(status: SyncStatus): void {
+    this.status = status;
+    this.emit("status", status);
+  }
+
+  private remotePath(localPath: string): string {
+    return this.basePath ? join(this.basePath, localPath) : localPath;
+  }
+
+  private localPath(remotePath: string): string {
+    if (!this.basePath) return normalizePath(remotePath);
+    const normalized = normalizePath(remotePath);
+    const base = normalizePath(this.basePath);
+    if (normalized === base) return "";
+    if (normalized.startsWith(`${base}/`)) {
+      return normalized.slice(base.length + 1);
+    }
+    return normalized;
+  }
+
+  private async listFiles(
+    provider: FSProvider,
+    basePath: string,
+  ): Promise<string[]> {
+    const normalized = normalizePath(basePath);
+    let entries: DirEntry[] = [];
+    try {
+      entries = await provider.readdir(normalized);
+    } catch {
+      return [];
+    }
+
+    const results: string[] = [];
+    for (const entry of entries) {
+      const entryPath = normalized ? `${normalized}/${entry.name}` : entry.name;
+      if (entry.isDirectory()) {
+        results.push(...(await this.listFiles(provider, entryPath)));
+      } else {
+        results.push(entryPath);
+      }
+    }
+
+    return results;
+  }
+
+  private async pullRemoteFile(
+    localPath: string,
+    remotePath: string,
+  ): Promise<boolean> {
+    let localContent: string | null = null;
+    try {
+      if (await this.local.exists(localPath)) {
+        localContent = await this.local.readFile(localPath);
+      }
+    } catch {
+      localContent = null;
+    }
+
+    const remoteContent = await this.remote.readFile(remotePath);
+    if (localContent === remoteContent) return false;
+    await this.local.applyRemoteFile(localPath, remoteContent);
+    return true;
+  }
+
+  private startRemoteWatch(): void {
+    if (!this.remote.watch) return;
+    this.remote.watch(this.basePath, (event, path) => {
+      void this.handleRemoteEvent(event, path);
+    });
+  }
+
+  private async handleRemoteEvent(
+    event: WatchEventType,
+    remotePath: string,
+  ): Promise<void> {
+    const localPath = this.localPath(remotePath);
+    const localChange = this.local
+      .getChanges()
+      .find((change) => change.path === localPath);
+
+    if (localChange) {
+      const conflict = await this.checkRemoteEventConflict(
+        localChange,
+        remotePath,
+        event,
+      );
+      if (conflict) {
+        this.emit("conflict", conflict);
+        if (conflict.resolved === "remote") {
+          await this.applyRemoteEvent(event, localPath, remotePath);
+          this.local.markSynced([localPath]);
+          this.emit("change", {
+            path: localPath,
+            type: event,
+            mtime: new Date(),
+          });
+        }
+        return;
+      }
+
+      return;
+    }
+
+    try {
+      await this.applyRemoteEvent(event, localPath, remotePath);
+      this.emit("change", {
+        path: localPath,
+        type: event,
+        mtime: new Date(),
+      });
+    } catch (err) {
+      this.emit("error", err instanceof Error ? err : new Error(String(err)));
+    }
+  }
+
+  private async checkConflict(
+    change: ChangeRecord,
+    remotePath: string,
+  ): Promise<ConflictRecord | null> {
+    try {
+      const remoteStat = await this.remote.stat(remotePath);
+      if (remoteStat.mtime <= change.mtime) return null;
+      const checksums = await readChecksums(
+        this.local,
+        change.path,
+        this.remote,
+        remotePath,
+      );
+      return resolveConflict({
+        path: change.path,
+        changeMtime: change.mtime,
+        remoteMtime: remoteStat.mtime,
+        localChecksum: checksums.local,
+        remoteChecksum: checksums.remote,
+        strategy: this.conflictStrategy,
+      });
+    } catch {
+      return null;
+    }
+  }
+
+  private async checkRemoteEventConflict(
+    change: ChangeRecord,
+    remotePath: string,
+    event: WatchEventType,
+  ): Promise<ConflictRecord | null> {
+    if (event === "delete") {
+      if (change.type === "delete") return null;
+      return resolveConflict({
+        path: change.path,
+        changeMtime: change.mtime,
+        remoteMtime: new Date(),
+        strategy: this.conflictStrategy,
+      });
+    }
+
+    try {
+      const remoteStat = await this.remote.stat(remotePath);
+      if (remoteStat.mtime <= change.mtime) return null;
+      const checksums = await readChecksums(
+        this.local,
+        change.path,
+        this.remote,
+        remotePath,
+      );
+      return resolveConflict({
+        path: change.path,
+        changeMtime: change.mtime,
+        remoteMtime: remoteStat.mtime,
+        localChecksum: checksums.local,
+        remoteChecksum: checksums.remote,
+        strategy: this.conflictStrategy,
+      });
+    } catch {
+      return null;
+    }
+  }
+
+  private async applyRemoteEvent(
+    event: WatchEventType,
+    localPath: string,
+    remotePath: string,
+  ): Promise<void> {
+    if (event === "delete") {
+      await this.local.applyRemoteDelete(localPath);
+      return;
+    }
+
+    const content = await this.remote.readFile(remotePath);
+    await this.local.applyRemoteFile(localPath, content);
+  }
+}

package/packages/compiler/src/vfs/sync/index.ts

@@ -0,0 +1,3 @@
+export { SyncEngineImpl, type SyncEngineConfig } from "./engine.js";
+export { hashContent, readChecksum, readChecksums } from "./differ.js";
+export { resolveConflict, type ConflictResolutionInput } from "./resolver.js";

package/packages/compiler/src/vfs/sync/resolver.ts

@@ -0,0 +1,46 @@
+import type { ConflictRecord, ConflictStrategy } from "../core/types.js";
+
+export interface ConflictResolutionInput {
+  path: string;
+  changeMtime: Date;
+  remoteMtime: Date;
+  localChecksum?: string;
+  remoteChecksum?: string;
+  strategy: ConflictStrategy;
+}
+
+export function resolveConflict(
+  input: ConflictResolutionInput,
+): ConflictRecord | null {
+  if (input.remoteMtime <= input.changeMtime) return null;
+  if (
+    input.localChecksum &&
+    input.remoteChecksum &&
+    input.localChecksum === input.remoteChecksum
+  ) {
+    return null;
+  }
+
+  const conflict: ConflictRecord = {
+    path: input.path,
+    localMtime: input.changeMtime,
+    remoteMtime: input.remoteMtime,
+  };
+
+  switch (input.strategy) {
+    case "local-wins":
+      conflict.resolved = "local";
+      break;
+    case "remote-wins":
+      conflict.resolved = "remote";
+      break;
+    case "newest-wins":
+      conflict.resolved =
+        input.remoteMtime > input.changeMtime ? "remote" : "local";
+      break;
+    case "manual":
+      break;
+  }
+
+  return conflict;
+}

package/packages/compiler/src/vfs/types.ts

@@ -3,6 +3,7 @@ export interface VirtualFile {
   content: string;
   language?: string;
   note?: string;
+  encoding?: 'utf8' | 'base64';
 }
 
 export interface VirtualProject {
@@ -10,11 +11,3 @@ export interface VirtualProject {
   entry: string;
   files: Map<string, VirtualFile>;
 }
-
-export interface StorageBackend {
-  get(path: string): Promise<string | null>;
-  put(path: string, content: string): Promise<void>;
-  delete(path: string): Promise<void>;
-  list(prefix?: string): Promise<string[]>;
-  exists(path: string): Promise<boolean>;
-}

package/packages/compiler/tsup.config.ts

@@ -1,14 +1,14 @@
-import { defineConfig } from 'tsup';
+import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['esm'],
-  target: 'node20',
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  target: "node20",
   clean: true,
   dts: true,
   splitting: false,
   sourcemap: true,
   shims: true,
-  external: ['react', 'react-dom', 'ink'],
+  external: ["react", "react-dom", "ink"],
   skipNodeModulesBundle: true,
 });

package/packages/editor/package.json

@@ -12,7 +12,7 @@
     }
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && tsc --declaration --emitDeclarationOnly --outDir dist --jsx react-jsx --lib ES2022,DOM --skipLibCheck src/index.ts",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit"
   },

package/packages/editor/src/components/CodeBlockExtension.tsx

@@ -115,7 +115,7 @@ export const CodeBlockExtension = Node.create({
         default: null,
         parseHTML: (element: HTMLElement) => {
           const { languageClassPrefix } = this.options;
-          const classNames = [...(element.firstElementChild?.classList || [])];
+          const classNames = Array.from(element.firstElementChild?.classList || []);
           const languages = classNames
             .filter((className) => className.startsWith(languageClassPrefix))
             .map((className) => className.replace(languageClassPrefix, ''));

package/packages/editor/src/components/CodePreview.tsx

@@ -3,7 +3,7 @@ import { Code, Eye, AlertCircle, Loader2, Pencil, RotateCcw, MessageSquare, Clou
 import type { Compiler, MountedWidget, Manifest } from '@aprovan/patchwork-compiler';
 import { createSingleFileProject } from '@aprovan/patchwork-compiler';
 import { EditModal, type CompileFn } from './edit';
-import { saveProject, getVFSConfig } from '../lib/vfs';
+import { saveProject, getVFSConfig, loadFile, subscribeToChanges } from '../lib/vfs';
 
 type SaveStatus = 'unsaved' | 'saving' | 'saved' | 'error';
 
@@ -96,6 +96,11 @@ export function CodePreview({ code: originalCode, compiler, services, filePath }
   const [currentCode, setCurrentCode] = useState(originalCode);
   const [editCount, setEditCount] = useState(0);
   const [saveStatus, setSaveStatus] = useState<SaveStatus>('unsaved');
+  const [lastSavedCode, setLastSavedCode] = useState(originalCode);
+  const [vfsPath, setVfsPath] = useState<string | null>(null);
+  const currentCodeRef = useRef(currentCode);
+  const lastSavedRef = useRef(lastSavedCode);
+  const isEditingRef = useRef(isEditing);
 
   // Stable project ID for this widget instance (fallback when not using paths)
   const fallbackId = useMemo(() => crypto.randomUUID(), []);
@@ -126,6 +131,58 @@ export function CodePreview({ code: originalCode, compiler, services, filePath }
     return 'main.tsx';
   }, [filePath]);
 
+  useEffect(() => {
+    currentCodeRef.current = currentCode;
+  }, [currentCode]);
+
+  useEffect(() => {
+    lastSavedRef.current = lastSavedCode;
+  }, [lastSavedCode]);
+
+  useEffect(() => {
+    isEditingRef.current = isEditing;
+  }, [isEditing]);
+
+  useEffect(() => {
+    let active = true;
+    void (async () => {
+      const projectId = await getProjectId();
+      const entryFile = getEntryFile();
+      if (!active) return;
+      setVfsPath(`${projectId}/${entryFile}`);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [getProjectId, getEntryFile]);
+
+  useEffect(() => {
+    if (!vfsPath) return;
+    const unsubscribe = subscribeToChanges(async (record) => {
+      if (record.path !== vfsPath) return;
+      if (record.type === 'delete') {
+        setSaveStatus('unsaved');
+        return;
+      }
+      if (isEditingRef.current) return;
+      try {
+        const remote = await loadFile(vfsPath);
+        if (currentCodeRef.current !== lastSavedRef.current) {
+          setSaveStatus('unsaved');
+          return;
+        }
+        if (remote !== currentCodeRef.current) {
+          setCurrentCode(remote);
+          setLastSavedCode(remote);
+          setSaveStatus('saved');
+        }
+      } catch {
+        setSaveStatus('error');
+      }
+    });
+    return () => unsubscribe();
+  }, [vfsPath]);
+
   // Manual save handler
   const handleSave = useCallback(async () => {
     setSaveStatus('saving');
@@ -134,6 +191,7 @@ export function CodePreview({ code: originalCode, compiler, services, filePath }
       const entryFile = getEntryFile();
       const project = createSingleFileProject(currentCode, entryFile, projectId);
       await saveProject(project);
+      setLastSavedCode(currentCode);
       setSaveStatus('saved');
     } catch (err) {
       console.warn('[VFS] Failed to save project:', err);

package/packages/editor/src/components/edit/CodeBlockView.tsx

@@ -0,0 +1,72 @@
+import { useCallback, useRef, useEffect } from 'react';
+
+export interface CodeBlockViewProps {
+  content: string;
+  language: string | null;
+  editable?: boolean;
+  onChange?: (content: string) => void;
+}
+
+export function CodeBlockView({ content, language, editable = false, onChange }: CodeBlockViewProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }, [content]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange?.(e.target.value);
+    },
+    [onChange]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        const target = e.target as HTMLTextAreaElement;
+        const start = target.selectionStart;
+        const end = target.selectionEnd;
+        const value = target.value;
+        const newValue = value.substring(0, start) + '  ' + value.substring(end);
+        onChange?.(newValue);
+        requestAnimationFrame(() => {
+          target.selectionStart = target.selectionEnd = start + 2;
+        });
+      }
+    },
+    [onChange]
+  );
+
+  const langLabel = language || 'text';
+
+  return (
+    <div className="h-full flex flex-col bg-muted/10">
+      <div className="flex items-center justify-between px-4 py-2 bg-muted/30 border-b text-xs">
+        <span className="font-mono text-muted-foreground">{langLabel}</span>
+      </div>
+        {editable ? (
+          <textarea
+            ref={textareaRef}
+            value={content}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            className="w-full min-h-full font-mono text-xs leading-relaxed bg-transparent border-none outline-none resize-none"
+            spellCheck={false}
+            style={{
+              tabSize: 2,
+              WebkitTextFillColor: 'inherit',
+            }}
+          />
+        ) : (
+          <pre className="text-xs font-mono whitespace-pre-wrap break-words m-0 leading-relaxed">
+            <code>{content}</code>
+          </pre>
+        )}
+    </div>
+  );
+}