Skip to content

Blockless redux #10794

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Mar 13, 2024
Merged

Blockless redux #10794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
715f0de
null out teardown function
Rich-Harris Mar 13, 2024
d29066f
add managed effects to effect tree
Rich-Harris Mar 13, 2024
514e9a1
let the code breathe a bit
Rich-Harris Mar 13, 2024
1cf901f
bit more
Rich-Harris Mar 13, 2024
82275ad
man, that's better
Rich-Harris Mar 13, 2024
0a7615f
create correct parent-child relationship between if block and its bra…
Rich-Harris Mar 13, 2024
55002ea
remove unnecessary arg
Rich-Harris Mar 13, 2024
cc77d17
each blocks already have the correct parent-child relationship so i g…
Rich-Harris Mar 13, 2024
45de121
simplify
Rich-Harris Mar 13, 2024
ec78d5b
unused import
Rich-Harris Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
228 changes: 124 additions & 104 deletions packages/svelte/src/internal/client/dom/blocks/if.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { current_block, execute_effect } from '../../runtime.js';
import { destroy_effect, render_effect } from '../../reactivity/effects.js';
import { trigger_transitions } from '../elements/transitions.js';

/** @returns {import('../../types.js').IfBlock} */
/** @returns {import('#client').IfBlock} */
function create_if_block() {
return {
// alternate transitions
Expand All @@ -26,7 +26,7 @@ function create_if_block() {
// effect
e: null,
// parent
p: /** @type {import('../../types.js').Block} */ (current_block),
p: /** @type {import('#client').Block} */ (current_block),
// transition
r: null,
// type
Expand All @@ -45,137 +45,157 @@ function create_if_block() {
*/
export function if_block(anchor_node, condition_fn, consequent_fn, alternate_fn) {
const block = create_if_block();

hydrate_block_anchor(anchor_node);

/** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
let mismatch = false;

/** @type {null | import('../../types.js').TemplateNode | Array<import('../../types.js').TemplateNode>} */
/** @type {null | import('#client').TemplateNode | Array<import('#client').TemplateNode>} */
let consequent_dom = null;
/** @type {null | import('../../types.js').TemplateNode | Array<import('../../types.js').TemplateNode>} */

/** @type {null | import('#client').TemplateNode | Array<import('#client').TemplateNode>} */
let alternate_dom = null;

let has_mounted = false;

/**
* @type {import('../../types.js').Effect | null}
* @type {import('#client').Effect | null}
*/
let current_branch_effect = null;

const if_effect = render_effect(
() => {
const result = !!condition_fn();
if (block.v !== result || !has_mounted) {
block.v = result;
if (has_mounted) {
const consequent_transitions = block.c;
const alternate_transitions = block.a;
if (result) {
if (alternate_transitions === null || alternate_transitions.size === 0) {
execute_effect(alternate_effect);
} else {
trigger_transitions(alternate_transitions, 'out');
}
if (consequent_transitions === null || consequent_transitions.size === 0) {
execute_effect(consequent_effect);
} else {
trigger_transitions(consequent_transitions, 'in');
}
/** @type {import('#client').Effect} */
let consequent_effect;

/** @type {import('#client').Effect} */
let alternate_effect;

const if_effect = render_effect(() => {
const result = !!condition_fn();

if (block.v !== result || !has_mounted) {
block.v = result;

if (has_mounted) {
const consequent_transitions = block.c;
const alternate_transitions = block.a;

if (result) {
if (alternate_transitions === null || alternate_transitions.size === 0) {
execute_effect(alternate_effect);
} else {
if (consequent_transitions === null || consequent_transitions.size === 0) {
execute_effect(consequent_effect);
} else {
trigger_transitions(consequent_transitions, 'out');
}
if (alternate_transitions === null || alternate_transitions.size === 0) {
execute_effect(alternate_effect);
} else {
trigger_transitions(alternate_transitions, 'in');
}
trigger_transitions(alternate_transitions, 'out');
}
} else if (hydrating) {
const comment_text = /** @type {Comment} */ (current_hydration_fragment?.[0])?.data;
if (
!comment_text ||
(comment_text === 'ssr:if:true' && !result) ||
(comment_text === 'ssr:if:false' && result)
) {
// Hydration mismatch: remove everything inside the anchor and start fresh.
// This could happen using when `{#if browser} .. {/if}` in SvelteKit.
remove(current_hydration_fragment);
set_current_hydration_fragment(null);
mismatch = true;

if (consequent_transitions === null || consequent_transitions.size === 0) {
execute_effect(consequent_effect);
} else {
// Remove the ssr:if comment node or else it will confuse the subsequent hydration algorithm
current_hydration_fragment.shift();
trigger_transitions(consequent_transitions, 'in');
}
} else {
if (consequent_transitions === null || consequent_transitions.size === 0) {
execute_effect(consequent_effect);
} else {
trigger_transitions(consequent_transitions, 'out');
}

if (alternate_transitions === null || alternate_transitions.size === 0) {
execute_effect(alternate_effect);
} else {
trigger_transitions(alternate_transitions, 'in');
}
}
has_mounted = true;
}
},
block,
false
);
// Managed effect
const consequent_effect = render_effect(
(
/** @type {any} */ _,
/** @type {import('../../types.js').Effect | null} */ consequent_effect
) => {
const result = block.v;
if (!result && consequent_dom !== null) {
remove(consequent_dom);
consequent_dom = null;
}
if (result && current_branch_effect !== consequent_effect) {
consequent_fn(anchor_node);
if (mismatch && current_branch_effect === null) {
// Set fragment so that Svelte continues to operate in hydration mode
set_current_hydration_fragment([]);
} else if (hydrating) {
const comment_text = /** @type {Comment} */ (current_hydration_fragment?.[0])?.data;

if (
!comment_text ||
(comment_text === 'ssr:if:true' && !result) ||
(comment_text === 'ssr:if:false' && result)
) {
// Hydration mismatch: remove everything inside the anchor and start fresh.
// This could happen using when `{#if browser} .. {/if}` in SvelteKit.
remove(current_hydration_fragment);
set_current_hydration_fragment(null);
mismatch = true;
} else {
// Remove the ssr:if comment node or else it will confuse the subsequent hydration algorithm
current_hydration_fragment.shift();
}
current_branch_effect = consequent_effect;
consequent_dom = block.d;
}
block.d = null;
},
block,
true
);
block.ce = consequent_effect;
// Managed effect
const alternate_effect = render_effect(
(
/** @type {any} */ _,
/** @type {import('../../types.js').Effect | null} */ alternate_effect
) => {
const result = block.v;
if (result && alternate_dom !== null) {
remove(alternate_dom);
alternate_dom = null;
}
if (!result && current_branch_effect !== alternate_effect) {
if (alternate_fn !== null) {
alternate_fn(anchor_node);

has_mounted = true;
}

// create these here so they have the correct parent/child relationship
consequent_effect ??= render_effect(
(/** @type {any} */ _, /** @type {import('#client').Effect | null} */ consequent_effect) => {
const result = block.v;

if (!result && consequent_dom !== null) {
remove(consequent_dom);
consequent_dom = null;
}

if (result && current_branch_effect !== consequent_effect) {
consequent_fn(anchor_node);
if (mismatch && current_branch_effect === null) {
// Set fragment so that Svelte continues to operate in hydration mode
set_current_hydration_fragment([]);
}
current_branch_effect = consequent_effect;
consequent_dom = block.d;
}
if (mismatch && current_branch_effect === null) {
// Set fragment so that Svelte continues to operate in hydration mode
set_current_hydration_fragment([]);

block.d = null;
},
block,
true
);
block.ce = consequent_effect;

alternate_effect ??= render_effect(
(/** @type {any} */ _, /** @type {import('#client').Effect | null} */ alternate_effect) => {
const result = block.v;

if (result && alternate_dom !== null) {
remove(alternate_dom);
alternate_dom = null;
}
current_branch_effect = alternate_effect;
alternate_dom = block.d;
}
block.d = null;
},
block,
true
);
block.ae = alternate_effect;

if (!result && current_branch_effect !== alternate_effect) {
if (alternate_fn !== null) {
alternate_fn(anchor_node);
}

if (mismatch && current_branch_effect === null) {
// Set fragment so that Svelte continues to operate in hydration mode
set_current_hydration_fragment([]);
}

current_branch_effect = alternate_effect;
alternate_dom = block.d;
}
block.d = null;
},
block,
true
);
block.ae = alternate_effect;
}, block);

if_effect.ondestroy = () => {
if (consequent_dom !== null) {
remove(consequent_dom);
}

if (alternate_dom !== null) {
remove(alternate_dom);
}

destroy_effect(consequent_effect);
destroy_effect(alternate_effect);
};

block.e = if_effect;
}
22 changes: 13 additions & 9 deletions packages/svelte/src/internal/client/reactivity/effects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
current_effect,
current_reaction,
destroy_children,
flush_local_render_effects,
get,
remove_reactions,
schedule_effect,
Expand Down Expand Up @@ -42,13 +41,11 @@ function create_effect(type, fn, sync, block = current_block, init = true) {
signal.l = current_effect.l + 1;
}

if ((type & MANAGED) === 0) {
if (current_reaction !== null) {
if (current_reaction.effects === null) {
current_reaction.effects = [signal];
} else {
current_reaction.effects.push(signal);
}
if (current_reaction !== null) {
if (current_reaction.effects === null) {
current_reaction.effects = [signal];
} else {
current_reaction.effects.push(signal);
}
}

Expand Down Expand Up @@ -230,5 +227,12 @@ export function destroy_effect(signal) {

signal.teardown?.();
signal.ondestroy?.();
signal.fn = signal.effects = signal.ondestroy = signal.ctx = signal.block = signal.deps = null;
signal.fn =
signal.effects =
signal.teardown =
signal.ondestroy =
signal.ctx =
signal.block =
signal.deps =
null;
}
Loading