While we could embed JSON data in JS code or load it remotely, it would be nice to create .json files in the REPL.

In the home page for Svelte documentation website, I noticed that whenever you open a new tab in a REPL example the view scrolls so that it shows the element with the ID that was added in the bottom of the view.

This happens because of this line in ComponentSelector.svelte:

document.getElementById(component.name).scrollIntoView(false);

I just don't understand why we have to scrollIntoView (and using IDs) if the component was added right to the side of the + button which was clicked? The user will have the new tab right there so I don't see the point in performing that scroll. This causes weird behavior both when you have only one REPL component loaded in the page (if it is not near the top of the page) and when you have multiple components which add elements with the same ID to the DOM and the scroll happens considering the wrong element.

Maybe there is some user case I'm missing in which it would be worth to have that scroll? Please let me know. Otherwise, I'm willing to work on a PR to remove that behavior or even do it differently.

The 'compiler options' pane in JS output tab needs overflow-y: auto (at least in my 1366x768 screen)

Hi,

I recently published a package svelte-speedometer, which seem to work fine when I download the repl code locally and with svelte storybook but not in hosted Svelte Repl.

EDIT: The component is bootstrapped with official svelte component template - https://github.com/sveltejs/component-template

Repl Link where issue can be seen - https://svelte.dev/repl/cf869c9ab9f9431195222ba6cea10b59?version=3.20.1

I cloned the svelte-repl locally where things seem to be working fine. Link - https://github.com/palerdot/svelte-repl-issue-repro

The actual cloned zip file can be seen here in the repo - https://github.com/palerdot/svelte-repl-issue-repro/blob/master/svelte-app.zip

Source code - https://github.com/palerdot/svelte-speedometer

Storybook link where things seem to work - https://palerdot.in/svelte-speedometer

Any help on this is appreciated, as it seems there is already this codesandbox issue because of which codesandbox cannot be used to host svelte code. With Svelte REPL not working, it is difficult to share svelte snippets for this package.

Please let me know if any other information is needed from my end.

I think it would make the REPL significantly more encouraging to use if html tags which are not self-closing were automatically closed when finish writing an opening tag.

I would be happy to implement this but I'm struggling to get the REPL running locally.

I seem to get into bugs in my own code that crashes result with error messages like Cannot access uninitialized variable., and runtime errors like Error loading namey-mcnameface from bundle.run.

Debugging my own errors is hard, as error message gives no indication which variable that is uninitialized. Additionally, result-pane does not seem to recover from runtime errors like "bundle.run unavailable".

Would be great to be able to "force reload" of result-pane, so that I can set a breakpoint and step through the code. This is somewhat doable today, by saving and then reloading the browser, but would be nice to have a button "reload result".

The status update messages sent from the worker don't correctly target particular instances of the REPL. At least, that's what I'm assuming is happening. This is visible on the homepage https://svelte.dev/ where we have four REPL widgets. Editing one causes the rebundling messages to appear on others - even though they're definitely not getting rebundled, because they don't lose their state.

During typing, even quickly, many error messages appear, packages are reloaded, etc — all which is very distracting. This issue can be ameliorated with a debouncer.

https://github.com/sveltejs/svelte-repl/blob/master/src/Repl.svelte#L126

function debounce(fn, timeout) {
    let timeout_id;
    return (...args) => {
        clearTimeout(timeout_id);
        timeout_id = setTimeout(() => fn(...args), timeout);
    };
}

To suppose newer language features in the compiled code (like ?? and ?.) we need to update the version of Rollup used for the in-browser bundling. This might be as easy as just upgrading the version we're using, but there might have been some relevant breaking changes from v1 -> v2 in terms of how we're programmatically calling it in the browser.

it's really annoying when you're in the middle of typing a for loop...

for (let i = 0; i < things.length; <cursor>)

...and the code starts running before you have a chance to write i += 1. Similarly if you're trying to write this...

while (true) {
  // some code...
  if (someConditionIsMet()) break;
}

...you will get as far as while (true) {, it will add the closing }, and you're screwed.

Maybe not the easiest thing to fix, and certainly not in a general way, but I wonder if there's something that can be done to handle common cases. Like, idk, not running the code if the cursor is currently inside a loop?

I've not seen this in another webpage, but on the online REPL I sometimes see this little planet when I drag a div.

It sometimes occurs here => https://svelte.dev/repl/d3e73fcd45ff4d439420122d5a41c5b4?version=3.23.2

I'm not sure how to make it happen every time, but it seems to be something to do with draggables.

Any idea what it might be ?

The file tabs (App.svelte, etc...) in the REPL should be reorderable via drag n' drop.

I set up an example with a lot of unused CSS selectors. This spawned a lot of errors in the info div, covering up the editor completely so I couldn't correct the errors.

Can anyone help me getting this Repl component to work? I have tried to install Sapper and then install this Repl component into that, but that makes the server crash as soon as I import it. I have tried it with just Svelte but then it says that I need plugins to import files that are not JavaScript. (codemirror.css)

What I really want is to make this REPL the base in a new client side component editor in a PHP platform we use. So we can use it to build Svelte components that is compiled into pure JS that is inserted into our PHP pages.

allow-scripts are added twice here:

first by default and then again if relaxed is truthy

Being able to import from ./foo and have this resolve to foo.js in the REPL might be nice, and more in line with how this stuff is going to work when actually bundling.

It would be really useful if I could take a REPL I've created and instead of downloading it, if I could just fork it, or copy it directly to my github account.

Has to be done in a way that doesn't cause premature concern about duplication etc. Should include min/zip sizes

I wanted to give #43 a go, but I can't figure out how to setup the dev environment.

I cloned both this and the svelte repo. Installed dependencies in the site folder, ran the needed commands there, and npm linked the repl repo into the site repo. After that I get compile errors when building the website though, so I'm probably missing something.

✗ client
../../svelte-repl/src/SplitPane.svelte (21:1)
'transition_in' is not exported by ../../svelte-repl/node_modules/svelte/internal.mjs
19:     const { top, bottom, left, right } = refs.container.getBoundingClientRect();
20: 
21:     const extents = type === 'vertical' ? [top, bottom] : [left, right];
      ^
22: 
23:     const px = yootils.clamp(
✗ server
../../svelte-repl/src/SplitPane.svelte (3:1)
'add_attribute' is not exported by ../../svelte-repl/node_modules/svelte/internal.mjs
1: <script>
2:   import * as yootils from 'yootils';
3:   import { createEventDispatcher } from 'svelte';
     ^
4: 
5:   const dispatch = createEventDispatcher();

Any pointers?

It would add a lot of ease to the repl if it had bracket autoclosing. Luckily, CodeMirror has an option for that: https://codemirror.net/demo/closebrackets.html

would it be possible to have a logging panel for debugging purposes ?

To reproduce, visit a repl gist, then edit the gist, then reload.

Notice the HTTP response header:

cf-cache-status: HIT

It already happened a few times to me, that I by accident closed a tab with unsaved "dabblings" I had in the repl. It would be nice if it would ask if it should close without saving.

The current version of the REPL resolves svelte/foo to unpkg.com/svelte/foo.mjs. This will break if a new version of Svelte is released in its current form, because svelte/foo ought to resolve to svelte/foo/index.mjs.

The new version also includes svelte/foo/package.json which should theoretically make unpkg.com/svelte/foo?module resolve directly to unpkg.com/svelte/foo/index.mjs via unpkg. But this doesn't work in the existing versions of Svelte, because unpkg.com/foo?module will just give us the CJS version.

The most obvious solution is ugly: inspect the version number, and if it's less than or equal to 3.4.4, go with the old logic unpkg.com/svelte/foo.mjs, and if it's greater, go with unpkg.com/svelte/foo?module.

Also potentially an issue: https://unpkg.com/[email protected]/index.mjs?module right now contains an ESM module (as expected, since unpkg respects package.json), but the import is from ./internal?module. I don't know whether this is going to be a problem. This would happen with all of the requests and responses if we went forward with the changes outlined here.

https://svelte.dev/repl/c42e039670d14b3a807aa6576dd3c86b?version=3.21.0

It seems like something about for await iterating an async generator that has a while or for loop in it triggers the infinite loop detection. Granted, it is an infinite loop, just not in the same sense this detection is meant to block.

In the downloads, making the scripts in package.json use npx:

"scripts": {
    "build": "npx rollup -c",
    "autobuild": "npx rollup -c -w",

And including all the relevant rollup plugins in package.json would make using the zip files easier. This way npm i would install all the required packages locally and let people get started faster.

About auth

Hi. I was logged to https://svelte.dev/repl & change some code, save it. But I can't find list of my saved codes.

Question

Can I save code for open in future sessions?

What I do wrong?

Press F5 & get failed to fetch

• 🐧 Is it possible to do REPL (online tool), like codepen & etc ?..

Trying to import from a package whose name begins with "@" results in an error:

Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

For example:

<script>
	import {MDCCheckbox} from '@material/checkbox';
</script>

Will throw that error.

Steps to reproduce

1. Open repl https://svelte.dev/repl/b3be31da940b4d50b6216283fd04cacc?version=3.16.7
2. Resize Console pane so that log contents are visible.
3. In the result view check the provided checkbox.

Expected results
When value under checkbox (bound value) changed, the new contents of the array displayed in the Console Pane due to $: console.log call

Actual results
The array contents are logged, however the contents are wrong (when value is true, value logged is false)

I published svelte-image-encoder to npm: https://www.npmjs.com/package/svelte-image-encoder

When I try to update the v3 REPL to use the npm package instead of the file in the Gist, it gives me a runtime error for a bind:this={element} directive inside onMount(), element being undefined when it runs. However the demo builds and runs well with a local Sapper/Rollup setup when using the npm installed package.

I think it might have to do with index.js or index.mjs being built differently.

For a quick reproduction replace import ImgEncoder from './ImgEncoder.svelte'; with import ImgEncoder from 'svelte-image-encoder'; in App.js in this demo.

Suggested so far on Discord:

Conduitry: My initial thought is to try to build the pkg.svelte resolution rules into the REPL. I don't know how much trouble that would be
rich_harris: maybe not terrible. would just mean we'd have to get https://unpkg.com/[package-name]/package.json and inspect it before fetching from bundle.run

The bug

If you dump a bunch of nonexistent vars in the repl, the info pane might grow as high as your editor, meaning you can't edit your code anymore because the info alerts are in the way.

Steps to reproduce

Copy paste the following text into App.svelte in the repl:

{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}
{name2}
{name1}

This occurs "in real life" when you are refactoring things and moving things from file to file.

To fix

Easy CSS fix: .info { max-height: 40vh; overflow: scroll; }

I wanted to PR this but, see #44 .

When using the "download" feature of the REPL on svelte.dev (https://svelte.dev/repl/), it downloads a file called svelte-app.zip. At the root of the ZIP, there is a file called README.md. This file contains a sequence of bytes that is invalid in UTF8 :

$ hexdump -C README.md 
00000000  2a 50 73 73 74 20 14 a0  6c 6f 6f 6b 69 6e 67 20  |*Psst ..looking |
00000010  66 6f 72 20 61 20 73 68  61 72 65 61 62 6c 65 20  |for a shareable |

(just after Psst , there is a 0x14 0xa0 byte sequence which is invalid)

How can I install and use this on my own site?

I noticed that it isn't possible to configure the initialization options of the generated SvelteComponent class. I think most of them aren't really needed to be configurable, but the intro one seems handy.

Do you think it would be a good idea to add something like this?

I want to download the source directly.

I see that there's a ".json" version of each URL with all the files. Is it OK to use this (i.e. will it stay like this? )

Using bind:clientWidth doesn't update when resizing the Results within the repl.

This is a feature request

I have a habit of closing tabs or windows by mistake and losing work, and others probably do too. It would be awesome if when the user closes the tab or leaves the page, that an alert is shown warning that the repl has not been saved. Perhaps a message like

Warning: this repl has not been saved and leaving will lose the most recent changes since last saving

If the user closes the message, immediately presses save, then leaves the page without making any other changes. Then this message won't be shown.

Happy to write the code and make a PR if this feature sounds like a good idea?

1. Create a new tab.
2. Try to name it "Append".
3. Note how after typing "App", the input field loses focus and the new tab is no longer deleteable nor renameable.

I assume this is due to the name state updating with each input event. Possible solutions would include only updating the name on blur or not identifying the "main" tab by its name (but instead, for example, by its index).

When I use bind:clientWidth in the REPL I get this error:

message: "Cannot read property 'defaultView' of null"
stack: TypeError: Cannot read property 'defaultView' of null
at HTMLObjectElement.object.onload (eval at handle_message (about:srcdoc:13:8), <anonymous>:81:42)

You can see the error in action in a simplified REPL here: https://svelte.dev/repl/e8001ba9ceb6438d88353da1db7bb19d?version=3.17.1

This warning appears on the Svelte GL demo app: https://svelte.dev/repl/ce2efb3fd43240fb9773c93367d25d9f?version=3.9.1

I think it should just be a case of not passing options.name and letting the default logic do its thing

It would be nice to be able to select a few lines, press Command-/, to comment those lines using //.

e.g.

// this is a comment

I'm trying to get the REPL working as a component using Rollup. I'm able to use webpack by moving everything into a component/REPL folder inside a Svelte app PR #114, but when I do the same thing using Rollup, I get an error stating [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) src\components\REPL\codemirror.css (3:0).

Looking at codemirror.js, it seems like codemirror.css is being imported there, but Rollup isn't allowing the import of css. I've tried using rollup-plugin-css-only in my rollup.config.js, but then I get another error stating [!] Error: UMD and IIFE output formats are not supported for code-splitting builds.

Then I changed the output.format to esm and I get this error. [!] Error: When building multiple chunks, the "output.dir" option must be used, not "output.file". To inline dynamic imports, set the "inlineDynamicImports" option..

Three errors, and I'm out.

I figure there's something I'm missing in my config file that will allow me to use everything in the svelte-repl/src file similar to svelte/site/src/components/Repl, but I need some help figuring out exactly what that is.

Hello.

On Svelte web editor with the examples here:
https://svelte.dev/examples#nested-components

left panel tabs must use "cursor: pointer;" style and shows hand to suggest user that is clickable - the right panel with the code result work just like that.

It would be really helpful if the REPL console could support console.dir(), console.group()/groupEnd().

Could be really useful for documenting distributed components, etc. Might pose some subtle UI challenges

There seems to be one common undo/redo buffer shared between all tabs of the REPL. To make matters worse, switching between tabs is something that the editor apparently sees as an update to the text in it - so if you switch from tab A to tab B and then press ctrl-z/cmd-z/whatever, you will end up with the contents of tab A in tab B.

Submit on <form><input></form> crashes the REPL.

Reproduce

1. go to https://svelte.dev/repl?version=3.0.0-beta.28&gist=d574ef3129cc3c3cb5855560bbdfe06f
2. focus input field
3. press enter

What happens: Result-pane navigates to non-working page, does not recover.
What was expected: Result-pane intact, as form has no action.
Environment tested: Safari 12, Firefox 66.0.3

some library uses process.env.NODE_ENV to execute dev-only code.

Hi there!

When trying to import @smui/select I get the following error:

Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

Example (using the demo code from https://www.npmjs.com/package/@smui/select):

<script>
  import Select, {Option} from '@smui/select';
 
  let fruits = ['Apple', 'Orange', 'Banana', 'Mango'];
  let fruitChoice = '';
</script> 
 
<Select bind:value={fruitChoice} label="Fruit">
  <Option value=""></Option>
  {#each fruits as fruit}
    <Option value={fruit} selected={fruitChoice === fruit}>{fruit}</Option>
  {/each}
</Select>

This seems related with #46

// cc @hperrin