Multi-file support

[hatemhosny]

This PR introduces multi-file projects in LiveCodes. This closes #886

This is still work in progress. Performance improvements, tests, fixes and docs still need to be added.
However, I believe it is ready enough to get feedback.

Demos:
JS: https://multi-file-support.livecodes.pages.dev/?template=multifile-javascript
TS: https://multi-file-support.livecodes.pages.dev/?template=multifile-typescript
React: https://multi-file-support.livecodes.pages.dev/?template=multifile-react
Vue: https://multi-file-support.livecodes.pages.dev/?template=multifile-vue
Preact: https://multi-file-support.livecodes.pages.dev/?template=multifile-preact
Svelte: https://multi-file-support.livecodes.pages.dev/?template=multifile-svelte
Solid: https://multi-file-support.livecodes.pages.dev/?template=multifile-solid
Lit: https://multi-file-support.livecodes.pages.dev/?template=multifile-lit
Jest: https://multi-file-support.livecodes.pages.dev/?template=multifile-jest
import from GitHub: https://multi-file-support.livecodes.pages.dev/?x=https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte-ts

Note: Although this is a huge change that required large changes in how LiveCodes works, however, it should largely be backward-compatible. LiveCodes still has first-class support for the 3-editor (single file) projects. Old projects should continue to work normally. The only major change is that importing code (e.g. from GitHub) now uses multi-file projects.

As detailed in the issue, these are the implementation details:

• There is no plan to implement a full virtual file system or introduce a new build system (e.g. rollup/rolldown)
• The multi-file support uses importmaps + data URLs, which are already being heavily used in LiveCodes.
• When the config object has a files property, the markup, style and script properties are ignored.
• Additional files can be added. The file extension determines file type and used compiler.
• File names can have slashes to simulate directory structure (e.g. components/MyComponent.ripple)
• Additional files have to be imported (or added as scripts or stylesheets) from the main entry file (specified using mainFile property and defaults to index.html)
• Script files (e.g. js, ts, jsx, tsx, vue, svelte, ripple, etc) are compiled to js and made available using importmaps.
• Style files (e.g. css, scss, style, etc) are compiled to css and inlined in the css code that imports them.
• Additional markup files (apart from the mainFile) are not allowed (maybe we can later implement imports for the supported template engines (e.g. pug, mustache, etc)
• There is no plan for multi-page apps (multiple HTML files that can be linked)
• Importing JSON makes it available as a JS object.
• Static files can be imported (e.g. import logo from './assets/logo.png') then used as URL.
• Binary files (e.g. images, video, audio, fonts) can be added. Files are converted to base64 data URLs. The UI supports adding them when a file extension of a binary file is used. Also they can be added by drag and drop.
• Static files in public folder can be used from the root of the project (like in Vite).
• Non-JS imports are not allowed (e.g. PHP, C++, Python, etc.). Maybe we can later figure out how to do that for each language (not in the scope of this PR)
• The UI allows adding files by a button on the side of the editor tabs. Double-click on the file name allows editing it. A delete button on the tab allows deleting the file. If the tabs are wider than the available space they scroll horizontally. Tabs can be re-ordered using drag and drop.
• Local files from the device's file system can be dragged and dropped in the editor to add the files and folders while preserving structure.
• A new files property is added to the configuration object to persist state and to allow it to be set from the SDK. It has this type Array<{ filename: string; content: string; language?: Language; hidden?: boolean; }>.
• A new lockFiles property disables adding files from the UI. It is set to false by default.
• A new fileLanguages property allows mapping file extensions to languages to override the default compiler (e.g. to use solid compiler instead of react for jsx use: { jsx: "solid" })
• There is no plan to support config files like package.json, tsconfig.json, .editorconfig, etc. Many of these settings can already be achieved by LiveCodes configuration object. However, json files can be added to a project in case the code needs to read from them.
• importing tailwindcss (@import "tailwindcss";) in a style file (css, scss, etc) automatically enables TailwindCSS. CSS modules can be enabled by naming style files with .module. (e.g. styles.module.css)
• There is no plan to implement a file tree viewer.
• Now importing (e.g. from GitHub) uses multi-file projects by default.
• Multi-file projects can be exported. The folder structure is maintained. Binary files are also exported.
• New multi-file templates allow quick start for different projects (e.g. blank, JS, TS, React, Vue, Svelte, Solid, Jest, etc)
• Significant improvements have been added in monaco editor including auto-complete across multiple files, go to definition, better Vue language support, etc.

This aims to have full compatibility with vite (without having to add any config files). In fact, if you drag and drop files from any vite project, they should (hopefully) work!

In addition, this feature allows interesting use-cases like having projects that use multiple frameworks simultaneously.

Please give it a try and report any issues. I would appreciate feedback.

cc: @logaretm @zyf722 @gigamaster @sharno @BassemHalim @Seth0x41 @fahdfady

[sonarqubecloud]

Quality Gate failed

Failed conditions
7 Security Hotspots
10.6% Duplication on New Code (required ≤ 3%)
D Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE