Skip to main content

Examples

App.svelte
<script>
let w;
let h;
let size = 42;
let text = 'edit me';
</script>

<input type="range" bind:value={size} />
<input bind:value={text} />

<p>size: {w}px x {h}px</p>

<div bind:clientWidth={w} bind:clientHeight={h}>
<span style="font-size: {size}px">{text}</span>
</div>

<style>
input {
display: block;
}
div {
display: inline-block;
}
</style>

/* App.svelte generated by Svelte v4.2.19 */
import {
SvelteComponent,
add_iframe_resize_listener,
add_render_callback,
append,
append_styles,
attr,
detach,
element,
init,
insert,
listen,
noop,
run_all,
safe_not_equal,
set_data,
set_input_value,
set_style,
space,
text as text_1,
to_number
} from "svelte/internal";

import "svelte/internal/disclose-version";

function add_css(target) {
append_styles(target, "svelte-1oqthja", "input.svelte-1oqthja{display:block}div.svelte-1oqthja{display:inline-block}");
}

function create_fragment(ctx) {
let input0;
let t0;
let input1;
let t1;
let p;
let t2;
let t3;
let t4;
let t5;
let t6;
let t7;
let div;
let span;
let t8;
let div_resize_listener;
let mounted;
let dispose;

return {
c() {
input0 = element("input");
t0 = space();
input1 = element("input");
t1 = space();
p = element("p");
t2 = text_1("size: ");
t3 = text_1(/*w*/ ctx[0]);
t4 = text_1("px x ");
t5 = text_1(/*h*/ ctx[1]);
t6 = text_1("px");
t7 = space();
div = element("div");
span = element("span");
t8 = text_1(/*text*/ ctx[3]);
attr(input0, "type", "range");
attr(input0, "class", "svelte-1oqthja");
attr(input1, "class", "svelte-1oqthja");
set_style(span, "font-size", /*size*/ ctx[2] + "px");
attr(div, "class", "svelte-1oqthja");
add_render_callback(() => /*div_elementresize_handler*/ ctx[6].call(div));
},
m(target, anchor) {
insert(target, input0, anchor);
set_input_value(input0, /*size*/ ctx[2]);
insert(target, t0, anchor);
insert(target, input1, anchor);
set_input_value(input1, /*text*/ ctx[3]);
insert(target, t1, anchor);
insert(target, p, anchor);
append(p, t2);
append(p, t3);
append(p, t4);
append(p, t5);
append(p, t6);
insert(target, t7, anchor);
insert(target, div, anchor);
append(div, span);
append(span, t8);
div_resize_listener = add_iframe_resize_listener(div, /*div_elementresize_handler*/ ctx[6].bind(div));

if (!mounted) {
dispose = [
listen(input0, "change", /*input0_change_input_handler*/ ctx[4]),
listen(input0, "input", /*input0_change_input_handler*/ ctx[4]),
listen(input1, "input", /*input1_input_handler*/ ctx[5])
];

mounted = true;
}
},
p(ctx, [dirty]) {
if (dirty & /*size*/ 4) {
set_input_value(input0, /*size*/ ctx[2]);
}

if (dirty & /*text*/ 8 && input1.value !== /*text*/ ctx[3]) {
set_input_value(input1, /*text*/ ctx[3]);
result = svelte.compile(source, {
generate:
css:
});
input.svelte-1oqthja{display:block}div.svelte-1oqthja{display:inline-block}