PART-THREE_Svelte-Cubed: Creating Accessible and Consistent Experience Across Devices • Playground • Svelte

Skip to main content

App.svelte

Octo.svelte

stores.js

<script>

import Octo from "./Octo.svelte";

import { reducedMotion } from "./stores"

</script>

<h1>What is an Octahedron?</h1>

<div class="scene-container">

<Octo></Octo>

</div>

<p>An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces.</p>

<p>

<code>prefers-reduced-motion: {$reducedMotion}</code>

</p>

<style>

.scene-container {

/* position relative let's the canvas position itself relative to this container */

position: relative;

width: 75%;

max-width: 400px;

height: 400px;

margin: 0 auto;

}

</style>

fetching https://unpkg.com/svelte@5.20.5/src/store/index-client.js

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import Octo from "./Octo.svelte";

import { reducedMotion } from "./stores";

var root = $.template(`<h1>What is an Octahedron?</h1> <div class="scene-container svelte-1wq6r9e"><!></div> <p>An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces.</p> <p><code> </code></p>`, 1);

export default function App($$anchor) {

const [$$stores, $$cleanup] = $.setup_stores();

const $reducedMotion = () => $.store_get(reducedMotion, '$reducedMotion', $$stores);

var fragment = root();

var div = $.sibling($.first_child(fragment), 2);

var node = $.child(div);

Octo(node, {});

$.reset(div);

var p = $.sibling(div, 4);

var code = $.child(p);

var text = $.child(code);

$.reset(code);

$.reset(p);

$.template_effect(() => $.set_text(text, `prefers-reduced-motion: ${$reducedMotion() ?? ''}`));

$.append($$anchor, fragment);

$$cleanup();

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

.scene-container.svelte-1wq6r9e {

/* position relative let's the canvas position itself relative to this container */

position: relative;

width: 75%;

max-width: 400px;

height: 400px;

margin: 0 auto;

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 394
end: 611
attributes: []
children: [...] (1)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 403
end: 419
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 403
end: 419
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "scene-container"
start: 403
end: 419
 }
 ]
start: 403
end: 419
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 420
end: 602
children: [...] (5)
  Declaration {...}
 type: "Declaration"
start: 510
end: 528
property: "position"
value: "relative"
 }
 Declaration {...}
 type: "Declaration"
start: 533
end: 543
property: "width"
value: "75%"
 }
 Declaration {...}
 type: "Declaration"
start: 547
end: 563
property: "max-width"
value: "400px"
 }
 Declaration {...}
 type: "Declaration"
start: 567
end: 580
property: "height"
value: "400px"
 }
 Declaration {...}
 type: "Declaration"
start: 584
end: 598
property: "margin"
value: "0 auto"
 }
 ]
 }
start: 403
end: 602
 }
 ]
content:  {...}
 start: 401
end: 603
styles: "\n\t.scene-container {\n\t\t/* position relative let's the canvas position itself relative to this container */\n\t\tposition: relative; \n\t\twidth: 75%;\n\t\tmax-width: 400px;\n\t\theight: 400px;\n\t\tmargin: 0 auto;\n\t}\n"
comment: null
 }
 }
js: []
start: 98
end: 392
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (9)
  Text {...}
 type: "Text"
start: 97
end: 98
raw: "\n"
data: "\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 98
end: 129
name: "h1"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 102
end: 124
raw: "What is an Octahedron?"
data: "What is an Octahedron?"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 129
end: 131
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 131
end: 182
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 136
end: 159
name: "class"
value: [...] (1)
  Text {...}
 start: 143
end: 158
type: "Text"
raw: "scene-container"
data: "scene-container"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 160
end: 162
raw: "\n\t"
data: "\n\t"
 }
 Component {...}
 type: "Component"
start: 162
end: 175
name: "Octo"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 175
end: 176
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 182
end: 184
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 184
end: 328
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 187
end: 324
raw: "An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces."
data: "An octahedron is a three-dimensional shape having eight plane faces, especially a regular solid figure with eight equal triangular faces."
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 328
end: 329
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 329
end: 392
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 332
end: 334
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 334
end: 387
name: "code"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 340
end: 364
raw: "prefers-reduced-motion: "
data: "prefers-reduced-motion: "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 364
end: 380
expression: Identifier {...}
 type: "Identifier"
start: 365
end: 379
loc:  {...}
 start:  {...}
 line: 14
column: 32
 }
end:  {...}
 line: 14
column: 46
 }
 }
name: "$reducedMotion"
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 387
end: 388
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 392
end: 394
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 97
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 88
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 5
column: 0
 }
 }
body: [...] (2)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 11
end: 44
loc:  {...}
 start:  {...}
 line: 2
column: 2
 }
end:  {...}
 line: 2
column: 35
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 18
end: 22
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 13
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 18
end: 22
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 13
 }
 }
name: "Octo"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 28
end: 43
loc:  {...}
 start:  {...}
 line: 2
column: 19
 }
end:  {...}
 line: 2
column: 34
 }
 }
value: "./Octo.svelte"
raw: "\"./Octo.svelte\""
 }
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 46
end: 86
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 41
 }
 }
specifiers: [...] (1)
  ImportSpecifier {...}
 type: "ImportSpecifier"
start: 55
end: 68
loc:  {...}
 start:  {...}
 line: 3
column: 10
 }
end:  {...}
 line: 3
column: 23
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 55
end: 68
loc:  {...}
 start:  {...}
 line: 3
column: 10
 }
end:  {...}
 line: 3
column: 23
 }
 }
name: "reducedMotion"
 }
local: Identifier {...}
 type: "Identifier"
start: 55
end: 68
loc:  {...}
 start:  {...}
 line: 3
column: 10
 }
end:  {...}
 line: 3
column: 23
 }
 }
name: "reducedMotion"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 76
end: 86
loc:  {...}
 start:  {...}
 line: 3
column: 31
 }
end:  {...}
 line: 3
column: 41
 }
 }
value: "./stores"
raw: "\"./stores\""
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern

PART-THREE_Svelte-Cubed: Creating Accessible and Consistent Experience Across Devices • Playground • Svelte