sveltelab / sveltelab Goto Github PK
View Code? Open in Web Editor NEWsupercharged REPL for Svelte
Home Page: https://sveltelab.dev
License: MIT License
supercharged REPL for Svelte
Home Page: https://sveltelab.dev
License: MIT License
Much like the svelte extension for vscode would be cool to have a button to create a route. The use input the route and we create every folder needed + the +page.ts, +page.svelte etc that the user selects.
Make new File and Folder Buttons from Header work
In vscode you can set things up to show the folder of the file which is useful for all the +page.svelte/ts/js files that one opens in sveltekit...we can take this a step further giving we now a project is probably sveltekit and add the actual route you are looking for
features we maybe want?
If an npm scripts change the inner file system we should re sync the inner file system and the store.
In theory we can do this every time an npm script exit but it's not the most ideal solution. The best thing would be being able to detect a change in the file system from an npm script.
I'll try to look into this
We could make so that the console is writable...if we want to go light on ourself we could also avoid this and propose a set of commands + an input to install packages.
Also mentioned in #2
One thing I like to do in vscode is Ctrl+e to navigate to a specific .svelte file for a route. We can create a "command" component (something like ray cast) where we can run various commands...I'll open a series of issues with ideas about commands and link back to this issue here. Ideas that comes to mind is
Mark as unsaved when we
we said we wanted a minimal ui that can get more complex if you want (i.e. showing folders etc)
UI wishes:
We should some kind of basic navigation for the iframe
I think we should focus on getting the experience for small to mid sized projects. If you plan to build bigger you probably want to switch to other tools. To make the switch possible we probably want a feature to Export and download a zip at least or even to a github repo?
We need a Codemirror theme based on the svelte tokens
Add the ability to see the file system and interact with it
Right now if you wrote a massive project and you try to login to save it will loose your progress. We might use the snapshot capabilities to restore the project while navigating the github login flow.
We can provide autocomplete for npm packages by querying the npm registry api
We probably want a 'real' code editor like CodeMirror or Monaco, so we can have syntax highlighting and maybe even autocomplete.
Part one of this task would probably research and evaluation of the different options.
can we use pnpm and some borwser sotrage feature to cache dependencies in the browser for faster initial startups on repeat visits?
Should the Config Toggle hide the root (i.e. show tree from src
) or hide pre-determined config files?
Issue with the second option is if people add config files, we didn't anticipate the toggle is almost useless, that's why I prefer the first option.
If the repl is already saved the share button should share/copy the short url instead of the hash madness
We should start working on the mobile layout
Some processes request user input...for example if you want to create a svelte app from completely blank project right now this would be impossible because if there's a process running we don't do anything in the terminal.
This might be very very tricky tho because for some processes we don't want the user to randomly type in or move the cursor around. I have to try because maybe it's all handled by the underlying process (for example maybe create-svelte-app intercept the arrow and instead of writing the ansi code to move the cursor to the stream of the terminal writes another command to delete the old screen and paint a new one but I bave to check this).
In some way or another we have to figure this out before the end of the hackathon because some packages are literally un-usable without terminal functionality (actually most of them since they ask you to write the location of a file for example)
We need an icon library, specifically we need to chose one that ideally has a lot of programming related icons.
I think this is kind of a Must since the REPL has it, and also in SvelteKit you do run into times where you rename +page.js
to +page.server.js
etc.
If you type
import { queryParam } from "sveltekit-search-params";
We install sveltekit search params (totally random nom package)
Command that lets you click to add Integrations via svelte-add (tailwind, mdsvx, sass, ...)
What we can try is to get the node modules files from the container once and stick them in an edge function with a super high cache.
When we start the project before npm I we can mount those deps in the file system so that the installation should be way faster.
We need to benchmark this tho.
we want new sveltekit projects to have the best startup experience possible.
current approach also has frequent issues with npm i or npm run dev failing.
I think we want to have a sveltekit minimal repo zipped up with dependencies as an asset to make init more snappy.
From #52 the theme doesn't actually get's preserved between refreshes. I'd say we should fix this...can you take care of this @SarcevicAntonio ?
the code of repls is what is shared. I want the current file as soon as possible and at best without javascript (progressive enhancement)
we store the files outside the container as a single source of truth that gets filled by the server initially and is used after web contaienr boot.
if the user never changed a config, there is no need to store them. the config toggle enables us to skip saving the root and only storing the src in 80 % of cases.
Not super needed for the hackathon but a nice to have feature. Press up to go through the list of recent commands.
Also mentioned in #2
Complete the profile functionality
One thing the repl does better is showing the errors and warnings of the compiler clearly and plainly in the code editor. Like in repl would be good enough but if code mirror lets us inline errors would be even better!
typing npm create svelte@latest
retults in the prompt saying npm create svelte@atest
and erroring out afterwards with ERR!: Could not fetch dependencies 'create-sveltelatest': Not found error Command failed with exit code 1
we proabably want to be able to resize console, editor and preview.
maybe we can use Svelte-Splitpanes or similar library
The problem is there
I'm signaling that I want to add but I'm not signaling where I want to add. Gonna fix this tomorrow, opening an issue for trackability.
right now its a bit cluttered when the icons are always showing. id rather have it the buttons only appear on hover
From the share button we can have a dropdown menu to select which method you want to use (hash or url).
@SarcevicAntonio i'm a bit thorned on moving the download as zip there too because i feel it will be kinda unrelated to sharing and might not be the best place for discoveravility
I just learned that the hash doesn't count towards the maximum character length of 2048 for the url. This means that if we share our code as a lz-string inside the hash we can share way longer code
For example this url from the typescript playground has 2400ish characters and it works just fine.
Now...I still think we should have a db and a way shorter url to share but given that this is easily exploitable (a simple DDoS could fill up our db and skyrocket our expenses) I was thinking we could allow to actually save just logged in users and if you want to share without logging in you can copy the hash url (as a button).
Sharing as hash is still a simple enough thing to do that I still think we should do this (I might give it a shot right now actually)
Editor should have tabs and query param state would be very nice for sharing code examples!
Make the terminal be Ctrl+c able
Also mentioned in #2
i want to format my code because i like it pretty but am lazy
We can add custom snippets to the codemirror editor, it should work like this
https://discuss.codemirror.net/t/adding-custom-snippets/3535/2
That way we can give users some useful snippet for svelte. I'd say we stick to the svelte extension for fscode "protocol"
We should have an input where we can type an nom package name to install it
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.