search

matschik / component-party.dev

🎉 Web component JS frameworks overview by their syntax and features
https://component-party.dev
MIT License
2.37k stars 211 forks source link

Add Svelte repl #182

Open Snailedlt opened 10 months ago

Snailedlt commented 10 months ago

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

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

matschik commented 10 months ago

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 commented 10 months ago

@matschik looks like it's not implemented, but there's an open issue on it: https://github.com/sveltejs/sites/issues/330

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

Snailedlt commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

I see. I don't know unfortunately

benmccann commented 10 months ago

We should make sure the contents of the REPL stay in sync with the contents here. Using a hashed URL like suggested in https://github.com/sveltejs/sites/issues/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 commented 10 months ago

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

benmccann commented 10 months ago

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 commented 10 months ago

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

brunnerh commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 1 month ago

@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: image

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