svelte
Advanced tools
Comparing version 5.0.0-next.181 to 5.0.0-next.182
@@ -5,3 +5,3 @@ { | ||
"license": "MIT", | ||
"version": "5.0.0-next.181", | ||
"version": "5.0.0-next.182", | ||
"type": "module", | ||
@@ -8,0 +8,0 @@ "types": "./types/index.d.ts", |
@@ -356,3 +356,7 @@ /** @import { Expression } from 'estree' */ | ||
const start = node.elseif ? node.consequent.nodes[0].start : node.start; | ||
const start = node.elseif | ||
? node.consequent.nodes[0]?.start ?? | ||
source.lastIndexOf('{', /** @type {number} */ (node.end) - 1) | ||
: node.start; | ||
remove_surrounding_whitespace_nodes(node.consequent.nodes); | ||
@@ -359,0 +363,0 @@ |
@@ -30,3 +30,3 @@ import is_reference from 'is-reference'; | ||
import { prune } from './css/css-prune.js'; | ||
import { hash } from './utils.js'; | ||
import { hash } from '../../../utils.js'; | ||
import { warn_unused } from './css/css-warn.js'; | ||
@@ -33,0 +33,0 @@ import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore.js'; |
@@ -677,3 +677,14 @@ import is_reference from 'is-reference'; | ||
AnimateDirective: SvelteDirective, | ||
UseDirective: SvelteDirective | ||
UseDirective: SvelteDirective, | ||
// using it's own function instead of `SvelteDirective` because | ||
// StyleDirective doesn't have expressions and are generally already | ||
// handled by `Identifier`. This is the special case for the shorthand | ||
// eg <button style:height /> where the variable has the same name of | ||
// the css property | ||
StyleDirective(node, { path, state, next }) { | ||
if (node.value === true) { | ||
state.scope.reference(b.id(node.name), path); | ||
} | ||
next(); | ||
} | ||
@@ -680,0 +691,0 @@ // TODO others |
@@ -8,4 +8,30 @@ /** @import { Effect, TemplateNode } from '#client' */ | ||
import * as w from '../../warnings.js'; | ||
import { hash } from '../../../../utils.js'; | ||
import { DEV } from 'esm-env'; | ||
import { dev_current_component_function } from '../../runtime.js'; | ||
/** | ||
* @param {Element} element | ||
* @param {string | null} server_hash | ||
* @param {string} value | ||
*/ | ||
function check_hash(element, server_hash, value) { | ||
if (!server_hash || server_hash === hash(String(value ?? ''))) return; | ||
let location; | ||
// @ts-expect-error | ||
const loc = element.__svelte_meta?.loc; | ||
if (loc) { | ||
location = `near ${loc.file}:${loc.line}:${loc.column}`; | ||
} else if (dev_current_component_function?.filename) { | ||
location = `in ${dev_current_component_function.filename}`; | ||
} | ||
w.hydration_html_changed( | ||
location?.replace(/\//g, '/\u200b') // prevent devtools trying to make it a clickable link by inserting a zero-width space | ||
); | ||
} | ||
/** | ||
* @param {Element | Text | Comment} node | ||
@@ -37,2 +63,5 @@ * @param {() => string} get_value | ||
if (hydrating) { | ||
// We're deliberately not trying to repair mismatches between server and client, | ||
// as it's costly and error-prone (and it's an edge case to have a mismatch anyway) | ||
var hash = /** @type {Comment} */ (hydrate_node).data; | ||
var next = hydrate_next(); | ||
@@ -54,2 +83,6 @@ var last = next; | ||
if (DEV) { | ||
check_hash(/** @type {Element} */ (next.parentNode), hash, value); | ||
} | ||
assign_nodes(hydrate_node, last); | ||
@@ -56,0 +89,0 @@ anchor = set_hydrate_node(next); |
import { teardown } from '../../reactivity/effects.js'; | ||
import { all_registered_events, root_event_handles } from '../../render.js'; | ||
import { define_property, is_array } from '../../utils.js'; | ||
@@ -7,2 +6,8 @@ import { hydrating } from '../hydration.js'; | ||
/** @type {Set<string>} */ | ||
export const all_registered_events = new Set(); | ||
/** @type {Set<(events: Array<string>) => void>} */ | ||
export const root_event_handles = new Set(); | ||
/** | ||
@@ -9,0 +14,0 @@ * SSR adds onload and onerror attributes to catch those events before the hydration. |
@@ -193,2 +193,5 @@ import { noop } from '../../../shared/utils.js'; | ||
// abort the outro to prevent overlap with the intro | ||
outro?.abort(); | ||
if (is_intro) { | ||
@@ -201,3 +204,2 @@ dispatch_event(element, 'introstart'); | ||
} else { | ||
outro?.abort(); | ||
reset?.(); | ||
@@ -271,2 +273,4 @@ } | ||
function animate(element, options, counterpart, t2, callback) { | ||
var is_intro = t2 === 1; | ||
if (is_function(options)) { | ||
@@ -280,3 +284,3 @@ // In the case of a deferred transition (such as `crossfade`), `option` will be | ||
queue_micro_task(() => { | ||
var o = options({ direction: t2 === 1 ? 'in' : 'out' }); | ||
var o = options({ direction: is_intro ? 'in' : 'out' }); | ||
a = animate(element, o, counterpart, t2, callback); | ||
@@ -327,2 +331,12 @@ }); | ||
// In case of a delayed intro, apply the initial style for the duration of the delay; | ||
// else in case of a fade-in for example the element would be visible until the animation starts | ||
if (is_intro && delay > 0) { | ||
let m = Math.ceil(delay / (1000 / 60)); | ||
let keyframe = css_to_keyframe(css(0, 1)); | ||
for (let i = 0; i < m; i += 1) { | ||
keyframes.push(keyframe); | ||
} | ||
} | ||
for (var i = 0; i <= n; i += 1) { | ||
@@ -335,4 +349,4 @@ var t = t1 + delta * easing(i / n); | ||
animation = element.animate(keyframes, { | ||
delay, | ||
duration, | ||
delay: is_intro ? 0 : delay, | ||
duration: duration + (is_intro ? delay : 0), | ||
easing: 'linear', | ||
@@ -339,0 +353,0 @@ fill: 'forwards' |
@@ -1,6 +0,5 @@ | ||
/** @import { Effect, TemplateNode } from '#client' */ | ||
/** @import { TemplateNode } from '#client' */ | ||
import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js'; | ||
import { DEV } from 'esm-env'; | ||
import { init_array_prototype_warnings } from '../dev/equality.js'; | ||
import { current_effect } from '../runtime.js'; | ||
@@ -7,0 +6,0 @@ // export these for reference in the compiled code, making global name deduplication unnecessary |
@@ -19,3 +19,7 @@ import { DEV } from 'esm-env'; | ||
import { array_from } from './utils.js'; | ||
import { handle_event_propagation } from './dom/elements/events.js'; | ||
import { | ||
all_registered_events, | ||
handle_event_propagation, | ||
root_event_handles | ||
} from './dom/elements/events.js'; | ||
import { reset_head_anchor } from './dom/blocks/svelte-head.js'; | ||
@@ -28,8 +32,2 @@ import * as w from './warnings.js'; | ||
/** @type {Set<string>} */ | ||
export const all_registered_events = new Set(); | ||
/** @type {Set<(events: Array<string>) => void>} */ | ||
export const root_event_handles = new Set(); | ||
/** | ||
@@ -187,2 +185,5 @@ * This is normally true — block effects should run their intro transitions — | ||
/** @type {Map<string, number>} */ | ||
const document_listeners = new Map(); | ||
/** | ||
@@ -204,21 +205,28 @@ * @template {Record<string, any>} Exports | ||
const registered_events = new Set(); | ||
var registered_events = new Set(); | ||
/** @param {Array<string>} events */ | ||
const event_handle = (events) => { | ||
for (let i = 0; i < events.length; i++) { | ||
const event_name = events[i]; | ||
const passive = PassiveDelegatedEvents.includes(event_name); | ||
var event_handle = (events) => { | ||
for (var i = 0; i < events.length; i++) { | ||
var event_name = events[i]; | ||
if (!registered_events.has(event_name)) { | ||
registered_events.add(event_name); | ||
if (registered_events.has(event_name)) continue; | ||
registered_events.add(event_name); | ||
// Add the event listener to both the container and the document. | ||
// The container listener ensures we catch events from within in case | ||
// the outer content stops propagation of the event. | ||
target.addEventListener(event_name, handle_event_propagation, { passive }); | ||
var passive = PassiveDelegatedEvents.includes(event_name); | ||
// Add the event listener to both the container and the document. | ||
// The container listener ensures we catch events from within in case | ||
// the outer content stops propagation of the event. | ||
target.addEventListener(event_name, handle_event_propagation, { passive }); | ||
var n = document_listeners.get(event_name); | ||
if (n === undefined) { | ||
// The document listener ensures we catch events that originate from elements that were | ||
// manually moved outside of the container (e.g. via manual portals). | ||
document.addEventListener(event_name, handle_event_propagation, { passive }); | ||
document_listeners.set(event_name, 1); | ||
} else { | ||
document_listeners.set(event_name, n + 1); | ||
} | ||
@@ -233,5 +241,5 @@ } | ||
// @ts-expect-error will be defined because the render effect runs synchronously | ||
let component = undefined; | ||
var component = undefined; | ||
const unmount = effect_root(() => { | ||
var unmount = effect_root(() => { | ||
branch(() => { | ||
@@ -270,5 +278,13 @@ if (context) { | ||
return () => { | ||
for (const event_name of registered_events) { | ||
for (var event_name of registered_events) { | ||
target.removeEventListener(event_name, handle_event_propagation); | ||
document.removeEventListener(event_name, handle_event_propagation); | ||
var n = /** @type {number} */ (document_listeners.get(event_name)); | ||
if (--n === 0) { | ||
document.removeEventListener(event_name, handle_event_propagation); | ||
document_listeners.delete(event_name); | ||
} else { | ||
document_listeners.set(event_name, n); | ||
} | ||
} | ||
@@ -275,0 +291,0 @@ |
@@ -24,2 +24,15 @@ /* This file is generated by scripts/process-messages/index.js. Do not edit! */ | ||
/** | ||
* The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value | ||
* @param {string | undefined | null} [location] | ||
*/ | ||
export function hydration_html_changed(location) { | ||
if (DEV) { | ||
console.warn(`%c[svelte] hydration_html_changed\n%c${location ? `The value of an \`{@html ...}\` block ${location} changed between server and client renders. The client value will be ignored in favour of the server value` : "The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value"}`, bold, normal); | ||
} else { | ||
// TODO print a link to the documentation | ||
console.warn("hydration_html_changed"); | ||
} | ||
} | ||
/** | ||
* Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location% | ||
@@ -26,0 +39,0 @@ * @param {string | undefined | null} [location] |
@@ -548,2 +548,4 @@ /** @import { Component, Payload, RenderOutput } from '#server' */ | ||
export { html } from './blocks/html.js'; | ||
export { push, pop } from './context.js'; | ||
@@ -550,0 +552,0 @@ |
@@ -23,3 +23,3 @@ /* This file is generated by scripts/process-messages/index.js. Do not edit! */ | ||
/** | ||
* The argument to `{@render ...}` must be a snippet function, not a component or some other kind of function. If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}` | ||
* The argument to `{@render ...}` must be a snippet function, not a component or a slot with a `let:` directive or some other kind of function. If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}` | ||
* @returns {never} | ||
@@ -29,3 +29,3 @@ */ | ||
if (DEV) { | ||
const error = new Error(`render_tag_invalid_argument\nThe argument to \`{@render ...}\` must be a snippet function, not a component or some other kind of function. If you want to dynamically render one snippet or another, use \`$derived\` and pass its result to \`{@render ...}\``); | ||
const error = new Error(`render_tag_invalid_argument\nThe argument to \`{@render ...}\` must be a snippet function, not a component or a slot with a \`let:\` directive or some other kind of function. If you want to dynamically render one snippet or another, use \`$derived\` and pass its result to \`{@render ...}\``); | ||
@@ -32,0 +32,0 @@ error.name = 'Svelte error'; |
@@ -18,5 +18,6 @@ import { is_void } from '../../constants.js'; | ||
* @param {any} snippet_fn | ||
* @param {Record<string, any> | undefined} $$props Only passed if render tag receives arguments | ||
*/ | ||
export function validate_snippet(snippet_fn) { | ||
if (snippet_fn && snippet_fn[snippet_symbol] !== true) { | ||
export function validate_snippet(snippet_fn, $$props) { | ||
if ($$props?.$$slots?.default || (snippet_fn && snippet_fn[snippet_symbol] !== true)) { | ||
e.render_tag_invalid_argument(); | ||
@@ -23,0 +24,0 @@ } |
@@ -9,3 +9,3 @@ // generated during release, do not modify | ||
*/ | ||
export const VERSION = '5.0.0-next.181'; | ||
export const VERSION = '5.0.0-next.182'; | ||
export const PUBLIC_VERSION = '5'; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
2133472
214
46836