il Pomodoro (Svelte Version) - PART 2 - List of tasks • Playground • Svelte

Skip to main content

App.svelte

TaskList.svelte

<script>

let title = "il Pomodoro";

import TaskList from './TaskList.svelte';

</script>

<main>

<h1>{title}</h1>

<TaskList />

</main>

<style>

main {

text-align: center;

padding: 1em;

max-width: 240px;

margin: 0 auto;

}

h1 {

color: #ff3e00;

text-transform: uppercase;

font-size: 4em;

font-weight: 100;

}

@media (min-width: 640px) {

main {

max-width: none;

}

}

</style>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import TaskList from './TaskList.svelte';

var root = $.template(`<main class="svelte-1tky8bj"><h1 class="svelte-1tky8bj"></h1> <!></main>`);

export default function App($$anchor) {

let title = "il Pomodoro";

var main = root();

var h1 = $.child(main);

h1.textContent = title;

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

TaskList(node, {});

$.reset(main);

$.append($$anchor, main);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

main.svelte-1tky8bj {

text-align: center;

padding: 1em;

max-width: 240px;

margin: 0 auto;

}

h1.svelte-1tky8bj {

color: #ff3e00;

text-transform: uppercase;

font-size: 4em;

font-weight: 100;

}

@media (min-width: 640px) {

main.svelte-1tky8bj {

max-width: none;

}

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 142
end: 406
attributes: []
children: [...] (3)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 151
end: 155
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 151
end: 155
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "main"
start: 151
end: 155
 }
 ]
start: 151
end: 155
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 156
end: 236
children: [...] (4)
  Declaration {...}
 type: "Declaration"
start: 160
end: 178
property: "text-align"
value: "center"
 }
 Declaration {...}
 type: "Declaration"
start: 182
end: 194
property: "padding"
value: "1em"
 }
 Declaration {...}
 type: "Declaration"
start: 198
end: 214
property: "max-width"
value: "240px"
 }
 Declaration {...}
 type: "Declaration"
start: 218
end: 232
property: "margin"
value: "0 auto"
 }
 ]
 }
start: 151
end: 236
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 239
end: 241
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 239
end: 241
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "h1"
start: 239
end: 241
 }
 ]
start: 239
end: 241
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 242
end: 331
children: [...] (4)
  Declaration {...}
 type: "Declaration"
start: 246
end: 260
property: "color"
value: "#ff3e00"
 }
 Declaration {...}
 type: "Declaration"
start: 264
end: 289
property: "text-transform"
value: "uppercase"
 }
 Declaration {...}
 type: "Declaration"
start: 293
end: 307
property: "font-size"
value: "4em"
 }
 Declaration {...}
 type: "Declaration"
start: 311
end: 327
property: "font-weight"
value: "100"
 }
 ]
 }
start: 239
end: 331
 }
 Atrule {...}
 type: "Atrule"
start: 334
end: 397
name: "media"
prelude: "(min-width: 640px)"
block: Block {...}
 type: "Block"
start: 360
end: 397
children: [...] (1)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 364
end: 368
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 364
end: 368
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "main"
start: 364
end: 368
 }
 ]
start: 364
end: 368
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 369
end: 394
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 374
end: 389
property: "max-width"
value: "none"
 }
 ]
 }
start: 364
end: 394
 }
 ]
 }
 }
 ]
content:  {...}
 start: 149
end: 398
styles: "\n\tmain {\n\t\ttext-align: center;\n\t\tpadding: 1em;\n\t\tmax-width: 240px;\n\t\tmargin: 0 auto;\n\t}\n\n\th1 {\n\t\tcolor: #ff3e00;\n\t\ttext-transform: uppercase;\n\t\tfont-size: 4em;\n\t\tfont-weight: 100;\n\t}\n\n\t@media (min-width: 640px) {\n\t\tmain {\n\t\t\tmax-width: none;\n\t\t}\n\t}\n"
comment: null
 }
 }
js: []
start: 92
end: 140
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 90
end: 92
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 92
end: 140
name: "main"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 98
end: 101
raw: "\n  "
data: "\n  "
 }
 RegularElement {...}
 type: "RegularElement"
start: 101
end: 117
name: "h1"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 105
end: 112
expression: Identifier {...}
 type: "Identifier"
start: 106
end: 111
loc:  {...}
 start:  {...}
 line: 7
column: 7
 }
end:  {...}
 line: 7
column: 12
 }
 }
name: "title"
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 117
end: 120
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 120
end: 132
name: "TaskList"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 132
end: 133
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 140
end: 142
raw: "\n\n"
data: "\n\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)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 10
end: 36
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 27
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 14
end: 35
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 26
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 14
end: 19
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 10
 }
 }
name: "title"
 }
init: Literal {...}
 type: "Literal"
start: 22
end: 35
loc:  {...}
 start:  {...}
 line: 2
column: 13
 }
end:  {...}
 line: 2
column: 26
 }
 }
value: "il Pomodoro"
raw: "\"il Pomodoro\""
 }
 }
 ]
kind: "let"
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 39
end: 80
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 43
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 46
end: 54
loc:  {...}
 start:  {...}
 line: 3
column: 9
 }
end:  {...}
 line: 3
column: 17
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 46
end: 54
loc:  {...}
 start:  {...}
 line: 3
column: 9
 }
end:  {...}
 line: 3
column: 17
 }
 }
name: "TaskList"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 60
end: 79
loc:  {...}
 start:  {...}
 line: 3
column: 23
 }
end:  {...}
 line: 3
column: 42
 }
 }
value: "./TaskList.svelte"
raw: "'./TaskList.svelte'"
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern

il Pomodoro (Svelte Version) - PART 2 - List of tasks • Playground • Svelte