{"id":26660629,"url":"https://github.com/codevideo/codevideo-virtual-file-explorer","last_synced_at":"2026-04-02T01:19:12.738Z","repository":{"id":271624266,"uuid":"911585746","full_name":"codevideo/codevideo-virtual-file-explorer","owner":"codevideo","description":"A virtual file explorer that can create, delete, and rename files and folders, and virtual expand and collapse folders.","archived":false,"fork":false,"pushed_at":"2025-06-27T20:37:31.000Z","size":518,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-06T13:55:59.922Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codevideo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-03T11:13:49.000Z","updated_at":"2025-06-27T20:37:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"ff2785bc-20bf-4b8b-a6d3-8bddad51b0e4","html_url":"https://github.com/codevideo/codevideo-virtual-file-explorer","commit_stats":null,"previous_names":["codevideo/codevideo-virtual-file-explorer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codevideo/codevideo-virtual-file-explorer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-virtual-file-explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-virtual-file-explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-virtual-file-explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-virtual-file-explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codevideo","download_url":"https://codeload.github.com/codevideo/codevideo-virtual-file-explorer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-virtual-file-explorer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31293767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T01:05:07.454Z","status":"ssl_error","status_checked_at":"2026-04-02T00:56:46.496Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-25T12:18:50.350Z","updated_at":"2026-04-02T01:19:12.721Z","avatar_url":"https://github.com/codevideo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @fullstackcraft/codevideo-virtual-file-explorer\n\n![NPM Version](https://img.shields.io/npm/v/:fullstackcraftllc/codevideo-virtual-file-explorer)\n\n`codevideo-virtual-file-explorer` is a TypeScript class that simulates an IDE file explorer with the ability to create, delete, and modify folder and file structures. This lightweight and versatile library is ideal for building educational tools, code playgrounds, and interactive coding environments within web applications.\n\nThis library heavily relies on the types from [codevideo-types](https://github.com/codevideo/codevideo-types)\n\n## Example Usage\n\n```typescript\nimport { VirtualFileExplorer } from '@fullstackcraftllc/codevideo-virtual-file-explorer';\nimport { advancedCommandSeparator } from '@fullstackcraftllc/codevideo-types';\n\n// Initialize a VirtualFileExplorer instance\nconst virtualFileExplorer = new VirtualFileExplorer();\n\n// Apply file explorer actions\nvirtualFileExplorer.applyActions([\n  // create a test.js file\n  { name: 'create-file', value: 'test.js' },\n  \n  // creates a src folder\n  { name: 'create-folder', value: 'src' },\n  \n  // create an index.js file in the src folder\n  { name: 'create-file', value: 'src/index.js' },\n  \n  // rename test.js to main.js\n  { name: 'rename-file', value: `test.js${advancedCommandSeparator}main.js` },\n  \n  // copy index.js\n  { name: 'copy-file', value: `src/index.js${advancedCommandSeparator}src/index.backup.js` },\n  \n  // move main.js into src\n  { name: 'move-file', value: `main.js${advancedCommandSeparator}src/main.js` },\n  \n  // create components folder\n  { name: 'create-folder', value: 'src/components' },\n  \n  // copy components folder\n  { name: 'copy-folder', value: `src/components${advancedCommandSeparator}src/shared` },\n  \n  // move shared folder to root\n  { name: 'move-folder', value: `src/shared${advancedCommandSeparator}shared` },\n  \n  // toggle src folder collapsed state\n  { name: 'toggle-folder', value: 'src' },\n  \n  // delete backup file\n  { name: 'delete-file', value: 'src/index.backup.js' },\n  \n  // delete shared folder\n  { name: 'delete-folder', value: 'shared' },\n]);\n\n// Get the current state of the file explorer\nconst fileStructure = virtualFileExplorer.getCurrentFileStructure();\nconst fileTree = virtualFileExplorer.getCurrentFileTree();\nconst actionsApplied = virtualFileExplorer.getActionsApplied();\n\nconsole.log('Current file tree:');\nconsole.log(fileTree);\nconsole.log('Actions applied:');\nconsole.log(actionsApplied);\n```\n\n## Available Actions\n\n- `file-explorer-create-file`: Create a new file\n- `file-explorer-open-file`: Open a file (UI handler)\n- `file-explorer-rename-file`: Rename a file using format \"oldpath_____newpath\"\n- `file-explorer-delete-file`: Delete a file\n- `file-explorer-move-file`: Move a file using format \"oldpath_____newpath\"\n- `file-explorer-copy-file`: Copy a file using format \"sourcepath_____destpath\"\n- `file-explorer-create-folder`: Create a new folder\n- `file-explorer-rename-folder`: Rename a folder using format \"oldpath_____newpath\"\n- `file-explorer-delete-folder`: Delete a folder\n- `file-explorer-toggle-folder`: Toggle folder's collapsed state\n- `file-explorer-move-folder`: Move a folder using format \"oldpath_____newpath\"\n- `file-explorer-copy-folder`: Copy a folder using format \"sourcepath_____destpath\"\n\nWhere \"_____\" is a separator string used for advanced commands. The separator string can be imported using the `advancedCommandSeparator` exported from `@fullstackcraftllc/codevideo-types`.\n\n## Available Methods\n\n### `applyAction(action: FileExplorerAction): void`\n\nApply a single action to the file structure.\n\n### `applyActions(actions: FileExplorerAction[]): void`\n\nApply a series of actions to the file structure.\n\n### `getCurrentFileStructure(): IFileStructure`\n\nGet the current file structure as an object.\n\n### `getCurrentFileTree(): string`\n\nGet a string representation of the current file tree.\n\n### `getActionsApplied(): FileExplorerAction[]`\n\nGet the list of actions that were applied.\n\n## Why?\n\nThis library is part of the CodeVideo ecosystem, working alongside other tools to create a declarative way to build, edit, and generate step-by-step educational video software courses.\n\nThe `VirtualFileExplorer` provides a programmatic way to simulate file explorer interactions, making it perfect for:\n- Recording and replaying file operations\n- Creating educational content\n- Testing file-system related UI components\n- Simulating IDE-like environments in the browser\n\nSee more at [codevideo.io](https://codevideo.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodevideo%2Fcodevideo-virtual-file-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodevideo%2Fcodevideo-virtual-file-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodevideo%2Fcodevideo-virtual-file-explorer/lists"}