(cache)clickToCopy (simpler 🤔, pure JS dispatcher) • Playground • Svelte

App.svelte

clickToCopy.js

import { clickToCopy } from "./clickToCopy.js"

let text = '';

function copySuccess(){

text = "Success!"

}

function copyError(event){

text = `Error! ${event.detail}`

}

</script>

<svelte:window on:copysuccess={copySuccess} on:copyerror={copyError}/>

Click this text to copy it.

</p>

<div>Result: {text}</div>

import "svelte/internal/disclose-version";

import "svelte/internal/flags/legacy";

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

import { clickToCopy } from "./clickToCopy.js";

var root = $.template(`<p>Click this text to copy it.</p> <textarea></textarea> <div> </div>`, 1);

export default function App($$anchor) {

let text = $.mutable_state('');

function copySuccess() {

$.set(text, "Success!");

}

function copyError(event) {

$.set(text, `Error! ${event.detail}`);

}

var fragment = root();

$.event("copysuccess", $.window, copySuccess);

$.event("copyerror", $.window, copyError);

var p = $.first_child(fragment);

$.action(p, ($$node) => clickToCopy?.($$node));

var textarea = $.sibling(p, 2);

var div = $.sibling(textarea, 2);

var text_1 = $.child(div);

$.reset(div);

$.template_effect(() => $.set_text(text_1, `Result: ${$.get(text) ?? ""}`));

$.event("paste", textarea, () => $.set(text, ''));

$.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: 203
end: 404
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (8)
  Text {...}
 type: "Text"
start: 201
end: 203
raw: "\n\n"
data: "\n\n"
 }
 SvelteWindow {...}
 type: "SvelteWindow"
start: 203
end: 273
name: "svelte:window"
attributes: [...] (2)
  OnDirective {...}
 start: 218
end: 246
type: "OnDirective"
name: "copysuccess"
expression: Identifier {...}
 type: "Identifier"
start: 234
end: 245
loc:  {...}
 start:  {...}
 line: 16
column: 31
 }
end:  {...}
 line: 16
column: 42
 }
 }
name: "copySuccess"
 }
modifiers: []
 }
 OnDirective {...}
 start: 247
end: 271
type: "OnDirective"
name: "copyerror"
expression: Identifier {...}
 type: "Identifier"
start: 261
end: 270
loc:  {...}
 start:  {...}
 line: 16
column: 58
 }
end:  {...}
 line: 16
column: 67
 }
 }
name: "copyError"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 273
end: 274
raw: "\n"
data: "\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 274
end: 327
name: "p"
attributes: [...] (1)
  UseDirective {...}
 start: 277
end: 292
type: "UseDirective"
name: "clickToCopy"
expression: null
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 293
end: 323
raw: "Click this text to copy it."
data: "Click this text to copy it."
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 327
end: 329
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 329
end: 377
name: "textarea"
attributes: [...] (1)
  OnDirective {...}
 start: 339
end: 365
type: "OnDirective"
name: "paste"
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 349
end: 364
loc:  {...}
 start:  {...}
 line: 21
column: 20
 }
end:  {...}
 line: 21
column: 35
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 355
end: 364
loc:  {...}
 start:  {...}
 line: 21
column: 26
 }
end:  {...}
 line: 21
column: 35
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 355
end: 359
loc:  {...}
 start:  {...}
 line: 21
column: 26
 }
end:  {...}
 line: 21
column: 30
 }
 }
name: "text"
 }
right: Literal {...}
 type: "Literal"
start: 362
end: 364
loc:  {...}
 start:  {...}
 line: 21
column: 33
 }
end:  {...}
 line: 21
column: 35
 }
 }
value: ""
raw: "''"
 }
 }
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 377
end: 379
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 379
end: 404
name: "div"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 384
end: 392
raw: "Result: "
data: "Result: "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 392
end: 398
expression: Identifier {...}
 type: "Identifier"
start: 393
end: 397
loc:  {...}
 start:  {...}
 line: 23
column: 14
 }
end:  {...}
 line: 23
column: 18
 }
 }
name: "text"
 }
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 201
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 192
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 14
column: 0
 }
 }
body: [...] (4)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 56
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 47
 }
 }
specifiers: [...] (1)
  ImportSpecifier {...}
 type: "ImportSpecifier"
start: 19
end: 30
loc:  {...}
 start:  {...}
 line: 2
column: 10
 }
end:  {...}
 line: 2
column: 21
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 19
end: 30
loc:  {...}
 start:  {...}
 line: 2
column: 10
 }
end:  {...}
 line: 2
column: 21
 }
 }
name: "clickToCopy"
 }
local: Identifier {...}
 type: "Identifier"
start: 19
end: 30
loc:  {...}
 start:  {...}
 line: 2
column: 10
 }
end:  {...}
 line: 2
column: 21
 }
 }
name: "clickToCopy"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 38
end: 56
loc:  {...}
 start:  {...}
 line: 2
column: 29
 }
end:  {...}
 line: 2
column: 47
 }
 }
value: "./clickToCopy.js"
raw: "\"./clickToCopy.js\""
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 59
end: 73
loc:  {...}
 start:  {...}
 line: 4
column: 1
 }
end:  {...}
 line: 4
column: 15
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 63
end: 72
loc:  {...}
 start:  {...}
 line: 4
column: 5
 }
end:  {...}
 line: 4
column: 14
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 63
end: 67
loc:  {...}
 start:  {...}
 line: 4
column: 5
 }
end:  {...}
 line: 4
column: 9
 }
 }
name: "text"
 }
init: Literal {...}
 type: "Literal"
start: 70
end: 72
loc:  {...}
 start:  {...}
 line: 4
column: 12
 }
end:  {...}
 line: 4
column: 14
 }
 }
value: ""
raw: "''"
 }
 }
 ]
kind: "let"
 }
 FunctionDeclaration {...}
 type: "FunctionDeclaration"
start: 77
end: 123
loc:  {...}
 start:  {...}
 line: 6
column: 1
 }
end:  {...}
 line: 8
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 86
end: 97
loc:  {...}
 start:  {...}
 line: 6
column: 10
 }
end:  {...}
 line: 6
column: 21
 }
 }
name: "copySuccess"
 }
expression: false
generator: false
async: false
params: []
body: BlockStatement {...}
 type: "BlockStatement"
start: 99
end: 123
loc:  {...}
 start:  {...}
 line: 6
column: 23
 }
end:  {...}
 line: 8
column: 2
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 103
end: 120
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 19
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 103
end: 120
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 19
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 103
end: 107
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 6
 }
 }
name: "text"
 }
right: Literal {...}
 type: "Literal"
start: 110
end: 120
loc:  {...}
 start:  {...}
 line: 7
column: 9
 }
end:  {...}
 line: 7
column: 19
 }
 }
value: "Success!"
raw: "\"Success!\""
 }
 }
 }
 ]
 }
 }
 FunctionDeclaration {...}
 type: "FunctionDeclaration"
start: 127
end: 190
loc:  {...}
 start:  {...}
 line: 10
column: 1
 }
end:  {...}
 line: 12
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 136
end: 145
loc:  {...}
 start:  {...}
 line: 10
column: 10
 }
end:  {...}
 line: 10
column: 19
 }
 }
name: "copyError"
 }
expression: false
generator: false
async: false
params: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 146
end: 151
loc:  {...}
 start:  {...}
 line: 10
column: 20
 }
end:  {...}
 line: 10
column: 25
 }
 }
name: "event"
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 152
end: 190
loc:  {...}
 start:  {...}
 line: 10
column: 26
 }
end:  {...}
 line: 12
column: 2
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 156
end: 187
loc:  {...}
 start:  {...}
 line: 11
column: 2
 }
end:  {...}
 line: 11
column: 33
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 156
end: 187
loc:  {...}
 start:  {...}
 line: 11
column: 2
 }
end:  {...}
 line: 11
column: 33
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 156
end: 160
loc:  {...}
 start:  {...}
 line: 11
column: 2
 }
end:  {...}
 line: 11
column: 6
 }
 }
name: "text"
 }
right: TemplateLiteral {...}
 type: "TemplateLiteral"
start: 163
end: 187
loc:  {...}
 start:  {...}
 line: 11
column: 9
 }
end:  {...}
 line: 11
column: 33
 }
 }
expressions: [...] (1)
  MemberExpression {...}
 type: "MemberExpression"
start: 173
end: 185
loc:  {...}
 start:  {...}
 line: 11
column: 19
 }
end:  {...}
 line: 11
column: 31
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 173
end: 178
loc:  {...}
 start:  {...}
 line: 11
column: 19
 }
end:  {...}
 line: 11
column: 24
 }
 }
name: "event"
 }
property: Identifier {...}
 type: "Identifier"
start: 179
end: 185
loc:  {...}
 start:  {...}
 line: 11
column: 25
 }
end:  {...}
 line: 11
column: 31
 }
 }
name: "detail"
 }
computed: false
optional: false
 }
 ]
quasis: [...] (2)
  TemplateElement {...}
 type: "TemplateElement"
start: 164
end: 171
loc:  {...}
 start:  {...}
 line: 11
column: 10
 }
end:  {...}
 line: 11
column: 17
 }
 }
value:  {...}
 raw: "Error! "
cooked: "Error! "
 }
tail: false
 }
 TemplateElement {...}
 type: "TemplateElement"
start: 186
end: 186
loc:  {...}
 start:  {...}
 line: 11
column: 32
 }
end:  {...}
 line: 11
column: 32
 }
 }
value:  {...}
 raw: ""
cooked: ""
 }
tail: true
 }
 ]
 }
 }
 }
 ]
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern