live-codes / live-codes/livecodes

Multi-file support RFC

Open
#886 3 comments 5 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.5k
Forks
267
Avg merge
9h 40m
Merged PRs (30d)
16

Description

LiveCodes does not currently support a file system. The (compiled) code from the 3 editors (markup, style & script) are combined into a [single web page](https://livecodes.io/docs/features/result) that can be displayed in the UI, [exported](https://livecodes.io/docs/features/export), [deployed](https://livecodes.io/docs/features/deploy), [broadcasted](https://livecodes.io/docs/features/broadcast), etc.
In this sense, LiveCodes is similiar to CodePen, JsBin and JS Fiddle, as opposed to others like Codesandbox and Stackblitz which offer a file system and a whole virtual nodejs environment to support it.

This is an early proposal to simulate multi-file support. This is mainly inspired by the official Svelte and Vue playgrounds and an attempt to implement that for the official Ripple playground which is powered by LiveCodes.

Overall plan:
- 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 is planned using importmaps + data URLs, which are already being heavily used in LiveCodes.
- ~~The 3 basic editors (markup, style & script) will stay the same and will serve as entrypoints. One or more editor can be hidden using the [`hideTitle`](https://livecodes.io/docs/configuration/configuration-object#markup) property.~~ 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.
- 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 proposal)
- The UI will allow 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 should scroll horizontally.
- A new `files` property will be added to the [configuration object](https://livecodes.io/docs/configuration/configuration-object) to persist state and to allow it to be set from the SDK. It will have this type `Array<{ filename: string; content: string; }>`.
- ~~A new `allowAddingFiles` property enables/disables adding files from the UI~~ A new `lockFiles` property disables adding files from the UI. It will be set to `false` by default.
- ~~The ability to add new files will be supported in embedded playgrounds first, then we can look into adding it to the UI of the standalone playground app.~~ Adding files in the UI are supported in standalone and embedded playgrounds.
- 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](https://livecodes.io/docs/configuration/configuration-object).
- There is no plan to implement a file tree viewer.

Notes:
- In addition to handling compilation, other features that handle files need to be updated (e.g. [import](https://livecodes.io/docs/features/import), [export](https://livecodes.io/docs/features/export) and [deploy](https://livecodes.io/docs/features/deploy))

Comments and suggestions are welcome.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.