How to use the Svelte REPL • Playground • Svelte

App.svelte

Extra.svelte

import Extra from './Extra.svelte';

</script>

<h2>

Look! In the gray bar above...

</h2>

New to the Svelte REPL? In the gray bar above on the left side is some text 'How to use the Svelte REPL'. You can edit this. Select the 'How to use the Svelte REPL' text and try renaming it to 'My first REPL app'.

<h2>

REPL settings and options

</h2>

Over on the right hand side of the gray bar is where you can save the app and any changes you make to it. The REPL uses GitHub user login to save your app changes. If you are not logged in then clicking the 'Login to save' link will redirect you to the GitHub login. If you have a GitHub account then simply login using your GitHub account or create a new GitHub account first.

<h2>

</h2>

Once you are logged in then you can fork and save any REPL app to your own list of REPL apps (what you are looking at right now is a REPL app). To find other apps within the REPL you can Google '<strong>example https://svelte.dev/repl</strong>'.

<h2>

Save and load your saved REPL apps

</h2>

Clicking on the save button (which looks like a floppy disk) to the left of your GitHub username in the gray bar will save your app progress. Clicking on your GitHub username in the gray bar will provide you with a link to a list of 'Your saved apps'.

<h2>

Some advanced tips

</h2>

<p>

In the URL of this app you might notice it ends with ?version=3.22.3 (or some other number). This means the app is compiled and running using Svelte version 3.22.3. If you are trying to test your code against a specific Svelte version then change the version number in the URL and press Enter to reload the app using a different version of the Svelte compliler. The version number in the URL defaults to the current version of Svelte.

</p>

Now fork this app and get to playing!

bundling https://unpkg.com/clsx@2.1.1/dist/clsx.mjs

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

import Extra from './Extra.svelte';

var root = $.template(`<h2>Look! In the gray bar above...</h2> New to the Svelte REPL? In the gray bar above on the left side is some text 'How to use the Svelte REPL'. You can edit this. Select the 'How to use the Svelte REPL' text and try renaming it to 'My first REPL app'. <h2>REPL settings and options</h2> Over on the right hand side of the gray bar is where you can save the app and any changes you make to it. The REPL uses GitHub user login to save your app changes. If you are not logged in then clicking the 'Login to save' link will redirect you to the GitHub login. If you have a GitHub account then simply login using your GitHub account or create a new GitHub account first. <h2>Login to the REPL for user specific features</h2> Once you are logged in then you can fork and save any REPL app to your own list of REPL apps (what you are looking at right now is a REPL app). To find other apps within the REPL you can Google '<strong>example https://svelte.dev/repl</strong>'. <!> <h2>Save and load your saved REPL apps</h2> Clicking on the save button (which looks like a floppy disk) to the left of your GitHub username in the gray bar will save your app progress. Clicking on your GitHub username in the gray bar will provide you with a link to a list of 'Your saved apps'. <br><br> <h2>Some advanced tips</h2> <p>In the URL of this app you might notice it ends with ?version=3.22.3 (or some other number). This means the app is compiled and running using Svelte version 3.22.3. If you are trying to test your code against a specific Svelte version then change the version number in the URL and press Enter to reload the app using a different version of the Svelte compliler. The version number in the URL defaults to the current version of Svelte.</p> Now fork this app and get to playing!`, 1);

export default function App($$anchor) {

var fragment = root();

var node = $.sibling($.first_child(fragment), 8);

Extra(node, {});

$.next(10);

$.append($$anchor, fragment);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Add a <style> tag to see the CSS output */

		
			
				
					 Root {
 css: null
js: []
start: 55
end: 1865
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (20)
  Text {...}
 type: "Text"
start: 54
end: 55
raw: "\n"
data: "\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 55
end: 97
name: "h2"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 59
end: 92
raw: "Look! In the gray bar above..."
data: "Look! In the gray bar above..."
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 97
end: 313
raw: " New to the Svelte REPL? In the gray bar above on the left side is some text 'How to use the Svelte REPL'. You can edit this. Select the 'How to use the Svelte REPL' text and try renaming it to 'My first REPL app'. "
data: " New to the Svelte REPL? In the gray bar above on the left side is some text 'How to use the Svelte REPL'. You can edit this. Select the 'How to use the Svelte REPL' text and try renaming it to 'My first REPL app'. "
 }
 RegularElement {...}
 type: "RegularElement"
start: 313
end: 350
name: "h2"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 317
end: 345
raw: "REPL settings and options"
data: "REPL settings and options"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 350
end: 729
raw: " Over on the right hand side of the gray bar is where you can save the app and any changes you make to it. The REPL uses GitHub user login to save your app changes. If you are not logged in then clicking the 'Login to save' link will redirect you to the GitHub login. If you have a GitHub account then simply login using your GitHub account or create a new GitHub account first. "
data: " Over on the right hand side of the gray bar is where you can save the app and any changes you make to it. The REPL uses GitHub user login to save your app changes. If you are not logged in then clicking the 'Login to save' link will redirect you to the GitHub login. If you have a GitHub account then simply login using your GitHub account or create a new GitHub account first. "
 }
 RegularElement {...}
 type: "RegularElement"
start: 729
end: 785
name: "h2"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 733
end: 780
raw: "Login to the REPL for user specific features"
data: "Login to the REPL for user specific features"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 785
end: 981
raw: " Once you are logged in then you can fork and save any REPL app to your own list of REPL apps (what you are looking at right now is a REPL app). To find other apps within the REPL you can Google '"
data: " Once you are logged in then you can fork and save any REPL app to your own list of REPL apps (what you are looking at right now is a REPL app). To find other apps within the REPL you can Google '"
 }
 RegularElement {...}
 type: "RegularElement"
start: 981
end: 1029
name: "strong"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 989
end: 1020
raw: "example https://svelte.dev/repl"
data: "example https://svelte.dev/repl"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1029
end: 1033
raw: "'. "
data: "'. "
 }
 Component {...}
 type: "Component"
start: 1033
end: 1041
name: "Extra"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 1041
end: 1042
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1042
end: 1088
name: "h2"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1046
end: 1083
raw: "Save and load your saved REPL apps"
data: "Save and load your saved REPL apps"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1088
end: 1341
raw: " Clicking on the save button (which looks like a floppy disk) to the left of your GitHub username in the gray bar will save your app progress. Clicking on your GitHub username in the gray bar will provide you with a link to a list of 'Your saved apps'. "
data: " Clicking on the save button (which looks like a floppy disk) to the left of your GitHub username in the gray bar will save your app progress. Clicking on your GitHub username in the gray bar will provide you with a link to a list of 'Your saved apps'. "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1341
end: 1346
name: "br"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 RegularElement {...}
 type: "RegularElement"
start: 1346
end: 1351
name: "br"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 1351
end: 1352
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1352
end: 1382
name: "h2"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1356
end: 1377
raw: "Some advanced tips"
data: "Some advanced tips"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1382
end: 1383
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1383
end: 1827
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1386
end: 1823
raw: "In the URL of this app you might notice it ends with ?version=3.22.3 (or some other number). This means the app is compiled and running using Svelte version 3.22.3. If you are trying to test your code against a specific Svelte version then change the version number in the URL and press Enter to reload the app using a different version of the Svelte compliler. The version number in the URL defaults to the current version of Svelte."
data: "In the URL of this app you might notice it ends with ?version=3.22.3 (or some other number). This means the app is compiled and running using Svelte version 3.22.3. If you are trying to test your code against a specific Svelte version then change the version number in the URL and press Enter to reload the app using a different version of the Svelte compliler. The version number in the URL defaults to the current version of Svelte."
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1827
end: 1865
raw: " Now fork this app and get to playing!"
data: " Now fork this app and get to playing!"
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 54
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 45
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 3
column: 0
 }
 }
body: [...] (1)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 9
end: 44
loc:  {...}
 start:  {...}
 line: 2
column: 0
 }
end:  {...}
 line: 2
column: 35
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 16
end: 21
loc:  {...}
 start:  {...}
 line: 2
column: 7
 }
end:  {...}
 line: 2
column: 12
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 16
end: 21
loc:  {...}
 start:  {...}
 line: 2
column: 7
 }
end:  {...}
 line: 2
column: 12
 }
 }
name: "Extra"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 27
end: 43
loc:  {...}
 start:  {...}
 line: 2
column: 18
 }
end:  {...}
 line: 2
column: 34
 }
 }
value: "./Extra.svelte"
raw: "'./Extra.svelte'"
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern