More progress on the web containers

src/lib/components/Warnings.svelte

@@ -65,7 +65,7 @@
 				<form method="dialog">
 					<button
 						class="link link-info ml-2"
-						on:click={async() => {
+						on:click={async () => {
 							await gotoBlock(id);
 						}}>{displayWarnings[id][0].blockName?.toUpperCase()}</button
 					>

src/lib/components/Workspace.svelte

@@ -19,7 +19,7 @@
 		...En
 	});
 
-	onMount(async() => {
+	onMount(async () => {
 		await loadBlocks();
 		workspace = Blockly.inject("blocklyDiv", { ...options, toolbox: toolbox });
 

src/lib/utils/BlockGen/Blocks/Block.ts

@@ -65,7 +65,7 @@ export default class Block {
 
 		// Add The block to the blocks list
 		Blockly.Blocks[blockDef.type] = {
-			init: function(this: Blockly.Block) {
+			init: function (this: Blockly.Block) {
 				this.jsonInit(blockDef);
 
 				// Here we define the block's shape
@@ -93,7 +93,7 @@ export default class Block {
 				}
 
 				// Warnings Code
-				this.setOnChange(function(this: Blockly.Block, changeEvent: Abstract) {
+				this.setOnChange(function (this: Blockly.Block, changeEvent: Abstract) {
 					if (
 						(EventsToTriggerWarnings.has(changeEvent.type) || changeEvent.type == "change") &&
 						!this.isInFlyout
@@ -145,7 +145,7 @@ export default class Block {
 		};
 
 		// Generating the export code
-		javascriptGenerator.forBlock[blockDef.type] = function(block: Blockly.Block) {
+		javascriptGenerator.forBlock[blockDef.type] = function (block: Blockly.Block) {
 			const args: Record<string, unknown> = {}; //? Object we will pass as argument for the custom code to run properly
 
 			for (const arg in blockDef.args0) {

src/lib/utils/BlockGen/Mutators/AssemblerMutator.ts

@@ -46,7 +46,7 @@ export default class AssemblerMutator extends Mutator {
 			// eslint-disable-next-line
 			decompose: function (this: any, workspace: Blockly.WorkspaceSvg) {
 				Blockly.Blocks[containerBlockName] = {
-					init: function(this: Blockly.Block) {
+					init: function (this: Blockly.Block) {
 						this.jsonInit({
 							type: containerBlockName,
 							message0: `${containerBlockText}\n %1`,
@@ -62,7 +62,7 @@ export default class AssemblerMutator extends Mutator {
 						});
 					}
 				};
-				javascriptGenerator.forBlock[containerBlockName] = function() {
+				javascriptGenerator.forBlock[containerBlockName] = function () {
 					return "";
 				};
 
@@ -101,7 +101,7 @@ export default class AssemblerMutator extends Mutator {
 				}
 				this.updateShape_();
 			},
-			updateShape_: function(this: Blockly.Block) {
+			updateShape_: function (this: Blockly.Block) {
 				// Iterate over each MutatorBlock defined in the properties array
 				for (let i = 0; i < properties.length; i++) {
 					// @ts-expect-error MutatorProp is type is "any"

src/lib/utils/Runner/ContainerBuilder.ts

@@ -5,24 +5,48 @@ import { NodeFileSystemManager } from "./NodeFileSystem";
 class ContainerBuilder {
 	fileSystem!: NodeFileSystemManager;
 	container!: WebContainer;
-	isReady: boolean = false;
+	isReady: boolean = false
+	termianlData = ``;
 
 	constructor() {
-		(async() => {
+		(async () => {
 			this.container = await WebContainer.boot();
 			this.fileSystem = new NodeFileSystemManager(this.container);
 
 			this.isReady = true;
 		})();
 	}
+
+	async runCommand(command: string) {
+		if (!this.isReady) throw new Error("Sorry, Terminal is not ready yet");
+
+		const keywords = command.split(" ");
+
+		const cmd = keywords.shift();
+
+		if (!cmd) throw new Error("Cannot extract command prefix from the string");
+
+		const spawnProcess = await this.container.spawn(cmd, keywords);
+
+		// eslint-disable-next-line
+		let d = this.termianlData
+
+		await spawnProcess.output.pipeTo(
+			new WritableStream({
+				write(data) {
+					d += `\n${data}`;
+				}
+			})
+		);
+
+		return spawnProcess.exit;
+	}
 }
 
 let containerBuilderInstance: ContainerBuilder;
 
 export function getContainer() {
-	if (containerBuilderInstance) return containerBuilderInstance;
-
-	containerBuilderInstance = new ContainerBuilder();
+	if (!containerBuilderInstance) containerBuilderInstance = new ContainerBuilder();
 
 	return containerBuilderInstance;
 }

src/lib/utils/Runner/NodeFileSystem.ts

@@ -10,15 +10,49 @@ export class NodeFileSystemManager {
 		this.container = container;
 	}
 
-	setFile(name: string, content: string, toDirectory?: string) {
-		// dumb code
-		void name;
-		void content;
-		void toDirectory;
-		throw new Error("Method to be implemented!");
+	addFiles(to: string, content: string) {
+		const arr = to.split("/");
+
+		if (arr.length === 1) {
+			this.files[to] = content;
+			return;
+		}
+
+		// assume last item is file name
+		const [first, last] = [arr.shift(), arr.pop()];
+
+		if (!first || !last)
+			throw new Error("Unknown Error: Unable to locate first and last items of an array");
+
+		this.files[first] = {};
+
+		if (arr.length === 0) {
+			this.files[first][last] = content;
+			return;
+		}
+
+		// recurrsion baby
+		// Disable due to a dynamic object where key is the directory/file name and value is the content of that file
+		// eslint-disable-next-line
+		const getFiles = (dir: string[], filesObj: Record<string, any>) => {
+			if (dir.length === 1) {
+				filesObj[dir[0]] = content;
+
+				return;
+			}
+
+			const dir1 = dir.shift() as string;
+
+			filesObj[dir1] = {};
+
+			getFiles(dir, filesObj[dir1]);
+		};
+
+		getFiles(arr, this.files[first]);
 	}
 
 	compileFiles() {
-		this.container.mount(this.files);
+		// I need to find a more efficient way to do this
+		// this.container.mount(this.files);
 	}
 }