A custom virtual filesytem (internally referred to as vfs) has been added that contains solely the file and folder data used in the IDE. Files and folders will always be synced immediately to the vfs whenever added, modified or deleted. Each change to the filesystem will immediately be saved to local storage.
File object structure
Each file object contains the following structure:
id: By default a UUID v4.
name: The basename of the file (default: 'Untitled')
parentId (optional): The parent folder ID if it resides in a folder, otherwise null.
content: String containing the file content.
createdAt: ISO timestamp string indicating when the file was created.
updatedAt: ISO timestamp string indicating when the file was last updated.
Folder object structure
Each folder object contains the following structure:
id: By default a UUID v4.
name: The basename of the folder (default: 'Untitled')
parentId (optional): The parent folder ID if it resides in a folder, otherwise null.
createdAt: ISO timestamp string indicating when the folder was created.
updatedAt: ISO timestamp string indicating when the folder was last updated.
💡 Both createdAt and updatedAt aren't used in any way throughout the application, but is always a must-have for filesystems. If we ever have need for these, then we already have the data. Otherwise, migration code would have to be implemented, which is cumbersome.
File tree
uses local storage 'backend', i.e. virtual filesystem (vfs)
can contain as many nested files/folders as the user needs
custom contextmenu (i.e. right-click contextmenu)
file menu items:
Download (triggers a browser download on the file)
Run (executes the contents of the file from vfs and prints results in terminal)
Rename (enables inline-edit to allow the user to rename the file)
Delete (triggers confirmation popup and deletes file if the user confirms deletion)
folder menu items:
New File (creates a new file in the folder)
New Folder (creates a new subfolder in the folder)
Download (downloads zip file containing all files and subfolders)
Rename (triggers inline-edit to allow the user to rename the folder)
Delete (triggers confirmation popup and deletes folder if the user confirms deletion)
Updated worker logic
Initially in the exam app, one single worker would be loaded when the app loads. The IDE had to be more flexible, thus a new worker will be spawned (if needed and exists) based on the filetype of the file when the file opens, or whenever the user focuses on a specific file tab.
There will always be one worker active at most.
When focusing on a tab that has no worker implemented, the existing worker will be terminated.
Miscellaneous
Allows a flexible layout where the user can drag-n-drop tabs into infinitely many splitviews.
Allows resizing windows within the layout.
Add editor syntax highlighting for the following filetypes: Makefile, gitignore, Diff, JavaScript, HTML, JSON, CSS/less/scss, JSX, Latex, Lua, Markdown, SQL, Sh, SVG, Swift, TSX/Typescript. This is based on what is mostly used at the UvA for students.
This pull request implement a completely new IDE integration, see image below.
Furthermore, below are the main features described that this PR implements.
Table of Contents
Menubar
Virtual filesystem (vfs)
A custom virtual filesytem (internally referred to as vfs) has been added that contains solely the file and folder data used in the IDE. Files and folders will always be synced immediately to the vfs whenever added, modified or deleted. Each change to the filesystem will immediately be saved to local storage.
File object structure
Each file object contains the following structure:
'Untitled')null.Folder object structure
Each folder object contains the following structure:
'Untitled')null.💡 Both
createdAtandupdatedAtaren't used in any way throughout the application, but is always a must-have for filesystems. If we ever have need for these, then we already have the data. Otherwise, migration code would have to be implemented, which is cumbersome.File tree
Updated worker logic
Miscellaneous