01

02

03

04

05

06

07

08

09

10

11

12

<script>

    let count = 0;

    $: doubled = count * 2;

    function handleClick() {

        count += 1;

    }

</script>

<button on:click={handleClick}>

    Clicked {count} {count === 1 ? 'time' : 'times'}

</button>

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

/* App.svelte generated by Svelte v3.22.2 */

import {

    SvelteComponent,

    append,

    detach,

    element,

    init,

    insert,

    listen,

    noop,

    safe_not_equal,

    set_data,

    space,

    text

} from "svelte/internal";

function create_fragment(ctx) {

    let button;

    let t0;

    let t1;

    let t2;

    let t3_value = (/*count*/ ctx[0] === 1 ? "time" : "times") + "";

    let t3;

    let t4;

    let p;

    let t5;

    let t6;

    let t7;

    let dispose;

    return {

        c() {

            button = element("button");

            t0 = text("Clicked ");

            t1 = text(/*count*/ ctx[0]);

            t2 = space();

            t3 = text(t3_value);

            t4 = space();

            p = element("p");

            t5 = text(/*count*/ ctx[0]);

            t6 = text(" doubled is ");

            t7 = text(/*doubled*/ ctx[1]);

        },

        m(target, anchor, remount) {

            insert(target, button, anchor);

            append(button, t0);

            append(button, t1);

            append(button, t2);

            append(button, t3);

            insert(target, t4, anchor);

            insert(target, p, anchor);

            append(p, t5);

            append(p, t6);

            append(p, t7);

            if (remount) dispose();

            dispose = listen(button, "click", /*handleClick*/ ctx[2]);

        },

        p(ctx, [dirty]) {

            if (dirty & /*count*/ 1) set_data(t1, /*count*/ ctx[0]);

            if (dirty & /*count*/ 1 && t3_value !== (t3_value = (/*count*/ ctx[0] === 1 ? "time" : "times") + "")) set_data(t3, t3_value);

            if (dirty & /*count*/ 1) set_data(t5, /*count*/ ctx[0]);

            if (dirty & /*doubled*/ 2) set_data(t7, /*doubled*/ ctx[1]);

        },

        i: noop,

        o: noop,

        d(detaching) {

            if (detaching) detach(button);

            if (detaching) detach(t4);

            if (detaching) detach(p);

            dispose();

        }

    };

}

function instance($$self, $$props, $$invalidate) {

    let count = 0;

    function handleClick() {

        $$invalidate(0, count += 1);

    }

    let doubled;

    $$self.$$.update = () => {

        if ($$self.$$.dirty & /*count*/ 1) {

            $: $$invalidate(1, doubled = count * 2);

        }

    };

    return [count, doubled, handleClick];

}

class App extends SvelteComponent {

    constructor(options) {

        super();

        init(this, options, instance, create_fragment, safe_not_equal, {});

    }

}

export default App;