|
|
import fix_attribute_casing from './fix_attribute_casing.js';
|
|
|
import { string_literal } from '../../../utils/stringify.js';
|
|
|
import { b, x } from 'code-red';
|
|
|
import handle_select_value_binding from './handle_select_value_binding.js';
|
|
|
import { namespaces } from '../../../../utils/namespaces.js';
|
|
|
import { boolean_attributes } from '../../../../../shared/boolean_attributes.js';
|
|
|
import { regex_double_quotes } from '../../../../utils/patterns.js';
|
|
|
|
|
|
const non_textlike_input_types = new Set([
|
|
|
'button',
|
|
|
'checkbox',
|
|
|
'color',
|
|
|
'date',
|
|
|
'datetime-local',
|
|
|
'file',
|
|
|
'hidden',
|
|
|
'image',
|
|
|
'radio',
|
|
|
'range',
|
|
|
'reset',
|
|
|
'submit'
|
|
|
]);
|
|
|
|
|
|
export class BaseAttributeWrapper {
|
|
|
/** @type {import('../../../nodes/Attribute.js').default} */
|
|
|
node;
|
|
|
|
|
|
/** @type {import('./index.js').default} */
|
|
|
parent;
|
|
|
|
|
|
/**
|
|
|
* @param {import('./index.js').default} parent
|
|
|
* @param {import('../../Block.js').default} block
|
|
|
* @param {import('../../../nodes/Attribute.js').default} node
|
|
|
*/
|
|
|
constructor(parent, block, node) {
|
|
|
this.node = node;
|
|
|
this.parent = parent;
|
|
|
if (node.dependencies.size > 0) {
|
|
|
block.add_dependencies(node.dependencies);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** @param {import('../../Block.js').default} _block */
|
|
|
render(_block) {}
|
|
|
}
|
|
|
const regex_minus_sign = /-/;
|
|
|
const regex_invalid_variable_identifier_characters = /[^a-zA-Z_$]/g;
|
|
|
|
|
|
/** @extends BaseAttributeWrapper */
|
|
|
export default class AttributeWrapper extends BaseAttributeWrapper {
|
|
|
/** @type {any} */
|
|
|
metadata;
|
|
|
|
|
|
/** @type {string} */
|
|
|
name;
|
|
|
|
|
|
/** @type {string} */
|
|
|
property_name;
|
|
|
|
|
|
/** @type {boolean} */
|
|
|
is_indirectly_bound_value;
|
|
|
|
|
|
/** @type {boolean} */
|
|
|
is_src;
|
|
|
|
|
|
/** @type {boolean} */
|
|
|
is_select_value_attribute;
|
|
|
|
|
|
/** @type {boolean} */
|
|
|
is_input_value;
|
|
|
|
|
|
/** @type {boolean} */
|
|
|
should_cache;
|
|
|
|
|
|
/** @type {import('estree').Identifier} */
|
|
|
last;
|
|
|
constructor(parent, block, node) {
|
|
|
super(parent, block, node);
|
|
|
if (node.dependencies.size > 0) {
|
|
|
// special case — <option value={foo}> — see below
|
|
|
if (this.parent.node.name === 'option' && node.name === 'value') {
|
|
|
let select = this.parent;
|
|
|
while (select && (select.node.type !== 'Element' || select.node.name !== 'select')) {
|
|
|
// @ts-ignore todo: doublecheck this, but looks to be correct
|
|
|
select = select.parent;
|
|
|
}
|
|
|
if (select && select.select_binding_dependencies) {
|
|
|
select.select_binding_dependencies.forEach((prop) => {
|
|
|
this.node.dependencies.forEach((dependency) => {
|
|
|
this.parent.renderer.component.indirect_dependencies.get(prop).add(dependency);
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
if (node.name === 'value') {
|
|
|
handle_select_value_binding(this, node.dependencies);
|
|
|
this.parent.has_dynamic_value = true;
|
|
|
}
|
|
|
}
|
|
|
if (this.parent.node.namespace == namespaces.foreign) {
|
|
|
// leave attribute case alone for elements in the "foreign" namespace
|
|
|
this.name = this.node.name;
|
|
|
this.metadata = this.get_metadata();
|
|
|
this.is_indirectly_bound_value = false;
|
|
|
this.property_name = null;
|
|
|
this.is_select_value_attribute = false;
|
|
|
this.is_input_value = false;
|
|
|
} else {
|
|
|
this.name = fix_attribute_casing(this.node.name);
|
|
|
this.metadata = this.get_metadata();
|
|
|
this.is_indirectly_bound_value = is_indirectly_bound_value(this);
|
|
|
this.property_name = this.is_indirectly_bound_value
|
|
|
? '__value'
|
|
|
: this.metadata && this.metadata.property_name;
|
|
|
this.is_select_value_attribute = this.name === 'value' && this.parent.node.name === 'select';
|
|
|
this.is_input_value = this.name === 'value' && this.parent.node.name === 'input';
|
|
|
}
|
|
|
// TODO retire this exception in favour of https://github.com/sveltejs/svelte/issues/3750
|
|
|
this.is_src =
|
|
|
this.name === 'src' &&
|
|
|
(!this.parent.node.namespace || this.parent.node.namespace === namespaces.html);
|
|
|
this.should_cache = should_cache(this);
|
|
|
}
|
|
|
|
|
|
/** @param {import('../../Block.js').default} block */
|
|
|
render(block) {
|
|
|
const element = this.parent;
|
|
|
const { name, property_name, should_cache, is_indirectly_bound_value } = this;
|
|
|
// xlink is a special case... we could maybe extend this to generic
|
|
|
// namespaced attributes but I'm not sure that's applicable in
|
|
|
// HTML5?
|
|
|
const method = regex_minus_sign.test(element.node.name)
|
|
|
? '@set_custom_element_data'
|
|
|
: name.slice(0, 6) === 'xlink:'
|
|
|
? '@xlink_attr'
|
|
|
: '@attr';
|
|
|
const is_legacy_input_type =
|
|
|
element.renderer.component.compile_options.legacy &&
|
|
|
name === 'type' &&
|
|
|
this.parent.node.name === 'input';
|
|
|
const dependencies = this.get_dependencies();
|
|
|
const value = this.get_value(block);
|
|
|
|
|
|
/** @type {import('estree').Node[]} */
|
|
|
let updater;
|
|
|
const init = this.get_init(block, value);
|
|
|
if (is_legacy_input_type) {
|
|
|
block.chunks.hydrate.push(b`@set_input_type(${element.var}, ${init});`);
|
|
|
updater = b`@set_input_type(${element.var}, ${should_cache ? this.last : value});`;
|
|
|
} else if (this.is_select_value_attribute) {
|
|
|
// annoying special case
|
|
|
const is_multiple_select = element.node.get_static_attribute_value('multiple');
|
|
|
if (is_multiple_select) {
|
|
|
updater = b`@select_options(${element.var}, ${value});`;
|
|
|
} else {
|
|
|
updater = b`@select_option(${element.var}, ${value});`;
|
|
|
}
|
|
|
block.chunks.mount.push(b`
|
|
|
${updater}
|
|
|
`);
|
|
|
} else if (this.is_src) {
|
|
|
block.chunks.hydrate.push(
|
|
|
b`if (!@src_url_equal(${element.var}.src, ${init})) ${method}(${element.var}, "${name}", ${this.last});`
|
|
|
);
|
|
|
updater = b`${method}(${element.var}, "${name}", ${should_cache ? this.last : value});`;
|
|
|
} else if (property_name) {
|
|
|
block.chunks.hydrate.push(b`${element.var}.${property_name} = ${init};`);
|
|
|
updater = block.renderer.options.dev
|
|
|
? b`@prop_dev(${element.var}, "${property_name}", ${should_cache ? this.last : value});`
|
|
|
: b`${element.var}.${property_name} = ${should_cache ? this.last : value};`;
|
|
|
} else {
|
|
|
block.chunks.hydrate.push(b`${method}(${element.var}, "${name}", ${init});`);
|
|
|
updater = b`${method}(${element.var}, "${name}", ${should_cache ? this.last : value});`;
|
|
|
}
|
|
|
if (is_indirectly_bound_value) {
|
|
|
const update_value = b`@set_input_value(${element.var}, ${element.var}.__value);`;
|
|
|
block.chunks.hydrate.push(update_value);
|
|
|
updater = b`
|
|
|
${updater}
|
|
|
${update_value};
|
|
|
`;
|
|
|
}
|
|
|
if (this.node.name === 'value' && dependencies.length > 0) {
|
|
|
if (this.parent.bindings.some((binding) => binding.node.name === 'group')) {
|
|
|
this.parent.dynamic_value_condition = block.get_unique_name('value_has_changed');
|
|
|
block.add_variable(this.parent.dynamic_value_condition, x`false`);
|
|
|
updater = b`
|
|
|
${updater}
|
|
|
${this.parent.dynamic_value_condition} = true;
|
|
|
`;
|
|
|
}
|
|
|
}
|
|
|
if (dependencies.length > 0) {
|
|
|
const condition = this.get_dom_update_conditions(block, block.renderer.dirty(dependencies));
|
|
|
block.chunks.update.push(b`
|
|
|
if (${condition}) {
|
|
|
${updater}
|
|
|
}`);
|
|
|
}
|
|
|
// special case – autofocus. has to be handled in a bit of a weird way
|
|
|
if (name === 'autofocus') {
|
|
|
block.autofocus = {
|
|
|
element_var: element.var,
|
|
|
condition_expression: this.node.is_true ? undefined : value
|
|
|
};
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* @param {import('../../Block.js').default} block
|
|
|
* @param {any} value
|
|
|
*/
|
|
|
get_init(block, value) {
|
|
|
this.last =
|
|
|
this.should_cache &&
|
|
|
block.get_unique_name(
|
|
|
`${this.parent.var.name}_${this.name.replace(
|
|
|
regex_invalid_variable_identifier_characters,
|
|
|
'_'
|
|
|
)}_value`
|
|
|
);
|
|
|
if (this.should_cache) block.add_variable(this.last);
|
|
|
return this.should_cache ? x`${this.last} = ${value}` : value;
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* @param {import('../../Block.js').default} block
|
|
|
* @param {import('estree').Node} dependency_condition
|
|
|
*/
|
|
|
get_dom_update_conditions(block, dependency_condition) {
|
|
|
const { property_name, should_cache, last } = this;
|
|
|
const element = this.parent;
|
|
|
const value = this.get_value(block);
|
|
|
let condition = dependency_condition;
|
|
|
if (should_cache) {
|
|
|
condition = this.is_src
|
|
|
? x`${condition} && (!@src_url_equal(${element.var}.src, (${last} = ${value})))`
|
|
|
: x`${condition} && (${last} !== (${last} = ${value}))`;
|
|
|
}
|
|
|
if (this.is_input_value) {
|
|
|
const type = element.node.get_static_attribute_value('type');
|
|
|
if (type !== true && !non_textlike_input_types.has(type)) {
|
|
|
condition = x`${condition} && ${element.var}.${property_name} !== ${
|
|
|
should_cache ? last : value
|
|
|
}`;
|
|
|
}
|
|
|
}
|
|
|
if (block.has_outros) {
|
|
|
condition = x`!#current || ${condition}`;
|
|
|
}
|
|
|
return condition;
|
|
|
}
|
|
|
get_dependencies() {
|
|
|
const node_dependencies = this.node.get_dependencies();
|
|
|
const dependencies = new Set(node_dependencies);
|
|
|
node_dependencies.forEach((prop) => {
|
|
|
const indirect_dependencies = this.parent.renderer.component.indirect_dependencies.get(prop);
|
|
|
if (indirect_dependencies) {
|
|
|
indirect_dependencies.forEach((indirect_dependency) => {
|
|
|
dependencies.add(indirect_dependency);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
return Array.from(dependencies);
|
|
|
}
|
|
|
get_metadata() {
|
|
|
if (this.parent.node.namespace) return null;
|
|
|
const metadata = attribute_lookup[this.name];
|
|
|
if (metadata && metadata.applies_to && !metadata.applies_to.includes(this.parent.node.name))
|
|
|
return null;
|
|
|
return metadata;
|
|
|
}
|
|
|
|
|
|
/** @param {import('../../Block.js').default} block */
|
|
|
get_value(block) {
|
|
|
if (this.node.is_true) {
|
|
|
if (this.metadata && boolean_attributes.has(this.metadata.property_name.toLowerCase())) {
|
|
|
return x`true`;
|
|
|
}
|
|
|
return x`""`;
|
|
|
}
|
|
|
if (this.node.chunks.length === 0) return x`""`;
|
|
|
// TODO some of this code is repeated in Tag.ts — would be good to
|
|
|
// DRY it out if that's possible without introducing crazy indirection
|
|
|
if (this.node.chunks.length === 1) {
|
|
|
return this.node.chunks[0].type === 'Text'
|
|
|
? string_literal(
|
|
|
/** @type {import('../../../nodes/Text.js').default} */ (this.node.chunks[0]).data
|
|
|
)
|
|
|
: /** @type {import('../../../nodes/shared/Expression.js').default} */ (
|
|
|
this.node.chunks[0]
|
|
|
).manipulate(block);
|
|
|
}
|
|
|
let value =
|
|
|
this.node.name === 'class'
|
|
|
? this.get_class_name_text(block)
|
|
|
: this.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
|
|
|
// '{foo} {bar}' — treat as string concatenation
|
|
|
if (this.node.chunks[0].type !== 'Text') {
|
|
|
value = x`"" + ${value}`;
|
|
|
}
|
|
|
return value;
|
|
|
}
|
|
|
|
|
|
/** @param {import('../../Block.js').default} block */
|
|
|
get_class_name_text(block) {
|
|
|
const scoped_css = this.node.chunks.some(
|
|
|
(/** @type {import('../../../nodes/Text.js').default} */ chunk) => chunk.synthetic
|
|
|
);
|
|
|
const rendered = this.render_chunks(block);
|
|
|
if (scoped_css && rendered.length === 2) {
|
|
|
// we have a situation like class={possiblyUndefined}
|
|
|
rendered[0] = x`@null_to_empty(${rendered[0]})`;
|
|
|
}
|
|
|
return rendered.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
|
|
|
}
|
|
|
|
|
|
/** @param {import('../../Block.js').default} block */
|
|
|
render_chunks(block) {
|
|
|
return this.node.chunks.map((chunk) => {
|
|
|
if (chunk.type === 'Text') {
|
|
|
return string_literal(chunk.data);
|
|
|
}
|
|
|
return chunk.manipulate(block);
|
|
|
});
|
|
|
}
|
|
|
stringify() {
|
|
|
if (this.node.is_true) return '';
|
|
|
const value = this.node.chunks;
|
|
|
if (value.length === 0) return '=""';
|
|
|
return `="${value
|
|
|
.map((chunk) => {
|
|
|
return chunk.type === 'Text'
|
|
|
? chunk.data.replace(regex_double_quotes, '\\"')
|
|
|
: `\${${chunk.manipulate()}}`;
|
|
|
})
|
|
|
.join('')}"`;
|
|
|
}
|
|
|
}
|
|
|
/**
|
|
|
* @type {{
|
|
|
* [key in import('../../../../../shared/boolean_attributes.js').BooleanAttributes]: { property_name?: string; applies_to?: string[] } } &
|
|
|
* { [key in string]: { property_name?: string; applies_to?: string[] }; }
|
|
|
* }
|
|
|
*/
|
|
|
const attribute_lookup = {
|
|
|
allowfullscreen: { property_name: 'allowFullscreen', applies_to: ['iframe'] },
|
|
|
allowpaymentrequest: { property_name: 'allowPaymentRequest', applies_to: ['iframe'] },
|
|
|
async: { applies_to: ['script'] },
|
|
|
autofocus: { applies_to: ['button', 'input', 'keygen', 'select', 'textarea'] },
|
|
|
autoplay: { applies_to: ['audio', 'video'] },
|
|
|
checked: { applies_to: ['input'] },
|
|
|
controls: { applies_to: ['audio', 'video'] },
|
|
|
default: { applies_to: ['track'] },
|
|
|
defer: { applies_to: ['script'] },
|
|
|
disabled: {
|
|
|
applies_to: [
|
|
|
'button',
|
|
|
'fieldset',
|
|
|
'input',
|
|
|
'keygen',
|
|
|
'optgroup',
|
|
|
'option',
|
|
|
'select',
|
|
|
'textarea'
|
|
|
]
|
|
|
},
|
|
|
formnovalidate: { property_name: 'formNoValidate', applies_to: ['button', 'input'] },
|
|
|
hidden: {},
|
|
|
indeterminate: { applies_to: ['input'] },
|
|
|
inert: {},
|
|
|
ismap: { property_name: 'isMap', applies_to: ['img'] },
|
|
|
loop: { applies_to: ['audio', 'bgsound', 'video'] },
|
|
|
multiple: { applies_to: ['input', 'select'] },
|
|
|
muted: { applies_to: ['audio', 'video'] },
|
|
|
nomodule: { property_name: 'noModule', applies_to: ['script'] },
|
|
|
novalidate: { property_name: 'noValidate', applies_to: ['form'] },
|
|
|
open: { applies_to: ['details', 'dialog'] },
|
|
|
playsinline: { property_name: 'playsInline', applies_to: ['video'] },
|
|
|
readonly: { property_name: 'readOnly', applies_to: ['input', 'textarea'] },
|
|
|
required: { applies_to: ['input', 'select', 'textarea'] },
|
|
|
reversed: { applies_to: ['ol'] },
|
|
|
selected: { applies_to: ['option'] },
|
|
|
value: {
|
|
|
applies_to: [
|
|
|
'button',
|
|
|
'option',
|
|
|
'input',
|
|
|
'li',
|
|
|
'meter',
|
|
|
'progress',
|
|
|
'param',
|
|
|
'select',
|
|
|
'textarea'
|
|
|
]
|
|
|
}
|
|
|
};
|
|
|
Object.keys(attribute_lookup).forEach((name) => {
|
|
|
const metadata = attribute_lookup[name];
|
|
|
if (!metadata.property_name) metadata.property_name = name;
|
|
|
});
|
|
|
|
|
|
/** @param {AttributeWrapper} attribute */
|
|
|
function should_cache(attribute) {
|
|
|
return attribute.is_src || attribute.node.should_cache();
|
|
|
}
|
|
|
const regex_contains_checked_or_group = /checked|group/;
|
|
|
|
|
|
/** @param {AttributeWrapper} attribute */
|
|
|
function is_indirectly_bound_value(attribute) {
|
|
|
const element = attribute.parent;
|
|
|
return (
|
|
|
attribute.name === 'value' &&
|
|
|
(element.node.name === 'option' || // TODO check it's actually bound
|
|
|
(element.node.name === 'input' &&
|
|
|
element.node.bindings.some((binding) =>
|
|
|
regex_contains_checked_or_group.test(binding.name)
|
|
|
)))
|
|
|
);
|
|
|
}
|
