mirror of https://github.com/sveltejs/svelte
move element code (#10778)
* move element code * eslint nonsense --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/10770/head
Rich Harris
7 months ago
committed by
GitHub
parent
84fa18a850
commit
de021aebb5
@ -0,0 +1,363 @@
|
||||
import { DEV } from 'esm-env';
|
||||
import { hydrating } from '../../hydration.js';
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
import { get_descriptors, object_assign } from '../../utils.js';
|
||||
import { map_get, map_set } from '../../operations.js';
|
||||
import { AttributeAliases, DelegatedEvents, namespace_svg } from '../../../../constants.js';
|
||||
import { delegate } from './events.js';
|
||||
import { autofocus } from './misc.js';
|
||||
|
||||
/**
|
||||
* The value/checked attribute in the template actually corresponds to the defaultValue property, so we need
|
||||
* to remove it upon hydration to avoid a bug when someone resets the form value.
|
||||
* @param {HTMLInputElement | HTMLSelectElement} dom
|
||||
* @returns {void}
|
||||
*/
|
||||
export function remove_input_attr_defaults(dom) {
|
||||
if (hydrating) {
|
||||
attr(dom, 'value', null);
|
||||
attr(dom, 'checked', null);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} attribute
|
||||
* @param {() => string} value
|
||||
*/
|
||||
export function attr_effect(dom, attribute, value) {
|
||||
render_effect(() => {
|
||||
attr(dom, attribute, value());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} attribute
|
||||
* @param {string | null} value
|
||||
*/
|
||||
export function attr(dom, attribute, value) {
|
||||
value = value == null ? null : value + '';
|
||||
|
||||
if (DEV) {
|
||||
check_src_in_dev_hydration(dom, attribute, value);
|
||||
}
|
||||
|
||||
if (
|
||||
!hydrating ||
|
||||
(dom.getAttribute(attribute) !== value &&
|
||||
// If we reset those, they would result in another network request, which we want to avoid.
|
||||
// We assume they are the same between client and server as checking if they are equal is expensive
|
||||
// (we can't just compare the strings as they can be different between client and server but result in the
|
||||
// same url, so we would need to create hidden anchor elements to compare them)
|
||||
attribute !== 'src' &&
|
||||
attribute !== 'href' &&
|
||||
attribute !== 'srcset')
|
||||
) {
|
||||
if (value === null) {
|
||||
dom.removeAttribute(attribute);
|
||||
} else {
|
||||
dom.setAttribute(attribute, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} attribute
|
||||
* @param {() => string} value
|
||||
*/
|
||||
export function xlink_attr_effect(dom, attribute, value) {
|
||||
render_effect(() => {
|
||||
xlink_attr(dom, attribute, value());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} attribute
|
||||
* @param {string} value
|
||||
*/
|
||||
export function xlink_attr(dom, attribute, value) {
|
||||
dom.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} node
|
||||
* @param {string} prop
|
||||
* @param {() => any} value
|
||||
*/
|
||||
export function set_custom_element_data_effect(node, prop, value) {
|
||||
render_effect(() => {
|
||||
set_custom_element_data(node, prop, value());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} node
|
||||
* @param {string} prop
|
||||
* @param {any} value
|
||||
*/
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Like `spread_attributes` but self-contained
|
||||
* @param {Element & ElementCSSInlineStyle} dom
|
||||
* @param {() => Record<string, unknown>[]} attrs
|
||||
* @param {boolean} lowercase_attributes
|
||||
* @param {string} css_hash
|
||||
*/
|
||||
export function spread_attributes_effect(dom, attrs, lowercase_attributes, css_hash) {
|
||||
/** @type {Record<string, any> | undefined} */
|
||||
var current;
|
||||
|
||||
render_effect(() => {
|
||||
current = spread_attributes(dom, current, attrs(), lowercase_attributes, css_hash);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Spreads attributes onto a DOM element, taking into account the currently set attributes
|
||||
* @param {Element & ElementCSSInlineStyle} dom
|
||||
* @param {Record<string, unknown> | undefined} prev
|
||||
* @param {Record<string, unknown>[]} attrs
|
||||
* @param {boolean} lowercase_attributes
|
||||
* @param {string} css_hash
|
||||
* @returns {Record<string, unknown>}
|
||||
*/
|
||||
export function spread_attributes(dom, prev, attrs, lowercase_attributes, css_hash) {
|
||||
var next = object_assign({}, ...attrs);
|
||||
var has_hash = css_hash.length !== 0;
|
||||
|
||||
for (var key in prev) {
|
||||
if (!(key in next)) {
|
||||
next[key] = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (has_hash && !next.class) {
|
||||
next.class = '';
|
||||
}
|
||||
|
||||
var setters = map_get(setters_cache, dom.nodeName);
|
||||
if (!setters) map_set(setters_cache, dom.nodeName, (setters = get_setters(dom)));
|
||||
|
||||
for (key in next) {
|
||||
var value = next[key];
|
||||
if (value === prev?.[key]) continue;
|
||||
|
||||
var prefix = key[0] + key[1]; // this is faster than key.slice(0, 2)
|
||||
if (prefix === '$$') continue;
|
||||
|
||||
if (prefix === 'on') {
|
||||
/** @type {{ capture?: true }} */
|
||||
var opts = {};
|
||||
var event_name = key.slice(2);
|
||||
var delegated = DelegatedEvents.includes(event_name);
|
||||
|
||||
if (
|
||||
event_name.endsWith('capture') &&
|
||||
event_name !== 'ongotpointercapture' &&
|
||||
event_name !== 'onlostpointercapture'
|
||||
) {
|
||||
event_name = event_name.slice(0, -7);
|
||||
opts.capture = true;
|
||||
}
|
||||
|
||||
if (!delegated && prev?.[key]) {
|
||||
dom.removeEventListener(event_name, /** @type {any} */ (prev[key]), opts);
|
||||
}
|
||||
|
||||
if (value != null) {
|
||||
if (!delegated) {
|
||||
dom.addEventListener(event_name, value, opts);
|
||||
} else {
|
||||
// @ts-ignore
|
||||
dom[`__${event_name}`] = value;
|
||||
delegate([event_name]);
|
||||
}
|
||||
}
|
||||
} else if (value == null) {
|
||||
dom.removeAttribute(key);
|
||||
} else if (key === 'style') {
|
||||
dom.style.cssText = value + '';
|
||||
} else if (key === 'autofocus') {
|
||||
autofocus(/** @type {HTMLElement} */ (dom), Boolean(value));
|
||||
} else if (key === '__value' || key === 'value') {
|
||||
// @ts-ignore
|
||||
dom.value = dom[key] = dom.__value = value;
|
||||
} else {
|
||||
var name = key;
|
||||
if (lowercase_attributes) {
|
||||
name = name.toLowerCase();
|
||||
name = AttributeAliases[name] || name;
|
||||
}
|
||||
|
||||
if (setters.includes(name)) {
|
||||
if (DEV) {
|
||||
check_src_in_dev_hydration(dom, name, value);
|
||||
}
|
||||
|
||||
if (
|
||||
!hydrating ||
|
||||
// @ts-ignore see attr method for an explanation of src/srcset
|
||||
(dom[name] !== value && name !== 'src' && name !== 'href' && name !== 'srcset')
|
||||
) {
|
||||
// @ts-ignore
|
||||
dom[name] = value;
|
||||
}
|
||||
} else if (typeof value !== 'function') {
|
||||
if (has_hash && name === 'class') {
|
||||
if (value) value += ' ';
|
||||
value += css_hash;
|
||||
}
|
||||
|
||||
attr(dom, name, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return next;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {() => Record<string, unknown>[]} attrs
|
||||
* @param {string} css_hash
|
||||
*/
|
||||
export function spread_dynamic_element_attributes_effect(node, attrs, css_hash) {
|
||||
/** @type {Record<string, any> | undefined} */
|
||||
var current;
|
||||
|
||||
render_effect(() => {
|
||||
current = spread_dynamic_element_attributes(node, current, attrs(), css_hash);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {Record<string, unknown> | undefined} prev
|
||||
* @param {Record<string, unknown>[]} attrs
|
||||
* @param {string} css_hash
|
||||
*/
|
||||
export function spread_dynamic_element_attributes(node, prev, attrs, css_hash) {
|
||||
if (node.tagName.includes('-')) {
|
||||
var next = object_assign({}, ...attrs);
|
||||
|
||||
for (var key in prev) {
|
||||
if (!(key in next)) {
|
||||
next[key] = null;
|
||||
}
|
||||
}
|
||||
|
||||
for (key in next) {
|
||||
set_custom_element_data(node, key, next[key]);
|
||||
}
|
||||
|
||||
return next;
|
||||
} else {
|
||||
return spread_attributes(
|
||||
/** @type {Element & ElementCSSInlineStyle} */ (node),
|
||||
prev,
|
||||
attrs,
|
||||
node.namespaceURI !== namespace_svg,
|
||||
css_hash
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* List of attributes that should always be set through the attr method,
|
||||
* because updating them through the property setter doesn't work reliably.
|
||||
* In the example of `width`/`height`, the problem is that the setter only
|
||||
* accepts numeric values, but the attribute can also be set to a string like `50%`.
|
||||
* If this list becomes too big, rethink this approach.
|
||||
*/
|
||||
var always_set_through_set_attribute = ['width', 'height'];
|
||||
|
||||
/** @type {Map<string, string[]>} */
|
||||
var setters_cache = new Map();
|
||||
|
||||
/** @param {Element} element */
|
||||
function get_setters(element) {
|
||||
/** @type {string[]} */
|
||||
var setters = [];
|
||||
|
||||
// @ts-expect-error
|
||||
var descriptors = get_descriptors(element.__proto__);
|
||||
|
||||
for (var key in descriptors) {
|
||||
if (descriptors[key].set && !always_set_through_set_attribute.includes(key)) {
|
||||
setters.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
return setters;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} dom
|
||||
* @param {string} attribute
|
||||
* @param {string | null} value
|
||||
*/
|
||||
function check_src_in_dev_hydration(dom, attribute, value) {
|
||||
if (!hydrating) return;
|
||||
if (attribute !== 'src' && attribute !== 'href' && attribute !== 'srcset') return;
|
||||
|
||||
if (attribute === 'srcset' && srcset_url_equal(dom, value)) return;
|
||||
if (src_url_equal(dom.getAttribute(attribute) ?? '', value ?? '')) return;
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(
|
||||
`Detected a ${attribute} attribute value change during hydration. This will not be repaired during hydration, ` +
|
||||
`the ${attribute} value that came from the server will be used. Related element:`,
|
||||
dom,
|
||||
' Differing value:',
|
||||
value
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} element_src
|
||||
* @param {string} url
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function src_url_equal(element_src, url) {
|
||||
if (element_src === url) return true;
|
||||
return new URL(element_src, document.baseURI).href === new URL(url, document.baseURI).href;
|
||||
}
|
||||
|
||||
/** @param {string} srcset */
|
||||
function split_srcset(srcset) {
|
||||
return srcset.split(',').map((src) => src.trim().split(' ').filter(Boolean));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLSourceElement | HTMLImageElement} element
|
||||
* @param {string | undefined | null} srcset
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function srcset_url_equal(element, srcset) {
|
||||
var element_urls = split_srcset(element.srcset);
|
||||
var urls = split_srcset(srcset ?? '');
|
||||
|
||||
return (
|
||||
urls.length === element_urls.length &&
|
||||
urls.every(
|
||||
([url, width], i) =>
|
||||
width === element_urls[i][1] &&
|
||||
// We need to test both ways because Vite will create an a full URL with
|
||||
// `new URL(asset, import.meta.url).href` for the client when `base: './'`, and the
|
||||
// relative URLs inside srcset are not automatically resolved to absolute URLs by
|
||||
// browsers (in contrast to img.src). This means both SSR and DOM code could
|
||||
// contain relative or absolute URLs.
|
||||
(src_url_equal(element_urls[i][0], url) || src_url_equal(url, element_urls[i][0]))
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
import { hydrating } from '../../hydration.js';
|
||||
import { set_class_name } from '../../operations.js';
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {() => string} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function class_name_effect(dom, value) {
|
||||
render_effect(() => {
|
||||
class_name(dom, value());
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function class_name(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);
|
||||
|
||||
if (hydrating && dom.className === next_class_name) {
|
||||
// In case of hydration don't reset the class as it's already correct.
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
dom.__className = next_class_name;
|
||||
} else if (
|
||||
prev_class_name !== next_class_name ||
|
||||
(hydrating && dom.className !== next_class_name)
|
||||
) {
|
||||
if (next_class_name === '') {
|
||||
dom.removeAttribute('class');
|
||||
} else {
|
||||
set_class_name(dom, next_class_name);
|
||||
}
|
||||
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
dom.__className = next_class_name;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @template V
|
||||
* @param {V} value
|
||||
* @returns {string | V}
|
||||
*/
|
||||
export function to_class(value) {
|
||||
return value == null ? '' : value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} class_name
|
||||
* @param {boolean} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function class_toggle(dom, class_name, value) {
|
||||
if (value) {
|
||||
dom.classList.add(class_name);
|
||||
} else {
|
||||
dom.classList.remove(class_name);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} class_name
|
||||
* @param {() => boolean} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function class_toggle_effect(dom, class_name, value) {
|
||||
render_effect(() => {
|
||||
class_toggle(dom, class_name, value());
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,154 @@
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
import { all_registered_events, root_event_handles } from '../../render.js';
|
||||
import { define_property, is_array } from '../../utils.js';
|
||||
|
||||
/**
|
||||
* @param {string} event_name
|
||||
* @param {Element} dom
|
||||
* @param {EventListener} handler
|
||||
* @param {boolean} capture
|
||||
* @param {boolean} [passive]
|
||||
* @returns {void}
|
||||
*/
|
||||
export function event(event_name, dom, handler, capture, passive) {
|
||||
var options = { capture, passive };
|
||||
|
||||
/**
|
||||
* @this {EventTarget}
|
||||
*/
|
||||
function target_handler(/** @type {Event} */ event) {
|
||||
handle_event_propagation(dom, event);
|
||||
if (!event.cancelBubble) {
|
||||
return handler.call(this, event);
|
||||
}
|
||||
}
|
||||
|
||||
dom.addEventListener(event_name, target_handler, options);
|
||||
|
||||
// @ts-ignore
|
||||
if (dom === document.body || dom === window || dom === document) {
|
||||
render_effect(() => {
|
||||
return () => {
|
||||
dom.removeEventListener(event_name, target_handler, options);
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array<string>} events
|
||||
* @returns {void}
|
||||
*/
|
||||
export function delegate(events) {
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
all_registered_events.add(events[i]);
|
||||
}
|
||||
|
||||
for (var fn of root_event_handles) {
|
||||
fn(events);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Node} handler_element
|
||||
* @param {Event} event
|
||||
* @returns {void}
|
||||
*/
|
||||
export function handle_event_propagation(handler_element, event) {
|
||||
var owner_document = handler_element.ownerDocument;
|
||||
var event_name = event.type;
|
||||
var path = event.composedPath?.() || [];
|
||||
var current_target = /** @type {null | Element} */ (path[0] || event.target);
|
||||
|
||||
if (event.target !== current_target) {
|
||||
define_property(event, 'target', {
|
||||
configurable: true,
|
||||
value: current_target
|
||||
});
|
||||
}
|
||||
|
||||
// composedPath contains list of nodes the event has propagated through.
|
||||
// We check __root to skip all nodes below it in case this is a
|
||||
// parent of the __root node, which indicates that there's nested
|
||||
// mounted apps. In this case we don't want to trigger events multiple times.
|
||||
var path_idx = 0;
|
||||
|
||||
// @ts-expect-error is added below
|
||||
var handled_at = event.__root;
|
||||
|
||||
if (handled_at) {
|
||||
var at_idx = path.indexOf(handled_at);
|
||||
if (
|
||||
at_idx !== -1 &&
|
||||
(handler_element === document || handler_element === /** @type {any} */ (window))
|
||||
) {
|
||||
// This is the fallback document listener or a window listener, but the event was already handled
|
||||
// -> ignore, but set handle_at to document/window so that we're resetting the event
|
||||
// chain in case someone manually dispatches the same event object again.
|
||||
// @ts-expect-error
|
||||
event.__root = handler_element;
|
||||
return;
|
||||
}
|
||||
|
||||
// We're deliberately not skipping if the index is higher, because
|
||||
// someone could create an event programmatically and emit it multiple times,
|
||||
// in which case we want to handle the whole propagation chain properly each time.
|
||||
// (this will only be a false negative if the event is dispatched multiple times and
|
||||
// the fallback document listener isn't reached in between, but that's super rare)
|
||||
var handler_idx = path.indexOf(handler_element);
|
||||
if (handler_idx === -1) {
|
||||
// handle_idx can theoretically be -1 (happened in some JSDOM testing scenarios with an event listener on the window object)
|
||||
// so guard against that, too, and assume that everything was handled at this point.
|
||||
return;
|
||||
}
|
||||
|
||||
if (at_idx <= handler_idx) {
|
||||
// +1 because at_idx is the element which was already handled, and there can only be one delegated event per element.
|
||||
// Avoids on:click and onclick on the same event resulting in onclick being fired twice.
|
||||
path_idx = at_idx + 1;
|
||||
}
|
||||
}
|
||||
|
||||
current_target = /** @type {Element} */ (path[path_idx] || event.target);
|
||||
|
||||
// Proxy currentTarget to correct target
|
||||
define_property(event, 'currentTarget', {
|
||||
configurable: true,
|
||||
get() {
|
||||
return current_target || owner_document;
|
||||
}
|
||||
});
|
||||
|
||||
while (current_target !== null) {
|
||||
/** @type {null | Element} */
|
||||
var parent_element =
|
||||
current_target.parentNode || /** @type {any} */ (current_target).host || null;
|
||||
var internal_prop_name = '__' + event_name;
|
||||
// @ts-ignore
|
||||
var delegated = current_target[internal_prop_name];
|
||||
|
||||
if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
|
||||
if (is_array(delegated)) {
|
||||
var [fn, ...data] = delegated;
|
||||
fn.apply(current_target, [event, ...data]);
|
||||
} else {
|
||||
delegated.call(current_target, event);
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
event.cancelBubble ||
|
||||
parent_element === handler_element ||
|
||||
current_target === handler_element
|
||||
) {
|
||||
break;
|
||||
}
|
||||
|
||||
current_target = parent_element;
|
||||
}
|
||||
|
||||
// @ts-expect-error is used above
|
||||
event.__root = handler_element;
|
||||
// @ts-expect-error is used above
|
||||
current_target = handler_element;
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
import { hydrating } from '../../hydration.js';
|
||||
import { render_effect } from '../../reactivity/effects.js';
|
||||
import { current_block } from '../../runtime.js';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} dom
|
||||
* @param {boolean} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function autofocus(dom, value) {
|
||||
if (value) {
|
||||
const body = document.body;
|
||||
dom.autofocus = true;
|
||||
render_effect(
|
||||
() => {
|
||||
if (document.activeElement === body) {
|
||||
dom.focus();
|
||||
}
|
||||
},
|
||||
current_block,
|
||||
true,
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The child of a textarea actually corresponds to the defaultValue property, so we need
|
||||
* to remove it upon hydration to avoid a bug when someone resets the form value.
|
||||
* @param {HTMLTextAreaElement} dom
|
||||
* @returns {void}
|
||||
*/
|
||||
export function remove_textarea_child(dom) {
|
||||
if (hydrating && dom.firstChild !== null) {
|
||||
dom.textContent = '';
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
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) {
|
||||
const style = dom.style;
|
||||
const prev_value = style.getPropertyValue(key);
|
||||
if (value == null) {
|
||||
if (prev_value !== '') {
|
||||
style.removeProperty(key);
|
||||
}
|
||||
} else if (prev_value !== value) {
|
||||
style.setProperty(key, value, important ? 'important' : '');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} dom
|
||||
* @param {string} key
|
||||
* @param {() => string} value
|
||||
* @param {boolean} [important]
|
||||
* @returns {void}
|
||||
*/
|
||||
export function style_effect(dom, key, value, important) {
|
||||
render_effect(() => {
|
||||
const string = value();
|
||||
style(dom, key, string, important);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in new issue