mirror of https://github.com/sveltejs/svelte
Puru Vijay
3 years ago
commit
6798c62d5c
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'svelte': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
fix: ensure `svelte:component` evaluates props once
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'svelte': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
fix: handle destructured primitive literals
|
|
||||||
@ -1,2 +1,2 @@
|
|||||||
// This file is automatically generated
|
// This file is automatically generated
|
||||||
export default new Set(["HtmlTag","HtmlTagHydration","ResizeObserverSingleton","SvelteComponent","SvelteComponentDev","SvelteComponentTyped","SvelteElement","action_destroyer","add_attribute","add_classes","add_flush_callback","add_iframe_resize_listener","add_location","add_render_callback","add_styles","add_transform","afterUpdate","append","append_dev","append_empty_stylesheet","append_hydration","append_hydration_dev","append_styles","assign","attr","attr_dev","attribute_to_object","beforeUpdate","bind","binding_callbacks","blank_object","bubble","check_outros","children","claim_comment","claim_component","claim_element","claim_html_tag","claim_space","claim_svg_element","claim_text","clear_loops","comment","component_subscribe","compute_rest_props","compute_slots","construct_svelte_component","construct_svelte_component_dev","contenteditable_truthy_values","createEventDispatcher","create_animation","create_bidirectional_transition","create_component","create_custom_element","create_in_transition","create_out_transition","create_slot","create_ssr_component","current_component","custom_event","dataset_dev","debug","destroy_block","destroy_component","destroy_each","detach","detach_after_dev","detach_before_dev","detach_between_dev","detach_dev","dirty_components","dispatch_dev","each","element","element_is","empty","end_hydrating","ensure_array_like","ensure_array_like_dev","escape","escape_attribute_value","escape_object","exclude_internal_props","fix_and_destroy_block","fix_and_outro_and_destroy_block","fix_position","flush","flush_render_callbacks","getAllContexts","getContext","get_all_dirty_from_scope","get_binding_group_value","get_current_component","get_custom_elements_slots","get_root_for_style","get_slot_changes","get_spread_object","get_spread_update","get_store_value","get_svelte_dataset","globals","group_outros","handle_promise","hasContext","has_prop","head_selector","identity","init","init_binding_group","init_binding_group_dynamic","insert","insert_dev","insert_hydration","insert_hydration_dev","intros","invalid_attribute_name_character","is_client","is_crossorigin","is_empty","is_function","is_promise","is_void","listen","listen_dev","loop","loop_guard","merge_ssr_styles","missing_component","mount_component","noop","not_equal","now","null_to_empty","object_without_properties","onDestroy","onMount","once","outro_and_destroy_block","prevent_default","prop_dev","query_selector_all","raf","resize_observer_border_box","resize_observer_content_box","resize_observer_device_pixel_content_box","run","run_all","safe_not_equal","schedule_update","select_multiple_value","select_option","select_options","select_value","self","setContext","set_attributes","set_current_component","set_custom_element_data","set_custom_element_data_map","set_data","set_data_contenteditable","set_data_contenteditable_dev","set_data_dev","set_data_maybe_contenteditable","set_data_maybe_contenteditable_dev","set_dynamic_element_data","set_input_type","set_input_value","set_now","set_raf","set_store_value","set_style","set_svg_attributes","space","split_css_unit","spread","src_url_equal","start_hydrating","stop_immediate_propagation","stop_propagation","subscribe","svg_element","text","tick","time_ranges_to_array","to_number","toggle_class","transition_in","transition_out","trusted","update_await_block_branch","update_keyed_each","update_slot","update_slot_base","validate_component","validate_dynamic_element","validate_each_keys","validate_slots","validate_store","validate_void_dynamic_element","xlink_attr"]);
|
export default new Set(["HtmlTag","HtmlTagHydration","ResizeObserverSingleton","SvelteComponent","SvelteComponentDev","SvelteComponentTyped","SvelteElement","action_destroyer","add_attribute","add_classes","add_flush_callback","add_iframe_resize_listener","add_location","add_render_callback","add_styles","add_transform","afterUpdate","append","append_dev","append_empty_stylesheet","append_hydration","append_hydration_dev","append_styles","assign","attr","attr_dev","attribute_to_object","beforeUpdate","bind","binding_callbacks","blank_object","bubble","check_outros","children","claim_comment","claim_component","claim_element","claim_html_tag","claim_space","claim_svg_element","claim_text","clear_loops","comment","component_subscribe","compute_rest_props","compute_slots","construct_svelte_component","construct_svelte_component_dev","contenteditable_truthy_values","createEventDispatcher","create_animation","create_bidirectional_transition","create_component","create_custom_element","create_in_transition","create_out_transition","create_slot","create_ssr_component","current_component","custom_event","dataset_dev","debug","destroy_block","destroy_component","destroy_each","detach","detach_after_dev","detach_before_dev","detach_between_dev","detach_dev","dirty_components","dispatch_dev","each","element","element_is","empty","end_hydrating","ensure_array_like","ensure_array_like_dev","escape","escape_attribute_value","escape_object","exclude_internal_props","fix_and_destroy_block","fix_and_outro_and_destroy_block","fix_position","flush","flush_render_callbacks","getAllContexts","getContext","get_all_dirty_from_scope","get_binding_group_value","get_current_component","get_custom_elements_slots","get_root_for_style","get_slot_changes","get_spread_object","get_spread_update","get_store_value","get_svelte_dataset","globals","group_outros","handle_promise","hasContext","has_prop","head_selector","identity","init","init_binding_group","init_binding_group_dynamic","insert","insert_dev","insert_hydration","insert_hydration_dev","intros","invalid_attribute_name_character","is_client","is_crossorigin","is_empty","is_function","is_promise","is_void","listen","listen_dev","loop","loop_guard","merge_ssr_styles","missing_component","mount_component","noop","not_equal","now","null_to_empty","object_without_properties","onDestroy","onMount","once","outro_and_destroy_block","prevent_default","prop_dev","query_selector_all","raf","resize_observer_border_box","resize_observer_content_box","resize_observer_device_pixel_content_box","run","run_all","safe_not_equal","schedule_update","select_multiple_value","select_option","select_options","select_value","self","setContext","set_attributes","set_current_component","set_custom_element_data","set_custom_element_data_map","set_data","set_data_contenteditable","set_data_contenteditable_dev","set_data_dev","set_data_maybe_contenteditable","set_data_maybe_contenteditable_dev","set_dynamic_element_data","set_input_type","set_input_value","set_now","set_raf","set_store_value","set_style","set_svg_attributes","space","split_css_unit","spread","src_url_equal","srcset_url_equal","start_hydrating","stop_immediate_propagation","stop_propagation","subscribe","svg_element","text","tick","time_ranges_to_array","to_number","toggle_class","transition_in","transition_out","trusted","update_await_block_branch","update_keyed_each","update_slot","update_slot_base","validate_component","validate_dynamic_element","validate_each_keys","validate_slots","validate_store","validate_void_dynamic_element","xlink_attr"]);
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<svelte:options
|
||||||
|
customElement={{
|
||||||
|
tag: 'custom-element',
|
||||||
|
extend: (CeClass) => {
|
||||||
|
return class extends CeClass {
|
||||||
|
updateFoo(value) {
|
||||||
|
this.foo = value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export function updateFoo(value) {
|
||||||
|
foo = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
export let foo;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>{foo}</p>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import * as assert from 'assert.js';
|
||||||
|
import { tick } from 'svelte';
|
||||||
|
import './main.svelte';
|
||||||
|
|
||||||
|
export default async function (target) {
|
||||||
|
const element = document.createElement('custom-element');
|
||||||
|
element.updateFoo('42');
|
||||||
|
target.appendChild(element);
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
const el = target.querySelector('custom-element');
|
||||||
|
const p = el.shadowRoot.querySelector('p');
|
||||||
|
assert.equal(p.textContent, '42');
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
const tasks = ["do laundry", "do taxes", "cook food", "watch the kids"];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<slot {tasks} />
|
||||||
|
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<select>
|
||||||
|
<option value='do laundry'>do laundry</option>
|
||||||
|
<option value='do taxes'>do taxes</option>
|
||||||
|
<option value='cook food'>cook food</option>
|
||||||
|
<option value='watch the kids'>watch the kids</option>
|
||||||
|
</select>
|
||||||
|
<p>1</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const select = target.querySelector('select');
|
||||||
|
const options = target.querySelectorAll('option');
|
||||||
|
|
||||||
|
assert.equal(component.tasks_touched, 1);
|
||||||
|
|
||||||
|
const change = new window.Event('change');
|
||||||
|
options[1].selected = true;
|
||||||
|
await select.dispatchEvent(change);
|
||||||
|
|
||||||
|
assert.equal(component.selected, options[1].value);
|
||||||
|
assert.equal(component.tasks_touched, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
import Parent from "./Parent.svelte";
|
||||||
|
export let selected;
|
||||||
|
export let tasks = ['do nothing'];
|
||||||
|
export let tasks_touched = 0;
|
||||||
|
|
||||||
|
$: {
|
||||||
|
tasks, tasks_touched++;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Parent let:tasks={tasks}>
|
||||||
|
<select bind:value={selected}>
|
||||||
|
{#each tasks as task}
|
||||||
|
<option value={task}>{task}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</Parent>
|
||||||
|
<p>{tasks_touched}</p>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
const tasks = ["do laundry", "do taxes", "cook food", "watch the kids"];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<slot {tasks} />
|
||||||
|
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<select>
|
||||||
|
<option value='do laundry'>do laundry</option>
|
||||||
|
<option value='do taxes'>do taxes</option>
|
||||||
|
<option value='cook food'>cook food</option>
|
||||||
|
<option value='watch the kids'>watch the kids</option>
|
||||||
|
</select>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const select = target.querySelector('select');
|
||||||
|
const options = target.querySelectorAll('option');
|
||||||
|
|
||||||
|
const change = new window.Event('change');
|
||||||
|
options[1].selected = true;
|
||||||
|
await select.dispatchEvent(change);
|
||||||
|
|
||||||
|
assert.equal(component.selected, options[1].value);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
import Parent from "./Parent.svelte";
|
||||||
|
export let selected;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Parent let:tasks={tasks}>
|
||||||
|
<select bind:value={selected}>
|
||||||
|
{#each tasks as task}
|
||||||
|
<option value={task}>{task}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</Parent>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
export let value;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>value(1) = {value}</p>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
export let value;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>value(2) = {value}</p>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p>value(1) = 1</p>
|
||||||
|
<button>Toggle Component</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, window, target }) {
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
await button.dispatchEvent(new window.Event('click'));
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<p>value(2) = 2</p>
|
||||||
|
<button>Toggle Component</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
await button.dispatchEvent(new window.Event('click'));
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<p>value(1) = 1</p>
|
||||||
|
<button>Toggle Component</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
import Comp1 from './Comp1.svelte';
|
||||||
|
import Comp2 from './Comp2.svelte';
|
||||||
|
|
||||||
|
let view = Comp1;
|
||||||
|
|
||||||
|
$: props = view === Comp1 ? { value: 1 } : { value: 2 };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:component this={view} {...props} />
|
||||||
|
|
||||||
|
<button on:click={(e) => (view = view === Comp1 ? Comp2 : Comp1)}>Toggle Component</button>
|
||||||
Loading…
Reference in new issue