sveltejs / svelte-repl Goto Github PK
View Code? Open in Web Editor NEWThe <Repl> component used on the Svelte website
License: Other
The <Repl> component used on the Svelte website
License: Other
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.
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 ?
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)
Submit on <form><input></form>
crashes the REPL.
Reproduce
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
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.
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
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?
While we could embed JSON data in JS code or load it remotely, it would be nice to create .json files in the REPL.
Using bind:clientWidth
doesn't update when resizing the Results within the repl.
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
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.
Steps to reproduce
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 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).
Has to be done in a way that doesn't cause premature concern about duplication etc. Should include min/zip sizes
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 gethttps://unpkg.com/[package-name]/package.json
and inspect it before fetching frombundle.run
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.
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 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?
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?
How can I install and use this on my own site?
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
Easy CSS fix: .info { max-height: 40vh; overflow: scroll; }
I wanted to PR this but, see #44 .
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? )
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
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.
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
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.
The file tabs (App.svelte, etc...) in the REPL should be reorderable via drag n' drop.
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".
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.
The 'compiler options' pane in JS output tab needs overflow-y: auto
(at least in my 1366x768 screen)
It would be really helpful if the REPL console could support console.dir(), console.group()/groupEnd().
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?
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.
allow-scripts
are added twice here:
svelte-repl/src/Output/Viewer.svelte
Line 146 in 77bc75b
first by default and then again if relaxed
is truthy
would it be possible to have a logging panel for debugging purposes ?
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.
Could be really useful for documenting distributed components, etc. Might pose some subtle UI challenges
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);
};
}
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.