Multi-file support RFC

Đang mở
  • Có gì không ổn?
#886 3 bình luận 5 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@hatemhosny đang làm issue này rồi.

Từ ngày 31/1/2026.

  • #934 của @hatemhosny — đang mở

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
25/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, typescript
Lĩnh vực
tooling, web-dev

Hướng nghiên cứu

Không có tệp triển khai hoặc bài kiểm thử nào được nêu tên. Hãy bắt đầu bằng cách đọc đối tượng cấu hình và tài liệu về import, export và deploy được liên kết trong đề xuất, sau đó lần theo các entry point hiện có của trình chỉnh sửa và quá trình biên dịch. Để hoàn tất sẽ cần triển khai đồng bộ cấu hình tệp, hành vi biên dịch, UI và các tính năng xử lý tệp bị ảnh hưởng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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 that can be displayed in the UI, exported, deployed, broadcasted, 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 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 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.
  • 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, export and deploy)

Comments and suggestions are welcome.

Ngôn ngữ chính
TypeScript
Star
1.5k
Fork
267
Merge trung bình
7 giờ 47 phút
Pull request đã merge (30 ngày)
14

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của live-codes/livecodes

Tất cả issue của live-codes/livecodes

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.