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

unify blocks before we kill them

Browse Source
pull/10873/head
Rich Harris 2 years ago
parent e03bc2b346
commit b47a232fa4
10 changed files with 35 additions and 135 deletions
Show Stats Download Patch File Download Diff File

18
packages/svelte/src/internal/client/dom/blocks/await.js
Unescape View File

@ -2,7 +2,6 @@ import { is_promise } from '../../../common.js';
import { hydrate_block_anchor } from '../hydration.js';
import { remove } from '../reconciler.js';
import {
current_block,
current_component_context,
flushSync,
set_current_component_context,
@ -11,20 +10,7 @@ import {
} from '../../runtime.js';
import { destroy_effect, pause_effect, render_effect } from '../../reactivity/effects.js';
import { DESTROYED, INERT } from '../../constants.js';
/** @returns {import('../../types.js').AwaitBlock} */
export function create_await_block() {
return {
// dom
d: null,
// effect
e: null,
// parent
p: /** @type {import('../../types.js').Block} */ (current_block),
// pending
n: true
};
}
import { create_block } from './utils.js';
/**
* @template V
@ -36,7 +22,7 @@ export function create_await_block() {
* @returns {void}
*/
export function await_block(anchor, get_input, pending_fn, then_fn, catch_fn) {
const block = create_await_block();
const block = create_block();
const component_context = current_component_context;

18
packages/svelte/src/internal/client/dom/blocks/if.js
Unescape View File

@ -6,27 +6,13 @@ import {
set_current_hydration_fragment
} from '../hydration.js';
import { remove } from '../reconciler.js';
import { current_block } from '../../runtime.js';
import {
destroy_effect,
pause_effect,
render_effect,
resume_effect
} from '../../reactivity/effects.js';
/** @returns {import('#client').IfBlock} */
function create_if_block() {
return {
// dom
d: null,
// effect
e: null,
// parent
p: /** @type {import('#client').Block} */ (current_block),
// value
v: false
};
}
import { create_block } from './utils.js';
/**
* @param {Comment} anchor
@ -37,7 +23,7 @@ function create_if_block() {
* @returns {void}
*/
export function if_block(anchor, get_condition, consequent_fn, alternate_fn, elseif = false) {
const block = create_if_block();
const block = create_block();
hydrate_block_anchor(anchor);

4
packages/svelte/src/internal/client/dom/blocks/key.js
Unescape View File

@ -3,6 +3,7 @@ import { hydrate_block_anchor } from '../hydration.js';
import { remove } from '../reconciler.js';
import { pause_effect, render_effect } from '../../reactivity/effects.js';
import { safe_not_equal } from '../../reactivity/equality.js';
import { create_block } from './utils.js';
/**
* @template V
@ -12,7 +13,7 @@ import { safe_not_equal } from '../../reactivity/equality.js';
* @returns {void}
*/
export function key_block(anchor, get_key, render_fn) {
const block = {};
const block = create_block();
hydrate_block_anchor(anchor);
@ -43,7 +44,6 @@ export function key_block(anchor, get_key, render_fn) {
() => {
render_fn(anchor);
// @ts-expect-error TODO this should be unnecessary
const dom = block.d;
return () => {

13
packages/svelte/src/internal/client/dom/blocks/snippet.js
Unescape View File

@ -1,6 +1,7 @@
import { render_effect } from '../../reactivity/effects.js';
import { remove } from '../reconciler.js';
import { current_block, untrack } from '../../runtime.js';
import { untrack } from '../../runtime.js';
import { create_block } from './utils.js';
/**
* @param {() => Function | null | undefined} get_snippet
@ -9,15 +10,7 @@ import { current_block, untrack } from '../../runtime.js';
* @returns {void}
*/
export function snippet(get_snippet, node, ...args) {
/** @type {import('#client').SnippetBlock} */
const block = {
// dom
d: null,
// parent
p: /** @type {import('#client').Block} */ (current_block),
// effect
e: null
};
const block = create_block();
render_effect(() => {
// Only rerender when the snippet function itself changes,

4
packages/svelte/src/internal/client/dom/blocks/svelte-component.js
Unescape View File

@ -1,6 +1,7 @@
import { hydrate_block_anchor } from '../hydration.js';
import { pause_effect, render_effect } from '../../reactivity/effects.js';
import { remove } from '../reconciler.js';
import { create_block } from './utils.js';
// TODO this is very similar to `key`, can we deduplicate?
@ -13,7 +14,7 @@ import { remove } from '../reconciler.js';
* @returns {void}
*/
export function component(anchor, get_component, render_fn) {
const block = {};
const block = create_block();
hydrate_block_anchor(anchor);
@ -46,7 +47,6 @@ export function component(anchor, get_component, render_fn) {
() => {
render_fn(component);
// @ts-expect-error TODO this should be unnecessary
const dom = block.d;
return () => {

12
packages/svelte/src/internal/client/dom/blocks/svelte-element.js
Unescape View File

@ -8,10 +8,10 @@ import {
resume_effect
} from '../../reactivity/effects.js';
import { remove } from '../reconciler.js';
import { current_block } from '../../runtime.js';
import { is_array } from '../../utils.js';
import { set_should_intro } from '../../render.js';
import { current_each_item_block, set_current_each_item_block } from './each.js';
import { create_block } from './utils.js';
/**
* @param {import('#client').Block} block
@ -41,15 +41,7 @@ function swap_block_dom(block, from, to) {
* @returns {void}
*/
export function element(anchor, get_tag, is_svg, render_fn) {
/** @type {import('#client').DynamicElementBlock} */
const block = {
// dom
d: null,
// effect
e: null,
// parent
p: /** @type {import('#client').Block} */ (current_block)
};
const block = create_block();
hydrate_block_anchor(anchor);

12
packages/svelte/src/internal/client/dom/blocks/svelte-head.js
Unescape View File

@ -7,22 +7,14 @@ import {
import { empty } from '../operations.js';
import { render_effect } from '../../reactivity/effects.js';
import { remove } from '../reconciler.js';
import { current_block } from '../../runtime.js';
import { create_block } from './utils.js';
/**
* @param {(anchor: Node | null) => void} render_fn
* @returns {void}
*/
export function head(render_fn) {
/** @type {import('#client').HeadBlock} */
const block = {
// dom
d: null,
// effect
e: null,
// parent
p: /** @type {import('#client').Block} */ (current_block)
};
const block = create_block();
// The head function may be called after the first hydration pass and ssr comment nodes may still be present,
// therefore we need to skip that when we detect that we're not in hydration mode.

13
packages/svelte/src/internal/client/dom/blocks/utils.js
Unescape View File

@ -0,0 +1,13 @@
import { current_block } from '../../runtime.js';
/** @returns {import('#client').NormalBlock} */
export function create_block() {
return {
// dom
d: null,
// effect
e: null,
// parent
p: /** @type {import('#client').Block} */ (current_block)
};
}

2
packages/svelte/src/internal/client/render.js
Unescape View File

@ -217,8 +217,6 @@ function _mount(Component, options) {
d: null,
// effect
e: null,
// intro
i: options.intro || false,
// parent
p: null
};

74
packages/svelte/src/internal/client/types.d.ts vendored
Unescape View File

@ -49,65 +49,23 @@ export type Equals = (this: Value, value: unknown) => boolean;
export type TemplateNode = Text | Element | Comment;
export type RootBlock = {
/** dom */
d: null | TemplateNode | Array<TemplateNode>;
/** effect */
e: null | Effect;
/** intro */
i: boolean;
/** parent */
p: null;
};
export type IfBlock = {
/** value */
v: boolean;
/** dom */
d: null | TemplateNode | Array<TemplateNode>;
/** effect */
e: null | Effect;
/** parent */
p: Block;
};
export type HeadBlock = {
/** dom */
d: null | TemplateNode | Array<TemplateNode>;
/** effect */
e: null | Effect;
/** parent */
p: Block;
};
export type DynamicElementBlock = {
/** dom */
d: null | TemplateNode | Array<TemplateNode>;
/** effect */
e: null | Effect;
/** parent */
p: Block;
};
export type DynamicComponentBlock = {
export interface NormalBlock {
/** dom */
d: null | TemplateNode | Array<TemplateNode>;
/** effect */
e: null | Effect;
/** parent */
p: Block;
};
}
export type AwaitBlock = {
export interface RootBlock {
/** dom */
d: null | TemplateNode | Array<TemplateNode>;
/** effect */
e: null | Effect;
/** parent */
p: Block;
/** pending */
n: boolean;
};
p: null;
}
export type EachBlock = {
/** flags */
@ -116,7 +74,7 @@ export type EachBlock = {
d: null | TemplateNode | Array<TemplateNode>;
/** items */
v: EachItemBlock[];
/** effewct */
/** effect */
e: null | Effect;
/** parent */
p: Block;
@ -137,25 +95,7 @@ export type EachItemBlock = {
k: unknown;
};
export type SnippetBlock = {
/** dom */
d: null | TemplateNode | Array<TemplateNode>;
/** parent */
p: Block;
/** effect */
e: null | Effect;
};
export type Block =
| RootBlock
| IfBlock
| AwaitBlock
| DynamicElementBlock
| DynamicComponentBlock
| HeadBlock
| EachBlock
| EachItemBlock
| SnippetBlock;
export type Block = RootBlock | NormalBlock | EachBlock | EachItemBlock;
export interface TransitionManager {
/** Whether the `global` modifier was used (i.e. `transition:fade|global`) */

Write Preview
Loading…
Cancel
Save