msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

WIP

Browse Source
out-of-order-rendering
Rich Harris 2 days ago
parent 37b9372189
commit 4b83b9ea42
28 changed files with 120 additions and 118 deletions
Show Stats Download Patch File Download Diff File

6
packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/client/index.svelte.js
Unescape View File

@ -6,7 +6,7 @@ export default function Async_each_fallback_hoisting($$anchor) {
var fragment = $.comment();
var node = $.first_child(fragment);
$.async(node, [() => Promise.resolve([])], (node, $$collection) => {
$.async(node, [], [() => Promise.resolve([])], (node, $$collection) => {
$.each(
node,
16,
@ -17,7 +17,7 @@ export default function Async_each_fallback_hoisting($$anchor) {
var text = $.text();
$.template_effect(($0) => $.set_text(text, $0), void 0, [() => Promise.reject('This should never be reached')]);
$.template_effect([], ($0) => $.set_text(text, $0), void 0, [() => Promise.reject('This should never be reached')]);
$.append($$anchor, text);
},
($$anchor) => {
@ -25,7 +25,7 @@ export default function Async_each_fallback_hoisting($$anchor) {
var text_1 = $.text();
$.template_effect(($0) => $.set_text(text_1, $0), void 0, [() => Promise.resolve(4)]);
$.template_effect([], ($0) => $.set_text(text_1, $0), void 0, [() => Promise.resolve(4)]);
$.append($$anchor, text_1);
}
);

10
packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/client/index.svelte.js
Unescape View File

@ -3,19 +3,19 @@ import 'svelte/internal/flags/async';
import * as $ from 'svelte/internal/client';
export default function Async_each_hoisting($$anchor) {
const first = Promise.resolve(1);
const second = Promise.resolve(2);
const third = Promise.resolve(3);
var first = Promise.resolve(1);
var second = Promise.resolve(2);
var third = Promise.resolve(3);
var fragment = $.comment();
var node = $.first_child(fragment);
$.async(node, [() => Promise.resolve([first, second, third])], (node, $$collection) => {
$.async(node, [], [() => Promise.resolve([first, second, third])], (node, $$collection) => {
$.each(node, 17, () => $.get($$collection), $.index, ($$anchor, item) => {
$.next();
var text = $.text();
$.template_effect(($0) => $.set_text(text, $0), void 0, [() => $.get(item)]);
$.template_effect([], ($0) => $.set_text(text, $0), void 0, [() => $.get(item)]);
$.append($$anchor, text);
});
});

6
packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/server/index.svelte.js
Unescape View File

@ -2,9 +2,9 @@ import 'svelte/internal/flags/async';
import * as $ from 'svelte/internal/server';
export default function Async_each_hoisting($$renderer) {
const first = Promise.resolve(1);
const second = Promise.resolve(2);
const third = Promise.resolve(3);
var first = Promise.resolve(1);
var second = Promise.resolve(2);
var third = Promise.resolve(3);
$$renderer.push(`<!--[-->`);

6
packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/client/index.svelte.js
Unescape View File

@ -6,18 +6,18 @@ export default function Async_if_alternate_hoisting($$anchor) {
var fragment = $.comment();
var node = $.first_child(fragment);
$.async(node, [() => Promise.resolve(false)], (node, $$condition) => {
$.async(node, [], [() => Promise.resolve(false)], (node, $$condition) => {
var consequent = ($$anchor) => {
var text = $.text();
$.template_effect(($0) => $.set_text(text, $0), void 0, [() => Promise.reject('no no no')]);
$.template_effect([], ($0) => $.set_text(text, $0), void 0, [() => Promise.reject('no no no')]);
$.append($$anchor, text);
};
var alternate = ($$anchor) => {
var text_1 = $.text();
$.template_effect(($0) => $.set_text(text_1, $0), void 0, [() => Promise.resolve('yes yes yes')]);
$.template_effect([], ($0) => $.set_text(text_1, $0), void 0, [() => Promise.resolve('yes yes yes')]);
$.append($$anchor, text_1);
};

6
packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/client/index.svelte.js
Unescape View File

@ -6,18 +6,18 @@ export default function Async_if_hoisting($$anchor) {
var fragment = $.comment();
var node = $.first_child(fragment);
$.async(node, [() => Promise.resolve(true)], (node, $$condition) => {
$.async(node, [], [() => Promise.resolve(true)], (node, $$condition) => {
var consequent = ($$anchor) => {
var text = $.text();
$.template_effect(($0) => $.set_text(text, $0), void 0, [() => Promise.resolve('yes yes yes')]);
$.template_effect([], ($0) => $.set_text(text, $0), void 0, [() => Promise.resolve('yes yes yes')]);
$.append($$anchor, text);
};
var alternate = ($$anchor) => {
var text_1 = $.text();
$.template_effect(($0) => $.set_text(text_1, $0), void 0, [() => Promise.reject('no no no')]);
$.template_effect([], ($0) => $.set_text(text_1, $0), void 0, [() => Promise.reject('no no no')]);
$.append($$anchor, text_1);
};

61
packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
Unescape View File

@ -5,48 +5,47 @@ import * as $ from 'svelte/internal/client';
export default function Async_in_derived($$anchor, $$props) {
$.push($$props, true);
$.async_body($$anchor, async ($$anchor) => {
let yes1 = (await $.save($.async_derived(async () => (await $.save(1))())))();
let yes2 = (await $.save($.async_derived(async () => foo((await $.save(1))()))))();
var yes1, yes2, no1, no2;
let no1 = $.derived(async () => {
return await 1;
});
var $$promises = $.run([
async () => yes1 = await $.async_derived(() => 1),
async () => yes2 = await $.async_derived(async () => foo(await 1)),
let no2 = $.derived(() => async () => {
() => no1 = $.derived(async () => {
return await 1;
});
}),
if ($.aborted()) return;
var fragment = $.comment();
var node = $.first_child(fragment);
() => no2 = $.derived(() => async () => {
return await 1;
})
]);
{
var consequent = ($$anchor) => {
$.async_body($$anchor, async ($$anchor) => {
const yes1 = (await $.save($.async_derived(async () => (await $.save(1))())))();
const yes2 = (await $.save($.async_derived(async () => foo((await $.save(1))()))))();
var fragment = $.comment();
var node = $.first_child(fragment);
const no1 = $.derived(() => (async () => {
return await 1;
})());
{
var consequent = ($$anchor) => {
$.async_body($$anchor, async ($$anchor) => {
const yes1 = (await $.save($.async_derived(async () => (await $.save(1))())))();
const yes2 = (await $.save($.async_derived(async () => foo((await $.save(1))()))))();
const no2 = $.derived(() => (async () => {
return await 1;
})());
const no1 = $.derived(() => (async () => {
return await 1;
})());
if ($.aborted()) return;
});
};
const no2 = $.derived(() => (async () => {
return await 1;
})());
$.if(node, ($$render) => {
if (true) $$render(consequent);
if ($.aborted()) return;
});
}
};
$.append($$anchor, fragment);
});
$.if(node, ($$render) => {
if (true) $$render(consequent);
});
}
$.append($$anchor, fragment);
$.pop();
}

56
packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js
Unescape View File

@ -3,38 +3,40 @@ import * as $ from 'svelte/internal/server';
export default function Async_in_derived($$renderer, $$props) {
$$renderer.component(($$renderer) => {
$$renderer.async(async ($$renderer) => {
let yes1 = (await $.save(1))();
let yes2 = foo((await $.save(1))());
var yes1, yes2, no1, no2;
let no1 = (async () => {
return await 1;
})();
var $$promises = $$renderer.run([
async () => yes1 = await 1,
async () => yes2 = foo(await 1),
let no2 = async () => {
() => no1 = (async () => {
return await 1;
};
$$renderer.async(async ($$renderer) => {
if (true) {
$$renderer.push('<!--[-->');
const yes1 = (await $.save(1))();
const yes2 = foo((await $.save(1))());
})(),
const no1 = (async () => {
return await 1;
})();
const no2 = (async () => {
return await 1;
})();
} else {
$$renderer.push('<!--[!-->');
}
});
() => no2 = async () => {
return await 1;
}
]);
$$renderer.push(`<!--]-->`);
$$renderer.async(async ($$renderer) => {
if (true) {
$$renderer.push('<!--[-->');
const yes1 = (await $.save(1))();
const yes2 = foo((await $.save(1))());
const no1 = (async () => {
return await 1;
})();
const no2 = (async () => {
return await 1;
})();
} else {
$$renderer.push('<!--[!-->');
}
});
$$renderer.push(`<!--]-->`);
});
}

6
packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js
Unescape View File

@ -4,8 +4,8 @@ import * as $ from 'svelte/internal/client';
var root = $.from_html(`<button> </button> <!> `, 1);
export default function Await_block_scope($$anchor) {
let counter = $.proxy({ count: 0 });
const promise = $.derived(() => Promise.resolve(counter));
var counter = $.proxy({ count: 0 });
var promise = $.derived(() => Promise.resolve(counter));
function increment() {
counter.count += 1;
@ -26,7 +26,7 @@ export default function Await_block_scope($$anchor) {
var text_1 = $.sibling(node);
$.template_effect(() => {
$.template_effect([], () => {
$.set_text(text, `clicks: ${counter.count ?? ''}`);
$.set_text(text_1, ` ${counter.count ?? ''}`);
});

4
packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js
Unescape View File

@ -1,8 +1,8 @@
import * as $ from 'svelte/internal/server';
export default function Await_block_scope($$renderer) {
let counter = { count: 0 };
const promise = Promise.resolve(counter);
var counter = { count: 0 };
var promise = Promise.resolve(counter);
function increment() {
counter.count += 1;

6
packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
Unescape View File

@ -13,8 +13,8 @@ const snippet = ($$anchor) => {
var root = $.from_html(`<!> `, 1);
export default function Bind_component_snippet($$anchor) {
let value = $.state('');
const _snippet = snippet;
var value = $.state('');
var _snippet = snippet;
var fragment = root();
var node = $.first_child(fragment);
@ -30,6 +30,6 @@ export default function Bind_component_snippet($$anchor) {
var text_1 = $.sibling(node);
$.template_effect(() => $.set_text(text_1, ` value: ${$.get(value) ?? ''}`));
$.template_effect([], () => $.set_text(text_1, ` value: ${$.get(value) ?? ''}`));
$.append($$anchor, fragment);
}

4
packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
Unescape View File

@ -6,8 +6,8 @@ function snippet($$renderer) {
}
export default function Bind_component_snippet($$renderer) {
let value = '';
const _snippet = snippet;
var value = '';
var _snippet = snippet;
let $$settled = true;
let $$inner_renderer;

9
packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
Unescape View File

@ -4,10 +4,10 @@ import * as $ from 'svelte/internal/client';
var root = $.from_html(`<div></div> <svg></svg> <custom-element></custom-element> <div></div> <svg></svg> <custom-element></custom-element>`, 3);
export default function Main($$anchor) {
// needs to be a snapshot test because jsdom does auto-correct the attribute casing
let x = 'test';
var // needs to be a snapshot test because jsdom does auto-correct the attribute casing
x = 'test';
let y = () => 'test';
var y = () => 'test';
var fragment = root();
var div = $.first_child(fragment);
@ -25,9 +25,10 @@ export default function Main($$anchor) {
var svg_1 = $.sibling(div_1, 2);
var custom_element_1 = $.sibling(svg_1, 2);
$.template_effect(() => $.set_custom_element_data(custom_element_1, 'fooBar', y()));
$.template_effect([], () => $.set_custom_element_data(custom_element_1, 'fooBar', y()));
$.template_effect(
[],
($0, $1) => {
$.set_attribute(div_1, 'foobar', $0);
$.set_attribute(svg_1, 'viewBox', $1);

6
packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js
Unescape View File

@ -1,10 +1,10 @@
import * as $ from 'svelte/internal/server';
export default function Main($$renderer) {
// needs to be a snapshot test because jsdom does auto-correct the attribute casing
let x = 'test';
var // needs to be a snapshot test because jsdom does auto-correct the attribute casing
x = 'test';
let y = () => 'test';
var y = () => 'test';
$$renderer.push(`<div${$.attr('foobar', x)}></div> <svg${$.attr('viewBox', x)}></svg> <custom-element${$.attr('foobar', x)}></custom-element> <div${$.attr('foobar', y())}></div> <svg${$.attr('viewBox', y())}></svg> <custom-element${$.attr('foobar', y())}></custom-element>`);
}

2
packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
Unescape View File

@ -11,7 +11,7 @@ export default function Each_string_template($$anchor) {
var text = $.text();
$.template_effect(() => $.set_text(text, `${thing ?? ''}, `));
$.template_effect([], () => $.set_text(text, `${thing ?? ''}, `));
$.append($$anchor, text);
});

6
packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
Unescape View File

@ -2,13 +2,13 @@ import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
export default function Function_prop_no_getter($$anchor) {
let count = $.state(0);
var count = $.state(0);
function onmouseup() {
$.set(count, $.get(count) + 2);
}
const plusOne = (num) => num + 1;
var plusOne = (num) => num + 1;
Button($$anchor, {
onmousedown: () => $.set(count, $.get(count) + 1),
@ -20,7 +20,7 @@ export default function Function_prop_no_getter($$anchor) {
var text = $.text();
$.template_effect(() => $.set_text(text, `clicks: ${$.get(count) ?? ''}`));
$.template_effect([], () => $.set_text(text, `clicks: ${$.get(count) ?? ''}`));
$.append($$anchor, text);
},

4
packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
Unescape View File

@ -1,13 +1,13 @@
import * as $ from 'svelte/internal/server';
export default function Function_prop_no_getter($$renderer) {
let count = 0;
var count = 0;
function onmouseup() {
count += 2;
}
const plusOne = (num) => num + 1;
var plusOne = (num) => num + 1;
Button($$renderer, {
onmousedown: () => count += 1,

6
packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js
Unescape View File

@ -4,8 +4,8 @@ import * as $ from 'svelte/internal/client';
var root = $.from_html(`<h1></h1> <b></b> <button> </button> <h1></h1>`, 1);
export default function Nullish_coallescence_omittance($$anchor) {
let name = 'world';
let count = $.state(0);
var name = 'world';
var count = $.state(0);
var fragment = root();
var h1 = $.first_child(fragment);
@ -26,7 +26,7 @@ export default function Nullish_coallescence_omittance($$anchor) {
var h1_1 = $.sibling(button, 2);
h1_1.textContent = 'Hello, world';
$.template_effect(() => $.set_text(text, `Count is ${$.get(count) ?? ''}`));
$.template_effect([], () => $.set_text(text, `Count is ${$.get(count) ?? ''}`));
$.append($$anchor, fragment);
}

4
packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js
Unescape View File

@ -1,8 +1,8 @@
import * as $ from 'svelte/internal/server';
export default function Nullish_coallescence_omittance($$renderer) {
let name = 'world';
let count = 0;
var name = 'world';
var count = 0;
$$renderer.push(`<h1>Hello, world!</h1> <b>123</b> <button>Count is ${$.escape(count)}</button> <h1>Hello, world</h1>`);
}

2
packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js
Unescape View File

@ -4,7 +4,7 @@ import * as $ from 'svelte/internal/client';
export default function Props_identifier($$anchor, $$props) {
$.push($$props, true);
let props = $.rest_props($$props, ['$$slots', '$$events', '$$legacy']);
var props = $.rest_props($$props, ['$$slots', '$$events', '$$legacy']);
$$props.a;
props[a];

2
packages/svelte/tests/snapshot/samples/props-identifier/_expected/server/index.svelte.js
Unescape View File

@ -2,7 +2,7 @@ import * as $ from 'svelte/internal/server';
export default function Props_identifier($$renderer, $$props) {
$$renderer.component(($$renderer) => {
let { $$slots, $$events, ...props } = $$props;
var { $$slots, $$events, ...props } = $$props;
props.a;
props[a];

2
packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
Unescape View File

@ -44,6 +44,6 @@ export default function Skip_static_subtree($$anchor, $$props) {
var img = $.sibling(select, 2);
$.next(2);
$.template_effect(() => $.set_text(text, $$props.title));
$.template_effect([], () => $.set_text(text, $$props.title));
$.append($$anchor, fragment);
}

2
packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
Unescape View File

@ -1,7 +1,7 @@
import * as $ from 'svelte/internal/server';
export default function Skip_static_subtree($$renderer, $$props) {
let { title, content } = $$props;
var { title, content } = $$props;
$$renderer.push(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus/></div> <div><source muted/></div> <select>`);

4
packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
Unescape View File

@ -4,8 +4,8 @@ import * as $ from 'svelte/internal/client';
var root = $.from_html(`<input/> <input/> <button>reset</button>`, 1);
export default function State_proxy_literal($$anchor) {
let str = $.state('');
let tpl = $.state(``);
var str = $.state('');
var tpl = $.state(``);
function reset() {
$.set(str, '');

4
packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js
Unescape View File

@ -1,8 +1,8 @@
import * as $ from 'svelte/internal/server';
export default function State_proxy_literal($$renderer) {
let str = '';
let tpl = ``;
var str = '';
var tpl = ``;
function reset() {
str = '';

2
packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js
Unescape View File

@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
export default function Svelte_element($$anchor, $$props) {
let tag = $.prop($$props, 'tag', 3, 'hr');
var tag = $.prop($$props, 'tag', 3, 'hr');
var fragment = $.comment();
var node = $.first_child(fragment);

2
packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js
Unescape View File

@ -1,7 +1,7 @@
import * as $ from 'svelte/internal/server';
export default function Svelte_element($$renderer, $$props) {
let { tag = 'hr' } = $$props;
var { tag = 'hr' } = $$props;
$.element($$renderer, tag);
}

6
packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
Unescape View File

@ -4,8 +4,8 @@ import * as $ from 'svelte/internal/client';
var root = $.from_html(`<p> </p>`);
export default function Text_nodes_deriveds($$anchor) {
let count1 = 0;
let count2 = 0;
var count1 = 0;
var count2 = 0;
function text1() {
return count1;
@ -19,6 +19,6 @@ export default function Text_nodes_deriveds($$anchor) {
var text = $.child(p);
$.reset(p);
$.template_effect(($0, $1) => $.set_text(text, `${$0 ?? ''}${$1 ?? ''}`), [text1, text2]);
$.template_effect([], ($0, $1) => $.set_text(text, `${$0 ?? ''}${$1 ?? ''}`), [text1, text2]);
$.append($$anchor, p);
}

4
packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js
Unescape View File

@ -1,8 +1,8 @@
import * as $ from 'svelte/internal/server';
export default function Text_nodes_deriveds($$renderer) {
let count1 = 0;
let count2 = 0;
var count1 = 0;
var count2 = 0;
function text1() {
return count1;

Write Preview
Loading…
Cancel
Save