Monorepo for the sites in the Svelte ecosystem, and the packages they use.
sveltejs / sites Goto Github PK
View Code? Open in Web Editor NEWMonorepo for the sites in the Svelte ecosystem
Home Page: https://svelte.dev
License: MIT License
Monorepo for the sites in the Svelte ecosystem
Home Page: https://svelte.dev
License: MIT License
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
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 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.
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
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".
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.
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.
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!
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;
}
}
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.
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
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.
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?
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
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:
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.
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
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
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,
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.
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.
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
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.
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
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 IDEsIntegrations
: The list of the integrations repoPreprocessing
: 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.
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.)
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
.
When a form accidentally submits, the REPL breaks without a warning.
A new build will trigger a refresh of the iframe.
The iframe does not respond to new builds.
https://svelte.dev/repl/6791e014cab94ccb837eea2fd41222a2?version=3.29.4
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.
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?
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.
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.
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.
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.
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
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 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.
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.
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❤️
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.
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! ....
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]
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.
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
It would be easy if there was an option to commit directly to GitHub using REPL.
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>}
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.
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.
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 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/
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. 💯
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.