Add Svelte repl

[Snailedlt]

I see that some languages like Vue 3, Alpine and SolidJS have playground links to run the code:

It would be nice to have the same for Svelte.
You can use the svelte repl for this purpose: https://svelte.dev/repl/

[matschik]

When you click for example on Vue3 REPL on a snippet, look at the URL.
You'll see the snippet code in the url and the REPL is supporting code in URL.
But Svelte REPL seems not.
Can you ask them if they supports this ?

[Snailedlt]

@matschik looks like it's not implemented, but there's an open issue on it: sveltejs/sites#330

Could we use another repl for this purpose though? Perhaps codesandbox.io like Alpine does?

repl link

[Snailedlt]

Not sure how you do it with Alpine, but I'm guessing you use some starting template, and populate it with code via the url. If that's the case we can probably do the same with svelte using this template: https://codesandbox.io/s/svelte

[matschik]

The Alpine playground is not a good example. The good example is Vue 3 playground.
Is Codesandbox supporting code in URL like Vue 3 playground does ?

[Snailedlt]

I see. I don't know unfortunately

[benmccann]

We should make sure the contents of the REPL stay in sync with the contents here. Using a hashed URL like suggested in sveltejs/sites#330 would make that difficult, so a better feature might be for the REPL to load the source from GitHub or something along those lines.

[Snailedlt]

Why would using a hashed URL be difficult? So long as we can programatically create the URL it shouldn't be an issue

[benmccann]

If we expose the ability to create a hashed URL then we can never change the hashing scheme because every site using it would need to be updated

[Snailedlt]

Fair point. Would definitely be neat to have a repl created and updated based on a GitHub repo

[brunnerh]

If we expose the ability to create a hashed URL then we can never change the hashing scheme because every site using it would need to be updated

That should not be much of an issue. A version number could be added so migrations are possible later. E.g.

#v1-<encoded-data>

[Snailedlt]

Svelte's preview repl for the upcoming runes feature set supports encoded URLs: https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACkVPQQrCMBD8yhI8KArVa2wF_-DNeqjpVhbTTUk2goT-3bRFPc7Mzs5MUh1ZDEpfk-KmR6XVeRjUTsl7mEB4oRXMOLjozcSUwXga5FRzLRYFjIssUMEqSCO43m-OWclaF9kIOQZi47FHlvUG0qTUsni2FRyOC1EUcMEgxA9ANq7FFqK38P3RWJL3dDnWXBb_Alzeo0jOcKyNJfOs0i9tnBvObNCQ5sjZvlhOeVPvWuoIW6XFRxxv4wd_ijFPDgEAAA==

Perhaps the current svelte.repl also does under the hood? I don't see any documentation on it though... So I wouldn't know how it works, or what encoding they use

[benmccann]

Svelte's preview repl for the upcoming runes feature set supports encoded URLs

I would not recommend relying on this domain as the site will not live on after the Svelte 5 launch

Perhaps the current svelte.repl also does under the hood?

It does not

[AliSawari]

The comment above is a scam & phishing attempt. report the user. it just randomly mentioned some users. the website also is not official and a fake clone used for phishing

[matschik]

Thanks @AliSawari, I just deleted the content and reported the user.
Crypto scammers spammed social networks and now they begin to spam Github...
Let's move on

[SikandarJODD]

When you click for example on Vue3 REPL on a snippet, look at the URL. You'll see the snippet code in the url and the REPL is supporting code in URL. But Svelte REPL seems not. Can you ask them if they supports this ?

Can we use : https://www.sveltelab.dev for this ?

[Snailedlt]

@SikandarJODD
Looks like it. You're able to share code using the hash, and choose which files you want to share.
Here's how it looks:

And here's the resulting hash declare state for the example:
https://www.sveltelab.dev/?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte#code=N4IgdA5glgLlEDsD2AnApiAXKAZlANhtiAMZIIxoUDOWoA1lAgCZYjUBua%2Bl%2BAhgCMAtAFcoADj4gANCAEicONCiwBtACwA2aZvHTxAZmkBOAKz6jARkvbrl6dfUOADPcvOH7z2%2Bcf39sxdjbxc-SwB2Fz1-T3MvdUjjaIiXOOdo3xdpBOzbSzjLDJ9k21dstMj3AtLsyssAJhNE4PdEyucrMvjSty9rDNyXXrC9LWzGrwMjMZjrEcHZ%2Bo9jdpaGqKGs-tTPHsHjNeGXCec06dK88xmbHfcWrvzdpqDPRvUrk88M6s2xg5C5sdbh0FjdrFc8qU0vdej8Vi9rG8Pi4ALoAXwxsjAAAd0DA4MoUCQ6CA8IQSWQKFQYLRiIwWGxONxeIJRBIpLJ5IplGoGp0TNIDE5rHU0vZxE54UlYoKnKY9AYJmDLMKUjF1MLlrKZVVPH4Qe4ivpenVenshdJ5YKlXlVe17BqssELdZbc9dYbbn0QZpTQjnMF4RarYrtYC7HrNhbHV5naqlZqCmFtOJ2mlky4nMGFW9gupRqNNQKXetPSKXJ0kzLs9aTPYSwnNq6nh6Hk53q8NuX3JXIx3wV8m%2BkW2ULcZpkW452y2qDadI4ZNvDHCZ7k5dF7VeYa6HjPX29oxxOnWHrIPZirPInQk3HjvGnuHPUjKGXc4TmkjQP79r1G9LueXTDs2MTRlmjQlr0Npekc35yjmT4vhB8bupeA4Xlm8G1iWBRfsBYKjuBT7bhM9TmOOWxkaiGJorI2J8CQ9B8BAaBgAAVtQ5AkmSRCgJSlA0CS9KsJg7BcDw3CsmIkgyHIChKComCqHyJ4lssqxRlhr6Snoy6PLq-xgapqpfmh%2BnzhGgI-tGozaPmgzqFOMZag2V5erpdTmlp0Ert2ZTOcWW6rm5Hqlsq27eYhJ5Tu4%2Bq9AqkUlt8I71iccWDkZsaBSYyRpl2mTWSZXrmg%2BuXAhkHiZVqMVhZq8XAr0U4hshgE-KBSqNheyUXk5k7ZWWFl9DchXTmhDyQg1bmhh2-alvh7S9oCs1iqhkpruUN6hURYzTVc5HrTE-ytLWO3tn1MXvgCY2Bp52rNaenXjSOK0rrtG2Il2s6LfEBQrXpa2Zu9mRbSdh5Iu9lhrNeIGjv%2BYZag0Vx9W%2B6XbBuF4nLBwMPMs9wvXekUqVlU6aEF2yzPhezuABOTLpkek%2BW2G16bdEYjcYcoOnZtnZAl2TndqpM6oUQ4lEONPtHlzbs3KHhjPZ8t8wFgaC2TIsU2LFMS61KUQycZU9l6cu-YBxS6zLlpc7zDlKwLrm%2BU9MP45hloIWOsuDKYdnc7%2BdsoQ7ZrPbe7YFPrngLUbEO4aL5uJZKHvy3mPOOb70WntHGux672Hx5acMK9opgvmdadJcVmnZ9pJhyuc1uK-DAqI-zxktvUUEV-db6HJts5GlV-XY%2B3F76qjsZ47eEWV6R-IqzhpufXsHZHc4dXBcdFumFbphw6YLtZU3fRkeimLsESJLMFA6AkDAqAAJ4knw2LYmAAAWMAALb4NxBC8aQ5ACTSISTARJiWZJJYQ0kORyW5IpVQmhKpGA3OEYIvp9BOHEMEcQHhNDOhOKqUo9w9CaE%2BPAwGMNCG1k9HpfUiD9y3kquuT4KD9SrzptgphApSF3FvNoIMD51r-R1E9TQdDuwEXBl7bU01IjELTlw4Cg19SRFDAHDYIj4b7SugwyhK8QpAUaOoi0BhRTzxnFTZwUsbh-BMehR2d5Ig5HcA%2BOoyUjpniWnkJUNCpFvBkRw5h-pA58MjHTGEOhRHqwsg8NYSpej4J8WvdxQ0qbJPCaecesURzrh8KPVxYTZoZOBgRF20idD%2BMFDYyJZsYY%2BEsd7MhZQ2EVJPKQxxujDrtHYS05YyQclPlSjePSvCHEm3JkBTWQE6l6z0dUs8TT%2Bz01uvCQxmpVT1QwoLcp8j9TRxUfpMEbd8r2BWZtQaocNjLkOfdNxsECK3IAhaWRxjhZ4QmbU8ufxembUOc81pnT3JlO6bUHKAJgaHNkV4P5ZCCIUIhc4Y%2BtEQD4CgAIc%2Bl80DXzviSAAwkgEQVIUBgCZBJb%2B5JiD8WpLSBgwDGTiRZBA9kskuQKTUFwx4bjoZhW0HCxuCjA67m7mIjMoZDFvD0KYe4qlC4IVbBBN4uMrp1GFQYgxAyU4KwGUTaq7o%2BUhSscsXhgq1SpJUWcnR6lIyGw2ZZY1n5%2Bk6OhnOLMRhjB2XsBKtONzw6WuGqq2sphIgev3lRb0vKlRKsSVCLRDrUIjyOTodoeSXAOLlpq58nqjURulm8WhJ1ghBoRiG7BcsTEcq9NBHlkKenepAsqI4eyjhWmXkm466itWSizdjI0qCBqaOOk3HlKDE07GXvaG8Kj01eqFa3NIjdJ2Zp9WDNJ6jRXZFwToJCgo1hRu4aBddndt3AjCd%2BFoRadAlpBWIiaNqunuARbIYBaAAAe7EqWkh-hSf%2BlKgEMlEsS%2BlbIZKcnkjyJSOQch7LDlKMJpqPzxu-KRXoJpKGQ1jU8PZeRNVRJiVdeJGHoVrJrU6lDpRV67kPKUVxukl101cSY01VZ8PuE5SRIElkFGjwPNRGiiKUB4soG%2Bi%2BV8b4oHvsQAA1PwW%2B-GiV0t-jxT9VJBJ0hpX%2BuT-AGVAegSypSbK%2B1jXOc2QdR7RpxPQxBPMdkI4zgCB5DYfw1gmwMPmyVUKBxltChWz4VahFfOzcCuF96QDifoixIlyguCEo4qS3%2BFLlPUt-aAiSGnANQOZaB5SXQlimb1TRo1YQfimq%2BU0kVAy9JxEOYCQy8rsgDJXXKqK%2B8xqBzEaqSq0805VY0jEA9OhhlCM0aGCUQ4cNUNZqOSVp7zAFuIpae4QWQvMVYv%2B%2BTH7yVfviyAYStKwEpcgUykDsC9OJM5V5rIr4w4XiXV1wJtZV0WnCIR5jkZgyuYve5qG5aniVuLYDFOsjwiY3yl8idVhYzday%2BYNzuj-v1CCxAfASABB8HwGAEg1A30KfW0pwBKnEsrb24y4DMC1BWl8kk-lHWsozVGRY5mdnR1A0iqYOW4q5STY2stZN9PniM47JvJnvmp5zZPDToRIyQXQe5zNfNMr2nmVGKz5u00FQOO2kna2zz1Duo52L2xEvpRS%2BOvzjw91nu2MV3Xbaqvle5jrjb7XIvqd7XFzzo3dP%2Bfurl2TYc6hTdK93rby0coIJq-9YGw8Didei5d-rt3zRpfTcaGb%2BXdq-eWgDyXUM2887NMdNnwN9Yo9O61Hr8yBuGf3Al0XYX5uFfZH99bQP%2Bfk9K610RSR9ktfR%2Bd1HRPusGgZhl7X1P9mlct812H6a%2Bai%2B1ZLwKMvFQIZU2y82E3I%2BfeW4VtbvPHfTfbmLzNvMsfy-L6bKvqx02vcxotw3jPuft-%2Bsj0HnPOfu-z%2BP3343bV2lAXyVcWXG-evdPFOGvCfdVAsXff1IwGvd-I-TnWnCXGGVeXdfyabU3b3IXdPFnB-QsJ-KA7PZPUPOfeAxffvZAkbX4K-DfLAxveyHPcAjXLvKfZPTmPPHvUvE-JfBZWJRdYXZzaQZBUxMyZxYWbcPMbaciOoDqeNLnBoWEAfAMIPTQSjSOY6cINoYKRceQ4WcxYIcIMIe5IPAQ7QoCMHHwAZcQcwcIF8CQ2scQXg6UG1TDIPIQwfe1K1HGIPKwy9Y1DMcsZWThTQ8MG4QRTOT0CfAQgwzcZ4IbF1LNO8Ow18FBZIJ7KJdrCwNDE9Yw-QoHGcUyKNf4YJcIUyMdAQifdzBIrg4OYEZPXXao7-NjJJIfaEaNCMXraIkGYov0EI%2BsJIk4fLK6c5d3Dg2bUNIWVAvpAyZRGrD6VRJxGogcJeQVfCMzLnZeFApQnrOXC1B2YvUHE8MnMyJDczRrbVMgxow3BPRo0AzA2-EAvAlXAgu3ZgkgjnT-OQj3ciSvfvHAlPTfO-R-J49vPNS0Z-R3eAj4xA%2BPNeL4y2Gg%2B48fHfEE6fXPOA94hA13JeH4xo1-O44ApEk6B3Pfe-dEtOC4uEq42E6vGA-EtPQk4Elg3A9gj-BfBouEmpJ8FotdBEgkq3Ik54y0BxB3UYlWCkpAu5Lkp4dff42g-kxkl-H2Mk4mTEuPWaFfbkgXWUxE%2BUsVQUwPWAw-DnA%2BfUAUJw9xMFNNGeM0lYvzS8dYg6P-TYFPXYsaQNY0s9E0p0PzS0yhdNYmHEunK1Y4mtb0Y2RJWZMzM3EWQREA9kivXnKvDaAXCE94203DWvGMuodscMz4iUjU6UgAt4k8bhMIucKse6AuS0abToHwFzEsy6G9QsoEUJcqe1aMuzFcOMr-Dkxs5o6U0UxM2Eow5Y0FO0wmLMtybsvMs-c3J09UIs1MyiNIBFHjWQagGAPgOAYkYgITDFETMTXAPgDgKASkHEBACAGLRTABN9bbNTXbKSInbTDLZ8FoR8QoTBDwEowQtwfkeoGoDwQChwIwGwwQgxPQBw6QICuWbQaC38QUKCxCjwV8hwd8jBfQcwFCyGNwdChoSIOCqYfQL8lMdcYIOCrCtClBJwZCgQ7ChwdCoWGit8nCqixCiilinQai6Qdi%2BilBcwJi1Cjixi7i2iyinQfikS5i3i8Sti0SoSrinij8zixCi0YbRS3C-CpCzwJ4SC78xcASuipS9S4IYy5SnIUyoNEWUy6yxoSIeoSIcIewOCnDQHfQRzLSy8UyoCzyuS6S%2BwUy9QKwJweyrSgysS0CjcTQcwYbdw6y3yoy%2BK9C0ylIAK6IRoUyx8V1SSwS6SuKqSpSsKji9YPKnKhK-K9CgXQ5Eqwy3CowaqsSywOqvQCy2yl8MHYUeoCzWbeqjinq6SoQvqoyyUUiUoOqxKky-y8a%2Biy0bKmqkyqaqwdKiC5azwMHdK4i2ahq1DZKzqzajiuyqalSQahi9KqawPYwRoQq3K6bCS0y8QY5K6sq0qpKqagK6YGAg68q9ypwVymvayyar6va3KyobLZKzC16w6%2BoYKw6%2B0sawG46loaGwGoQwKwURvIQrBKUlSDQoGp6ua3G3C4cBGgmiaiYNwwNJPH8hwbiiyAwAG56%2BawG9CHy%2BGw6%2BcUynBaskm1C4UHGlcf6oKuGhm7mnQw2NtR4D1Ha6YcG1m2W4WiMZKs8Ym6UUwE-SIGK7LHw4mj6C67m5KpQna%2Bm-Gx3DcKibWqqqasYYmnAgQtuSoZ5YmxcAKhPKiAwbQVyu6rME2fWhI4uDdbm1G4moOgwOIfsSy-y1DfIIhcM4mzQIW-GuCr8xBfQohZqqalQkwbQYy1cxFFbNHcgPACAV9K87HG8n9EBAnR8rTdLWBVsUbJJPDUQzJBmAfS8WDPVOs7CVi5m15RQ7WJpFuzkrsqQ0MlwgQmbeIBxN4BrCYg5IeWGM41ouYhu6Uyqbu-ZXuoe5wbWftQaQ8PMK2HtfshY1sRa1jP8YFMeNo-ZPLNoxsqJTdVdLVXlKZM3f084hxGYnVV0xmNYkeq9EIBtS1YCH5JUAoaQnLcnB5MB0FGDPIoabqEM8MLYrw2tJGFDF6Beuva9MKabUYT%2B7nUKepHumOTkmYQeQcNpQwxJK4YIxZUaFJEOVCVmM8dum1IiYJXtXQhYD%2B4FUMUChYidE41rHRW5RBp7b0Y9E1ODBDH1SnYWCB5eszLejI9hv04RlIPZfGa9XVTJIBqyUQrR6cRpQpODarehHWcnLGKRofIiZmjJUI9afR41a7YpKMJu%2Bh5exhnhs04FCDRoUwiwoAnBmBq0cDSWD5ACMZWZReUoXJS%2BopAIb6uhn%2B1uoKNhle01I1MjGR70Xgh2G6IOJs3cRIO026EpwZRRyU8nCET1f5Qe6py8a5epqp7xkAnwOdWdJuCe1GC-fJsya7ChhYlmBeWsKdPJ4EGA%2BbGiWQE8ygfOhAQu4u4gLHPiDbXHBLCu9TKutLQ7XkbDSBgZv0zdEh8I6poMvev01jE%2BpBpQ5I5S058ZPumUNpKZRxSJH-Po%2BfOuw5xuqKU1VGe%2BqsGII%2BrGGRkECda5vstI9dWij582es0NRYMIfpv5zJCmJu3uU49F-RNQsoUF4B8F6YPwd%2BxuOaA2csn1PBsZhQ6J0ZimN51NEwfkJuJcu9HjIAA

But this might be a bit overkill since it uses sveltekit, and not just svelte... so there's a lot of other files too that are also shown