Comments (1)
I think the easiest way to follow what's happening is to start with Example.svelte and work your way back. ReplWidget.svelte is mostly processing data from various sources into the shape <Repl>
expects and can process either a gist or an example, which can make the embed component a bit confusing to start with.
If 'hello-world' is passed as the example prop, the ReplWidget would just fetch https://svelte.dev/examples/hello-world.json:
{
"title":"Hello world",
"files":[
{
"name":"App.svelte",
"source":"<script>\n\tlet name = 'world';\n</script>\n\n<h1>Hello {name}!</h1>"
}
]
}
then transform the files array into components with {name, type, source}
keys and update <Repl>
's component store programmatically:
fetch(`examples/${example}.json`).then(async response => {
if (response.ok) {
const data = await response.json();
repl.set({
components: process_example(data.files)
});
}
});
repl.set()
is one of the functions exported by <Repl>
. Which you would access in your app by binding to the <Repl>
component instance, like the site does in ReplWidget.svelte:
<Repl bind:this={repl}/>
You shouldn't need to do anything with the workers except copy them from the imported svelte-repl module to a static/public directory like the svelte/site does:
"copy-workers": "rm -rf static/workers && cp -r node_modules/@sveltejs/svelte-repl/workers static"
Then the workersUrl
prop passed to <Repl>
would just be 'workers', and the Bundler/Compiler/iframe handlers will be able to manage communication with the workers automatically.
If you reuse ReplWidget.svelte then you mostly just need to worry about navigating between different examples/gists and updating the <Repl>
's component store.
If you want to add preprocessors and such, there's a good example here: mdsvex-playground
from sites.
Related Issues (20)
- REPL user menu is inaccessible HOT 3
- REPL breaks when deleting attributes HOT 2
- Todo app layout broken in animate tutorial
- Improve the component-binding example HOT 2
- Double clicking a filename other than `App.svelte` then clicking the editing area erases all the component
- Add emmet to the Repl HOT 1
- Svelte pages with REPLs start draining significant resources on Firefox when left open for a while
- Svelte REPL component name crash
- Allow loading a local folder when working on the repl
- Blog light mode style has red subtext
- Copy button in code blocks scrolls with overflowing content
- Svelte docs: ts-toggle button doesn't work HOT 2
- REPL: Add `HTML Output` tab
- HN: add https://news.ycombinator.com/best
- Unify Svelte and SvelteKit Websites HOT 1
- REPL broken / stuck on "loading editor"
- Store Svelte version in REPL and add it to `/apps` links
- REPL: Rename of file without changing name clears the file contents
- REPL: "noop" is not exported by "https://unpkg.com/[email protected]/internal/index.js" HOT 2
- It Is Time To Redesign Svelte and SvelteKit Websites HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sites.