Open
Conversation
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Size Change: +37 kB (+3.61%) Total Size: 1.06 MB
ℹ️ View Unchanged
|
Deploying livecodes with
|
| Latest commit: |
0868399
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://de1dc491.livecodes.pages.dev |
| Branch Preview URL: | https://multi-file-support.livecodes.pages.dev |
Contributor
|
Hi Dr. @hatemhosny I have a couple of thoughts/questions
Great job on this one it looks like it took a lot of effort |
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
filesproperty, themarkup,styleandscriptproperties are ignored.components/MyComponent.ripple)mainFileproperty and defaults toindex.html)mainFile) are not allowed (maybe we can later implement imports for the supported template engines (e.g. pug, mustache, etc)import logo from './assets/logo.png') then used as URL.publicfolder can be used from the root of the project (like in Vite).filesproperty is added to the configuration object to persist state and to allow it to be set from the SDK. It has this typeArray<{ filename: string; content: string; language?: Language; hidden?: boolean; }>.lockFilesproperty disables adding files from the UI. It is set tofalseby default.fileLanguagesproperty 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" })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.@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)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