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

more descriptive names

Browse Source
pull/10922/head
Rich Harris 2 years ago
parent 2452e227f0
commit 7c56aa211b
8 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File

34
packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
Unescape View File

@ -59,7 +59,7 @@ function get_attribute_name(element, attribute, context) {
}
/**
* Serializes each style directive into something like `$.style(element, style_property, value)`
* Serializes each style directive into something like `$.set_style(element, style_property, value)`
* and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
* @param {import('#compiler').StyleDirective[]} style_directives
* @param {import('estree').Identifier} element_id
@ -77,7 +77,7 @@ function serialize_style_directives(style_directives, element_id, context, is_at
const update = b.stmt(
b.call(
'$.style',
'$.set_style',
element_id,
b.literal(directive.name),
value,
@ -136,7 +136,7 @@ function serialize_class_directives(class_directives, element_id, context, is_at
const state = context.state;
for (const directive of class_directives) {
const value = /** @type {import('estree').Expression} */ (context.visit(directive.expression));
const update = b.stmt(b.call('$.class_toggle', element_id, b.literal(directive.name), value));
const update = b.stmt(b.call('$.toggle_class', element_id, b.literal(directive.name), value));
const contains_call_expression = directive.expression.type === 'CallExpression';
if (!is_attributes_reactive && contains_call_expression) {
@ -280,14 +280,14 @@ function serialize_element_spread_attributes(
const lowercase_attributes =
element.metadata.svg || is_custom_element_node(element) ? b.false : b.true;
const id = context.state.scope.generate('spread_attributes');
const id = context.state.scope.generate('attributes');
const update = b.stmt(
b.assignment(
'=',
b.id(id),
b.call(
'$.spread_attributes',
'$.set_attributes',
element_id,
b.id(id),
b.array(values),
@ -337,7 +337,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
if (attributes.length === 0) {
if (context.state.analysis.css.hash) {
context.state.init.push(
b.stmt(b.call('$.class_name', element_id, b.literal(context.state.analysis.css.hash)))
b.stmt(b.call('$.set_class', element_id, b.literal(context.state.analysis.css.hash)))
);
}
return false;
@ -368,7 +368,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
}
if (needs_isolation || is_reactive) {
const id = context.state.scope.generate('spread_attributes');
const id = context.state.scope.generate('attributes');
context.state.init.push(b.let(id));
const update = b.stmt(
@ -376,7 +376,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
'=',
b.id(id),
b.call(
'$.spread_dynamic_element_attributes',
'$.set_dynamic_element_attributes',
element_id,
b.id(id),
b.array(values),
@ -397,7 +397,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
context.state.init.push(
b.stmt(
b.call(
'$.spread_dynamic_element_attributes',
'$.set_dynamic_element_attributes',
element_id,
b.literal(null),
b.array(values),
@ -415,7 +415,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
* ```js
* element.property = value;
* // or
* $.attr(element, property, value);
* $.set_attribute(element, property, value);
* });
* ```
* Resulting code for dynamic looks something like this:
@ -425,7 +425,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
* if (value !== (value = 'new value')) {
* element.property = value;
* // or
* $.attr(element, property, value);
* $.set_attribute(element, property, value);
* }
* });
* ```
@ -444,7 +444,9 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
// The foreign namespace doesn't have any special handling, everything goes through the attr function
if (context.state.metadata.namespace === 'foreign') {
const statement = { grouped: b.stmt(b.call('$.attr', node_id, b.literal(name), value)) };
const statement = {
grouped: b.stmt(b.call('$.set_attribute', node_id, b.literal(name), value))
};
if (attribute.metadata.dynamic) {
const id = state.scope.generate(`${node_id.name}_${name}`);
serialize_update_assignment(state, id, undefined, value, statement, contains_call_expression);
@ -464,11 +466,11 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
let update;
if (name === 'class') {
update = b.stmt(b.call(is_svg ? '$.svg_class_name' : '$.class_name', node_id, value));
update = b.stmt(b.call(is_svg ? '$.set_svg_class' : '$.set_class', node_id, value));
} else if (DOMProperties.includes(name)) {
update = b.stmt(b.assignment('=', b.member(node_id, b.id(name)), value));
} else {
const callee = name.startsWith('xlink') ? '$.xlink_attr' : '$.attr';
const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
update = b.stmt(b.call(callee, node_id, b.literal(name), value));
}
@ -1397,7 +1399,7 @@ function process_children(nodes, expression, is_element, { visit, state }) {
const update = b.stmt(
b.call(
'$.text',
'$.set_text',
text_id,
/** @type {import('estree').Expression} */ (visit(node.expression))
)
@ -1431,7 +1433,7 @@ function process_children(nodes, expression, is_element, { visit, state }) {
const [contains_call_expression, value] = serialize_template_literal(sequence, visit);
const update = b.stmt(b.call('$.text', text_id, value));
const update = b.stmt(b.call('$.set_text', text_id, value));
if (contains_call_expression && !within_bound_contenteditable) {
state.init.push(serialize_update(update));

32
packages/svelte/src/internal/client/dom/elements/attributes.js
Unescape View File

@ -13,8 +13,8 @@ import { autofocus } from './misc.js';
*/
export function remove_input_attr_defaults(dom) {
if (hydrating) {
attr(dom, 'value', null);
attr(dom, 'checked', null);
set_attribute(dom, 'value', null);
set_attribute(dom, 'checked', null);
}
}
@ -23,7 +23,7 @@ export function remove_input_attr_defaults(dom) {
* @param {string} attribute
* @param {string | null} value
*/
export function attr(element, attribute, value) {
export function set_attribute(element, attribute, value) {
value = value == null ? null : value + '';
// @ts-expect-error
@ -57,7 +57,7 @@ export function attr(element, attribute, value) {
* @param {string} attribute
* @param {string} value
*/
export function xlink_attr(dom, attribute, value) {
export function set_xlink_attribute(dom, attribute, value) {
dom.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
}
@ -70,7 +70,7 @@ 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);
set_attribute(node, prop, value);
}
}
@ -83,7 +83,7 @@ export function set_custom_element_data(node, prop, value) {
* @param {string} css_hash
* @returns {Record<string, unknown>}
*/
export function spread_attributes(element, prev, attrs, lowercase_attributes, css_hash) {
export function set_attributes(element, prev, attrs, lowercase_attributes, css_hash) {
var next = object_assign({}, ...attrs);
var has_hash = css_hash.length !== 0;
@ -164,7 +164,7 @@ export function spread_attributes(element, prev, attrs, lowercase_attributes, cs
value += css_hash;
}
attr(element, name, value);
set_attribute(element, name, value);
}
}
}
@ -178,7 +178,7 @@ export function spread_attributes(element, prev, attrs, lowercase_attributes, cs
* @param {Record<string, unknown>[]} attrs
* @param {string} css_hash
*/
export function spread_dynamic_element_attributes(node, prev, attrs, css_hash) {
export function set_dynamic_element_attributes(node, prev, attrs, css_hash) {
if (node.tagName.includes('-')) {
var next = object_assign({}, ...attrs);
@ -193,15 +193,15 @@ export function spread_dynamic_element_attributes(node, prev, attrs, css_hash) {
}
return next;
} else {
return spread_attributes(
/** @type {Element & ElementCSSInlineStyle} */ (node),
prev,
attrs,
node.namespaceURI !== namespace_svg,
css_hash
);
}
return set_attributes(
/** @type {Element & ElementCSSInlineStyle} */ (node),
prev,
attrs,
node.namespaceURI !== namespace_svg,
css_hash
);
}
/**

6
packages/svelte/src/internal/client/dom/elements/class.js
Unescape View File

@ -6,7 +6,7 @@ import { set_class_name } from '../operations.js';
* @param {string} value
* @returns {void}
*/
export function svg_class_name(dom, value) {
export function set_svg_class(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);
@ -35,7 +35,7 @@ export function svg_class_name(dom, value) {
* @param {string} value
* @returns {void}
*/
export function class_name(dom, value) {
export function set_class(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);
@ -77,7 +77,7 @@ function to_class(value) {
* @param {boolean} value
* @returns {void}
*/
export function class_toggle(dom, class_name, value) {
export function toggle_class(dom, class_name, value) {
if (value) {
dom.classList.add(class_name);
} else {

4
packages/svelte/src/internal/client/dom/elements/style.js
Unescape View File

@ -1,12 +1,10 @@
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) {
export function set_style(dom, key, value, important) {
const style = dom.style;
const prev_value = style.getPropertyValue(key);
if (value == null) {

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

@ -44,7 +44,7 @@ export function set_should_intro(value) {
* @param {string} value
* @returns {void}
*/
export function text(dom, value) {
export function set_text(dom, value) {
// @ts-expect-error need to add __value to patched prototype
const prev_node_value = dom.__nodeValue;
const next_node_value = stringify(value);

8
packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
Unescape View File

@ -17,19 +17,19 @@ export default function Main($$anchor, $$props) {
var custom_element = $.sibling($.sibling(svg, true));
var div_1 = $.sibling($.sibling(custom_element, true));
$.render_effect(() => $.attr(div_1, "foobar", y()));
$.render_effect(() => $.set_attribute(div_1, "foobar", y()));
var svg_1 = $.sibling($.sibling(div_1, true));
$.render_effect(() => $.attr(svg_1, "viewBox", y()));
$.render_effect(() => $.set_attribute(svg_1, "viewBox", y()));
var custom_element_1 = $.sibling($.sibling(svg_1, true));
$.render_effect(() => $.set_custom_element_data(custom_element_1, "fooBar", y()));
$.render_effect(() => {
$.attr(div, "foobar", x);
$.attr(svg, "viewBox", x);
$.set_attribute(div, "foobar", x);
$.set_attribute(svg, "viewBox", x);
$.set_custom_element_data(custom_element, "fooBar", x);
});

2
packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
Unescape View File

@ -17,7 +17,7 @@ export default function Each_string_template($$anchor, $$props) {
($$anchor, thing, $$index) => {
var text = $.space_frag($$anchor);
$.render_effect(() => $.text(text, `${$.stringify($.unwrap(thing))}, `));
$.render_effect(() => $.set_text(text, `${$.stringify($.unwrap(thing))}, `));
return $.close($$anchor, text);
},
null

2
packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
Unescape View File

@ -23,7 +23,7 @@ export default function Function_prop_no_getter($$anchor, $$props) {
children: ($$anchor, $$slotProps) => {
var text = $.space_frag($$anchor);
$.render_effect(() => $.text(text, `clicks: ${$.stringify($.get(count))}`));
$.render_effect(() => $.set_text(text, `clicks: ${$.stringify($.get(count))}`));
return $.close($$anchor, text);
}
});

Write Preview
Loading…
Cancel
Save