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. * 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('#compiler').StyleDirective[]} style_directives
* @param {import('estree').Identifier} element_id * @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( const update = b.stmt(
b.call( b.call(
'$.style', '$.set_style',
element_id, element_id,
b.literal(directive.name), b.literal(directive.name),
value, value,
@ -136,7 +136,7 @@ function serialize_class_directives(class_directives, element_id, context, is_at
const state = context.state; const state = context.state;
for (const directive of class_directives) { for (const directive of class_directives) {
const value = /** @type {import('estree').Expression} */ (context.visit(directive.expression)); 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'; const contains_call_expression = directive.expression.type === 'CallExpression';
if (!is_attributes_reactive && contains_call_expression) { if (!is_attributes_reactive && contains_call_expression) {
@ -280,14 +280,14 @@ function serialize_element_spread_attributes(
const lowercase_attributes = const lowercase_attributes =
element.metadata.svg || is_custom_element_node(element) ? b.false : b.true; 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( const update = b.stmt(
b.assignment( b.assignment(
'=', '=',
b.id(id), b.id(id),
b.call( b.call(
'$.spread_attributes', '$.set_attributes',
element_id, element_id,
b.id(id), b.id(id),
b.array(values), b.array(values),
@ -337,7 +337,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
if (attributes.length === 0) { if (attributes.length === 0) {
if (context.state.analysis.css.hash) { if (context.state.analysis.css.hash) {
context.state.init.push( 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; return false;
@ -368,7 +368,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
} }
if (needs_isolation || is_reactive) { 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)); context.state.init.push(b.let(id));
const update = b.stmt( const update = b.stmt(
@ -376,7 +376,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
'=', '=',
b.id(id), b.id(id),
b.call( b.call(
'$.spread_dynamic_element_attributes', '$.set_dynamic_element_attributes',
element_id, element_id,
b.id(id), b.id(id),
b.array(values), b.array(values),
@ -397,7 +397,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
context.state.init.push( context.state.init.push(
b.stmt( b.stmt(
b.call( b.call(
'$.spread_dynamic_element_attributes', '$.set_dynamic_element_attributes',
element_id, element_id,
b.literal(null), b.literal(null),
b.array(values), b.array(values),
@ -415,7 +415,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
* ```js * ```js
* element.property = value; * element.property = value;
* // or * // or
* $.attr(element, property, value); * $.set_attribute(element, property, value);
* }); * });
* ``` * ```
* Resulting code for dynamic looks something like this: * 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')) { * if (value !== (value = 'new value')) {
* element.property = value; * element.property = value;
* // or * // 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 // The foreign namespace doesn't have any special handling, everything goes through the attr function
if (context.state.metadata.namespace === 'foreign') { 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) { if (attribute.metadata.dynamic) {
const id = state.scope.generate(`${node_id.name}_${name}`); const id = state.scope.generate(`${node_id.name}_${name}`);
serialize_update_assignment(state, id, undefined, value, statement, contains_call_expression); 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; let update;
if (name === 'class') { 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)) { } else if (DOMProperties.includes(name)) {
update = b.stmt(b.assignment('=', b.member(node_id, b.id(name)), value)); update = b.stmt(b.assignment('=', b.member(node_id, b.id(name)), value));
} else { } 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)); 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( const update = b.stmt(
b.call( b.call(
'$.text', '$.set_text',
text_id, text_id,
/** @type {import('estree').Expression} */ (visit(node.expression)) /** @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 [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) { if (contains_call_expression && !within_bound_contenteditable) {
state.init.push(serialize_update(update)); state.init.push(serialize_update(update));

22
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) { export function remove_input_attr_defaults(dom) {
if (hydrating) { if (hydrating) {
attr(dom, 'value', null); set_attribute(dom, 'value', null);
attr(dom, 'checked', null); set_attribute(dom, 'checked', null);
} }
} }
@ -23,7 +23,7 @@ export function remove_input_attr_defaults(dom) {
* @param {string} attribute * @param {string} attribute
* @param {string | null} value * @param {string | null} value
*/ */
export function attr(element, attribute, value) { export function set_attribute(element, attribute, value) {
value = value == null ? null : value + ''; value = value == null ? null : value + '';
// @ts-expect-error // @ts-expect-error
@ -57,7 +57,7 @@ export function attr(element, attribute, value) {
* @param {string} attribute * @param {string} attribute
* @param {string} value * @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); 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) { if (prop in node) {
node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value; node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value;
} else { } 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 * @param {string} css_hash
* @returns {Record<string, unknown>} * @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 next = object_assign({}, ...attrs);
var has_hash = css_hash.length !== 0; var has_hash = css_hash.length !== 0;
@ -164,7 +164,7 @@ export function spread_attributes(element, prev, attrs, lowercase_attributes, cs
value += css_hash; 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 {Record<string, unknown>[]} attrs
* @param {string} css_hash * @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('-')) { if (node.tagName.includes('-')) {
var next = object_assign({}, ...attrs); var next = object_assign({}, ...attrs);
@ -193,8 +193,9 @@ export function spread_dynamic_element_attributes(node, prev, attrs, css_hash) {
} }
return next; return next;
} else { }
return spread_attributes(
return set_attributes(
/** @type {Element & ElementCSSInlineStyle} */ (node), /** @type {Element & ElementCSSInlineStyle} */ (node),
prev, prev,
attrs, attrs,
@ -202,7 +203,6 @@ export function spread_dynamic_element_attributes(node, prev, attrs, css_hash) {
css_hash css_hash
); );
} }
}
/** /**
* List of attributes that should always be set through the attr method, * List of attributes that should always be set through the attr method,

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 * @param {string} value
* @returns {void} * @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 // @ts-expect-error need to add __className to patched prototype
var prev_class_name = dom.__className; var prev_class_name = dom.__className;
var next_class_name = to_class(value); var next_class_name = to_class(value);
@ -35,7 +35,7 @@ export function svg_class_name(dom, value) {
* @param {string} value * @param {string} value
* @returns {void} * @returns {void}
*/ */
export function class_name(dom, value) { export function set_class(dom, value) {
// @ts-expect-error need to add __className to patched prototype // @ts-expect-error need to add __className to patched prototype
var prev_class_name = dom.__className; var prev_class_name = dom.__className;
var next_class_name = to_class(value); var next_class_name = to_class(value);
@ -77,7 +77,7 @@ function to_class(value) {
* @param {boolean} value * @param {boolean} value
* @returns {void} * @returns {void}
*/ */
export function class_toggle(dom, class_name, value) { export function toggle_class(dom, class_name, value) {
if (value) { if (value) {
dom.classList.add(class_name); dom.classList.add(class_name);
} else { } 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 {HTMLElement} dom
* @param {string} key * @param {string} key
* @param {string} value * @param {string} value
* @param {boolean} [important] * @param {boolean} [important]
*/ */
export function style(dom, key, value, important) { export function set_style(dom, key, value, important) {
const style = dom.style; const style = dom.style;
const prev_value = style.getPropertyValue(key); const prev_value = style.getPropertyValue(key);
if (value == null) { 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 * @param {string} value
* @returns {void} * @returns {void}
*/ */
export function text(dom, value) { export function set_text(dom, value) {
// @ts-expect-error need to add __value to patched prototype // @ts-expect-error need to add __value to patched prototype
const prev_node_value = dom.__nodeValue; const prev_node_value = dom.__nodeValue;
const next_node_value = stringify(value); 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 custom_element = $.sibling($.sibling(svg, true));
var div_1 = $.sibling($.sibling(custom_element, 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)); 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)); var custom_element_1 = $.sibling($.sibling(svg_1, true));
$.render_effect(() => $.set_custom_element_data(custom_element_1, "fooBar", y())); $.render_effect(() => $.set_custom_element_data(custom_element_1, "fooBar", y()));
$.render_effect(() => { $.render_effect(() => {
$.attr(div, "foobar", x); $.set_attribute(div, "foobar", x);
$.attr(svg, "viewBox", x); $.set_attribute(svg, "viewBox", x);
$.set_custom_element_data(custom_element, "fooBar", 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) => { ($$anchor, thing, $$index) => {
var text = $.space_frag($$anchor); var text = $.space_frag($$anchor);
$.render_effect(() => $.text(text, `${$.stringify($.unwrap(thing))}, `)); $.render_effect(() => $.set_text(text, `${$.stringify($.unwrap(thing))}, `));
return $.close($$anchor, text); return $.close($$anchor, text);
}, },
null 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) => { children: ($$anchor, $$slotProps) => {
var text = $.space_frag($$anchor); 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); return $.close($$anchor, text);
} }
}); });

Write Preview
Loading…
Cancel
Save