mirror of https://github.com/sveltejs/svelte
Puru Vijay
3 years ago
commit
ec8b7e87b6
File diff suppressed because it is too large
Load Diff
@ -1,81 +1,63 @@
|
||||
<script>
|
||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||
export let showModal; // boolean
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const close = () => dispatch('close');
|
||||
let dialog; // HTMLDialogElement
|
||||
|
||||
let modal;
|
||||
|
||||
const handle_keydown = e => {
|
||||
if (e.key === 'Escape') {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === 'Tab') {
|
||||
// trap focus
|
||||
const nodes = modal.querySelectorAll('*');
|
||||
const tabbable = Array.from(nodes).filter(n => n.tabIndex >= 0);
|
||||
|
||||
let index = tabbable.indexOf(document.activeElement);
|
||||
if (index === -1 && e.shiftKey) index = 0;
|
||||
|
||||
index += tabbable.length + (e.shiftKey ? -1 : 1);
|
||||
index %= tabbable.length;
|
||||
|
||||
tabbable[index].focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
||||
|
||||
if (previously_focused) {
|
||||
onDestroy(() => {
|
||||
previously_focused.focus();
|
||||
});
|
||||
}
|
||||
$: if (dialog && showModal) dialog.showModal();
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handle_keydown}/>
|
||||
|
||||
<div class="modal-background" on:click={close}></div>
|
||||
|
||||
<div class="modal" role="dialog" aria-modal="true" bind:this={modal}>
|
||||
<slot name="header"></slot>
|
||||
<hr>
|
||||
<slot></slot>
|
||||
<hr>
|
||||
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<button autofocus on:click={close}>close modal</button>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<dialog
|
||||
bind:this={dialog}
|
||||
on:close={() => (showModal = false)}
|
||||
on:click|self={() => dialog.close()}
|
||||
>
|
||||
<div on:click|stopPropagation>
|
||||
<slot name="header" />
|
||||
<hr />
|
||||
<slot />
|
||||
<hr />
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<button autofocus on:click={() => dialog.close()}>close modal</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
.modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: calc(100vw - 4em);
|
||||
dialog {
|
||||
max-width: 32em;
|
||||
max-height: calc(100vh - 4em);
|
||||
overflow: auto;
|
||||
transform: translate(-50%,-50%);
|
||||
padding: 1em;
|
||||
border-radius: 0.2em;
|
||||
background: white;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
dialog > div {
|
||||
padding: 1em;
|
||||
}
|
||||
dialog[open] {
|
||||
animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
@keyframes zoom {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
dialog[open]::backdrop {
|
||||
animation: fade 0.2s ease-out;
|
||||
}
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"title": "Debugging"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "Special tags"
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
import { TemplateLiteral } from 'estree';
|
||||
import { escape_template } from './stringify';
|
||||
|
||||
/**
|
||||
* Collapse string literals together
|
||||
*/
|
||||
export function collapse_template_literal(literal: TemplateLiteral) {
|
||||
if (!literal.quasis.length) return;
|
||||
|
||||
const collapsed_quasis = [];
|
||||
const collapsed_expressions = [];
|
||||
|
||||
let cur_quasi = literal.quasis[0];
|
||||
|
||||
// An expression always follows a quasi and vice versa, ending with a quasi
|
||||
for (let i = 0; i < literal.quasis.length; i++) {
|
||||
const expr = literal.expressions[i];
|
||||
const next_quasi = literal.quasis[i + 1];
|
||||
// If an expression is a simple string literal, combine it with its preceding
|
||||
// and following quasi
|
||||
if (next_quasi && expr && expr.type === 'Literal' && typeof expr.value === 'string') {
|
||||
cur_quasi.value.raw += escape_template(expr.value) + next_quasi.value.raw;
|
||||
} else {
|
||||
if (expr) {
|
||||
collapsed_expressions.push(expr);
|
||||
}
|
||||
collapsed_quasis.push(cur_quasi);
|
||||
cur_quasi = next_quasi;
|
||||
}
|
||||
}
|
||||
|
||||
literal.quasis = collapsed_quasis;
|
||||
literal.expressions = collapsed_expressions;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,25 @@
|
||||
export default {
|
||||
warnings: [{
|
||||
filename: 'SvelteComponent.svelte',
|
||||
code: 'css-unused-selector',
|
||||
message: 'Unused CSS selector "img[alt=""]"',
|
||||
start: {
|
||||
character: 87,
|
||||
column: 1,
|
||||
line: 8
|
||||
},
|
||||
end: {
|
||||
character: 98,
|
||||
column: 12,
|
||||
line: 8
|
||||
},
|
||||
pos: 87,
|
||||
frame: `
|
||||
6: }
|
||||
7:
|
||||
8: img[alt=""] {
|
||||
^
|
||||
9: border: 1px solid red;
|
||||
10: }`
|
||||
}]
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
img[alt].svelte-xyz{border:1px solid green}
|
||||
@ -0,0 +1 @@
|
||||
<img alt="a foo" class="svelte-xyz" src="foo.jpg">
|
||||
@ -0,0 +1,11 @@
|
||||
<img src="foo.jpg" alt="a foo" />
|
||||
|
||||
<style>
|
||||
img[alt] {
|
||||
border: 1px solid green;
|
||||
}
|
||||
|
||||
img[alt=""] {
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
options: {
|
||||
generate: 'ssr',
|
||||
dev: true
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,25 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import { add_attribute, create_ssr_component, escape } from "svelte/internal";
|
||||
|
||||
const const1 = 1;
|
||||
const const2 = 'const2';
|
||||
|
||||
function foo() {
|
||||
return '';
|
||||
}
|
||||
|
||||
const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
||||
return `
|
||||
<div class="class1 class2" style="color:red;">-</div>
|
||||
|
||||
|
||||
<div${add_attribute("class", const1, 0)}>-</div>
|
||||
<div${add_attribute("class", const1, 0)}>-</div>
|
||||
|
||||
|
||||
<div class="${"class1 " + escape('class2', true)}">-</div>
|
||||
<div class="${"class1 " + escape(const2, true)}">-</div>
|
||||
<div class="${"class1 " + escape(const2, true)}"${add_attribute("style", foo(), 0)}>-</div>`;
|
||||
});
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
const const1 = 1;
|
||||
const const2 = 'const2';
|
||||
|
||||
function foo() {
|
||||
return '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- canonical case - only markup -->
|
||||
<div class="class1 class2" style="color:red;">-</div>
|
||||
|
||||
<!-- various forms of variable syntax -->
|
||||
<div class="{const1}">-</div>
|
||||
<div class={const1}>-</div>
|
||||
|
||||
<!-- mixed static string + expressions -->
|
||||
<div class="class1 {'class2'}">-</div>
|
||||
<div class="class1 {const2}">-</div>
|
||||
<div class="class1 {const2}" style={foo()}>-</div>
|
||||
@ -0,0 +1,95 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import {
|
||||
SvelteComponent,
|
||||
add_render_callback,
|
||||
attr,
|
||||
detach,
|
||||
element,
|
||||
init,
|
||||
insert,
|
||||
listen,
|
||||
noop,
|
||||
safe_not_equal,
|
||||
set_data,
|
||||
space,
|
||||
src_url_equal,
|
||||
text
|
||||
} from "svelte/internal";
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let img;
|
||||
let img_src_value;
|
||||
let t0;
|
||||
let t1;
|
||||
let t2;
|
||||
let t3;
|
||||
let mounted;
|
||||
let dispose;
|
||||
|
||||
return {
|
||||
c() {
|
||||
img = element("img");
|
||||
t0 = space();
|
||||
t1 = text(/*naturalWidth*/ ctx[0]);
|
||||
t2 = text(" x ");
|
||||
t3 = text(/*naturalHeight*/ ctx[1]);
|
||||
if (!src_url_equal(img.src, img_src_value = "something.jpg")) attr(img, "src", img_src_value);
|
||||
if (/*naturalWidth*/ ctx[0] === void 0 || /*naturalHeight*/ ctx[1] === void 0) add_render_callback(() => /*img_load_handler*/ ctx[2].call(img));
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, img, anchor);
|
||||
insert(target, t0, anchor);
|
||||
insert(target, t1, anchor);
|
||||
insert(target, t2, anchor);
|
||||
insert(target, t3, anchor);
|
||||
|
||||
if (!mounted) {
|
||||
dispose = listen(img, "load", /*img_load_handler*/ ctx[2]);
|
||||
mounted = true;
|
||||
}
|
||||
},
|
||||
p(ctx, [dirty]) {
|
||||
if (dirty & /*naturalWidth*/ 1) set_data(t1, /*naturalWidth*/ ctx[0]);
|
||||
if (dirty & /*naturalHeight*/ 2) set_data(t3, /*naturalHeight*/ ctx[1]);
|
||||
},
|
||||
i: noop,
|
||||
o: noop,
|
||||
d(detaching) {
|
||||
if (detaching) detach(img);
|
||||
if (detaching) detach(t0);
|
||||
if (detaching) detach(t1);
|
||||
if (detaching) detach(t2);
|
||||
if (detaching) detach(t3);
|
||||
mounted = false;
|
||||
dispose();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function instance($$self, $$props, $$invalidate) {
|
||||
let { naturalWidth = 0 } = $$props;
|
||||
let { naturalHeight = 0 } = $$props;
|
||||
|
||||
function img_load_handler() {
|
||||
naturalWidth = this.naturalWidth;
|
||||
naturalHeight = this.naturalHeight;
|
||||
$$invalidate(0, naturalWidth);
|
||||
$$invalidate(1, naturalHeight);
|
||||
}
|
||||
|
||||
$$self.$$set = $$props => {
|
||||
if ('naturalWidth' in $$props) $$invalidate(0, naturalWidth = $$props.naturalWidth);
|
||||
if ('naturalHeight' in $$props) $$invalidate(1, naturalHeight = $$props.naturalHeight);
|
||||
};
|
||||
|
||||
return [naturalWidth, naturalHeight, img_load_handler];
|
||||
}
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, instance, create_fragment, safe_not_equal, { naturalWidth: 0, naturalHeight: 1 });
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
export let naturalWidth = 0;
|
||||
export let naturalHeight = 0;
|
||||
</script>
|
||||
|
||||
<img src="something.jpg" bind:naturalWidth bind:naturalHeight>
|
||||
|
||||
{naturalWidth} x {naturalHeight}
|
||||
@ -0,0 +1,60 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import {
|
||||
SvelteComponent,
|
||||
detach,
|
||||
element,
|
||||
init,
|
||||
insert,
|
||||
noop,
|
||||
safe_not_equal,
|
||||
set_data,
|
||||
space,
|
||||
text
|
||||
} from "svelte/internal";
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let h1;
|
||||
let t3;
|
||||
let t4;
|
||||
|
||||
return {
|
||||
c() {
|
||||
h1 = element("h1");
|
||||
h1.textContent = `Hello ${name}!`;
|
||||
t3 = space();
|
||||
t4 = text(/*foo*/ ctx[0]);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, h1, anchor);
|
||||
insert(target, t3, anchor);
|
||||
insert(target, t4, anchor);
|
||||
},
|
||||
p(ctx, [dirty]) {
|
||||
if (dirty & /*foo*/ 1) set_data(t4, /*foo*/ ctx[0]);
|
||||
},
|
||||
i: noop,
|
||||
o: noop,
|
||||
d(detaching) {
|
||||
if (detaching) detach(h1);
|
||||
if (detaching) detach(t3);
|
||||
if (detaching) detach(t4);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
let name = 'world';
|
||||
|
||||
function instance($$self) {
|
||||
let foo;
|
||||
$: foo = name + name;
|
||||
return [foo];
|
||||
}
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let name = 'world';
|
||||
$: foo = name + name;
|
||||
</script>
|
||||
|
||||
<h1>Hello {name}!</h1>
|
||||
{foo}
|
||||
@ -0,0 +1,244 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import {
|
||||
SvelteComponent,
|
||||
assign,
|
||||
detach,
|
||||
element,
|
||||
empty,
|
||||
get_spread_update,
|
||||
init,
|
||||
insert,
|
||||
noop,
|
||||
safe_not_equal,
|
||||
set_dynamic_element_data,
|
||||
space,
|
||||
toggle_class
|
||||
} from "svelte/internal";
|
||||
|
||||
function create_dynamic_element_3(ctx) {
|
||||
let svelte_element;
|
||||
|
||||
return {
|
||||
c() {
|
||||
svelte_element = element(static_value);
|
||||
set_dynamic_element_data(static_value)(svelte_element, { static_value, ...static_obj });
|
||||
toggle_class(svelte_element, "foo", static_value);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, svelte_element, anchor);
|
||||
},
|
||||
p: noop,
|
||||
d(detaching) {
|
||||
if (detaching) detach(svelte_element);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// (10:0) <svelte:element this={dynamic_value} {static_value} {...static_obj} class:foo={static_value} />
|
||||
function create_dynamic_element_2(ctx) {
|
||||
let svelte_element;
|
||||
|
||||
return {
|
||||
c() {
|
||||
svelte_element = element(/*dynamic_value*/ ctx[0]);
|
||||
set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, { static_value, ...static_obj });
|
||||
toggle_class(svelte_element, "foo", static_value);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, svelte_element, anchor);
|
||||
},
|
||||
p: noop,
|
||||
d(detaching) {
|
||||
if (detaching) detach(svelte_element);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// (12:0) <svelte:element this={static_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
|
||||
function create_dynamic_element_1(ctx) {
|
||||
let svelte_element;
|
||||
let svelte_element_levels = [{ dynamic_value: /*dynamic_value*/ ctx[0] }, /*dynamic_obj*/ ctx[1]];
|
||||
let svelte_element_data = {};
|
||||
|
||||
for (let i = 0; i < svelte_element_levels.length; i += 1) {
|
||||
svelte_element_data = assign(svelte_element_data, svelte_element_levels[i]);
|
||||
}
|
||||
|
||||
return {
|
||||
c() {
|
||||
svelte_element = element(static_value);
|
||||
set_dynamic_element_data(static_value)(svelte_element, svelte_element_data);
|
||||
toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, svelte_element, anchor);
|
||||
},
|
||||
p(ctx, dirty) {
|
||||
set_dynamic_element_data(static_value)(svelte_element, svelte_element_data = get_spread_update(svelte_element_levels, [
|
||||
dirty & /*dynamic_value*/ 1 && { dynamic_value: /*dynamic_value*/ ctx[0] },
|
||||
dirty & /*dynamic_obj*/ 2 && /*dynamic_obj*/ ctx[1]
|
||||
]));
|
||||
|
||||
toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]);
|
||||
},
|
||||
d(detaching) {
|
||||
if (detaching) detach(svelte_element);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// (14:0) <svelte:element this={dynamic_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
|
||||
function create_dynamic_element(ctx) {
|
||||
let svelte_element;
|
||||
let svelte_element_levels = [{ dynamic_value: /*dynamic_value*/ ctx[0] }, /*dynamic_obj*/ ctx[1]];
|
||||
let svelte_element_data = {};
|
||||
|
||||
for (let i = 0; i < svelte_element_levels.length; i += 1) {
|
||||
svelte_element_data = assign(svelte_element_data, svelte_element_levels[i]);
|
||||
}
|
||||
|
||||
return {
|
||||
c() {
|
||||
svelte_element = element(/*dynamic_value*/ ctx[0]);
|
||||
set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, svelte_element_data);
|
||||
toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, svelte_element, anchor);
|
||||
},
|
||||
p(ctx, dirty) {
|
||||
set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, svelte_element_data = get_spread_update(svelte_element_levels, [
|
||||
dirty & /*dynamic_value*/ 1 && { dynamic_value: /*dynamic_value*/ ctx[0] },
|
||||
dirty & /*dynamic_obj*/ 2 && /*dynamic_obj*/ ctx[1]
|
||||
]));
|
||||
|
||||
toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]);
|
||||
},
|
||||
d(detaching) {
|
||||
if (detaching) detach(svelte_element);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let t0;
|
||||
let previous_tag = /*dynamic_value*/ ctx[0];
|
||||
let t1;
|
||||
let t2;
|
||||
let previous_tag_1 = /*dynamic_value*/ ctx[0];
|
||||
let svelte_element3_anchor;
|
||||
let svelte_element0 = static_value && create_dynamic_element_3(ctx);
|
||||
let svelte_element1 = /*dynamic_value*/ ctx[0] && create_dynamic_element_2(ctx);
|
||||
let svelte_element2 = static_value && create_dynamic_element_1(ctx);
|
||||
let svelte_element3 = /*dynamic_value*/ ctx[0] && create_dynamic_element(ctx);
|
||||
|
||||
return {
|
||||
c() {
|
||||
if (svelte_element0) svelte_element0.c();
|
||||
t0 = space();
|
||||
if (svelte_element1) svelte_element1.c();
|
||||
t1 = space();
|
||||
if (svelte_element2) svelte_element2.c();
|
||||
t2 = space();
|
||||
if (svelte_element3) svelte_element3.c();
|
||||
svelte_element3_anchor = empty();
|
||||
},
|
||||
m(target, anchor) {
|
||||
if (svelte_element0) svelte_element0.m(target, anchor);
|
||||
insert(target, t0, anchor);
|
||||
if (svelte_element1) svelte_element1.m(target, anchor);
|
||||
insert(target, t1, anchor);
|
||||
if (svelte_element2) svelte_element2.m(target, anchor);
|
||||
insert(target, t2, anchor);
|
||||
if (svelte_element3) svelte_element3.m(target, anchor);
|
||||
insert(target, svelte_element3_anchor, anchor);
|
||||
},
|
||||
p(ctx, [dirty]) {
|
||||
if (static_value) {
|
||||
svelte_element0.p(ctx, dirty);
|
||||
}
|
||||
|
||||
if (/*dynamic_value*/ ctx[0]) {
|
||||
if (!previous_tag) {
|
||||
svelte_element1 = create_dynamic_element_2(ctx);
|
||||
previous_tag = /*dynamic_value*/ ctx[0];
|
||||
svelte_element1.c();
|
||||
svelte_element1.m(t1.parentNode, t1);
|
||||
} else if (safe_not_equal(previous_tag, /*dynamic_value*/ ctx[0])) {
|
||||
svelte_element1.d(1);
|
||||
svelte_element1 = create_dynamic_element_2(ctx);
|
||||
previous_tag = /*dynamic_value*/ ctx[0];
|
||||
svelte_element1.c();
|
||||
svelte_element1.m(t1.parentNode, t1);
|
||||
} else {
|
||||
svelte_element1.p(ctx, dirty);
|
||||
}
|
||||
} else if (previous_tag) {
|
||||
svelte_element1.d(1);
|
||||
svelte_element1 = null;
|
||||
previous_tag = /*dynamic_value*/ ctx[0];
|
||||
}
|
||||
|
||||
if (static_value) {
|
||||
svelte_element2.p(ctx, dirty);
|
||||
}
|
||||
|
||||
if (/*dynamic_value*/ ctx[0]) {
|
||||
if (!previous_tag_1) {
|
||||
svelte_element3 = create_dynamic_element(ctx);
|
||||
previous_tag_1 = /*dynamic_value*/ ctx[0];
|
||||
svelte_element3.c();
|
||||
svelte_element3.m(svelte_element3_anchor.parentNode, svelte_element3_anchor);
|
||||
} else if (safe_not_equal(previous_tag_1, /*dynamic_value*/ ctx[0])) {
|
||||
svelte_element3.d(1);
|
||||
svelte_element3 = create_dynamic_element(ctx);
|
||||
previous_tag_1 = /*dynamic_value*/ ctx[0];
|
||||
svelte_element3.c();
|
||||
svelte_element3.m(svelte_element3_anchor.parentNode, svelte_element3_anchor);
|
||||
} else {
|
||||
svelte_element3.p(ctx, dirty);
|
||||
}
|
||||
} else if (previous_tag_1) {
|
||||
svelte_element3.d(1);
|
||||
svelte_element3 = null;
|
||||
previous_tag_1 = /*dynamic_value*/ ctx[0];
|
||||
}
|
||||
},
|
||||
i: noop,
|
||||
o: noop,
|
||||
d(detaching) {
|
||||
if (svelte_element0) svelte_element0.d(detaching);
|
||||
if (detaching) detach(t0);
|
||||
if (svelte_element1) svelte_element1.d(detaching);
|
||||
if (detaching) detach(t1);
|
||||
if (svelte_element2) svelte_element2.d(detaching);
|
||||
if (detaching) detach(t2);
|
||||
if (detaching) detach(svelte_element3_anchor);
|
||||
if (svelte_element3) svelte_element3.d(detaching);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
let static_value = 'a';
|
||||
|
||||
function instance($$self, $$props, $$invalidate) {
|
||||
let { dynamic_value } = $$props;
|
||||
let { dynamic_obj } = $$props;
|
||||
let static_obj = {};
|
||||
|
||||
$$self.$$set = $$props => {
|
||||
if ('dynamic_value' in $$props) $$invalidate(0, dynamic_value = $$props.dynamic_value);
|
||||
if ('dynamic_obj' in $$props) $$invalidate(1, dynamic_obj = $$props.dynamic_obj);
|
||||
};
|
||||
|
||||
return [dynamic_value, dynamic_obj, static_obj];
|
||||
}
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, instance, create_fragment, safe_not_equal, { dynamic_value: 0, dynamic_obj: 1 });
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
export let dynamic_value;
|
||||
export let dynamic_obj;
|
||||
let static_value = 'a';
|
||||
let static_obj = {};
|
||||
</script>
|
||||
|
||||
<svelte:element this={static_value} {static_value} {...static_obj} class:foo={static_value} />
|
||||
|
||||
<svelte:element this={dynamic_value} {static_value} {...static_obj} class:foo={static_value} />
|
||||
|
||||
<svelte:element this={static_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
|
||||
|
||||
<svelte:element this={dynamic_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
|
||||
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
async test({ assert, component }) {
|
||||
assert.equal(component.toggle, true);
|
||||
assert.equal(component.offsetHeight, 800);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
export let offsetHeight;
|
||||
export let offsetWidth;
|
||||
export let toggle = false;
|
||||
$: if (offsetWidth) {
|
||||
toggle = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class:toggle>
|
||||
<div bind:offsetHeight bind:offsetWidth>{offsetHeight}</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toggle > div {
|
||||
height: 800px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import { afterUpdate, onDestroy } from "svelte";
|
||||
|
||||
export let id;
|
||||
export let items;
|
||||
|
||||
let item = $items[id];
|
||||
let selected = true;
|
||||
|
||||
function onClick() {
|
||||
selected = !selected;
|
||||
items.set({});
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
console.log("onDestroy");
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
console.log("afterUpdate");
|
||||
});
|
||||
</script>
|
||||
|
||||
<button on:click="{onClick}">Click Me</button>
|
||||
{#if selected}
|
||||
<div>{item.id}</div>
|
||||
{/if}
|
||||
@ -0,0 +1,16 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>Click Me</button>
|
||||
<div>1</div>
|
||||
`,
|
||||
async test({ assert, target, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const event = new window.MouseEvent('click');
|
||||
const messages = [];
|
||||
const log = console.log;
|
||||
console.log = msg => messages.push(msg);
|
||||
await button.dispatchEvent(event);
|
||||
console.log = log;
|
||||
assert.deepEqual(messages, ['afterUpdate', 'onDestroy']);
|
||||
}
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue