(cache)Use of IntersectionObserver(👀) • Playground • Svelte

App.svelte

useViewportAction.js

import viewport from "./useViewportAction";

</script>

<h1

use:viewport

on:enterViewport={() => console.log('enter')}

on:exitViewport={() => console.log('exit')}

>Hell</h1>

   enter
   exit
   enter

import "svelte/internal/disclose-version";

import "svelte/internal/flags/legacy";

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

import viewport from "./useViewportAction";

var root = $.template(`<div style="height: 200px; background: magenta"></div> <div style="height: 200px; background: lime"></div> <div style="height: 200px; background: cyan"></div> <div style="height: 200px; background: yellow"></div> <div style="height: 200px; background: purple"></div> <h1>Hell</h1> <div style="height: 200px; background: magenta"></div> <div style="height: 200px; background: lime"></div> <div style="height: 200px; background: cyan"></div> <div style="height: 200px; background: yellow"></div> <div style="height: 200px; background: purple"></div>`, 1);

export default function App($$anchor) {

var fragment = root();

var h1 = $.sibling($.first_child(fragment), 10);

$.action(h1, ($$node) => viewport?.($$node));

$.effect(() => $.event("enterViewport", h1, () => console.log('enter')));

$.effect(() => $.event("exitViewport", h1, () => console.log('exit')));

$.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: 65
end: 721
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (22)
  Text {...}
 type: "Text"
start: 63
end: 65
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 65
end: 119
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 70
end: 112
name: "style"
value: [...] (1)
  Text {...}
 start: 77
end: 111
type: "Text"
raw: "height: 200px; background: magenta"
data: "height: 200px; background: magenta"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 119
end: 120
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 120
end: 171
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 125
end: 164
name: "style"
value: [...] (1)
  Text {...}
 start: 132
end: 163
type: "Text"
raw: "height: 200px; background: lime"
data: "height: 200px; background: lime"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 171
end: 172
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 172
end: 223
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 177
end: 216
name: "style"
value: [...] (1)
  Text {...}
 start: 184
end: 215
type: "Text"
raw: "height: 200px; background: cyan"
data: "height: 200px; background: cyan"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 223
end: 224
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 224
end: 277
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 229
end: 270
name: "style"
value: [...] (1)
  Text {...}
 start: 236
end: 269
type: "Text"
raw: "height: 200px; background: yellow"
data: "height: 200px; background: yellow"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 277
end: 278
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 278
end: 331
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 283
end: 324
name: "style"
value: [...] (1)
  Text {...}
 start: 290
end: 323
type: "Text"
raw: "height: 200px; background: purple"
data: "height: 200px; background: purple"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 331
end: 333
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 333
end: 453
name: "h1"
attributes: [...] (3)
  UseDirective {...}
 start: 338
end: 350
type: "UseDirective"
name: "viewport"
expression: null
modifiers: []
 }
 OnDirective {...}
 start: 352
end: 397
type: "OnDirective"
name: "enterViewport"
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 370
end: 396
loc:  {...}
 start:  {...}
 line: 13
column: 19
 }
end:  {...}
 line: 13
column: 45
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: CallExpression {...}
 type: "CallExpression"
start: 376
end: 396
loc:  {...}
 start:  {...}
 line: 13
column: 25
 }
end:  {...}
 line: 13
column: 45
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 376
end: 387
loc:  {...}
 start:  {...}
 line: 13
column: 25
 }
end:  {...}
 line: 13
column: 36
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 376
end: 383
loc:  {...}
 start:  {...}
 line: 13
column: 25
 }
end:  {...}
 line: 13
column: 32
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 384
end: 387
loc:  {...}
 start:  {...}
 line: 13
column: 33
 }
end:  {...}
 line: 13
column: 36
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 388
end: 395
loc:  {...}
 start:  {...}
 line: 13
column: 37
 }
end:  {...}
 line: 13
column: 44
 }
 }
value: "enter"
raw: "'enter'"
 }
 ]
optional: false
 }
 }
modifiers: []
 }
 OnDirective {...}
 start: 399
end: 442
type: "OnDirective"
name: "exitViewport"
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 416
end: 441
loc:  {...}
 start:  {...}
 line: 14
column: 18
 }
end:  {...}
 line: 14
column: 43
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: CallExpression {...}
 type: "CallExpression"
start: 422
end: 441
loc:  {...}
 start:  {...}
 line: 14
column: 24
 }
end:  {...}
 line: 14
column: 43
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 422
end: 433
loc:  {...}
 start:  {...}
 line: 14
column: 24
 }
end:  {...}
 line: 14
column: 35
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 422
end: 429
loc:  {...}
 start:  {...}
 line: 14
column: 24
 }
end:  {...}
 line: 14
column: 31
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 430
end: 433
loc:  {...}
 start:  {...}
 line: 14
column: 32
 }
end:  {...}
 line: 14
column: 35
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 434
end: 440
loc:  {...}
 start:  {...}
 line: 14
column: 36
 }
end:  {...}
 line: 14
column: 42
 }
 }
value: "exit"
raw: "'exit'"
 }
 ]
optional: false
 }
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 444
end: 448
raw: "Hell"
data: "Hell"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 453
end: 455
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 455
end: 509
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 460
end: 502
name: "style"
value: [...] (1)
  Text {...}
 start: 467
end: 501
type: "Text"
raw: "height: 200px; background: magenta"
data: "height: 200px; background: magenta"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 509
end: 510
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 510
end: 561
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 515
end: 554
name: "style"
value: [...] (1)
  Text {...}
 start: 522
end: 553
type: "Text"
raw: "height: 200px; background: lime"
data: "height: 200px; background: lime"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 561
end: 562
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 562
end: 613
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 567
end: 606
name: "style"
value: [...] (1)
  Text {...}
 start: 574
end: 605
type: "Text"
raw: "height: 200px; background: cyan"
data: "height: 200px; background: cyan"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 613
end: 614
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 614
end: 667
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 619
end: 660
name: "style"
value: [...] (1)
  Text {...}
 start: 626
end: 659
type: "Text"
raw: "height: 200px; background: yellow"
data: "height: 200px; background: yellow"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 667
end: 668
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 668
end: 721
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 673
end: 714
name: "style"
value: [...] (1)
  Text {...}
 start: 680
end: 713
type: "Text"
raw: "height: 200px; background: purple"
data: "height: 200px; background: purple"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 63
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 54
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 3
column: 0
 }
 }
body: [...] (1)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 53
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 44
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 17
end: 25
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 16
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 17
end: 25
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 16
 }
 }
name: "viewport"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 31
end: 52
loc:  {...}
 start:  {...}
 line: 2
column: 22
 }
end:  {...}
 line: 2
column: 43
 }
 }
value: "./useViewportAction"
raw: "\"./useViewportAction\""
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern