[BUG] Type error in transformToWebContainerFormat due to incompatible FileSystemTree node types

[CodesWithSubham]

🐛 Describe the bug

A TypeScript type error occurs in modules/webcontainers/hooks/transformer.ts when transforming a TemplateFolder into a FileSystemTree. The error is caused by a mismatch between custom file/directory interfaces and @webcontainer/api types (DirectoryNode, FileNode, SymlinkNode).

---

🔁 Steps to Reproduce

Steps to reproduce the behavior:

1. Go to modules/webcontainers/hooks/transformer.ts
2. Use transformToWebContainerFormat(template) function
3. Run TypeScript compilation (tsc)
4. See type error in directory assignment

---

✅ Expected Behavior

The function should correctly transform TemplateFolder into a valid FileSystemTree compatible with @webcontainer/api without type errors.

---

❌ Actual Behavior

TypeScript throws an error:

Type 'FileSystemTree' is not assignable to type '{ [key: string]: WebContainerFile | WebContainerDirectory; }'.
Type 'DirectoryNode | FileNode | SymlinkNode' is not assignable to type 'WebContainerFile | WebContainerDirectory'.

---

📸 Screenshots

Not applicable

---

🌱 Contributor Checklist

• I am participating via GSSoC
• I have read the contribution guidelines
• I checked for existing issues before creating this

---

💻 Environment

• Browser: Not applicable (TypeScript build issue)
• Device: Desktop
• OS: Any (Windows/Linux/macOS)

---

📝 Additional Context

The issue appears due to mixing custom WebContainerFile/WebContainerDirectory structures with official @webcontainer/api types. Alignment with FileNode and DirectoryNode is required to resolve the mismatch.

[github-actions]

👋 Thanks for opening an issue, @CodesWithSubham!

Our maintainers will review this issue shortly 🚀

---

📘 Before Contributing

Please read the contribution guide carefully before requesting assignment:

👉 https://github.com/piyushdotcomm/Editron/blob/main/CONTRIBUTING.md

---

🏷️ NSoC'26 / GSSoC'26 Requirement

Please clearly mention whether you are contributing via:

• NSoC'26
• GSSoC'26
• or as a regular contributor

Example: I am contributing under GSSoC'26

⚠️ Assignment requests without this information may be rejected automatically.

---

⏳ GSSoC Assignment Restriction

GSSoC contributors will only be allowed to take issue assignments after:

🗓️ May 15th, 12:00 AM IST

Before that date, assignment requests from GSSoC contributors will be automatically blocked.

---

🤖 Assignment System

To request assignment, comment: /assign or assign me

The smart assignment workflow validates:

• contributor eligibility
• NSoC/GSSoC participation mention
• active issue assignment limits
• repository contribution rules

---

⚠️ Important Repository Rules

• Do not start working before assignment
• Maximum 3 active assigned issues per contributor
• Contributors are encouraged to combine related fixes into 1–2 quality PRs instead of many small PRs
• PRs without assignment may be closed
• Spam or low-quality PRs may be rejected

Happy contributing 🎉

[CodesWithSubham]

/assign gssoc

[github-actions]

✅ Assigned @CodesWithSubham

🏷️ Program: gssoc26

📌 You now have 2 active assignment(s).
Please work on meaningful contributions and avoid opening many tiny PRs.

🏷️ Auto-detected difficulty: level:intermediate. A maintainer may update this.