mirror of https://github.com/sveltejs/svelte
Simon Holthausen
2 years ago
commit
a825d457ab
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: improve bind:this support around proxyied state
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
feat: add reactive Set class to svelte/reactivity
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
perf: bail early when traversing non-state
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: better ownership mutation validation
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: bump specificity on all members of a selector list
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
breaking: preserve slots inside templates with a shadowrootmode attribute
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
breaking: make `$props()` rune non-generic
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: improve namespace inference when having `{@render}` and `{@html}` tags
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: don't collapse whitespace within text nodes
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
feat: improve ssr html mismatch validation
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: invalidate store when mutated inside each block
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
chore: custom elements validation
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: improve event delegation with shadowed bindings
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: prevent reactive statement reruns when they have indirect cyclic dependencies
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
feat: add reactive Date object to svelte/reactivity
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: improve ssr output of dynamic textarea elements
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: make `set.has(...)` granular for existing properties'
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: ensure performance.now() and requestAnimationFrame() are polyfilled in ssr
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: handle TypeScript's optional parameter syntax in snippets
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: improve ssr code generation for class property $derived
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: use getters for derived class state fields, with memoisation
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: adjust keyed each block equality handling
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: eagerly unsubscribe when store is changed
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: warn when `$props` rune not called
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: error when exporting reassigned state from module context
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: improve internal render effect sequencing
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: improve indexed each equality
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: improve derived rune destructuring support
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: adjust render effect ordering
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
feat: allow arbitrary call expressions and optional chaining for snippets
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: add `$set` and `$on` methods in legacy compat mode
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: deduplicate generated props and action arg names
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: prevent snippet children conflict
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: improve deep_read performance
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: handle component binding mutation
|
||||
@ -1,93 +0,0 @@
|
||||
import {
|
||||
ROOT_BLOCK,
|
||||
HEAD_BLOCK,
|
||||
DYNAMIC_ELEMENT_BLOCK,
|
||||
DYNAMIC_COMPONENT_BLOCK,
|
||||
SNIPPET_BLOCK
|
||||
} from './constants.js';
|
||||
import { current_block } from './runtime.js';
|
||||
|
||||
/**
|
||||
* @param {boolean} intro
|
||||
* @returns {import('./types.js').RootBlock}
|
||||
*/
|
||||
export function create_root_block(intro) {
|
||||
return {
|
||||
// dom
|
||||
d: null,
|
||||
// effect
|
||||
e: null,
|
||||
// intro
|
||||
i: intro,
|
||||
// parent
|
||||
p: null,
|
||||
// transition
|
||||
r: null,
|
||||
// type
|
||||
t: ROOT_BLOCK
|
||||
};
|
||||
}
|
||||
|
||||
/** @returns {import('./types.js').HeadBlock} */
|
||||
export function create_head_block() {
|
||||
return {
|
||||
// dom
|
||||
d: null,
|
||||
// effect
|
||||
e: null,
|
||||
// parent
|
||||
p: /** @type {import('./types.js').Block} */ (current_block),
|
||||
// transition
|
||||
r: null,
|
||||
// type
|
||||
t: HEAD_BLOCK
|
||||
};
|
||||
}
|
||||
|
||||
/** @returns {import('./types.js').DynamicElementBlock} */
|
||||
export function create_dynamic_element_block() {
|
||||
return {
|
||||
// dom
|
||||
d: null,
|
||||
// effect
|
||||
e: null,
|
||||
// parent
|
||||
p: /** @type {import('./types.js').Block} */ (current_block),
|
||||
// transition
|
||||
r: null,
|
||||
// type
|
||||
t: DYNAMIC_ELEMENT_BLOCK
|
||||
};
|
||||
}
|
||||
|
||||
/** @returns {import('./types.js').DynamicComponentBlock} */
|
||||
export function create_dynamic_component_block() {
|
||||
return {
|
||||
// dom
|
||||
d: null,
|
||||
// effect
|
||||
e: null,
|
||||
// parent
|
||||
p: /** @type {import('./types.js').Block} */ (current_block),
|
||||
// transition
|
||||
r: null,
|
||||
// type
|
||||
t: DYNAMIC_COMPONENT_BLOCK
|
||||
};
|
||||
}
|
||||
|
||||
/** @returns {import('./types.js').SnippetBlock} */
|
||||
export function create_snippet_block() {
|
||||
return {
|
||||
// dom
|
||||
d: null,
|
||||
// parent
|
||||
p: /** @type {import('./types.js').Block} */ (current_block),
|
||||
// effect
|
||||
e: null,
|
||||
// transition
|
||||
r: null,
|
||||
// type
|
||||
t: SNIPPET_BLOCK
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
import { namespace_svg } from '../../../../constants.js';
|
||||
import { current_hydration_fragment, hydrate_block_anchor, hydrating } from '../hydration.js';
|
||||
import { empty } from '../operations.js';
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
import { insert, remove } from '../reconciler.js';
|
||||
|
||||
/**
|
||||
* @param {Element | Text | Comment} anchor
|
||||
* @param {boolean} is_html
|
||||
* @param {() => Record<string, string>} props
|
||||
* @param {(anchor: Element | Text | Comment) => any} component
|
||||
* @returns {void}
|
||||
*/
|
||||
export function css_props(anchor, is_html, props, component) {
|
||||
hydrate_block_anchor(anchor);
|
||||
|
||||
/** @type {HTMLElement | SVGElement} */
|
||||
let tag;
|
||||
|
||||
/** @type {Text | Comment} */
|
||||
let component_anchor;
|
||||
|
||||
if (hydrating) {
|
||||
// Hydration: css props element is surrounded by a ssr comment ...
|
||||
tag = /** @type {HTMLElement | SVGElement} */ (current_hydration_fragment[0]);
|
||||
// ... and the child(ren) of the css props element is also surround by a ssr comment
|
||||
component_anchor = /** @type {Comment} */ (tag.firstChild);
|
||||
} else {
|
||||
if (is_html) {
|
||||
tag = document.createElement('div');
|
||||
tag.style.display = 'contents';
|
||||
} else {
|
||||
tag = document.createElementNS(namespace_svg, 'g');
|
||||
}
|
||||
|
||||
insert(tag, null, anchor);
|
||||
component_anchor = empty();
|
||||
tag.appendChild(component_anchor);
|
||||
}
|
||||
|
||||
component(component_anchor);
|
||||
|
||||
/** @type {Record<string, string>} */
|
||||
let current_props = {};
|
||||
|
||||
const effect = render_effect(() => {
|
||||
const next_props = props();
|
||||
|
||||
for (const key in current_props) {
|
||||
if (!(key in next_props)) {
|
||||
tag.style.removeProperty(key);
|
||||
}
|
||||
}
|
||||
|
||||
for (const key in next_props) {
|
||||
tag.style.setProperty(key, next_props[key]);
|
||||
}
|
||||
|
||||
current_props = next_props;
|
||||
});
|
||||
|
||||
effect.ondestroy = () => {
|
||||
remove(tag);
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
import { reconcile_html, remove } from '../reconciler.js';
|
||||
|
||||
/**
|
||||
* @param {Element | Text | Comment} dom
|
||||
* @param {() => string} get_value
|
||||
* @param {boolean} svg
|
||||
* @returns {void}
|
||||
*/
|
||||
export function html(dom, get_value, svg) {
|
||||
/** @type {import('#client').TemplateNode | import('#client').TemplateNode[]} */
|
||||
let html_dom;
|
||||
|
||||
/** @type {string} */
|
||||
let value;
|
||||
|
||||
const effect = render_effect(() => {
|
||||
if (value !== (value = get_value())) {
|
||||
if (html_dom) remove(html_dom);
|
||||
html_dom = reconcile_html(dom, value, svg);
|
||||
}
|
||||
});
|
||||
|
||||
effect.ondestroy = () => {
|
||||
if (html_dom) {
|
||||
remove(html_dom);
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
import { SNIPPET_BLOCK } from '../../constants.js';
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
import { remove } from '../reconciler.js';
|
||||
import { current_block, untrack } from '../../runtime.js';
|
||||
|
||||
/**
|
||||
* @param {() => Function | null | undefined} get_snippet
|
||||
* @param {Node} node
|
||||
* @param {(() => any)[]} args
|
||||
* @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,
|
||||
// transition
|
||||
r: null,
|
||||
// type
|
||||
t: SNIPPET_BLOCK
|
||||
};
|
||||
|
||||
render_effect(() => {
|
||||
// Only rerender when the snippet function itself changes,
|
||||
// not when an eagerly-read prop inside the snippet function changes
|
||||
const snippet = get_snippet();
|
||||
if (snippet) {
|
||||
untrack(() => snippet(node, ...args));
|
||||
}
|
||||
return () => {
|
||||
if (block.d !== null) {
|
||||
remove(block.d);
|
||||
}
|
||||
};
|
||||
}, block);
|
||||
}
|
||||
@ -0,0 +1,147 @@
|
||||
import { DYNAMIC_COMPONENT_BLOCK } from '../../constants.js';
|
||||
import { hydrate_block_anchor } from '../hydration.js';
|
||||
import { destroy_effect, render_effect } from '../../reactivity/effects.js';
|
||||
import { remove } from '../reconciler.js';
|
||||
import { current_block, execute_effect } from '../../runtime.js';
|
||||
import { trigger_transitions } from '../elements/transitions.js';
|
||||
|
||||
/**
|
||||
* @template P
|
||||
* @param {Comment} anchor_node
|
||||
* @param {() => (props: P) => void} component_fn
|
||||
* @param {(component: (props: P) => void) => void} render_fn
|
||||
* @returns {void}
|
||||
*/
|
||||
export function component(anchor_node, component_fn, render_fn) {
|
||||
/** @type {import('#client').DynamicComponentBlock} */
|
||||
const block = {
|
||||
// dom
|
||||
d: null,
|
||||
// effect
|
||||
e: null,
|
||||
// parent
|
||||
p: /** @type {import('#client').Block} */ (current_block),
|
||||
// transition
|
||||
r: null,
|
||||
// type
|
||||
t: DYNAMIC_COMPONENT_BLOCK
|
||||
};
|
||||
|
||||
/** @type {null | import('#client').Render} */
|
||||
let current_render = null;
|
||||
hydrate_block_anchor(anchor_node);
|
||||
|
||||
/** @type {null | ((props: P) => void)} */
|
||||
let component = null;
|
||||
|
||||
block.r =
|
||||
/**
|
||||
* @param {import('#client').Transition} transition
|
||||
* @returns {void}
|
||||
*/
|
||||
(transition) => {
|
||||
const render = /** @type {import('#client').Render} */ (current_render);
|
||||
const transitions = render.s;
|
||||
transitions.add(transition);
|
||||
transition.f(() => {
|
||||
transitions.delete(transition);
|
||||
if (transitions.size === 0) {
|
||||
// If the current render has changed since, then we can remove the old render
|
||||
// effect as it's stale.
|
||||
if (current_render !== render && render.e !== null) {
|
||||
if (render.d !== null) {
|
||||
remove(render.d);
|
||||
render.d = null;
|
||||
}
|
||||
destroy_effect(render.e);
|
||||
render.e = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const create_render_effect = () => {
|
||||
/** @type {import('#client').Render} */
|
||||
const render = {
|
||||
d: null,
|
||||
e: null,
|
||||
s: new Set(),
|
||||
p: current_render
|
||||
};
|
||||
|
||||
// Managed effect
|
||||
render.e = render_effect(
|
||||
() => {
|
||||
const current = block.d;
|
||||
if (current !== null) {
|
||||
remove(current);
|
||||
block.d = null;
|
||||
}
|
||||
if (component) {
|
||||
render_fn(component);
|
||||
}
|
||||
render.d = block.d;
|
||||
block.d = null;
|
||||
},
|
||||
block,
|
||||
true
|
||||
);
|
||||
|
||||
current_render = render;
|
||||
};
|
||||
|
||||
const render = () => {
|
||||
const render = current_render;
|
||||
|
||||
if (render === null) {
|
||||
create_render_effect();
|
||||
return;
|
||||
}
|
||||
|
||||
const transitions = render.s;
|
||||
|
||||
if (transitions.size === 0) {
|
||||
if (render.d !== null) {
|
||||
remove(render.d);
|
||||
render.d = null;
|
||||
}
|
||||
if (render.e) {
|
||||
execute_effect(render.e);
|
||||
} else {
|
||||
create_render_effect();
|
||||
}
|
||||
} else {
|
||||
create_render_effect();
|
||||
trigger_transitions(transitions, 'out');
|
||||
}
|
||||
};
|
||||
|
||||
const component_effect = render_effect(
|
||||
() => {
|
||||
const next_component = component_fn();
|
||||
if (component !== next_component) {
|
||||
component = next_component;
|
||||
render();
|
||||
}
|
||||
},
|
||||
block,
|
||||
false
|
||||
);
|
||||
|
||||
component_effect.ondestroy = () => {
|
||||
let render = current_render;
|
||||
while (render !== null) {
|
||||
const dom = render.d;
|
||||
if (dom !== null) {
|
||||
remove(dom);
|
||||
}
|
||||
const effect = render.e;
|
||||
if (effect !== null) {
|
||||
destroy_effect(effect);
|
||||
}
|
||||
render = render.p;
|
||||
}
|
||||
};
|
||||
|
||||
block.e = component_effect;
|
||||
}
|
||||
@ -0,0 +1,139 @@
|
||||
import { namespace_svg } from '../../../../constants.js';
|
||||
import { DYNAMIC_ELEMENT_BLOCK } from '../../constants.js';
|
||||
import { current_hydration_fragment, hydrate_block_anchor, hydrating } from '../hydration.js';
|
||||
import { empty } from '../operations.js';
|
||||
import { destroy_effect, render_effect } from '../../reactivity/effects.js';
|
||||
import { insert, remove } from '../reconciler.js';
|
||||
import { current_block, execute_effect } from '../../runtime.js';
|
||||
import { is_array } from '../../utils.js';
|
||||
|
||||
/**
|
||||
* @param {import('#client').Block} block
|
||||
* @param {Element} from
|
||||
* @param {Element} to
|
||||
* @returns {void}
|
||||
*/
|
||||
function swap_block_dom(block, from, to) {
|
||||
const dom = block.d;
|
||||
if (is_array(dom)) {
|
||||
for (let i = 0; i < dom.length; i++) {
|
||||
if (dom[i] === from) {
|
||||
dom[i] = to;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (dom === from) {
|
||||
block.d = to;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Comment} anchor_node
|
||||
* @param {() => string} tag_fn
|
||||
* @param {boolean | null} is_svg `null` == not statically known
|
||||
* @param {undefined | ((element: Element, anchor: Node) => void)} render_fn
|
||||
* @returns {void}
|
||||
*/
|
||||
export function element(anchor_node, tag_fn, is_svg, render_fn) {
|
||||
/** @type {import('#client').DynamicElementBlock} */
|
||||
const block = {
|
||||
// dom
|
||||
d: null,
|
||||
// effect
|
||||
e: null,
|
||||
// parent
|
||||
p: /** @type {import('#client').Block} */ (current_block),
|
||||
// transition
|
||||
r: null,
|
||||
// type
|
||||
t: DYNAMIC_ELEMENT_BLOCK
|
||||
};
|
||||
|
||||
hydrate_block_anchor(anchor_node);
|
||||
let has_mounted = false;
|
||||
|
||||
/** @type {string} */
|
||||
let tag;
|
||||
|
||||
/** @type {null | Element} */
|
||||
let element = null;
|
||||
|
||||
const element_effect = render_effect(
|
||||
() => {
|
||||
tag = tag_fn();
|
||||
if (has_mounted) {
|
||||
execute_effect(render_effect_signal);
|
||||
}
|
||||
has_mounted = true;
|
||||
},
|
||||
block,
|
||||
false
|
||||
);
|
||||
|
||||
// Managed effect
|
||||
const render_effect_signal = render_effect(
|
||||
() => {
|
||||
// We try our best infering the namespace in case it's not possible to determine statically,
|
||||
// but on the first render on the client (without hydration) the parent will be undefined,
|
||||
// since the anchor is not attached to its parent / the dom yet.
|
||||
const ns =
|
||||
is_svg || tag === 'svg'
|
||||
? namespace_svg
|
||||
: is_svg === false || anchor_node.parentElement?.tagName === 'foreignObject'
|
||||
? null
|
||||
: anchor_node.parentElement?.namespaceURI ?? null;
|
||||
|
||||
const next_element = tag
|
||||
? hydrating
|
||||
? /** @type {Element} */ (current_hydration_fragment[0])
|
||||
: ns
|
||||
? document.createElementNS(ns, tag)
|
||||
: document.createElement(tag)
|
||||
: null;
|
||||
|
||||
const prev_element = element;
|
||||
if (prev_element !== null) {
|
||||
block.d = null;
|
||||
}
|
||||
|
||||
element = next_element;
|
||||
if (element !== null && render_fn !== undefined) {
|
||||
let anchor;
|
||||
if (hydrating) {
|
||||
// Use the existing ssr comment as the anchor so that the inner open and close
|
||||
// methods can pick up the existing nodes correctly
|
||||
anchor = /** @type {Comment} */ (element.firstChild);
|
||||
} else {
|
||||
anchor = empty();
|
||||
element.appendChild(anchor);
|
||||
}
|
||||
render_fn(element, anchor);
|
||||
}
|
||||
|
||||
const has_prev_element = prev_element !== null;
|
||||
if (has_prev_element) {
|
||||
remove(prev_element);
|
||||
}
|
||||
if (element !== null) {
|
||||
insert(element, null, anchor_node);
|
||||
if (has_prev_element) {
|
||||
const parent_block = block.p;
|
||||
swap_block_dom(parent_block, prev_element, element);
|
||||
}
|
||||
}
|
||||
},
|
||||
block,
|
||||
true
|
||||
);
|
||||
|
||||
element_effect.ondestroy = () => {
|
||||
if (element !== null) {
|
||||
remove(element);
|
||||
block.d = null;
|
||||
element = null;
|
||||
}
|
||||
destroy_effect(render_effect_signal);
|
||||
};
|
||||
|
||||
block.e = element_effect;
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
import { HEAD_BLOCK } from '../../constants.js';
|
||||
import {
|
||||
current_hydration_fragment,
|
||||
get_hydration_fragment,
|
||||
hydrating,
|
||||
set_current_hydration_fragment
|
||||
} from '../hydration.js';
|
||||
import { empty } from '../operations.js';
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
import { remove } from '../reconciler.js';
|
||||
import { current_block } from '../../runtime.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),
|
||||
// transition
|
||||
r: null,
|
||||
// type
|
||||
t: HEAD_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.
|
||||
let hydration_fragment = null;
|
||||
let previous_hydration_fragment = null;
|
||||
|
||||
let is_hydrating = hydrating;
|
||||
if (is_hydrating) {
|
||||
hydration_fragment = get_hydration_fragment(document.head.firstChild);
|
||||
previous_hydration_fragment = current_hydration_fragment;
|
||||
set_current_hydration_fragment(hydration_fragment);
|
||||
}
|
||||
|
||||
try {
|
||||
const head_effect = render_effect(
|
||||
() => {
|
||||
const current = block.d;
|
||||
if (current !== null) {
|
||||
remove(current);
|
||||
block.d = null;
|
||||
}
|
||||
let anchor = null;
|
||||
if (!hydrating) {
|
||||
anchor = empty();
|
||||
document.head.appendChild(anchor);
|
||||
}
|
||||
render_fn(anchor);
|
||||
},
|
||||
block,
|
||||
false
|
||||
);
|
||||
|
||||
head_effect.ondestroy = () => {
|
||||
const current = block.d;
|
||||
if (current !== null) {
|
||||
remove(current);
|
||||
}
|
||||
};
|
||||
|
||||
block.e = head_effect;
|
||||
} finally {
|
||||
if (is_hydrating) {
|
||||
set_current_hydration_fragment(previous_hydration_fragment);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
import { effect } from '../../reactivity/effects.js';
|
||||
import { deep_read_state, untrack } from '../../runtime.js';
|
||||
|
||||
/**
|
||||
* @template P
|
||||
* @param {Element} dom
|
||||
* @param {(dom: Element, value?: P) => import('#client').ActionPayload<P>} action
|
||||
* @param {() => P} [value_fn]
|
||||
* @returns {void}
|
||||
*/
|
||||
export function action(dom, action, value_fn) {
|
||||
/** @type {undefined | import('#client').ActionPayload<P>} */
|
||||
var payload = undefined;
|
||||
var needs_deep_read = false;
|
||||
|
||||
// Action could come from a prop, therefore could be a signal, therefore untrack
|
||||
// TODO we could take advantage of this and enable https://github.com/sveltejs/svelte/issues/6942
|
||||
effect(() => {
|
||||
if (value_fn) {
|
||||
var value = value_fn();
|
||||
untrack(() => {
|
||||
if (payload === undefined) {
|
||||
payload = action(dom, value) || {};
|
||||
needs_deep_read = !!payload?.update;
|
||||
} else {
|
||||
var update = payload.update;
|
||||
if (typeof update === 'function') {
|
||||
update(value);
|
||||
}
|
||||
}
|
||||
});
|
||||
// Action's update method is coarse-grained, i.e. when anything in the passed value changes, update.
|
||||
// This works in legacy mode because of mutable_source being updated as a whole, but when using $state
|
||||
// together with actions and mutation, it wouldn't notice the change without a deep read.
|
||||
if (needs_deep_read) {
|
||||
deep_read_state(value);
|
||||
}
|
||||
} else {
|
||||
untrack(() => (payload = action(dom)));
|
||||
}
|
||||
});
|
||||
|
||||
effect(() => {
|
||||
if (payload !== undefined) {
|
||||
var destroy = payload.destroy;
|
||||
if (typeof destroy === 'function') {
|
||||
return () => {
|
||||
/** @type {Function} */ (destroy)();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,362 @@
|
||||
import { DEV } from 'esm-env';
|
||||
import { hydrating } from '../hydration.js';
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
import { get_descriptors, map_get, map_set, object_assign } from '../../utils.js';
|
||||
import { AttributeAliases, DelegatedEvents, namespace_svg } from '../../../../constants.js';
|
||||
import { delegate } from './events.js';
|
||||
import { autofocus } from './misc.js';
|
||||
|
||||
/**
|
||||
* The value/checked attribute in the template actually corresponds to the defaultValue property, so we need
|
||||
* to remove it upon hydration to avoid a bug when someone resets the form value.
|
||||
* @param {HTMLInputElement | HTMLSelectElement} dom
|
||||
* @returns {void}
|
||||
*/
|
||||
export function remove_input_attr_defaults(dom) {
|
||||
if (hydrating) {
|
||||
attr(dom, 'value', null);
|
||||
attr(dom, 'checked', null);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} attribute
|
||||
* @param {() => string} value
|
||||
*/
|
||||
export function attr_effect(dom, attribute, value) {
|
||||
render_effect(() => {
|
||||
attr(dom, attribute, value());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} attribute
|
||||
* @param {string | null} value
|
||||
*/
|
||||
export function attr(dom, attribute, value) {
|
||||
value = value == null ? null : value + '';
|
||||
|
||||
if (DEV) {
|
||||
check_src_in_dev_hydration(dom, attribute, value);
|
||||
}
|
||||
|
||||
if (
|
||||
!hydrating ||
|
||||
(dom.getAttribute(attribute) !== value &&
|
||||
// If we reset those, they would result in another network request, which we want to avoid.
|
||||
// We assume they are the same between client and server as checking if they are equal is expensive
|
||||
// (we can't just compare the strings as they can be different between client and server but result in the
|
||||
// same url, so we would need to create hidden anchor elements to compare them)
|
||||
attribute !== 'src' &&
|
||||
attribute !== 'href' &&
|
||||
attribute !== 'srcset')
|
||||
) {
|
||||
if (value === null) {
|
||||
dom.removeAttribute(attribute);
|
||||
} else {
|
||||
dom.setAttribute(attribute, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} attribute
|
||||
* @param {() => string} value
|
||||
*/
|
||||
export function xlink_attr_effect(dom, attribute, value) {
|
||||
render_effect(() => {
|
||||
xlink_attr(dom, attribute, value());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} attribute
|
||||
* @param {string} value
|
||||
*/
|
||||
export function xlink_attr(dom, attribute, value) {
|
||||
dom.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} node
|
||||
* @param {string} prop
|
||||
* @param {() => any} value
|
||||
*/
|
||||
export function set_custom_element_data_effect(node, prop, value) {
|
||||
render_effect(() => {
|
||||
set_custom_element_data(node, prop, value());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} node
|
||||
* @param {string} prop
|
||||
* @param {any} value
|
||||
*/
|
||||
export function set_custom_element_data(node, prop, value) {
|
||||
if (prop in node) {
|
||||
node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value;
|
||||
} else {
|
||||
attr(node, prop, value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Like `spread_attributes` but self-contained
|
||||
* @param {Element & ElementCSSInlineStyle} dom
|
||||
* @param {() => Record<string, unknown>[]} attrs
|
||||
* @param {boolean} lowercase_attributes
|
||||
* @param {string} css_hash
|
||||
*/
|
||||
export function spread_attributes_effect(dom, attrs, lowercase_attributes, css_hash) {
|
||||
/** @type {Record<string, any> | undefined} */
|
||||
var current;
|
||||
|
||||
render_effect(() => {
|
||||
current = spread_attributes(dom, current, attrs(), lowercase_attributes, css_hash);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Spreads attributes onto a DOM element, taking into account the currently set attributes
|
||||
* @param {Element & ElementCSSInlineStyle} dom
|
||||
* @param {Record<string, unknown> | undefined} prev
|
||||
* @param {Record<string, unknown>[]} attrs
|
||||
* @param {boolean} lowercase_attributes
|
||||
* @param {string} css_hash
|
||||
* @returns {Record<string, unknown>}
|
||||
*/
|
||||
export function spread_attributes(dom, prev, attrs, lowercase_attributes, css_hash) {
|
||||
var next = object_assign({}, ...attrs);
|
||||
var has_hash = css_hash.length !== 0;
|
||||
|
||||
for (var key in prev) {
|
||||
if (!(key in next)) {
|
||||
next[key] = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (has_hash && !next.class) {
|
||||
next.class = '';
|
||||
}
|
||||
|
||||
var setters = map_get(setters_cache, dom.nodeName);
|
||||
if (!setters) map_set(setters_cache, dom.nodeName, (setters = get_setters(dom)));
|
||||
|
||||
for (key in next) {
|
||||
var value = next[key];
|
||||
if (value === prev?.[key]) continue;
|
||||
|
||||
var prefix = key[0] + key[1]; // this is faster than key.slice(0, 2)
|
||||
if (prefix === '$$') continue;
|
||||
|
||||
if (prefix === 'on') {
|
||||
/** @type {{ capture?: true }} */
|
||||
var opts = {};
|
||||
var event_name = key.slice(2);
|
||||
var delegated = DelegatedEvents.includes(event_name);
|
||||
|
||||
if (
|
||||
event_name.endsWith('capture') &&
|
||||
event_name !== 'ongotpointercapture' &&
|
||||
event_name !== 'onlostpointercapture'
|
||||
) {
|
||||
event_name = event_name.slice(0, -7);
|
||||
opts.capture = true;
|
||||
}
|
||||
|
||||
if (!delegated && prev?.[key]) {
|
||||
dom.removeEventListener(event_name, /** @type {any} */ (prev[key]), opts);
|
||||
}
|
||||
|
||||
if (value != null) {
|
||||
if (!delegated) {
|
||||
dom.addEventListener(event_name, value, opts);
|
||||
} else {
|
||||
// @ts-ignore
|
||||
dom[`__${event_name}`] = value;
|
||||
delegate([event_name]);
|
||||
}
|
||||
}
|
||||
} else if (value == null) {
|
||||
dom.removeAttribute(key);
|
||||
} else if (key === 'style') {
|
||||
dom.style.cssText = value + '';
|
||||
} else if (key === 'autofocus') {
|
||||
autofocus(/** @type {HTMLElement} */ (dom), Boolean(value));
|
||||
} else if (key === '__value' || key === 'value') {
|
||||
// @ts-ignore
|
||||
dom.value = dom[key] = dom.__value = value;
|
||||
} else {
|
||||
var name = key;
|
||||
if (lowercase_attributes) {
|
||||
name = name.toLowerCase();
|
||||
name = AttributeAliases[name] || name;
|
||||
}
|
||||
|
||||
if (setters.includes(name)) {
|
||||
if (DEV) {
|
||||
check_src_in_dev_hydration(dom, name, value);
|
||||
}
|
||||
|
||||
if (
|
||||
!hydrating ||
|
||||
// @ts-ignore see attr method for an explanation of src/srcset
|
||||
(dom[name] !== value && name !== 'src' && name !== 'href' && name !== 'srcset')
|
||||
) {
|
||||
// @ts-ignore
|
||||
dom[name] = value;
|
||||
}
|
||||
} else if (typeof value !== 'function') {
|
||||
if (has_hash && name === 'class') {
|
||||
if (value) value += ' ';
|
||||
value += css_hash;
|
||||
}
|
||||
|
||||
attr(dom, name, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return next;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {() => Record<string, unknown>[]} attrs
|
||||
* @param {string} css_hash
|
||||
*/
|
||||
export function spread_dynamic_element_attributes_effect(node, attrs, css_hash) {
|
||||
/** @type {Record<string, any> | undefined} */
|
||||
var current;
|
||||
|
||||
render_effect(() => {
|
||||
current = spread_dynamic_element_attributes(node, current, attrs(), css_hash);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {Record<string, unknown> | undefined} prev
|
||||
* @param {Record<string, unknown>[]} attrs
|
||||
* @param {string} css_hash
|
||||
*/
|
||||
export function spread_dynamic_element_attributes(node, prev, attrs, css_hash) {
|
||||
if (node.tagName.includes('-')) {
|
||||
var next = object_assign({}, ...attrs);
|
||||
|
||||
for (var key in prev) {
|
||||
if (!(key in next)) {
|
||||
next[key] = null;
|
||||
}
|
||||
}
|
||||
|
||||
for (key in next) {
|
||||
set_custom_element_data(node, key, next[key]);
|
||||
}
|
||||
|
||||
return next;
|
||||
} else {
|
||||
return spread_attributes(
|
||||
/** @type {Element & ElementCSSInlineStyle} */ (node),
|
||||
prev,
|
||||
attrs,
|
||||
node.namespaceURI !== namespace_svg,
|
||||
css_hash
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* List of attributes that should always be set through the attr method,
|
||||
* because updating them through the property setter doesn't work reliably.
|
||||
* In the example of `width`/`height`, the problem is that the setter only
|
||||
* accepts numeric values, but the attribute can also be set to a string like `50%`.
|
||||
* If this list becomes too big, rethink this approach.
|
||||
*/
|
||||
var always_set_through_set_attribute = ['width', 'height'];
|
||||
|
||||
/** @type {Map<string, string[]>} */
|
||||
var setters_cache = new Map();
|
||||
|
||||
/** @param {Element} element */
|
||||
function get_setters(element) {
|
||||
/** @type {string[]} */
|
||||
var setters = [];
|
||||
|
||||
// @ts-expect-error
|
||||
var descriptors = get_descriptors(element.__proto__);
|
||||
|
||||
for (var key in descriptors) {
|
||||
if (descriptors[key].set && !always_set_through_set_attribute.includes(key)) {
|
||||
setters.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
return setters;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} dom
|
||||
* @param {string} attribute
|
||||
* @param {string | null} value
|
||||
*/
|
||||
function check_src_in_dev_hydration(dom, attribute, value) {
|
||||
if (!hydrating) return;
|
||||
if (attribute !== 'src' && attribute !== 'href' && attribute !== 'srcset') return;
|
||||
|
||||
if (attribute === 'srcset' && srcset_url_equal(dom, value)) return;
|
||||
if (src_url_equal(dom.getAttribute(attribute) ?? '', value ?? '')) return;
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(
|
||||
`Detected a ${attribute} attribute value change during hydration. This will not be repaired during hydration, ` +
|
||||
`the ${attribute} value that came from the server will be used. Related element:`,
|
||||
dom,
|
||||
' Differing value:',
|
||||
value
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} element_src
|
||||
* @param {string} url
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function src_url_equal(element_src, url) {
|
||||
if (element_src === url) return true;
|
||||
return new URL(element_src, document.baseURI).href === new URL(url, document.baseURI).href;
|
||||
}
|
||||
|
||||
/** @param {string} srcset */
|
||||
function split_srcset(srcset) {
|
||||
return srcset.split(',').map((src) => src.trim().split(' ').filter(Boolean));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLSourceElement | HTMLImageElement} element
|
||||
* @param {string | undefined | null} srcset
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function srcset_url_equal(element, srcset) {
|
||||
var element_urls = split_srcset(element.srcset);
|
||||
var urls = split_srcset(srcset ?? '');
|
||||
|
||||
return (
|
||||
urls.length === element_urls.length &&
|
||||
urls.every(
|
||||
([url, width], i) =>
|
||||
width === element_urls[i][1] &&
|
||||
// We need to test both ways because Vite will create an a full URL with
|
||||
// `new URL(asset, import.meta.url).href` for the client when `base: './'`, and the
|
||||
// relative URLs inside srcset are not automatically resolved to absolute URLs by
|
||||
// browsers (in contrast to img.src). This means both SSR and DOM code could
|
||||
// contain relative or absolute URLs.
|
||||
(src_url_equal(element_urls[i][0], url) || src_url_equal(url, element_urls[i][0]))
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,170 @@
|
||||
import { DEV } from 'esm-env';
|
||||
import { render_effect } from '../../../reactivity/effects.js';
|
||||
import { stringify } from '../../../render.js';
|
||||
|
||||
/**
|
||||
* @param {HTMLInputElement} input
|
||||
* @param {() => unknown} get_value
|
||||
* @param {(value: unknown) => void} update
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_value(input, get_value, update) {
|
||||
input.addEventListener('input', () => {
|
||||
if (DEV && input.type === 'checkbox') {
|
||||
throw new Error(
|
||||
'Using bind:value together with a checkbox input is not allowed. Use bind:checked instead'
|
||||
);
|
||||
}
|
||||
|
||||
update(is_numberlike_input(input) ? to_number(input.value) : input.value);
|
||||
});
|
||||
|
||||
render_effect(() => {
|
||||
if (DEV && input.type === 'checkbox') {
|
||||
throw new Error(
|
||||
'Using bind:value together with a checkbox input is not allowed. Use bind:checked instead'
|
||||
);
|
||||
}
|
||||
|
||||
var value = get_value();
|
||||
|
||||
// @ts-ignore
|
||||
input.__value = value;
|
||||
|
||||
if (is_numberlike_input(input) && value === to_number(input.value)) {
|
||||
// handles 0 vs 00 case (see https://github.com/sveltejs/svelte/issues/9959)
|
||||
return;
|
||||
}
|
||||
|
||||
if (input.type === 'date' && !value && !input.value) {
|
||||
// Handles the case where a temporarily invalid date is set (while typing, for example with a leading 0 for the day)
|
||||
// and prevents this state from clearing the other parts of the date input (see https://github.com/sveltejs/svelte/issues/7897)
|
||||
return;
|
||||
}
|
||||
|
||||
input.value = stringify(value);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array<HTMLInputElement>} inputs
|
||||
* @param {null | [number]} group_index
|
||||
* @param {HTMLInputElement} input
|
||||
* @param {() => unknown} get_value
|
||||
* @param {(value: unknown) => void} update
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_group(inputs, group_index, input, get_value, update) {
|
||||
var is_checkbox = input.getAttribute('type') === 'checkbox';
|
||||
var binding_group = inputs;
|
||||
|
||||
if (group_index !== null) {
|
||||
for (var index of group_index) {
|
||||
var group = binding_group;
|
||||
// @ts-ignore
|
||||
binding_group = group[index];
|
||||
if (binding_group === undefined) {
|
||||
// @ts-ignore
|
||||
binding_group = group[index] = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
binding_group.push(input);
|
||||
|
||||
input.addEventListener('change', () => {
|
||||
// @ts-ignore
|
||||
var value = input.__value;
|
||||
|
||||
if (is_checkbox) {
|
||||
value = get_binding_group_value(binding_group, value, input.checked);
|
||||
}
|
||||
|
||||
update(value);
|
||||
});
|
||||
|
||||
render_effect(() => {
|
||||
var value = get_value();
|
||||
|
||||
if (is_checkbox) {
|
||||
value = value || [];
|
||||
// @ts-ignore
|
||||
input.checked = value.includes(input.__value);
|
||||
} else {
|
||||
// @ts-ignore
|
||||
input.checked = input.__value === value;
|
||||
}
|
||||
});
|
||||
|
||||
render_effect(() => {
|
||||
return () => {
|
||||
var index = binding_group.indexOf(input);
|
||||
|
||||
if (index !== -1) {
|
||||
binding_group.splice(index, 1);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLInputElement} input
|
||||
* @param {() => unknown} get_value
|
||||
* @param {(value: unknown) => void} update
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_checked(input, get_value, update) {
|
||||
input.addEventListener('change', () => {
|
||||
var value = input.checked;
|
||||
update(value);
|
||||
});
|
||||
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (get_value() == undefined) {
|
||||
update(false);
|
||||
}
|
||||
|
||||
render_effect(() => {
|
||||
var value = get_value();
|
||||
input.checked = Boolean(value);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @template V
|
||||
* @param {Array<HTMLInputElement>} group
|
||||
* @param {V} __value
|
||||
* @param {boolean} checked
|
||||
* @returns {V[]}
|
||||
*/
|
||||
function get_binding_group_value(group, __value, checked) {
|
||||
var value = new Set();
|
||||
|
||||
for (var i = 0; i < group.length; i += 1) {
|
||||
if (group[i].checked) {
|
||||
// @ts-ignore
|
||||
value.add(group[i].__value);
|
||||
}
|
||||
}
|
||||
|
||||
if (!checked) {
|
||||
value.delete(__value);
|
||||
}
|
||||
|
||||
return Array.from(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLInputElement} input
|
||||
*/
|
||||
function is_numberlike_input(input) {
|
||||
var type = input.type;
|
||||
return type === 'number' || type === 'range';
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} value
|
||||
*/
|
||||
function to_number(value) {
|
||||
return value === '' ? null : +value;
|
||||
}
|
||||
@ -0,0 +1,278 @@
|
||||
import { hydrating } from '../../hydration.js';
|
||||
import { destroy_effect, managed_effect, render_effect } from '../../../reactivity/effects.js';
|
||||
import { listen } from './shared.js';
|
||||
|
||||
/** @param {TimeRanges} ranges */
|
||||
function time_ranges_to_array(ranges) {
|
||||
var array = [];
|
||||
|
||||
for (var i = 0; i < ranges.length; i += 1) {
|
||||
array.push({ start: ranges.start(i), end: ranges.end(i) });
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {() => number | undefined} get_value
|
||||
* @param {(value: number) => void} update
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_current_time(media, get_value, update) {
|
||||
/** @type {number} */
|
||||
var raf_id;
|
||||
var updating = false;
|
||||
|
||||
// Ideally, listening to timeupdate would be enough, but it fires too infrequently for the currentTime
|
||||
// binding, which is why we use a raf loop, too. We additionally still listen to timeupdate because
|
||||
// the user could be scrubbing through the video using the native controls when the media is paused.
|
||||
var callback = () => {
|
||||
cancelAnimationFrame(raf_id);
|
||||
|
||||
if (!media.paused) {
|
||||
raf_id = requestAnimationFrame(callback);
|
||||
}
|
||||
|
||||
updating = true;
|
||||
update(media.currentTime);
|
||||
};
|
||||
|
||||
raf_id = requestAnimationFrame(callback);
|
||||
media.addEventListener('timeupdate', callback);
|
||||
|
||||
render_effect(() => {
|
||||
var value = get_value();
|
||||
|
||||
// through isNaN we also allow number strings, which is more robust
|
||||
if (!updating && !isNaN(/** @type {any} */ (value))) {
|
||||
media.currentTime = /** @type {number} */ (value);
|
||||
}
|
||||
|
||||
updating = false;
|
||||
});
|
||||
|
||||
render_effect(() => () => cancelAnimationFrame(raf_id));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {(array: Array<{ start: number; end: number }>) => void} update
|
||||
*/
|
||||
export function bind_buffered(media, update) {
|
||||
listen(media, ['loadedmetadata', 'progress'], () => update(time_ranges_to_array(media.buffered)));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {(array: Array<{ start: number; end: number }>) => void} update
|
||||
*/
|
||||
export function bind_seekable(media, update) {
|
||||
listen(media, ['loadedmetadata'], () => update(time_ranges_to_array(media.seekable)));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {(array: Array<{ start: number; end: number }>) => void} update
|
||||
*/
|
||||
export function bind_played(media, update) {
|
||||
listen(media, ['timeupdate'], () => update(time_ranges_to_array(media.played)));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {(seeking: boolean) => void} update
|
||||
*/
|
||||
export function bind_seeking(media, update) {
|
||||
listen(media, ['seeking', 'seeked'], () => update(media.seeking));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {(seeking: boolean) => void} update
|
||||
*/
|
||||
export function bind_ended(media, update) {
|
||||
listen(media, ['timeupdate', 'ended'], () => update(media.ended));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {(ready_state: number) => void} update
|
||||
*/
|
||||
export function bind_ready_state(media, update) {
|
||||
listen(
|
||||
media,
|
||||
['loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'emptied'],
|
||||
() => update(media.readyState)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {() => number | undefined} get_value
|
||||
* @param {(playback_rate: number) => void} update
|
||||
*/
|
||||
export function bind_playback_rate(media, get_value, update) {
|
||||
var updating = false;
|
||||
|
||||
var callback = () => {
|
||||
if (!updating) {
|
||||
update(media.playbackRate);
|
||||
}
|
||||
updating = false;
|
||||
};
|
||||
|
||||
// Needs to happen after the element is inserted into the dom, else playback will be set back to 1 by the browser.
|
||||
// For hydration we could do it immediately but the additional code is not worth the lost microtask.
|
||||
|
||||
/** @type {import('#client').Effect | undefined} */
|
||||
var render;
|
||||
var destroyed = false;
|
||||
|
||||
var effect = managed_effect(() => {
|
||||
destroy_effect(effect);
|
||||
|
||||
if (destroyed) return;
|
||||
|
||||
if (get_value() == null) {
|
||||
callback();
|
||||
}
|
||||
|
||||
listen(media, ['ratechange'], callback, false);
|
||||
|
||||
render = render_effect(() => {
|
||||
var value = get_value();
|
||||
|
||||
// through isNaN we also allow number strings, which is more robust
|
||||
if (!isNaN(/** @type {any} */ (value)) && value !== media.playbackRate) {
|
||||
updating = true;
|
||||
media.playbackRate = /** @type {number} */ (value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
render_effect(() => () => {
|
||||
destroyed = true;
|
||||
if (render) {
|
||||
destroy_effect(render);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {() => boolean | undefined} get_value
|
||||
* @param {(paused: boolean) => void} update
|
||||
*/
|
||||
export function bind_paused(media, get_value, update) {
|
||||
var mounted = hydrating;
|
||||
var paused = get_value();
|
||||
|
||||
var callback = () => {
|
||||
if (paused !== media.paused) {
|
||||
paused = media.paused;
|
||||
update((paused = media.paused));
|
||||
}
|
||||
};
|
||||
|
||||
if (paused == null) {
|
||||
callback();
|
||||
}
|
||||
|
||||
// Defer listening if not mounted yet so that the first canplay event doesn't cause a potentially wrong update
|
||||
if (mounted) {
|
||||
// If someone switches the src while media is playing, the player will pause.
|
||||
// Listen to the canplay event to get notified of this situation.
|
||||
listen(media, ['play', 'pause', 'canplay'], callback, false);
|
||||
}
|
||||
|
||||
render_effect(() => {
|
||||
paused = !!get_value();
|
||||
|
||||
if (paused !== media.paused) {
|
||||
var toggle = () => {
|
||||
mounted = true;
|
||||
if (paused) {
|
||||
media.pause();
|
||||
} else {
|
||||
media.play().catch(() => {
|
||||
update((paused = true));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (mounted) {
|
||||
toggle();
|
||||
} else {
|
||||
// If this is the first invocation in dom mode, the media element isn't mounted yet,
|
||||
// and therefore its resource isn't loaded yet. We need to wait for the canplay event
|
||||
// in this case or else we'll get a "The play() request was interrupted by a new load request" error.
|
||||
media.addEventListener(
|
||||
'canplay',
|
||||
() => {
|
||||
listen(media, ['play', 'pause', 'canplay'], callback, false);
|
||||
toggle();
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {() => number | undefined} get_value
|
||||
* @param {(volume: number) => void} update
|
||||
*/
|
||||
export function bind_volume(media, get_value, update) {
|
||||
var updating = false;
|
||||
var callback = () => {
|
||||
updating = true;
|
||||
update(media.volume);
|
||||
};
|
||||
|
||||
if (get_value() == null) {
|
||||
callback();
|
||||
}
|
||||
|
||||
listen(media, ['volumechange'], callback, false);
|
||||
|
||||
render_effect(() => {
|
||||
var value = get_value();
|
||||
|
||||
// through isNaN we also allow number strings, which is more robust
|
||||
if (!updating && !isNaN(/** @type {any} */ (value))) {
|
||||
media.volume = /** @type {number} */ (value);
|
||||
}
|
||||
|
||||
updating = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLVideoElement | HTMLAudioElement} media
|
||||
* @param {() => boolean | undefined} get_value
|
||||
* @param {(muted: boolean) => void} update
|
||||
*/
|
||||
export function bind_muted(media, get_value, update) {
|
||||
var updating = false;
|
||||
|
||||
var callback = () => {
|
||||
updating = true;
|
||||
update(media.muted);
|
||||
};
|
||||
|
||||
if (get_value() == null) {
|
||||
callback();
|
||||
}
|
||||
|
||||
listen(media, ['volumechange'], callback, false);
|
||||
|
||||
render_effect(() => {
|
||||
var value = get_value();
|
||||
|
||||
if (!updating) media.muted = !!value;
|
||||
updating = false;
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { listen } from './shared.js';
|
||||
|
||||
/**
|
||||
* @param {(online: boolean) => void} update
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_online(update) {
|
||||
listen(window, ['online', 'offline'], () => {
|
||||
update(navigator.onLine);
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import { render_effect } from '../../../reactivity/effects.js';
|
||||
import { get_descriptor } from '../../../utils.js';
|
||||
|
||||
/**
|
||||
* Makes an `export`ed (non-prop) variable available on the `$$props` object
|
||||
* so that consumers can do `bind:x` on the component.
|
||||
* @template V
|
||||
* @param {Record<string, unknown>} props
|
||||
* @param {string} prop
|
||||
* @param {V} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_prop(props, prop, value) {
|
||||
var desc = get_descriptor(props, prop);
|
||||
|
||||
if (desc && desc.set) {
|
||||
props[prop] = value;
|
||||
render_effect(() => () => {
|
||||
props[prop] = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,116 @@
|
||||
import { effect } from '../../../reactivity/effects.js';
|
||||
|
||||
/**
|
||||
* Selects the correct option(s) (depending on whether this is a multiple select)
|
||||
* @template V
|
||||
* @param {HTMLSelectElement} select
|
||||
* @param {V} value
|
||||
* @param {boolean} [mounting]
|
||||
*/
|
||||
export function select_option(select, value, mounting) {
|
||||
if (select.multiple) {
|
||||
return select_options(select, value);
|
||||
}
|
||||
|
||||
for (var option of select.options) {
|
||||
var option_value = get_option_value(option);
|
||||
if (option_value === value) {
|
||||
option.selected = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!mounting || value !== undefined) {
|
||||
select.selectedIndex = -1; // no option should be selected
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds the containing `<select>` element and potentially updates its `selected` state.
|
||||
* @param {HTMLOptionElement} option
|
||||
* @returns {void}
|
||||
*/
|
||||
export function selected(option) {
|
||||
// Inside an effect because the element might not be connected
|
||||
// to the parent <select> yet when this is called
|
||||
effect(() => {
|
||||
var select = option.parentNode;
|
||||
|
||||
while (select != null) {
|
||||
if (select.nodeName === 'SELECT') break;
|
||||
select = select.parentNode;
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
if (select != null && option.__value === select.__value) {
|
||||
// never set to false, since this causes browser to select default option
|
||||
option.selected = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLSelectElement} select
|
||||
* @param {() => unknown} get_value
|
||||
* @param {(value: unknown) => void} update
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_select_value(select, get_value, update) {
|
||||
var mounting = true;
|
||||
|
||||
select.addEventListener('change', () => {
|
||||
/** @type {unknown} */
|
||||
var value;
|
||||
|
||||
if (select.multiple) {
|
||||
value = [].map.call(select.querySelectorAll(':checked'), get_option_value);
|
||||
} else {
|
||||
/** @type {HTMLOptionElement | null} */
|
||||
var selected_option = select.querySelector(':checked');
|
||||
value = selected_option && get_option_value(selected_option);
|
||||
}
|
||||
|
||||
update(value);
|
||||
});
|
||||
|
||||
// Needs to be an effect, not a render_effect, so that in case of each loops the logic runs after the each block has updated
|
||||
effect(() => {
|
||||
var value = get_value();
|
||||
select_option(select, value, mounting);
|
||||
|
||||
if (mounting && value === undefined) {
|
||||
/** @type {HTMLOptionElement | null} */
|
||||
var selected_option = select.querySelector(':checked');
|
||||
if (selected_option !== null) {
|
||||
value = get_option_value(selected_option);
|
||||
update(value);
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
select.__value = value;
|
||||
mounting = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @template V
|
||||
* @param {HTMLSelectElement} select
|
||||
* @param {V} value
|
||||
*/
|
||||
function select_options(select, value) {
|
||||
for (var option of select.options) {
|
||||
// @ts-ignore
|
||||
option.selected = ~value.indexOf(get_option_value(option));
|
||||
}
|
||||
}
|
||||
|
||||
/** @param {HTMLOptionElement} option */
|
||||
function get_option_value(option) {
|
||||
// __value only exists if the <option> has a value attribute
|
||||
if ('__value' in option) {
|
||||
return option.__value;
|
||||
} else {
|
||||
return option.value;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { render_effect } from '../../../reactivity/effects.js';
|
||||
|
||||
/**
|
||||
* Fires the handler once immediately (unless corresponding arg is set to `false`),
|
||||
* then listens to the given events until the render effect context is destroyed
|
||||
* @param {Element | Window} target
|
||||
* @param {Array<string>} events
|
||||
* @param {() => void} handler
|
||||
* @param {any} call_handler_immediately
|
||||
*/
|
||||
export function listen(target, events, handler, call_handler_immediately = true) {
|
||||
if (call_handler_immediately) {
|
||||
handler();
|
||||
}
|
||||
|
||||
for (var name of events) {
|
||||
target.addEventListener(name, handler);
|
||||
}
|
||||
|
||||
render_effect(() => {
|
||||
return () => {
|
||||
for (var name of events) {
|
||||
target.removeEventListener(name, handler);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
import { effect, render_effect } from '../../../reactivity/effects.js';
|
||||
import { untrack } from '../../../runtime.js';
|
||||
|
||||
/**
|
||||
* Resize observer singleton.
|
||||
* One listener per element only!
|
||||
* https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
|
||||
*/
|
||||
class ResizeObserverSingleton {
|
||||
/** */
|
||||
#listeners = new WeakMap();
|
||||
|
||||
/** @type {ResizeObserver | undefined} */
|
||||
#observer;
|
||||
|
||||
/** @type {ResizeObserverOptions} */
|
||||
#options;
|
||||
|
||||
/** @static */
|
||||
static entries = new WeakMap();
|
||||
|
||||
/** @param {ResizeObserverOptions} options */
|
||||
constructor(options) {
|
||||
this.#options = options;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} element
|
||||
* @param {(entry: ResizeObserverEntry) => any} listener
|
||||
*/
|
||||
observe(element, listener) {
|
||||
var listeners = this.#listeners.get(element) || new Set();
|
||||
listeners.add(listener);
|
||||
|
||||
this.#listeners.set(element, listeners);
|
||||
this.#getObserver().observe(element, this.#options);
|
||||
|
||||
return () => {
|
||||
var listeners = this.#listeners.get(element);
|
||||
listeners.delete(listener);
|
||||
|
||||
if (listeners.size === 0) {
|
||||
this.#listeners.delete(element);
|
||||
/** @type {ResizeObserver} */ (this.#observer).unobserve(element);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
#getObserver() {
|
||||
return (
|
||||
this.#observer ??
|
||||
(this.#observer = new ResizeObserver(
|
||||
/** @param {any} entries */ (entries) => {
|
||||
for (var entry of entries) {
|
||||
ResizeObserverSingleton.entries.set(entry.target, entry);
|
||||
for (var listener of this.#listeners.get(entry.target) || []) {
|
||||
listener(entry);
|
||||
}
|
||||
}
|
||||
}
|
||||
))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var resize_observer_content_box = /* @__PURE__ */ new ResizeObserverSingleton({
|
||||
box: 'content-box'
|
||||
});
|
||||
|
||||
var resize_observer_border_box = /* @__PURE__ */ new ResizeObserverSingleton({
|
||||
box: 'border-box'
|
||||
});
|
||||
|
||||
var resize_observer_device_pixel_content_box = /* @__PURE__ */ new ResizeObserverSingleton({
|
||||
box: 'device-pixel-content-box'
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {Element} element
|
||||
* @param {'contentRect' | 'contentBoxSize' | 'borderBoxSize' | 'devicePixelContentBoxSize'} type
|
||||
* @param {(entry: keyof ResizeObserverEntry) => void} update
|
||||
*/
|
||||
export function bind_resize_observer(element, type, update) {
|
||||
var observer =
|
||||
type === 'contentRect' || type === 'contentBoxSize'
|
||||
? resize_observer_content_box
|
||||
: type === 'borderBoxSize'
|
||||
? resize_observer_border_box
|
||||
: resize_observer_device_pixel_content_box;
|
||||
|
||||
var unsub = observer.observe(element, /** @param {any} entry */ (entry) => update(entry[type]));
|
||||
render_effect(() => unsub);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} element
|
||||
* @param {'clientWidth' | 'clientHeight' | 'offsetWidth' | 'offsetHeight'} type
|
||||
* @param {(size: number) => void} update
|
||||
*/
|
||||
export function bind_element_size(element, type, update) {
|
||||
var unsub = resize_observer_border_box.observe(element, () => update(element[type]));
|
||||
|
||||
effect(() => {
|
||||
untrack(() => update(element[type]));
|
||||
return unsub;
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
import { STATE_SYMBOL } from '../../../constants.js';
|
||||
import { effect } from '../../../reactivity/effects.js';
|
||||
import { untrack } from '../../../runtime.js';
|
||||
|
||||
/**
|
||||
* @param {any} bound_value
|
||||
* @param {Element} element_or_component
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function is_bound_this(bound_value, element_or_component) {
|
||||
// Find the original target if the value is proxied.
|
||||
var proxy_target = bound_value && bound_value[STATE_SYMBOL]?.t;
|
||||
return bound_value === element_or_component || proxy_target === element_or_component;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} element_or_component
|
||||
* @param {(value: unknown, ...parts: unknown[]) => void} update
|
||||
* @param {(...parts: unknown[]) => unknown} get_value
|
||||
* @param {() => unknown[]} [get_parts] Set if the this binding is used inside an each block,
|
||||
* returns all the parts of the each block context that are used in the expression
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_this(element_or_component, update, get_value, get_parts) {
|
||||
/** @type {unknown[]} */
|
||||
var old_parts;
|
||||
|
||||
/** @type {unknown[]} */
|
||||
var parts;
|
||||
|
||||
var e = effect(() => {
|
||||
old_parts = parts;
|
||||
// We only track changes to the parts, not the value itself to avoid unnecessary reruns.
|
||||
parts = get_parts?.() || [];
|
||||
|
||||
untrack(() => {
|
||||
if (element_or_component !== get_value(...parts)) {
|
||||
update(element_or_component, ...parts);
|
||||
// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at
|
||||
// the previous position if it isn't already taken over by a different effect.
|
||||
if (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {
|
||||
update(null, ...old_parts);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add effect teardown (likely causes: if block became false, each item removed, component unmounted).
|
||||
// In these cases we need to nullify the binding only if we detect that the value is still the same.
|
||||
// If not, that means that another effect has now taken over the binding.
|
||||
e.ondestroy = () => {
|
||||
// Defer to the next tick so that all updates can be reconciled first.
|
||||
// This solves the case where one variable is shared across multiple this-bindings.
|
||||
effect(() => {
|
||||
if (parts && is_bound_this(get_value(...parts), element_or_component)) {
|
||||
update(null, ...parts);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
import { render_effect } from '../../../reactivity/effects.js';
|
||||
|
||||
/**
|
||||
* @param {'innerHTML' | 'textContent' | 'innerText'} property
|
||||
* @param {HTMLElement} element
|
||||
* @param {() => unknown} get_value
|
||||
* @param {(value: unknown) => void} update
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_content_editable(property, element, get_value, update) {
|
||||
element.addEventListener('input', () => {
|
||||
// @ts-ignore
|
||||
update(element[property]);
|
||||
});
|
||||
|
||||
render_effect(() => {
|
||||
var value = get_value();
|
||||
|
||||
if (element[property] !== value) {
|
||||
if (value === null) {
|
||||
// @ts-ignore
|
||||
var non_null_value = element[property];
|
||||
update(non_null_value);
|
||||
} else {
|
||||
// @ts-ignore
|
||||
element[property] = value + '';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} property
|
||||
* @param {string} event_name
|
||||
* @param {'get' | 'set'} type
|
||||
* @param {Element} element
|
||||
* @param {() => unknown} get_value
|
||||
* @param {(value: unknown) => void} update
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_property(property, event_name, type, element, get_value, update) {
|
||||
var target_handler = () => {
|
||||
// @ts-ignore
|
||||
update(element[property]);
|
||||
};
|
||||
|
||||
element.addEventListener(event_name, target_handler);
|
||||
|
||||
if (type === 'set') {
|
||||
render_effect(() => {
|
||||
// @ts-ignore
|
||||
element[property] = get_value();
|
||||
});
|
||||
}
|
||||
|
||||
if (type === 'get') {
|
||||
// @ts-ignore
|
||||
update(element[property]);
|
||||
}
|
||||
|
||||
render_effect(() => {
|
||||
// @ts-ignore
|
||||
if (element === document.body || element === window || element === document) {
|
||||
return () => {
|
||||
element.removeEventListener(event_name, target_handler);
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
import { render_effect } from '../../../reactivity/effects.js';
|
||||
import { listen } from './shared.js';
|
||||
|
||||
/**
|
||||
* @param {'x' | 'y'} type
|
||||
* @param {() => number} get_value
|
||||
* @param {(value: number) => void} update
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bind_window_scroll(type, get_value, update) {
|
||||
var is_scrolling_x = type === 'x';
|
||||
|
||||
var target_handler = () => {
|
||||
scrolling = true;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(clear, 100); // TODO use scrollend event if supported (or when supported everywhere?)
|
||||
|
||||
update(window[is_scrolling_x ? 'scrollX' : 'scrollY']);
|
||||
};
|
||||
|
||||
addEventListener('scroll', target_handler, {
|
||||
passive: true
|
||||
});
|
||||
|
||||
var latest_value = 0;
|
||||
var scrolling = false;
|
||||
|
||||
/** @type {ReturnType<typeof setTimeout>} */
|
||||
var timeout;
|
||||
var clear = () => {
|
||||
scrolling = false;
|
||||
};
|
||||
|
||||
render_effect(() => {
|
||||
latest_value = get_value() || 0;
|
||||
if (!scrolling) {
|
||||
scrolling = true;
|
||||
clearTimeout(timeout);
|
||||
if (is_scrolling_x) {
|
||||
scrollTo(latest_value, window.scrollY);
|
||||
} else {
|
||||
scrollTo(window.scrollX, latest_value);
|
||||
}
|
||||
timeout = setTimeout(clear, 100);
|
||||
}
|
||||
});
|
||||
|
||||
render_effect(() => {
|
||||
return () => {
|
||||
removeEventListener('scroll', target_handler);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {'innerWidth' | 'innerHeight' | 'outerWidth' | 'outerHeight'} type
|
||||
* @param {(size: number) => void} update
|
||||
*/
|
||||
export function bind_window_size(type, update) {
|
||||
listen(window, ['resize'], () => update(window[type]));
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
import { hydrating } from '../hydration.js';
|
||||
import { set_class_name } from '../operations.js';
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {() => string} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function class_name_effect(dom, value) {
|
||||
render_effect(() => {
|
||||
class_name(dom, value());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function class_name(dom, value) {
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
var prev_class_name = dom.__className;
|
||||
var next_class_name = to_class(value);
|
||||
|
||||
if (hydrating && dom.className === next_class_name) {
|
||||
// In case of hydration don't reset the class as it's already correct.
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
dom.__className = next_class_name;
|
||||
} else if (
|
||||
prev_class_name !== next_class_name ||
|
||||
(hydrating && dom.className !== next_class_name)
|
||||
) {
|
||||
if (next_class_name === '') {
|
||||
dom.removeAttribute('class');
|
||||
} else {
|
||||
set_class_name(dom, next_class_name);
|
||||
}
|
||||
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
dom.__className = next_class_name;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @template V
|
||||
* @param {V} value
|
||||
* @returns {string | V}
|
||||
*/
|
||||
export function to_class(value) {
|
||||
return value == null ? '' : value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} class_name
|
||||
* @param {boolean} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function class_toggle(dom, class_name, value) {
|
||||
if (value) {
|
||||
dom.classList.add(class_name);
|
||||
} else {
|
||||
dom.classList.remove(class_name);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} class_name
|
||||
* @param {() => boolean} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function class_toggle_effect(dom, class_name, value) {
|
||||
render_effect(() => {
|
||||
class_toggle(dom, class_name, value());
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,154 @@
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
import { all_registered_events, root_event_handles } from '../../render.js';
|
||||
import { define_property, is_array } from '../../utils.js';
|
||||
|
||||
/**
|
||||
* @param {string} event_name
|
||||
* @param {Element} dom
|
||||
* @param {EventListener} handler
|
||||
* @param {boolean} capture
|
||||
* @param {boolean} [passive]
|
||||
* @returns {void}
|
||||
*/
|
||||
export function event(event_name, dom, handler, capture, passive) {
|
||||
var options = { capture, passive };
|
||||
|
||||
/**
|
||||
* @this {EventTarget}
|
||||
*/
|
||||
function target_handler(/** @type {Event} */ event) {
|
||||
handle_event_propagation(dom, event);
|
||||
if (!event.cancelBubble) {
|
||||
return handler.call(this, event);
|
||||
}
|
||||
}
|
||||
|
||||
dom.addEventListener(event_name, target_handler, options);
|
||||
|
||||
// @ts-ignore
|
||||
if (dom === document.body || dom === window || dom === document) {
|
||||
render_effect(() => {
|
||||
return () => {
|
||||
dom.removeEventListener(event_name, target_handler, options);
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array<string>} events
|
||||
* @returns {void}
|
||||
*/
|
||||
export function delegate(events) {
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
all_registered_events.add(events[i]);
|
||||
}
|
||||
|
||||
for (var fn of root_event_handles) {
|
||||
fn(events);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Node} handler_element
|
||||
* @param {Event} event
|
||||
* @returns {void}
|
||||
*/
|
||||
export function handle_event_propagation(handler_element, event) {
|
||||
var owner_document = handler_element.ownerDocument;
|
||||
var event_name = event.type;
|
||||
var path = event.composedPath?.() || [];
|
||||
var current_target = /** @type {null | Element} */ (path[0] || event.target);
|
||||
|
||||
if (event.target !== current_target) {
|
||||
define_property(event, 'target', {
|
||||
configurable: true,
|
||||
value: current_target
|
||||
});
|
||||
}
|
||||
|
||||
// composedPath contains list of nodes the event has propagated through.
|
||||
// We check __root to skip all nodes below it in case this is a
|
||||
// parent of the __root node, which indicates that there's nested
|
||||
// mounted apps. In this case we don't want to trigger events multiple times.
|
||||
var path_idx = 0;
|
||||
|
||||
// @ts-expect-error is added below
|
||||
var handled_at = event.__root;
|
||||
|
||||
if (handled_at) {
|
||||
var at_idx = path.indexOf(handled_at);
|
||||
if (
|
||||
at_idx !== -1 &&
|
||||
(handler_element === document || handler_element === /** @type {any} */ (window))
|
||||
) {
|
||||
// This is the fallback document listener or a window listener, but the event was already handled
|
||||
// -> ignore, but set handle_at to document/window so that we're resetting the event
|
||||
// chain in case someone manually dispatches the same event object again.
|
||||
// @ts-expect-error
|
||||
event.__root = handler_element;
|
||||
return;
|
||||
}
|
||||
|
||||
// We're deliberately not skipping if the index is higher, because
|
||||
// someone could create an event programmatically and emit it multiple times,
|
||||
// in which case we want to handle the whole propagation chain properly each time.
|
||||
// (this will only be a false negative if the event is dispatched multiple times and
|
||||
// the fallback document listener isn't reached in between, but that's super rare)
|
||||
var handler_idx = path.indexOf(handler_element);
|
||||
if (handler_idx === -1) {
|
||||
// handle_idx can theoretically be -1 (happened in some JSDOM testing scenarios with an event listener on the window object)
|
||||
// so guard against that, too, and assume that everything was handled at this point.
|
||||
return;
|
||||
}
|
||||
|
||||
if (at_idx <= handler_idx) {
|
||||
// +1 because at_idx is the element which was already handled, and there can only be one delegated event per element.
|
||||
// Avoids on:click and onclick on the same event resulting in onclick being fired twice.
|
||||
path_idx = at_idx + 1;
|
||||
}
|
||||
}
|
||||
|
||||
current_target = /** @type {Element} */ (path[path_idx] || event.target);
|
||||
|
||||
// Proxy currentTarget to correct target
|
||||
define_property(event, 'currentTarget', {
|
||||
configurable: true,
|
||||
get() {
|
||||
return current_target || owner_document;
|
||||
}
|
||||
});
|
||||
|
||||
while (current_target !== null) {
|
||||
/** @type {null | Element} */
|
||||
var parent_element =
|
||||
current_target.parentNode || /** @type {any} */ (current_target).host || null;
|
||||
var internal_prop_name = '__' + event_name;
|
||||
// @ts-ignore
|
||||
var delegated = current_target[internal_prop_name];
|
||||
|
||||
if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
|
||||
if (is_array(delegated)) {
|
||||
var [fn, ...data] = delegated;
|
||||
fn.apply(current_target, [event, ...data]);
|
||||
} else {
|
||||
delegated.call(current_target, event);
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
event.cancelBubble ||
|
||||
parent_element === handler_element ||
|
||||
current_target === handler_element
|
||||
) {
|
||||
break;
|
||||
}
|
||||
|
||||
current_target = parent_element;
|
||||
}
|
||||
|
||||
// @ts-expect-error is used above
|
||||
event.__root = handler_element;
|
||||
// @ts-expect-error is used above
|
||||
current_target = handler_element;
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
import { hydrating } from '../hydration.js';
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
import { current_block } from '../../runtime.js';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} dom
|
||||
* @param {boolean} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function autofocus(dom, value) {
|
||||
if (value) {
|
||||
const body = document.body;
|
||||
dom.autofocus = true;
|
||||
render_effect(
|
||||
() => {
|
||||
if (document.activeElement === body) {
|
||||
dom.focus();
|
||||
}
|
||||
},
|
||||
current_block,
|
||||
true,
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The child of a textarea actually corresponds to the defaultValue property, so we need
|
||||
* to remove it upon hydration to avoid a bug when someone resets the form value.
|
||||
* @param {HTMLTextAreaElement} dom
|
||||
* @returns {void}
|
||||
*/
|
||||
export function remove_textarea_child(dom) {
|
||||
if (hydrating && dom.firstChild !== null) {
|
||||
dom.textContent = '';
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} dom
|
||||
* @param {string} key
|
||||
* @param {string} value
|
||||
* @param {boolean} [important]
|
||||
*/
|
||||
export function style(dom, key, value, important) {
|
||||
const style = dom.style;
|
||||
const prev_value = style.getPropertyValue(key);
|
||||
if (value == null) {
|
||||
if (prev_value !== '') {
|
||||
style.removeProperty(key);
|
||||
}
|
||||
} else if (prev_value !== value) {
|
||||
style.setProperty(key, value, important ? 'important' : '');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} dom
|
||||
* @param {string} key
|
||||
* @param {() => string} value
|
||||
* @param {boolean} [important]
|
||||
* @returns {void}
|
||||
*/
|
||||
export function style_effect(dom, key, value, important) {
|
||||
render_effect(() => {
|
||||
const string = value();
|
||||
style(dom, key, string, important);
|
||||
});
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue