mirror of https://github.com/sveltejs/svelte
adiguba
2 years ago
parent
9873443337
commit
55761143ca
@ -1,120 +1,49 @@
|
||||
import { to_class } from '../../../shared/attributes.js';
|
||||
import { hydrating } from '../hydration.js';
|
||||
|
||||
/**
|
||||
* @param {SVGElement} dom
|
||||
* @param {string} value
|
||||
* @param {string} [hash]
|
||||
* @returns {void}
|
||||
*/
|
||||
export function set_svg_class(dom, value, hash) {
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
var prev_class_name = dom.__className;
|
||||
var next_class_name = to_class(value, hash);
|
||||
|
||||
if (hydrating && dom.getAttribute('class') === 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.getAttribute('class') !== next_class_name)
|
||||
) {
|
||||
if (next_class_name === '') {
|
||||
dom.removeAttribute('class');
|
||||
} else {
|
||||
dom.setAttribute('class', next_class_name);
|
||||
}
|
||||
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
dom.__className = next_class_name;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {MathMLElement} dom
|
||||
* @param {string} value
|
||||
* @param {Element} dom
|
||||
* @param {boolean|number} is_html
|
||||
* @param {string|null} value
|
||||
* @param {string} [hash]
|
||||
* @returns {void}
|
||||
* @param {Record<string,boolean>} [prev_classes]
|
||||
* @param {Record<string,boolean>} [next_classes]
|
||||
* @returns {Record<string,boolean>|undefined}
|
||||
*/
|
||||
export function set_mathml_class(dom, value, hash) {
|
||||
export function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
var prev_class_name = dom.__className;
|
||||
var next_class_name = to_class(value, hash);
|
||||
|
||||
if (hydrating && dom.getAttribute('class') === 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.getAttribute('class') !== next_class_name)
|
||||
) {
|
||||
if (next_class_name === '') {
|
||||
dom.removeAttribute('class');
|
||||
} else {
|
||||
dom.setAttribute('class', next_class_name);
|
||||
var prev = dom.__className;
|
||||
|
||||
if (hydrating || prev !== value) {
|
||||
var next_class_name = to_class(value, hash, next_classes);
|
||||
if (!hydrating || next_class_name !== dom.getAttribute('class')) {
|
||||
// Removing the attribute when the value is only an empty string causes
|
||||
// performance issues vs simply making the className an empty string. So
|
||||
// we should only remove the class if the the value is nullish
|
||||
// and there no hash/directives :
|
||||
if (next_class_name == null) {
|
||||
dom.removeAttribute('class');
|
||||
} else if (is_html) {
|
||||
dom.className = next_class_name;
|
||||
} else {
|
||||
dom.setAttribute('class', next_class_name);
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
dom.__className = next_class_name;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} dom
|
||||
* @param {string} value
|
||||
* @param {string} [hash]
|
||||
* @returns {void}
|
||||
*/
|
||||
export function set_class(dom, value, hash) {
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
var prev_class_name = dom.__className;
|
||||
var next_class_name = to_class(value, hash);
|
||||
|
||||
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)
|
||||
) {
|
||||
// Removing the attribute when the value is only an empty string causes
|
||||
// peformance issues vs simply making the className an empty string. So
|
||||
// we should only remove the class if the the value is nullish.
|
||||
if (value == null && !hash) {
|
||||
dom.removeAttribute('class');
|
||||
} else {
|
||||
dom.className = next_class_name;
|
||||
dom.__className = value;
|
||||
} else if (next_classes) {
|
||||
prev_classes = prev_classes ?? {};
|
||||
for (const key in next_classes) {
|
||||
const is_present = !!next_classes[key];
|
||||
if (is_present !== !!prev_classes[key]) {
|
||||
// TODO : use dom.classList.toggle instead ?
|
||||
if (is_present) {
|
||||
dom.classList.add(key);
|
||||
} else {
|
||||
dom.classList.remove(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-expect-error need to add __className to patched prototype
|
||||
dom.__className = next_class_name;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @template V
|
||||
* @param {V} value
|
||||
* @param {string} [hash]
|
||||
* @returns {string | V}
|
||||
*/
|
||||
function to_class(value, hash) {
|
||||
return (value == null ? '' : value) + (hash ? ' ' + hash : '');
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} dom
|
||||
* @param {string} class_name
|
||||
* @param {boolean} value
|
||||
* @returns {void}
|
||||
*/
|
||||
export function toggle_class(dom, class_name, value) {
|
||||
if (value) {
|
||||
if (dom.classList.contains(class_name)) return;
|
||||
dom.classList.add(class_name);
|
||||
} else {
|
||||
if (!dom.classList.contains(class_name)) return;
|
||||
dom.classList.remove(class_name);
|
||||
}
|
||||
return next_classes;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue