(cache)🌠 Buttons • Playground • Svelte

App.svelte

SelectionBtn.svelte

arrowUp.svelte

import SelectionBtn from './SelectionBtn.svelte';

let name = 'world';

</script>

<svelte:head>

</svelte:head>

<svelte:window onkeydown={handleKeydown} />

</SelectionBtn>

</SelectionBtn>

</SelectionBtn>

</div>

▶ The browser build of Tailwind CSS should not be used in production. To use Tailwind CSS in production, use the Tailwind CLI, Vite plugin, or PostCSS plugin: https://tailwindcss.com/docs/installation

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import SelectionBtn from './SelectionBtn.svelte';

var root_1 = $.with_script($.from_html(`<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>`, 1));

var root = $.from_html(`<div class="col-span-2 row-span-2 flex flex-col justify-center gap-5"><!> <!> <!></div>`);

export default function App($$anchor) {

let name = 'world';

var div = root();

$.head(($$anchor) => {

var fragment = root_1();

$.next(2);

$.append($$anchor, fragment);

});

$.event('keydown', $.window, handleKeydown);

var node = $.child(div);

SelectionBtn(node, {

text: 'aestral',

href: '#about_us',

kbdKey: 'a'

});

var node_1 = $.sibling(node, 2);

SelectionBtn(node_1, {

text: 'cosmical',

href: '#services',

kbdKey: 's',

children: ($$anchor, $$slotProps) => {

$.next();

var text = $.text('xx');

$.append($$anchor, text);

$$slots: { default: true }

});

var node_2 = $.sibling(node_1, 2);

SelectionBtn(node_2, {

text: 'sideral',

href: '#contacts',

kbdKey: 'c',

children: ($$anchor, $$slotProps) => {

$.next();

var text_1 = $.text('xx');

$.append($$anchor, text_1);

$$slots: { default: true }

});

$.reset(div);

$.append($$anchor, div);

}

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

		
			
				
					 Root {
 css: null
js: []
start: 92
end: 636
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (6)
  Text {...}
 type: "Text"
start: 90
end: 92
raw: "\n\n"
data: "\n\n"
 }
 SvelteHead {...}
 type: "SvelteHead"
start: 92
end: 273
name: "svelte:head"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 105
end: 107
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 107
end: 182
name: "script"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 115
end: 172
name: "src"
value: [...] (1)
  Text {...}
 start: 120
end: 171
type: "Text"
raw: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"
data: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 start: 173
end: 173
type: "Text"
data: ""
raw: ""
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 182
end: 184
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 184
end: 258
name: "script"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 192
end: 248
name: "src"
value: [...] (1)
  Text {...}
 start: 197
end: 247
type: "Text"
raw: "https://unpkg.com/lucide@latest/dist/umd/lucide.js"
data: "https://unpkg.com/lucide@latest/dist/umd/lucide.js"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 start: 249
end: 249
type: "Text"
data: ""
raw: ""
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 258
end: 259
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 273
end: 275
raw: "\n\n"
data: "\n\n"
 }
 SvelteWindow {...}
 type: "SvelteWindow"
start: 275
end: 318
name: "svelte:window"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 290
end: 315
name: "onkeydown"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 300
end: 315
expression: Identifier {...}
 type: "Identifier"
start: 301
end: 314
loc:  {...}
 start:  {...}
 line: 11
column: 26
 }
end:  {...}
 line: 11
column: 39
 }
 }
name: "handleKeydown"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 318
end: 319
raw: "\n"
data: "\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 319
end: 636
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 324
end: 388
name: "class"
value: [...] (1)
  Text {...}
 start: 331
end: 387
type: "Text"
raw: "col-span-2 row-span-2 flex flex-col justify-center gap-5"
data: "col-span-2 row-span-2 flex flex-col justify-center gap-5"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (7)
  Text {...}
 type: "Text"
start: 389
end: 391
raw: "\n\t"
data: "\n\t"
 }
 Component {...}
 type: "Component"
start: 391
end: 465
name: "SelectionBtn"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 405
end: 419
name: "text"
value: [...] (1)
  Text {...}
 start: 411
end: 418
type: "Text"
raw: "aestral"
data: "aestral"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 420
end: 436
name: "href"
value: [...] (1)
  Text {...}
 start: 426
end: 435
type: "Text"
raw: "#about_us"
data: "#about_us"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 437
end: 447
name: "kbdKey"
value: [...] (1)
  Text {...}
 start: 445
end: 446
type: "Text"
raw: "a"
data: "a"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 448
end: 450
raw: "\n\t"
data: "\n\t"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 465
end: 467
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 467
end: 547
name: "SelectionBtn"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 481
end: 496
name: "text"
value: [...] (1)
  Text {...}
 start: 487
end: 495
type: "Text"
raw: "cosmical"
data: "cosmical"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 497
end: 513
name: "href"
value: [...] (1)
  Text {...}
 start: 503
end: 512
type: "Text"
raw: "#services"
data: "#services"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 514
end: 524
name: "kbdKey"
value: [...] (1)
  Text {...}
 start: 522
end: 523
type: "Text"
raw: "s"
data: "s"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 525
end: 532
raw: "xx"
data: "xx"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 547
end: 550
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 550
end: 629
name: "SelectionBtn"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 564
end: 578
name: "text"
value: [...] (1)
  Text {...}
 start: 570
end: 577
type: "Text"
raw: "sideral"
data: "sideral"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 579
end: 595
name: "href"
value: [...] (1)
  Text {...}
 start: 585
end: 594
type: "Text"
raw: "#contacts"
data: "#contacts"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 596
end: 606
name: "kbdKey"
value: [...] (1)
  Text {...}
 start: 604
end: 605
type: "Text"
raw: "c"
data: "c"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 607
end: 614
raw: "xx"
data: "xx"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 629
end: 630
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 90
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 81
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 4
column: 0
 }
 }
body: [...] (2)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 59
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 50
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 17
end: 29
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 20
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 17
end: 29
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 20
 }
 }
name: "SelectionBtn"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 35
end: 58
loc:  {...}
 start:  {...}
 line: 2
column: 26
 }
end:  {...}
 line: 2
column: 49
 }
 }
value: "./SelectionBtn.svelte"
raw: "'./SelectionBtn.svelte'"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 61
end: 80
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 20
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 65
end: 79
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 19
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 65
end: 69
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 9
 }
 }
name: "name"
 }
init: Literal {...}
 type: "Literal"
start: 72
end: 79
loc:  {...}
 start:  {...}
 line: 3
column: 12
 }
end:  {...}
 line: 3
column: 19
 }
 }
value: "world"
raw: "'world'"
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern