Socket
Socket
Sign inDemoInstall

svelte

Package Overview
Dependencies
18
Maintainers
3
Versions
617
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 5.0.0-next.107 to 5.0.0-next.108

2

package.json

@@ -5,3 +5,3 @@ {

"license": "MIT",
"version": "5.0.0-next.107",
"version": "5.0.0-next.108",
"type": "module",

@@ -8,0 +8,0 @@ "types": "./types/index.d.ts",

4

src/compiler/errors.js

@@ -166,3 +166,5 @@ /** @typedef {{ start?: number, end?: number }} NodeLike */

'invalid-svelte-tag': (tags, match) =>
`Valid <svelte:...> tag names are ${list(tags)}${match ? ' (did you mean ' + match + '?)' : ''}`
`Valid <svelte:...> tag names are ${list(tags)}${match ? ' (did you mean ' + match + '?)' : ''}`,
'conflicting-slot-usage': () =>
`Cannot use <slot> syntax and {@render ...} tags in the same component. Migrate towards {@render ...} tags completely.`
};

@@ -169,0 +171,0 @@

12

src/compiler/phases/2-analyze/index.js

@@ -382,2 +382,3 @@ import is_reference from 'is-reference';

uses_component_bindings: false,
uses_render_tags: false,
custom_element: options.customElementOptions ?? options.customElement,

@@ -392,3 +393,3 @@ inject_styles: options.css === 'injected' || options.customElement,

binding_groups: new Map(),
slot_names: new Set(),
slot_names: new Map(),
warnings,

@@ -507,2 +508,6 @@ css: {

if (analysis.uses_render_tags && (analysis.uses_slots || analysis.slot_names.size > 0)) {
error(analysis.slot_names.values().next().value, 'conflicting-slot-usage');
}
// warn on any nonstate declarations that are a) reassigned and b) referenced in the template

@@ -1093,3 +1098,3 @@ for (const scope of [module.scope, instance.scope]) {

}
context.state.analysis.slot_names.add(name);
context.state.analysis.slot_names.set(name, node);
},

@@ -1343,3 +1348,4 @@ StyleDirective(node, context) {

) {
// Inside a slot or a snippet -> this resets the namespace, so we can't determine it
// Inside a slot or a snippet -> this resets the namespace, so assume the component namespace
node.metadata.svg = context.state.options.namespace === 'svg';
return;

@@ -1346,0 +1352,0 @@ }

36

src/compiler/phases/2-analyze/validation.js

@@ -18,3 +18,8 @@ import {

import { binding_properties } from '../bindings.js';
import { ContentEditableBindings, EventModifiers, SVGElements } from '../constants.js';
import {
ContentEditableBindings,
EventModifiers,
SVGElements,
VoidElements
} from '../constants.js';
import { is_custom_element_node } from '../nodes.js';

@@ -576,2 +581,17 @@ import {

if (
context.state.analysis.source[node.end - 2] === '/' &&
context.state.options.namespace !== 'foreign' &&
!VoidElements.includes(node.name) &&
!SVGElements.includes(node.name)
) {
warn(
context.state.analysis.warnings,
node,
context.path,
'invalid-self-closing-tag',
node.name
);
}
context.next({

@@ -583,2 +603,4 @@ ...context.state,

RenderTag(node, context) {
context.state.analysis.uses_render_tags = true;
const raw_args = unwrap_optional(node.expression).arguments;

@@ -1189,2 +1211,14 @@ for (const arg of raw_args) {

},
SlotElement(node, { state, path }) {
if (!state.analysis.custom_element) {
warn(state.analysis.warnings, node, path, 'deprecated-slot-element');
}
},
OnDirective(node, { state, path }) {
const parent_type = path.at(-1)?.type;
// Don't warn on component events; these might not be under the author's control so the warning would be unactionable
if (parent_type === 'RegularElement' || parent_type === 'SvelteElement') {
warn(state.analysis.warnings, node, path, 'deprecated-event-handler', node.name);
}
},
// TODO this is a code smell. need to refactor this stuff

@@ -1191,0 +1225,0 @@ ClassBody: validation_runes_js.ClassBody,

2

src/compiler/phases/3-transform/client/transform-client.js

@@ -10,3 +10,3 @@ import { walk } from 'zimmerframe';

import { javascript_visitors_legacy } from './visitors/javascript-legacy.js';
import { is_state_source, serialize_get_binding } from './utils.js';
import { serialize_get_binding } from './utils.js';
import { render_stylesheet } from '../css/index.js';

@@ -13,0 +13,0 @@

2

src/compiler/phases/scope.js

@@ -509,3 +509,3 @@ import is_reference from 'is-reference';

for (const id of extract_identifiers(node.param)) {
state.scope.declare(id, 'normal', 'let');
scope.declare(id, 'normal', 'let');
}

@@ -512,0 +512,0 @@

4

src/compiler/phases/types.d.ts

@@ -6,2 +6,3 @@ import type {

RegularElement,
SlotElement,
SvelteElement,

@@ -65,2 +66,3 @@ SvelteNode,

uses_component_bindings: boolean;
uses_render_tags: boolean;
custom_element: boolean | SvelteOptions['customElement'];

@@ -72,3 +74,3 @@ /** If `true`, should append styles through JavaScript */

binding_groups: Map<[key: string, bindings: Array<Binding | null>], Identifier>;
slot_names: Set<string>;
slot_names: Map<string, SlotElement>;
css: {

@@ -75,0 +77,0 @@ ast: Css.StyleSheet | null;

6

src/compiler/types/template.d.ts

@@ -319,6 +319,6 @@ import type { Binding, Css } from '#compiler';

/**
* `true`/`false` if this is definitely (not) an svg element.
* `null` means we can't know statically.
* `true` if this is an svg element. The boolean may not be accurate because
* the tag is dynamic, but we do our best to infer it from the template.
*/
svg: boolean | null;
svg: boolean;
scoped: boolean;

@@ -325,0 +325,0 @@ };

16

src/compiler/warnings.js

@@ -236,3 +236,8 @@ import {

'unused-export-let': (name) =>
`Component has unused export property '${name}'. If it is for external reference only, please consider using \`export const ${name}\``
`Component has unused export property '${name}'. If it is for external reference only, please consider using \`export const ${name}\``,
'deprecated-slot-element': () =>
`Using <slot> to render parent content is deprecated. Use {@render ...} tags instead.`,
/** @param {string} name */
'deprecated-event-handler': (name) =>
`Using on:${name} to listen to the ${name} event is is deprecated. Use the event attribute on${name} instead.`
};

@@ -249,2 +254,8 @@

const misc = {
/** @param {string} name */
'invalid-self-closing-tag': (name) =>
`Self-closing HTML tags for non-void elements are ambiguous — use <${name} ...></${name}> rather than <${name} ... />`
};
/** @satisfies {Warnings} */

@@ -261,3 +272,4 @@ const warnings = {

...block,
...options
...options,
...misc
};

@@ -264,0 +276,0 @@

4

src/internal/client/dev/ownership.js

@@ -130,4 +130,4 @@ /** @typedef {{ file: string, line: number, column: number }} Location */

/**
* @param {import('#client').ProxyMetadata | null} from
* @param {import('#client').ProxyMetadata} to
* @param {import('#client').ProxyMetadata<any> | null} from
* @param {import('#client').ProxyMetadata<any>} to
*/

@@ -134,0 +134,0 @@ export function widen_ownership(from, to) {

62

src/internal/client/dom/blocks/each.js

@@ -27,3 +27,4 @@ import {

import { is_array, is_frozen } from '../../utils.js';
import { STATE_SYMBOL } from '../../constants.js';
import { INERT, STATE_SYMBOL } from '../../constants.js';
import { push_template_node } from '../template.js';

@@ -172,6 +173,7 @@ /**

var child_open = /** @type {Comment} */ (child_anchor);
child_anchor = hydrate_anchor(child_anchor);
var value = array[i];
var key = get_key(value, i);
item = create_item(child_anchor, prev, null, value, key, i, render_fn, flags);
item = create_item(child_open, child_anchor, prev, null, value, key, i, render_fn, flags);
state.items.set(key, item);

@@ -243,4 +245,4 @@ child_anchor = /** @type {Comment} */ (child_anchor.nextSibling);

/** @type {import('#client').EachItem[]} */
var to_animate = [];
/** @type {Set<import('#client').EachItem>} */
var to_animate = new Set();

@@ -273,3 +275,3 @@ /** @type {import('#client').EachItem[]} */

item.a?.measure();
to_animate.push(item);
to_animate.add(item);
}

@@ -285,4 +287,10 @@ }

if (item === undefined) {
var child_open = /** @type {Text} */ (push_template_node(empty()));
var child_anchor = current ? current.o : anchor;
child_anchor.before(child_open);
prev = create_item(
current ? get_first_child(current) : anchor,
child_open,
child_anchor,
prev,

@@ -310,3 +318,9 @@ prev.next,

resume_effect(item.e);
if ((item.e.f & INERT) !== 0) {
resume_effect(item.e);
if (is_animated) {
item.a?.unfix();
to_animate.delete(item);
}
}

@@ -318,3 +332,3 @@ if (item !== current) {

var start = stashed[0];
var local_anchor = get_first_child(start);
var local_anchor = start.o;
var j;

@@ -348,3 +362,3 @@

seen.delete(item);
move(item, current ? get_first_child(current) : anchor);
move(item, current ? current.o : anchor);

@@ -391,2 +405,12 @@ link(item.prev, item.next);

if (is_animated) {
for (i = 0; i < to_destroy.length; i += 1) {
to_destroy[i].a?.measure();
}
for (i = 0; i < to_destroy.length; i += 1) {
to_destroy[i].a?.fix();
}
}
pause_effects(to_destroy, controlled_anchor, () => {

@@ -413,16 +437,2 @@ for (var i = 0; i < to_destroy.length; i += 1) {

* @param {import('#client').EachItem} item
* @returns {Text | Element | Comment}
*/
function get_first_child(item) {
var current = item.e.dom;
if (is_array(current)) {
return /** @type {Text | Element | Comment} */ (current[0]);
}
return /** @type {Text | Element | Comment} */ (current);
}
/**
* @param {import('#client').EachItem} item
* @param {any} value

@@ -447,2 +457,3 @@ * @param {number} index

* @template V
* @param {Comment | Text} open
* @param {Node} anchor

@@ -458,3 +469,3 @@ * @param {import('#client').EachItem | import('#client').EachState} prev

*/
function create_item(anchor, prev, next, value, key, index, render_fn, flags) {
function create_item(open, anchor, prev, next, value, key, index, render_fn, flags) {
var previous_each_item = current_each_item;

@@ -477,2 +488,3 @@

e: null,
o: open,
prev,

@@ -499,2 +511,4 @@ next

function move(item, anchor) {
anchor.before(item.o);
var dom = item.e.dom;

@@ -501,0 +515,0 @@

4

src/internal/client/dom/blocks/html.js

@@ -82,3 +82,3 @@ import { derived } from '../../reactivity/deriveds.js';

if (effect !== null) {
push_template_node(effect, child);
push_template_node(child, effect);
}

@@ -99,3 +99,3 @@ return child;

if (effect !== null) {
push_template_node(effect, nodes);
push_template_node(nodes, effect);
}

@@ -102,0 +102,0 @@

25

src/internal/client/dom/blocks/svelte-element.js

@@ -42,7 +42,8 @@ import { namespace_svg } from '../../../../constants.js';

* @param {() => string} get_tag
* @param {boolean | null} is_svg `null` == not statically known
* @param {undefined | ((element: Element, anchor: Node) => void)} render_fn
* @param {boolean} is_svg
* @param {undefined | ((element: Element, anchor: Node) => void)} render_fn,
* @param {undefined | (() => string)} get_namespace
* @returns {void}
*/
export function element(anchor, get_tag, is_svg, render_fn) {
export function element(anchor, get_tag, is_svg, render_fn, get_namespace) {
const parent_effect = /** @type {import('#client').Effect} */ (current_effect);

@@ -72,2 +73,8 @@

const next_tag = get_tag() || null;
const ns = get_namespace
? get_namespace()
: is_svg || next_tag === 'svg'
? namespace_svg
: null;
// Assumption: Noone changes the namespace but not the tag (what would that even mean?)
if (next_tag === tag) return;

@@ -79,12 +86,2 @@

// 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 || next_tag === 'svg'
? namespace_svg
: is_svg === false || anchor.parentElement?.tagName === 'foreignObject'
? null
: anchor.parentElement?.namespaceURI ?? null;
if (effect) {

@@ -139,3 +136,3 @@ if (next_tag === null) {

} else if (!hydrating) {
push_template_node(parent_effect, element);
push_template_node(element, parent_effect);
}

@@ -142,0 +139,0 @@ });

39

src/internal/client/dom/elements/transitions.js

@@ -91,2 +91,5 @@ import { noop } from '../../../shared/utils.js';

/** @type {null | { position: string, width: string, height: string }} */
var original_styles = null;
item.a ??= {

@@ -115,2 +118,34 @@ element,

}
},
fix() {
var computed_style = getComputedStyle(element);
if (computed_style.position !== 'absolute' && computed_style.position !== 'fixed') {
var style = /** @type {HTMLElement | SVGElement} */ (element).style;
original_styles = {
position: style.position,
width: style.width,
height: style.height
};
style.position = 'absolute';
style.width = computed_style.width;
style.height = computed_style.height;
var to = element.getBoundingClientRect();
if (from.left !== to.left || from.top !== to.top) {
var transform = `translate(${from.left - to.left}px, ${from.top - to.top}px)`;
style.transform = style.transform ? `${style.transform} ${transform}` : transform;
}
}
},
unfix() {
if (original_styles) {
var style = /** @type {HTMLElement | SVGElement} */ (element).style;
style.position = original_styles.position;
style.width = original_styles.width;
style.height = original_styles.height;
}
}

@@ -310,2 +345,6 @@ };

callback?.();
if (t2 === 1) {
animation.cancel();
}
})

@@ -312,0 +351,0 @@ .catch((e) => {

59

src/internal/client/dom/template.js

@@ -10,6 +10,9 @@ import { hydrate_nodes, hydrating } from './hydration.js';

/**
* @param {import("#client").TemplateNode | import("#client").TemplateNode[]} dom
* @param {import("#client").Effect} effect
* @param {import("#client").TemplateNode | import("#client").TemplateNode[]} dom
*/
export function push_template_node(effect, dom) {
export function push_template_node(
dom,
effect = /** @type {import('#client').Effect} */ (current_effect)
) {
var current_dom = effect.dom;

@@ -22,7 +25,3 @@ if (current_dom === null) {

}
var anchor;
// If we're working with an anchor, then remove it and put it at the end.
if (current_dom[0].nodeType === 8) {
anchor = current_dom.pop();
}
if (is_array(dom)) {

@@ -33,5 +32,2 @@ current_dom.push(...dom);

}
if (anchor !== undefined) {
current_dom.push(anchor);
}
}

@@ -55,8 +51,4 @@ return dom;

return () => {
var effect = /** @type {import('#client').Effect} */ (current_effect);
if (hydrating) {
var hydration_content = push_template_node(
effect,
is_fragment ? hydrate_nodes : hydrate_nodes[0]
);
var hydration_content = push_template_node(is_fragment ? hydrate_nodes : hydrate_nodes[0]);
return /** @type {Node} */ (hydration_content);

@@ -71,10 +63,7 @@ }

if (is_fragment) {
push_template_node(
effect,
/** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes])
);
} else {
push_template_node(effect, /** @type {import('#client').TemplateNode} */ (clone));
}
push_template_node(
is_fragment
? /** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes])
: /** @type {import('#client').TemplateNode} */ (clone)
);

@@ -123,8 +112,4 @@ return clone;

return () => {
var effect = /** @type {import('#client').Effect} */ (current_effect);
if (hydrating) {
var hydration_content = push_template_node(
effect,
is_fragment ? hydrate_nodes : hydrate_nodes[0]
);
var hydration_content = push_template_node(is_fragment ? hydrate_nodes : hydrate_nodes[0]);
return /** @type {Node} */ (hydration_content);

@@ -148,10 +133,7 @@ }

if (is_fragment) {
push_template_node(
effect,
/** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes])
);
} else {
push_template_node(effect, /** @type {import('#client').TemplateNode} */ (clone));
}
push_template_node(
is_fragment
? /** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes])
: /** @type {import('#client').TemplateNode} */ (clone)
);

@@ -223,4 +205,3 @@ return clone;

export function text(anchor) {
var effect = /** @type {import('#client').Effect} */ (current_effect);
if (!hydrating) return push_template_node(effect, empty());
if (!hydrating) return push_template_node(empty());

@@ -235,3 +216,3 @@ var node = hydrate_nodes[0];

return push_template_node(effect, node);
return push_template_node(node);
}

@@ -238,0 +219,0 @@

3

src/internal/client/proxy.js

@@ -41,2 +41,5 @@ import { DEV } from 'esm-env';

if (DEV) {
// Since original parent relationship gets lost, we need to copy over ancestor owners
// into current metadata. The object might still exist on both, so we need to widen it.
widen_ownership(metadata, metadata);
metadata.parent = parent;

@@ -43,0 +46,0 @@ }

6

src/internal/client/types.d.ts

@@ -70,2 +70,4 @@ import type { Store } from '#shared';

k: unknown;
/** anchor for items inserted before this */
o: Comment | Text;
prev: EachItem | EachState;

@@ -93,2 +95,6 @@ next: EachItem | null;

apply: () => void;
/** Fix the element position, so that siblings can move to the correct destination */
fix: () => void;
/** Unfix the element position if the outro is aborted */
unfix: () => void;
}

@@ -95,0 +101,0 @@

2

src/version.js

@@ -9,3 +9,3 @@ // generated during release, do not modify

*/
export const VERSION = '5.0.0-next.107';
export const VERSION = '5.0.0-next.108';
export const PUBLIC_VERSION = '5';
compiler/index.js

Sorry, the diff of this file is too big to display

src/compiler/phases/3-transform/client/visitors/template.js

Sorry, the diff of this file is too big to display

types/index.d.ts

Sorry, the diff of this file is too big to display

types/index.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc