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

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.

Command that lets you click to add Integrations via svelte-add (tailwind, mdsvx, sass, ...)

We should have an input where we can type an nom package name to install it

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 need an icon library, specifically we need to chose one that ideally has a lot of programming related icons.

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 said we wanted a minimal ui that can get more complex if you want (i.e. showing folders etc)

UI wishes:

• light/dark themes
• svelte orange
• could resemble REPL

If the repl is already saved the share button should share/copy the short url instead of the hash madness

If you type

import { queryParam } from "sveltekit-search-params";

We install sveltekit search params (totally random nom package)

Editor should have tabs and query param state would be very nice for sharing code examples!

Mark as unsaved when we

• write to a file
• delete a file/folder
• create a file/folder

we proabably want to be able to resize console, editor and preview.

maybe we can use Svelte-Splitpanes or similar library

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.

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 ?

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.

Typescript playground url

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)

Complete the profile functionality

• share profile
• share repl
• delete REPL (if owner profile)
• fork repl
• link to create new repl from logo

Make new File and Folder Buttons from Header work

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.

i want to format my code because i like it pretty but am lazy

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

Add the ability to see the file system and interact with it

right now its a bit cluttered when the icons are always showing. id rather have it the buttons only appear on hover

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"

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

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!

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 should start working on the mobile layout

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.

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 should some kind of basic navigation for the iframe

Make the terminal be Ctrl+c able

Also mentioned in #2

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)

features we maybe want?

• virtual list
• quitable (ctrl-c)
• typeable
• recent commands (up-arrow)

We need a Codemirror theme based on the svelte tokens

can we use pnpm and some borwser sotrage feature to cache dependencies in the browser for faster initial startups on repeat visits?

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?

The problem is there

https://github.com/svelteblitz/svelteblitz/blob/e60def70742e9afeecc1a3efbd16c4db76038268/src/lib/components/FileTree.svelte#LL18

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.

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

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.

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

• Search file by route
• Svelte-add thing
• Duplicates of buttons command (switch theme, save, fork, share)
• Create route

We can provide autocomplete for npm packages by querying the npm registry api

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.

• github?
• local folders?
• compressed in url?