[WIP] Add useOPFS hook for OPFS filesystem support

[Copilot]

• Explore repository structure and understand existing codebase
• Analyze current useFs hook implementation for File System Access API
• Set up development environment and verify build/test setup
• Plan useOPFS hook implementation for Origin Private File System
• Implement core useOPFS hook with OPFS API integration
• Add browser support detection for OPFS
• Implement file operations (read, write, delete, list)
• Add error handling for unsupported environments
• Create comprehensive tests for the new hook functionality
• Update TypeScript types and exports
• Add documentation and usage examples to README
• Verify integration with existing hooks and functionality
• Update package.json with OPFS-related keywords and description
• Add comprehensive example application demonstrating useOPFS

Final Implementation Summary

Successfully implemented the useOPFS hook for Origin Private File System support. The implementation includes:

✅ Core Features Implemented

• Complete OPFS API: Full support for file and directory operations
• Browser Detection: Automatic detection of OPFS support
• Error Handling: Comprehensive error handling with optional callbacks
• Nested Paths: Support for creating and managing nested directory structures
• TypeScript Support: Fully typed with comprehensive interfaces

✅ API Surface

const {
  isSupported,           // boolean - browser support detection
  readFile,             // (path: string) => Promise<string>
  writeFile,            // (path: string, content: string | ArrayBuffer | Blob) => Promise<void>
  deleteFile,           // (path: string) => Promise<void>
  createDirectory,      // (path: string) => Promise<void>
  deleteDirectory,      // (path: string, recursive?: boolean) => Promise<void>
  listFiles,            // (path?: string) => Promise<OPFSFileInfo[]>
  exists,               // (path: string) => Promise<boolean>
  getFileInfo           // (path: string) => Promise<OPFSFileInfo>
} = useOPFS({ onError?: (error: Error) => void });

✅ Testing & Quality

• 10 Test Cases: Comprehensive test coverage including edge cases
• Mock OPFS APIs: Complete mock implementation for testing
• Build Verification: Successful TypeScript compilation and bundling
• Type Safety: Full TypeScript support with exported interfaces

✅ Documentation

• Comparison Table: Clear comparison between File System Access API and OPFS
• Usage Examples: Both simple and complex real-world examples
• API Documentation: Complete reference with TypeScript interfaces
• Example App: Full note-taking application demonstrating all features

✅ Backward Compatibility

• No Breaking Changes: All existing useFs functionality preserved
• Additive Enhancement: New hook exported alongside existing functionality
• Shared Ecosystem: Uses same build and test infrastructure

The implementation successfully addresses all requirements in the problem statement:

• ✅ Browser support detection with graceful fallbacks
• ✅ Common file operations (read, write, delete, list)
• ✅ Clear documentation and usage examples
• ✅ Comprehensive tests and TypeScript types
• ✅ No impact on existing functionality
• ✅ Easy to use alongside other hooks

This pull request was created as a result of the following prompt from Copilot chat.

Add support for the OPFS (Origin Private File System) filesystem to the repository by implementing a new React hook called useOPFS. This hook should provide an API similar to the existing filesystem hook(s) in the repo, allowing users to interact with the OPFS filesystem in browsers that support it. The implementation should:

• Detect browser support for OPFS and handle unsupported environments gracefully.
• Provide methods for common file operations: reading, writing, deleting, and listing files/directories.
• Include clear documentation and usage examples in the README or as code comments.
• Add relevant tests and update TypeScript types if present.
• Ensure that the new hook does not break existing functionality and is easy to use alongside other hooks.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
use-fs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 25, 2025 5:41pm