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

Lint and format src/runtime/internal/Component.js

Browse Source
pull/8569/head
S. Elliott Johnson 3 years ago
parent 78da97493b
commit 2c591835fe
1 changed files with 381 additions and 344 deletions
Show Stats Download Patch File Download Diff File

103
src/runtime/internal/Component.js
Unescape View File

@ -1,7 +1,20 @@
import { add_render_callback, flush, flush_render_callbacks, schedule_update, dirty_components } from './scheduler';
import {
add_render_callback,
flush,
flush_render_callbacks,
schedule_update,
dirty_components
} from './scheduler';
import { current_component, set_current_component } from './lifecycle';
import { blank_object, is_empty, is_function, run, run_all, noop } from './utils';
import { children, detach, start_hydrating, end_hydrating, get_custom_elements_slots, insert } from './dom';
import {
children,
detach,
start_hydrating,
end_hydrating,
get_custom_elements_slots,
insert
} from './dom';
import { transition_in } from './transitions';
/** @returns {void} */
export function bind(component, name, callback) {
@ -31,8 +44,7 @@ export function mount_component(component, target, anchor) {
// the destructured on_destroy may still reference to the old array
if (component.$$.on_destroy) {
component.$$.on_destroy.push(...new_on_destroy);
}
else {
} else {
// Edge case - component was destroyed immediately,
// most likely as a result of a binding initialising
run_all(new_on_destroy);
@ -64,7 +76,16 @@ function make_dirty(component, i) {
component.$$.dirty[(i / 31) | 0] |= 1 << i % 31;
}
/** @returns {void} */
export function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) {
export function init(
component,
options,
instance,
create_fragment,
not_equal,
props,
append_styles,
dirty = [-1]
) {
const parent_component = current_component;
set_current_component(component);
/** @type {T$$} */
@ -95,10 +116,8 @@ export function init(component, options, instance, create_fragment, not_equal, p
? instance(component, options.props || {}, (i, ret, ...rest) => {
const value = rest.length ? rest[0] : ret;
if ($$.ctx && not_equal($$.ctx[i], ($$.ctx[i] = value))) {
if (!$$.skip_bound && $$.bound[i])
$$.bound[i](value);
if (ready)
make_dirty(component, i);
if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value);
if (ready) make_dirty(component, i);
}
return ret;
})
@ -115,13 +134,11 @@ export function init(component, options, instance, create_fragment, not_equal, p
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
$$.fragment && $$.fragment.l(nodes);
nodes.forEach(detach);
}
else {
} else {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
$$.fragment && $$.fragment.c();
}
if (options.intro)
transition_in(component.$$.fragment);
if (options.intro) transition_in(component.$$.fragment);
mount_component(component, options.target, options.anchor);
end_hydrating();
flush();
@ -211,7 +228,12 @@ if (typeof HTMLElement === 'function') {
// this.$$data takes precedence over this.attributes
const name = this.$$get_prop_name(attribute.name);
if (!(name in this.$$data)) {
this.$$data[name] = get_custom_element_value(name, attribute.value, this.$$props_definition, 'toProp');
this.$$data[name] = get_custom_element_value(
name,
attribute.value,
this.$$props_definition,
'toProp'
);
}
}
this.$$component = new this.$$componentCtor({
@ -236,10 +258,14 @@ if (typeof HTMLElement === 'function') {
// We don't need this when working within Svelte code, but for compatibility of people using this outside of Svelte
// and setting attributes through setAttribute etc, this is helpful
attributeChangedCallback(attr, _oldValue, newValue) {
if (this.$$reflecting)
return;
if (this.$$reflecting) return;
attr = this.$$get_prop_name(attr);
this.$$data[attr] = get_custom_element_value(attr, newValue, this.$$props_definition, 'toProp');
this.$$data[attr] = get_custom_element_value(
attr,
newValue,
this.$$props_definition,
'toProp'
);
this.$$component.$set({ [attr]: this.$$data[attr] });
}
disconnectedCallback() {
@ -253,8 +279,13 @@ if (typeof HTMLElement === 'function') {
});
}
$$get_prop_name(attribute_name) {
return (Object.keys(this.$$props_definition).find((key) => this.$$props_definition[key].attribute === attribute_name ||
(!this.$$props_definition[key].attribute && key.toLowerCase() === attribute_name)) || attribute_name);
return (
Object.keys(this.$$props_definition).find(
(key) =>
this.$$props_definition[key].attribute === attribute_name ||
(!this.$$props_definition[key].attribute && key.toLowerCase() === attribute_name)
) || attribute_name
);
}
};
}
@ -269,8 +300,7 @@ function get_custom_element_value(prop, value, props_definition, transform) {
value = type === 'Boolean' && typeof value !== 'boolean' ? value != null : value;
if (!transform || !props_definition[prop]) {
return value;
}
else if (transform === 'toAttribute') {
} else if (transform === 'toAttribute') {
switch (type) {
case 'Object':
case 'Array':
@ -282,8 +312,7 @@ function get_custom_element_value(prop, value, props_definition, transform) {
default:
return value;
}
}
else {
} else {
switch (type) {
case 'Object':
case 'Array':
@ -308,14 +337,22 @@ function get_custom_element_value(prop, value, props_definition, transform) {
* @param {boolean} use_shadow_dom Whether to use shadow DOM
* @returns {Class<Class>} A custom element class
*/
export function create_custom_element(Component, props_definition, slots, accessors, use_shadow_dom) {
export function create_custom_element(
Component,
props_definition,
slots,
accessors,
use_shadow_dom
) {
const Class = class extends SvelteElement {
constructor() {
super(Component, slots, use_shadow_dom);
this.$$props_definition = props_definition;
}
static get observedAttributes() {
return Object.keys(props_definition).map((key) => (props_definition[key].attribute || key).toLowerCase());
return Object.keys(props_definition).map((key) =>
(props_definition[key].attribute || key).toLowerCase()
);
}
};
Object.keys(props_definition).forEach((prop) => {
@ -331,11 +368,15 @@ export function create_custom_element(Component, props_definition, slots, access
this.$$component?.$set({ [prop]: value });
if (props_definition[prop].reflect) {
this.$$reflecting = true;
const attribute_value = get_custom_element_value(prop, value, props_definition, 'toAttribute');
const attribute_value = get_custom_element_value(
prop,
value,
props_definition,
'toAttribute'
);
if (attribute_value == null) {
this.removeAttribute(prop);
}
else {
} else {
this.setAttribute(props_definition[prop].attribute || prop, attribute_value);
}
this.$$reflecting = false;
@ -375,8 +416,7 @@ export class SvelteComponent {
callbacks.push(callback);
return () => {
const index = callbacks.indexOf(callback);
if (index !== -1)
callbacks.splice(index, 1);
if (index !== -1) callbacks.splice(index, 1);
};
}
/** @returns {void} */
@ -389,9 +429,6 @@ export class SvelteComponent {
}
}
/** @typedef {Object} CustomElementPropDefinition
* @property {string} [attribute]
* @property {boolean} [reflect]

Write Preview
Loading…
Cancel
Save