sveltejs / sites Goto Github PK

This doesn't give me as much information as I'd like:

Ideally the notification would be expandable, so that I could see the (interactive!) stack trace

The site could look better or it could display some message for IE is not supported.

See these issues:
• sveltejs/svelte#2499
• sveltejs/svelte#2550

I'm going to apply the fix described in sveltejs/svelte#2550 (comment) while waiting to fix it here and publish it.

PROBLEM:
I use the REPL frequently and perhaps my sveltejs/svelte-repl#1 complaint is that the indentation gets out of whack after a while and the code becomes unreadable. I then have to copy the code to a local editor, reformat/indent it and then paste it back.

SOLUTION:
Add a button that reformats/reindents the code to prettify it.

IDEAS:
Perhaps, the code in this post could be used as a starting point:

https://stackoverflow.com/questions/26360414/javascript-how-to-correct-indentation-in-html-string

1. The shared image for the REPL is too big. This can be annoying on chat channels like Discord.
2. The actual title of the REPL should be used when sharing instead of "Cybernetically enhanced web apps".

The contrast ration of the editor's background and most code is <4.5, which is too little.

The WebAIM guidelines recommend an AA (minimum) contrast ratio of 4.5:1 for all text.

https://developers.google.com/web/fundamentals/accessibility/accessible-styles#color_and_contrast

Hi, seems that tables are not responsive for mobile clients, I can't scroll it on my phone with the latest chrome. svelte.dev/docs

I see two ways to solve it:

1. Wrap tables with <div style="overflow-x: scroll">...</div>
2. Chop table rows down.

Now that official TypeScript support for Svelte has been announced, It would be very convenient to also add it to the Repl.

The Repl has become a very useful tool, not only to showcase applications and share code snippets, but also to report issues.

I thought you'd fixed this, but I had an issue today when my tab hung whilst I was writing for(let i=0; i< 12)

Lost 10 minutes of work so not too bad, but annoying obviously.

When I turn on the immutable flag globally in the "compiler options" box in REPL it is not working (although it does when I build locally with rollup)

I've copied the example project from step 16-g of the tutorial to the REPL
https://svelte.dev/repl/38ee1513be5e498397649956ea1a9e8a?version=3.24.0
and turned on the immutable flag globally instead of per-file setting as suggested in the tutorial.
It works as if this flag was not set.

Interestingly though, the js code in the right "JS output" sidebar is changing the same way as when I set the immutable option
through the <svelte:options immutable={true}/> tag inside the component.

Chrome 83, Windows 7 x64

I could not find a way of using a web worker. Would be nice to have a loader or a work around where you could prefix the name with public to create a static asset:

public/worker.js

Hi! Thanks for the project!

The REPL uses Handlebars syntax highlighting, which is workable, but I'm guessing was chosen before the switch to single brackets; double brackets gets highlighted, but single brackets does not.

It would be a nice improvement if we could somehow get the handlebars mode to accept single brackets as well, or otherwise make a Svelte-specific CodeMirror mode. I noticed this in the first place while reviewing a change to add Svelte highlighting to Glitch, where we also use CodeMirror and would probably be a consumer of a Svelte mode.

Technically this issue probably belongs in the svelte-repl repo, but I'll forget about it if it's there

https://mobile.twitter.com/MohsenKhakbiz/status/1136676705110827008

I wanted to use and extend the REPL with the purpose of integrating it in a backoffice application, allowing content contributors (familiar with HTML and a little JS) to edit and create content.

I did some reading in svelte.dev website code : embed.svelte
and ReplWidget.svelte

to see how it's implemented, but I still struggle to get the "big picture" between the widget, the embed component, the REPL component itself and the webworkers.

If I achieve something, I'll be glad to contribute back some documentation.

It looks like the overall useful sveltejs/svelte-repl#14 / sveltejs/svelte-repl#17 is getting in the way in a few situations. Try for example to type out the following examples character by character:

<button on:click={() => (counter++)}>Increment</button>

<div class:too-much={counter > 10}>{counter}</div>

When you get to the greater than signs, you will end up with the following result:

<button on:click={() =>
  │
</button>}

<div class:too-much={counter >
  │
</div>}

It would be sweet if there was a way to format the code using Prettier or something similar by pressing Alt+Shift+F.
As of now, my code in the REPL can get pretty gnarly.

I started working on something using prettier/standalone, but it's far from production ready.
Maybe people who are smarter than me want to take a crack at it.
https://github.com/thebells1111/svelte-prettier-browser-plugin-demo

And here's the demo deployed:
It's a little slow to load, maybe because prettier/standalone is so large. Probably needs to be changed to a webworker or something.
https://5f9c73ded4709a39fed50575--frosty-meninsky-8c72bd.netlify.app/

I imported a module that injects its stylesheets into <head>, which persists across reloads, causing more style tags to be injected on each reload. I couldn't find any reliable way to hack around this. For example, trying to remove existing stylesheets before importing the module.

A few people have asked to see more in-depth examples for things like CSS, and SSR.

I don't know if this would add too much noise to the docs but they might be great topics for a cookbook. Ths has been briefly discussed in the past but I couldn't find an issue for it.

Some examples of things that could be covered:

• CSS: "Something that demonstrates cssvars, the global modifier and component scopes together would be excellent for new comers." (Quote from a fine individual on Discord)
• SSR - "include an example of SSR with hydration on the client. 🙏 (without sapper - via express if possible)" (Quote from yet another fine individual on discord).
• Preprocess: We see a lot of questions about preprocessing, less, scss, etc. We could provide an example configuration and explanation to enable users add their own (or even write their own) preprocessors.
• Testing: This is an obvious one. Testing framework agnostic explanations.
• Routing: Again without sapper. We've been asked about Routing without Sapper a number of time recently. A good example implementation with a popular routing library or a 'blessed' Svelte one would be cool.

Anyone have any thought on this?

And if this is a good idea, what else should be covered?

Edit: Another request from discord.

"A couple more cookbook ideas would be RxJS and XState integration and usage. For RxJS simple API usage in Svelte is best, saw this svelte-observable repo that seems to wrap RxJS in Promises, that is a little strange seeing that RxJS is a better alternative to Promises. For XState using stores seems to be the way to go. Best would be to have a store per XState Machine and the Machine can swap in and out alternate Statecharts. Statecharts are just serializable objects that can be stored and fetched from any local or remote DB."

Edit: Another.

Had a few suggestions for a static blog deployed to netlify, with support for markdown (maybe mdx too). This might be better on the Sapper docs, and might require a custom Sapper template but is definitely a great idea.

Issue

When a form accidentally submits, the REPL breaks without a warning.

Expected behaviour

A new build will trigger a refresh of the iframe.

Actual result

The iframe does not respond to new builds.

Repro link

https://svelte.dev/repl/6791e014cab94ccb837eea2fd41222a2?version=3.29.4

Suspected origin of the bug

https://github.com/sveltejs/svelte-repl/blob/master/src/Output/Viewer.svelte#L77-L80

In the iframe load event, when a navigation to another URL can be detected, the iframe could be rebuilt.

Repl has some problem handling drag in safari. It works well in chrome.

Here is the repl

Drag the red box to the right box and drop. In chrome, it works as expected, but in safari, it does not. It seems something is wrong in safari.

BTW: Svelte REPL is the best repl I ever used❤️. Thanks!

Is your feature request related to a problem? Please describe.
unpkg loads a ton of requests. this can cause issues due to 429 too many requests

example: https://svelte.dev/repl/7f9c4f7a0da0407cacd6c353a121b442?version=3.21.0

discord record of confusion: https://discordapp.com/channels/457912077277855764/457912077277855766/704383850922639460

Describe the solution you'd like
try using pika cdn - it compiles entire packages to a single file. probably faster.

Describe alternatives you've considered
do nothing

How important is this feature to you?
nice to have. hopefully as easy to implement as prefixing every package with "https://cdn.pika.dev"

@FredKSchott 's comments here https://twitter.com/FredKSchott/status/1254861844180692993

Is your feature request related to a problem? Please describe.
Sometimes it's hard to find stuff

Describe the solution you'd like
A search bar: https://twitter.com/LucasHugdahl/status/1193747128486510592

Probably better to have a single universal search bar that shows results from docs, examples and tutorials (and blog posts?), appropriately labeled.

Have given no thought to how such a thing would be implemented.

As discussed elsewhere, it might be nice if svelte.dev/repl URIs included custom compiler options (e.g. ?generate=ssr) - otherwise sharing samples that rely on such options is a little cumbersome.

It would be easy if there was an option to commit directly to GitHub using REPL.

The input/output toggle is hidden until you scroll making it difficult to use. Please move the toggle to the top. Perhaps by changing the Svelte logo to not include the word "svelte".

I totally hate it when I am part of “the hype”, but @sveltejs renders all frameworks 
obsolete and signals the beginning of a new era. 
Thank you so much @Rich_Harris.

@papas_source

Svelte is the first framework that I've used since picking up React that genuinely blew 
me away.  In this example, writing an app in Svelte was a lot easier than writing an 
app in React.  YMMV.

@ThePaulMcBride

So the day has come when I have actually fallen for a JS "framework" 😅

I honestly never got really into Vue despite how many people loved it. 
React just... Not for me.
Svelte and Sapper though? 😍 OMG❤️

@twmbx

Fuck I tried @sveltejs and I liked it

React Advocate & Speaker
@ken_wheeler

Just went through a period of crucial React optimizations, still having mixed 
performance. @sveltejs 3.0 appears and I wish the dev community would just 
shift over night.  This is mind-bogglingly nice to work with.

@etthugo

I've been notoriously grumpy about Javascript and my inability to be productive 
with it.  I picked up @sveltejs when v3 dropped a few days ago, and I can't stop.  
It's so good!  .... 

@bketelsen

Did most people here have React experience prior to working with Svelte? 
I tried hard with React but Svelte made sense to me instantly

[discord comment]

It doesn't seem like sourceErrorLoc or runtimeErrorLoc ever change, which means errorLoc is always null, which in turn means

$: {
  if (marker) marker.clear();
    if (errorLoc) { ...

in Codemirror.svelte never executes.

Is errorLoc and all the items associated needed/desired? If not, we could clean up the codebase by removing all that unused code?

In Repl.svelte, I see:

let sourceErrorLoc;
let runtimeErrorLoc;

<ModuleEditor
  bind:this={input}
  errorLoc={sourceErrorLoc || runtimeErrorLoc}
/>

<Output
  {svelteUrl}
  {workersUrl}
  {status}
  {embedded}
  {relaxed}
  {injectedJS}
  {injectedCSS}
/>

In Output/index.svelte:

export let sourceErrorLoc = null;

<CodeMirror
  bind:this={js_editor}
  mode="js"
  errorLoc={sourceErrorLoc}
  readonly
/>

In Codemirror.svelte:

export let errorLoc = null;
...

$: {
  if (marker) marker.clear();

  if (errorLoc) { //this will always be null?
    const line = errorLoc.line - 1;
    const ch = errorLoc.column;

    marker = editor.markText(
      { line, ch },
      { line, ch: ch + 1 },
      {
        className: 'error-loc',
      }
    );

    error_line = line;
  } else {
    error_line = null;
  }
}

let previous_error_line;
$: if (editor) {
  if (previous_error_line != null) {
    editor.removeLineClass(previous_error_line, 'wrap', 'error-line');
  }

  if (error_line && error_line !== previous_error_line) {
    editor.addLineClass(error_line, 'wrap', 'error-line');
    previous_error_line = error_line;
  }
}

Right now if I have some code sample on the Svelte REPL, I can send people some code samples:

https://svelte.dev/repl/64635232b5784bfa8997192ced12acd4?version=3.18.1

but if I forgot and a few days later come back and edited some code to experiment and saved it and didn't save a good version at the end, or just experimented with it and saved some bad code and then fork another version, now the version I sent to other people won't work any more.

Can it act somewhat like jsfiddle, so that a version of sample code, some URL like:

https://svelte.dev/repl/64635232b5784bfa8997192ced12acd4/12?version=3.18.1

(URL won't work, just a sample) So that the 12 is the minor version? So I can send to other people version 01 or 03, and I can keep on editing the code into version 4, 5, 6, 7 and it won't affect the version I sent to people?

Otherwise, I can in a few days, forgot that I sent to other people and edit that version. It'd fine if I fork another version and never touch that original version, but sometimes which URL is which might be forgotten and the original version is used and edited.

When doing the later steps of the tutorial, e.g. https://svelte.dev/tutorial/each-block-bindings, I find that I'm missing a way to inspect the current state of components.

I don't know if that would be possible, and a good fit for the REPL?

Tangential: it seems Svelte doesn't have an equivalent of the React and Vue DevTools extensions either.

PS: Svelte v3 is great, excited to use it. 💯

It would be very helpful if when you finished typing an opening logic block (like {#if ... }) the corresponding closing block (like {/if} was automatically put in the next line.

We need to add attributes to prevent browsers from translating code snippets when the rest of the page is translated, per this screenshot:

(Obviously we also need to internationalise the site but this is a useful measure in the meantime)

It would be useful to me if we had an option in the REPL to not load the default CSS.

The default CSS directly has styles that can interfere with a code demo.

For reference, this is what is in the global.css:
https://gist.github.com/Wolfr/847848d88ddfbf4d74f4dfa7818e01b0

Any opinions?

https://twitter.com/JeffWScott/status/1196083596773220352

looks like maybe we need height: 100% rather than height: calc(100% - 40px)? Also, we should add touch support to SplitPane.svelte

I think most people use VSCode as their primary editor.
Would it be beneficial to the community to use Monaco as the REPL editor, since it's the backbone of VSCode?
I've started working on it at https://github.com/thebells1111/monaco-svelte-repl if anyone else is interested in helping to polish it up and perhaps make it production ready for use in the official svelte-repl.

Describe the bug
Typing some umlauts such as äöü in the REPL's App.svelte and downloading it will mess up the umlauts to gibberish

To Reproduce
https://svelte.dev/repl/cefce44e52ee42a79123e6c23d108b54?version=3
Download, build and start to see the text

Expected behavior
öäü can be used and don't need to be fixed afterwards via encoding conversions

This looks correct:

This is what it really looks like when downloaded:

The idea of integrating a (probably simplified) version of svelte-devtools to the site repl was recently brought up (sveltejs/svelte-devtools#16). Is this something you would be interested in? It might be useful in show new users "what's going on".

Is your feature request related to a problem? Please describe.
Yes, being a noob I forked same stuff over and over trying to figure out how it works and my saved list quickly grew to same stuff that is no longer needed.

Describe the solution you'd like
Would like a delete button on each saved REPL so it doesn't pollute your server and keeps my list clean and clear.

Describe alternatives you've considered
Abandoning ship, formatting computer and starting all over.

How important is this feature to you?
Very, since I use REPL feature a lot for practice and learning and would like to keep it in orderly fashion.

Additional context
n/a

If the Svelte compiler produces syntactically incorrect output, the error that the REPL currently displays in "Unexpected token (Note that you need plugins to import files that are not JavaScript)", which is a bit misleading. I think we could detect when this happens and display a more helpful error, something along the lines that the compiler has produced invalid output, and to please open an issue with a minimal reproduction.

The REPL has complete control over the bundling process, and knows exactly which Rollup plugins are in use, so I think we should be able to treat all such errors arising from .svelte files as being situations to display a new error message,

Can the 'allow-same-origin' be available in the https://svelte.dev/repl? I'm not sure where the 'relaxed' boolean ever gets set to true to include the 'allow-same-origin'.
https://github.com/sveltejs/svelte-repl/blob/84c3c8dcdca48f64dedd8a1af8b99a0dc1ab15a9/src/Output/Viewer.svelte#L239

The reason I ask is because without 'allow-same-origin' in this line, there is no way to perform basic indexedDb and localStorage calls within the REPL (see https://svelte.dev/repl/569c0a7b1bcb416d939c9de58f57a307?version=3.22.2 as an example).

I tested this code locally and by simply removing the 'relaxed' statement and including 'allow-same-origin':

sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals allow-same-origin"

After this change I was able to interact with indexedDb and localStorage from within the REPL. This would be helpful so developers can test browser storage Svelte examples in the REPL.

• cheers

Is your feature request related to a problem? Please describe.
More repos are now part of the Svelte org, like svelte-preprocess (cc @kaisermann ) or language-tools. Some of these repos - like the two mentioned - have extensive documentation which is not easily discoverable if you don't know what to search for. This makes it hard for beginners to get started when e.g. wanting to use preprocessors.

Describe the solution you'd like
Add a new section "Docs" on the official Svelte site which contains the documentation of all official repos where it makes sense. A proposal:

• IDEs: the docs of language-tools to know how to setup advanced configs when using the VSCode extension; and pointers to Svelte extensions in other IDEs
• Integrations: The list of the integrations repo
• Preprocessing: The docs of svelte-preprocess
• Build: Docs on rollup-plugin-svelte and svelte-loader

It would be great to have some specific "wrapper"/introductionary docs for the site and other than that just copy over the docs of the existing repos through a script, if possible. Docs can be tidied up in the process.

How important is this feature to you?
Important, as I think this will boost the onboarding experience and overall discoverability.

splitted this out from sveltejs/svelte#2641

I would like to discuss an addition to examples-sidebar which would IMO eliminate the need to scroll endlessly downwards which is the current state. This is maybe a bit more future-proof too, if more examples are coming.
Not coded yet, just as a visual idea.

In creating a small app that does a lot of computation, it was nearly impossible to edit my code, because the REPL would try to run my code automatically after each edit. There should be a way to toggle this behavior.

Describe the bug
Svelte Site performance is very bad. Scrolling home page on Safari freezes rendering for 5 (!) seconds at times on a modern Mac.

To Reproduce

• Go to https://svelte.dev/ using Safari on macOS (other browsers somewhat better, but still bad).

Expected behavior
Silky smooth performance always above 60 fps.

Severity
I think this is a problem. The site is the first what people see when they try to learn about Svelte. This level of performance is immediately noticeable even for non-engineer eyes.

Additional context
Half of the appeal of Svelte is better performance. The site should demonstrate that level of performance.

It can be hard to scroll using mouse because of the extra large drag area between the code and the output:

This is in Firefox Nightly.

A killer feature for the REPL would be the ability to download the entire app as a single HTML file that embeds all CSS and JS code in the HTML. This would be a download (and not hosting.)

Is your feature request related to a problem? Please describe.
I'd wish to show my Svelte apps to friends or other people, maybe via a URL like svelte.dev/apps/ba3f-6a424c662206

Describe the solution you'd like
You could have a "Publish" button that generates a public URL for your REPL listing page (or it could be public by default with a hash in the url? 🤷‍♂ )

Describe alternatives you've considered
An alternative would be to git my solutions, bundle them myself and create a profile page... but the REPL is so convenient for small fiddles :3

How important is this feature to you?
Not that important. If you'd provide me some guidance, I'd love to work on this myself (as this also seems like a good "get your toes wet" issue?)

Additional context
I'm deeply in love with Svelte <3

I'd love to have some keyboard shortcuts :

Cmd+[ = go to next left tab
Cmd+] = go to next right tab
Cmd+/ = Comment in / out

Happy to try a PR if anyone thinks its a good idea?

Is your feature request related to a problem? Please describe.
Yes, it's related to Web Content Accessibility, the visual theme of your website documentation.

Describe the solution you'd like
Do you plan or would consider including Visual Accessibility options in the future?
I have ideas for an Accessibility component for Svelte in addition to general discussions about themes sveltejs/svelte#1550

Describe alternatives you've considered
I've started work on a dark mode theme that I am happy to share with you.

How important is this feature to you?
I cannot reasonably accesses your website for a prolonged period of time without visual adaptation, this means I have limited access to the resources contained therein, an adjustment to the theme restores access.

Additional context
It's recognised in today's day and age that content and service providers take reasonable steps to provide equal access. But it's more than that, the Svelte website is the Ambassador of Svelte and a well thought out visual accessibility solution is just another super way to say good things about the ecosystem. Here is the Web Content Accessibility Guidelines (WCAG) 2.1.

Is your feature request related to a problem? Please describe.
Dark Mode is a supplemental mode that can be used to display mostly dark surfaces on the UI. The design reduces the light emitted by device screens while maintaining the minimum color contrast ratios required for readability.
Additionally, it conserves battery power.

Description

The bundler doesn't pass any of the selected compile options when checking for errors or warnings.

This causes spurious messages when custom elements are used, such as in this very simple repl:
https://svelte.dev/repl/85f4c30c8f8440e58a96eccfdf8f64b1?version=3.16.5

You'll notice the code is generated correctly, but the REPL still complains due to the additional compile step here.

Not sure why we're running compilation twice anyway... seems that the compiler service worker should pass back the results so that we can display them.

** Priority **
Low, but it will drive users crazy trying to figure out what they did wrong.
High, seems to prevent child components from rendering:
https://svelte.dev/repl/c0ba4dfa91144dae91c36380d56f8948?version=3.16.5