Svelte-Cubed: Blank Slate • Playground • Svelte

App.svelte

import * as THREE from "three";

import * as SC from "svelte-cubed";

</script>

<SC.Canvas

background={new THREE.Color("skyblue")}

antialias

<SC.PerspectiveCamera

position={[-10, 36, 20]}

near={0.1}

far={500}

fov={40}

<SC.OrbitControls

enabled={true}

enableZoom={true}

autoRotate={false}

autoRotateSpeed={2}

enableDamping={true}

dampingFactor={0.1}

target={[-6, 17, 0]}

<SC.DirectionalLight

color={new THREE.Color(0xffffff)}

position={[0,10,10]}

intensity={0.75}

shadow={false}

<SC.AmbientLight

resolving https://unpkg.com/svelte@5.20.5/src/version.js

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import * as THREE from "three";

import * as SC from "svelte-cubed";

var root_1 = $.template(`<!> <!> <!> <!>`, 1);

export default function App($$anchor, $$props) {

$.push($$props, false);

$.init();

const expression = $.derived_safe_equal(() => new THREE.Color("skyblue"));

SC.Canvas($$anchor, {

get background() {

return $.get(expression);

antialias: true,

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

var fragment_1 = root_1();

var node = $.first_child(fragment_1);

SC.PerspectiveCamera(node, {

position: [-10, 36, 20],

near: 0.1,

far: 500,

fov: 40

});

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

SC.OrbitControls(node_1, {

enabled: true,

enableZoom: true,

autoRotate: false,

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

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

		
			
				
					 Root {
 css: null
js: []
start: 1
end: 677
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 0
end: 1
raw: "\n"
data: "\n"
 }
 Text {...}
 type: "Text"
start: 91
end: 93
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 93
end: 677
name: "SC.Canvas"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 106
end: 145
name: "background"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 117
end: 145
expression: NewExpression {...}
 type: "NewExpression"
start: 118
end: 144
loc:  {...}
 start:  {...}
 line: 9
column: 14
 }
end:  {...}
 line: 9
column: 40
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 122
end: 133
loc:  {...}
 start:  {...}
 line: 9
column: 18
 }
end:  {...}
 line: 9
column: 29
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 122
end: 127
loc:  {...}
 start:  {...}
 line: 9
column: 18
 }
end:  {...}
 line: 9
column: 23
 }
 }
name: "THREE"
 }
property: Identifier {...}
 type: "Identifier"
start: 128
end: 133
loc:  {...}
 start:  {...}
 line: 9
column: 24
 }
end:  {...}
 line: 9
column: 29
 }
 }
name: "Color"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 134
end: 143
loc:  {...}
 start:  {...}
 line: 9
column: 30
 }
end:  {...}
 line: 9
column: 39
 }
 }
value: "skyblue"
raw: "\"skyblue\""
 }
 ]
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 148
end: 157
name: "antialias"
value: true
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (9)
  Text {...}
 type: "Text"
start: 159
end: 163
raw: "\n\n  "
data: "\n\n  "
 }
 Component {...}
 type: "Component"
start: 163
end: 261
name: "SC.PerspectiveCamera"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 190
end: 214
name: "position"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 199
end: 214
expression: ArrayExpression {...}
 type: "ArrayExpression"
start: 200
end: 213
loc:  {...}
 start:  {...}
 line: 14
column: 14
 }
end:  {...}
 line: 14
column: 27
 }
 }
elements: [...] (3)
  UnaryExpression {...}
 type: "UnaryExpression"
start: 201
end: 204
loc:  {...}
 start:  {...}
 line: 14
column: 15
 }
end:  {...}
 line: 14
column: 18
 }
 }
operator: "-"
prefix: true
argument: Literal {...}
 type: "Literal"
start: 202
end: 204
loc:  {...}
 start:  {...}
 line: 14
column: 16
 }
end:  {...}
 line: 14
column: 18
 }
 }
value: 10
raw: "10"
 }
 }
 Literal {...}
 type: "Literal"
start: 206
end: 208
loc:  {...}
 start:  {...}
 line: 14
column: 20
 }
end:  {...}
 line: 14
column: 22
 }
 }
value: 36
raw: "36"
 }
 Literal {...}
 type: "Literal"
start: 210
end: 212
loc:  {...}
 start:  {...}
 line: 14
column: 24
 }
end:  {...}
 line: 14
column: 26
 }
 }
value: 20
raw: "20"
 }
 ]
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 219
end: 229
name: "near"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 224
end: 229
expression: Literal {...}
 type: "Literal"
start: 225
end: 228
loc:  {...}
 start:  {...}
 line: 15
column: 10
 }
end:  {...}
 line: 15
column: 13
 }
 }
value: 0.1
raw: "0.1"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 234
end: 243
name: "far"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 238
end: 243
expression: Literal {...}
 type: "Literal"
start: 239
end: 242
loc:  {...}
 start:  {...}
 line: 16
column: 9
 }
end:  {...}
 line: 16
column: 12
 }
 }
value: 500
raw: "500"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 248
end: 256
name: "fov"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 252
end: 256
expression: Literal {...}
 type: "Literal"
start: 253
end: 255
loc:  {...}
 start:  {...}
 line: 17
column: 9
 }
end:  {...}
 line: 17
column: 11
 }
 }
value: 40
raw: "40"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 261
end: 265
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 265
end: 448
name: "SC.OrbitControls"
attributes: [...] (7)
  Attribute {...}
 type: "Attribute"
start: 288
end: 302
name: "enabled"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 296
end: 302
expression: Literal {...}
 type: "Literal"
start: 297
end: 301
loc:  {...}
 start:  {...}
 line: 21
column: 13
 }
end:  {...}
 line: 21
column: 17
 }
 }
value: true
raw: "true"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 307
end: 324
name: "enableZoom"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 318
end: 324
expression: Literal {...}
 type: "Literal"
start: 319
end: 323
loc:  {...}
 start:  {...}
 line: 22
column: 16
 }
end:  {...}
 line: 22
column: 20
 }
 }
value: true
raw: "true"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 329
end: 347
name: "autoRotate"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 340
end: 347
expression: Literal {...}
 type: "Literal"
start: 341
end: 346
loc:  {...}
 start:  {...}
 line: 23
column: 16
 }
end:  {...}
 line: 23
column: 21
 }
 }
value: false
raw: "false"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 352
end: 371
name: "autoRotateSpeed"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 368
end: 371
expression: Literal {...}
 type: "Literal"
start: 369
end: 370
loc:  {...}
 start:  {...}
 line: 24
column: 21
 }
end:  {...}
 line: 24
column: 22
 }
 }
value: 2
raw: "2"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 376
end: 396
name: "enableDamping"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 390
end: 396
expression: Literal {...}
 type: "Literal"
start: 391
end: 395
loc:  {...}
 start:  {...}
 line: 25
column: 19
 }
end:  {...}
 line: 25
column: 23
 }
 }
value: true
raw: "true"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 401
end: 420
name: "dampingFactor"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 415
end: 420
expression: Literal {...}
 type: "Literal"
start: 416
end: 419
loc:  {...}
 start:  {...}
 line: 26
column: 19
 }
end:  {...}
 line: 26
column: 22
 }
 }
value: 0.1
raw: "0.1"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 423
end: 443
name: "target"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 430
end: 443
expression: ArrayExpression {...}
 type: "ArrayExpression"
start: 431
end: 442
loc:  {...}
 start:  {...}
 line: 27
column: 10
 }
end:  {...}
 line: 27
column: 21
 }
 }
elements: [...] (3)
  UnaryExpression {...}
 type: "UnaryExpression"
start: 432
end: 434
loc:  {...}
 start:  {...}
 line: 27
column: 11
 }
end:  {...}
 line: 27
column: 13
 }
 }
operator: "-"
prefix: true
argument: Literal {...}
 type: "Literal"
start: 433
end: 434
loc:  {...}
 start:  {...}
 line: 27
column: 12
 }
end:  {...}
 line: 27
column: 13
 }
 }
value: 6
raw: "6"
 }
 }
 Literal {...}
 type: "Literal"
start: 436
end: 438
loc:  {...}
 start:  {...}
 line: 27
column: 15
 }
end:  {...}
 line: 27
column: 17
 }
 }
value: 17
raw: "17"
 }
 Literal {...}
 type: "Literal"
start: 440
end: 441
loc:  {...}
 start:  {...}
 line: 27
column: 19
 }
end:  {...}
 line: 27
column: 20
 }
 }
value: 0
raw: "0"
 }
 ]
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 448
end: 452
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 452
end: 580
name: "SC.DirectionalLight"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 477
end: 510
name: "color"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 483
end: 510
expression: NewExpression {...}
 type: "NewExpression"
start: 484
end: 509
loc:  {...}
 start:  {...}
 line: 31
column: 11
 }
end:  {...}
 line: 31
column: 36
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 488
end: 499
loc:  {...}
 start:  {...}
 line: 31
column: 15
 }
end:  {...}
 line: 31
column: 26
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 488
end: 493
loc:  {...}
 start:  {...}
 line: 31
column: 15
 }
end:  {...}
 line: 31
column: 20
 }
 }
name: "THREE"
 }
property: Identifier {...}
 type: "Identifier"
start: 494
end: 499
loc:  {...}
 start:  {...}
 line: 31
column: 21
 }
end:  {...}
 line: 31
column: 26
 }
 }
name: "Color"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 500
end: 508
loc:  {...}
 start:  {...}
 line: 31
column: 27
 }
end:  {...}
 line: 31
column: 35
 }
 }
value: 16777215
raw: "0xffffff"
 }
 ]
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 515
end: 535
name: "position"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 524
end: 535
expression: ArrayExpression {...}
 type: "ArrayExpression"
start: 525
end: 534
loc:  {...}
 start:  {...}
 line: 32
column: 14
 }
end:  {...}
 line: 32
column: 23
 }
 }
elements: [...] (3)
  Literal {...}
 type: "Literal"
start: 526
end: 527
loc:  {...}
 start:  {...}
 line: 32
column: 15
 }
end:  {...}
 line: 32
column: 16
 }
 }
value: 0
raw: "0"
 }
 Literal {...}
 type: "Literal"
start: 528
end: 530
loc:  {...}
 start:  {...}
 line: 32
column: 17
 }
end:  {...}
 line: 32
column: 19
 }
 }
value: 10
raw: "10"
 }
 Literal {...}
 type: "Literal"
start: 531
end: 533
loc:  {...}
 start:  {...}
 line: 32
column: 20
 }
end:  {...}
 line: 32
column: 22
 }
 }
value: 10
raw: "10"
 }
 ]
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 540
end: 556
name: "intensity"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 550
end: 556
expression: Literal {...}
 type: "Literal"
start: 551
end: 555
loc:  {...}
 start:  {...}
 line: 33
column: 15
 }
end:  {...}
 line: 33
column: 19
 }
 }
value: 0.75
raw: "0.75"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 561
end: 575
name: "shadow"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 568
end: 575
expression: Literal {...}
 type: "Literal"
start: 569
end: 574
loc:  {...}
 start:  {...}
 line: 34
column: 12
 }
end:  {...}
 line: 34
column: 17
 }
 }
value: false
raw: "false"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 580
end: 583
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 583
end: 663
name: "SC.AmbientLight"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 604
end: 637
name: "color"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 610
end: 637
expression: NewExpression {...}
 type: "NewExpression"
start: 611
end: 636
loc:  {...}
 start:  {...}
 line: 37
column: 11
 }
end:  {...}
 line: 37
column: 36
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 615
end: 626
loc:  {...}
 start:  {...}
 line: 37
column: 15
 }
end:  {...}
 line: 37
column: 26
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 615
end: 620
loc:  {...}
 start:  {...}
 line: 37
column: 15
 }
end:  {...}
 line: 37
column: 20
 }
 }
name: "THREE"
 }
property: Identifier {...}
 type: "Identifier"
start: 621
end: 626
loc:  {...}
 start:  {...}
 line: 37
column: 21
 }
end:  {...}
 line: 37
column: 26
 }
 }
name: "Color"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 627
end: 635
loc:  {...}
 start:  {...}
 line: 37
column: 27
 }
end:  {...}
 line: 37
column: 35
 }
 }
value: 16777215
raw: "0xffffff"
 }
 ]
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 642
end: 658
name: "intensity"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 652
end: 658
expression: Literal {...}
 type: "Literal"
start: 653
end: 657
loc:  {...}
 start:  {...}
 line: 38
column: 15
 }
end:  {...}
 line: 38
column: 19
 }
 }
value: 0.75
raw: "0.75"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 663
end: 665
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 1
end: 91
context: "default"
content: Program {...}
 type: "Program"
start: 9
end: 82
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 6
column: 0
 }
 }
body: [...] (2)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 11
end: 42
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 32
 }
 }
specifiers: [...] (1)
  ImportNamespaceSpecifier {...}
 type: "ImportNamespaceSpecifier"
start: 18
end: 28
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 18
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 23
end: 28
loc:  {...}
 start:  {...}
 line: 3
column: 13
 }
end:  {...}
 line: 3
column: 18
 }
 }
name: "THREE"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 34
end: 41
loc:  {...}
 start:  {...}
 line: 3
column: 24
 }
end:  {...}
 line: 3
column: 31
 }
 }
value: "three"
raw: "\"three\""
 }
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 44
end: 79
loc:  {...}
 start:  {...}
 line: 4
column: 1
 }
end:  {...}
 line: 4
column: 36
 }
 }
specifiers: [...] (1)
  ImportNamespaceSpecifier {...}
 type: "ImportNamespaceSpecifier"
start: 51
end: 58
loc:  {...}
 start:  {...}
 line: 4
column: 8
 }
end:  {...}
 line: 4
column: 15
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 56
end: 58
loc:  {...}
 start:  {...}
 line: 4
column: 13
 }
end:  {...}
 line: 4
column: 15
 }
 }
name: "SC"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 64
end: 78
loc:  {...}
 start:  {...}
 line: 4
column: 21
 }
end:  {...}
 line: 4
column: 35
 }
 }
value: "svelte-cubed"
raw: "\"svelte-cubed\""
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern