Skip to main content
App.svelte
clickToCopy.js
<script>
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}/>

<h1>Click button to copy this.</h1>

<button use:clickToCopy={'h1'}>
Click to copy
</button>

<p use:clickToCopy>
Click this text to copy it.
</p>

<textarea on:paste={() => text = ''}></textarea>

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

<style>
h1 {
display: inline-block;
}
button {
margin-left: 0.5rem;
}
</style>
/* App.svelte generated by Svelte v3.32.1 */
import {
SvelteComponent,
action_destroyer,
append,
attr,
detach,
element,
init,
insert,
listen,
noop,
run_all,
safe_not_equal,
set_data,
space,
text as text_1
} from "svelte/internal";

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

function add_css() {
var style = element("style");
style.id = "svelte-1o8zxoz-style";
style.textContent = "h1.svelte-1o8zxoz{display:inline-block}button.svelte-1o8zxoz{margin-left:0.5rem}";
append(document.head, style);
}

function create_fragment(ctx) {
let h1;
let t1;
let button;
let clickToCopy_action;
let t3;
let p;
let clickToCopy_action_1;
let t5;
let textarea;
let t6;
let div;
let t7;
let t8;
let mounted;
let dispose;

return {
c() {
h1 = element("h1");
h1.textContent = "Click button to copy this.";
t1 = space();
button = element("button");
button.textContent = "Click to copy";
t3 = space();
p = element("p");
p.textContent = "Click this text to copy it.";
t5 = space();
textarea = element("textarea");
t6 = space();
div = element("div");
t7 = text_1("Result: ");
t8 = text_1(/*text*/ ctx[0]);
attr(h1, "class", "svelte-1o8zxoz");
attr(button, "class", "svelte-1o8zxoz");
},
m(target, anchor) {
insert(target, h1, anchor);
insert(target, t1, anchor);
insert(target, button, anchor);
insert(target, t3, anchor);
insert(target, p, anchor);
insert(target, t5, anchor);
insert(target, textarea, anchor);
insert(target, t6, anchor);
insert(target, div, anchor);
append(div, t7);
append(div, t8);

if (!mounted) {
dispose = [
listen(window, "copysuccess", /*copySuccess*/ ctx[1]),
listen(window, "copyerror", /*copyError*/ ctx[2]),
action_destroyer(clickToCopy_action = clickToCopy.call(null, button, "h1")),
action_destroyer(clickToCopy_action_1 = clickToCopy.call(null, p)),
listen(textarea, "paste", /*paste_handler*/ ctx[3])
];

mounted = true;
}
},
p(ctx, [dirty]) {
if (dirty & /*text*/ 1) set_data(t8, /*text*/ ctx[0]);
},
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(h1);
if (detaching) detach(t1);
if (detaching) detach(button);
if (detaching) detach(t3);
if (detaching) detach(p);
if (detaching) detach(t5);
if (detaching) detach(textarea);
if (detaching) detach(t6);
if (detaching) detach(div);
mounted = false;
run_all(dispose);
}
};
}

function instance($$self, $$props, $$invalidate) {
let text = "";

function copySuccess() {
$$invalidate(0, text = "Success!");
}

function copyError(event) {
$$invalidate(0, text = `Error! ${event.detail}`);
}

const paste_handler = () => $$invalidate(0, text = "");
return [text, copySuccess, copyError, paste_handler];
}

class App extends SvelteComponent {
constructor(options) {
super();
if (!document.getElementById("svelte-1o8zxoz-style")) add_css();
init(this, options, instance, create_fragment, safe_not_equal, {});
}
}

export default App;
result = svelte.compile(source, {
generate:
css:
});
h1.svelte-1o8zxoz{display:inline-block}button.svelte-1o8zxoz{margin-left:0.5rem}
		
			
    
					
  •  { 
    •  { 
      • start: 203
      • end: 500
      • type: "Fragment"
      •  [ 
        •  
        •  
        •  
        •  
        •  
        •  
        •  
        •  
        •  
        •  { 
          • start: 425
          • end: 473
          • type: "Element"
          • name: "textarea"
          •  [ 
            •  { 
              • start: 435
              • end: 461
              • type: "EventHandler"
              • name: "paste"
              •  
              •  { 
                • type: "ArrowFunctionExpression"
                • start: 445
                • end: 460
                •  
                • id: null
                • expression: true
                • generator: false
                • async: false
                •  
                •  { 
                  • type: "CallExpression"
                  • start: 0
                  • end: 69
                  •  { 
                    • type: "Identifier"
                    • start: 0
                    • end: 12
                    • name: "$$invalidate"
                     }
                  •  
                  • optional: false
                   }
                 }
               }
             ]
          •  
           }
        •  
        •  
        •  
         ]
       }
    •  
    •  
    • module: undefined
     }
    •
The AST is not public API and may change at any point in time