|
|
@ -8,8 +8,6 @@ export default function visitAttribute ( generator, block, state, node, attribut
|
|
|
|
let metadata = state.namespace ? null : attributeLookup[ name ];
|
|
|
|
let metadata = state.namespace ? null : attributeLookup[ name ];
|
|
|
|
if ( metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf( node.name ) ) metadata = null;
|
|
|
|
if ( metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf( node.name ) ) metadata = null;
|
|
|
|
|
|
|
|
|
|
|
|
let dynamic = false;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const isIndirectlyBoundValue = name === 'value' && (
|
|
|
|
const isIndirectlyBoundValue = name === 'value' && (
|
|
|
|
node.name === 'option' || // TODO check it's actually bound
|
|
|
|
node.name === 'option' || // TODO check it's actually bound
|
|
|
|
node.name === 'input' && /^(checkbox|radio)$/.test( getStaticAttributeValue( node, 'type' ) )
|
|
|
|
node.name === 'input' && /^(checkbox|radio)$/.test( getStaticAttributeValue( node, 'type' ) )
|
|
|
@ -22,112 +20,73 @@ export default function visitAttribute ( generator, block, state, node, attribut
|
|
|
|
// HTML5?
|
|
|
|
// HTML5?
|
|
|
|
const method = name.slice( 0, 6 ) === 'xlink:' ? 'setXlinkAttribute' : 'setAttribute';
|
|
|
|
const method = name.slice( 0, 6 ) === 'xlink:' ? 'setXlinkAttribute' : 'setAttribute';
|
|
|
|
|
|
|
|
|
|
|
|
// attributes without values, e.g. <textarea readonly>
|
|
|
|
const isDynamic = attribute.value !== true && attribute.value.length > 1 || ( attribute.value.length === 1 && attribute.value[0].type !== 'Text' );
|
|
|
|
if ( attribute.value === true ) {
|
|
|
|
|
|
|
|
if ( propertyName ) {
|
|
|
|
|
|
|
|
block.builders.create.addLine(
|
|
|
|
|
|
|
|
`${state.parentNode}.${propertyName} = true;`
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
block.builders.create.addLine(
|
|
|
|
|
|
|
|
`${generator.helper( method )}( ${state.parentNode}, '${name}', true );`
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// special case – autofocus. has to be handled in a bit of a weird way
|
|
|
|
if ( isDynamic ) {
|
|
|
|
if ( name === 'autofocus' ) {
|
|
|
|
let value;
|
|
|
|
block.autofocus = state.parentNode;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// empty string
|
|
|
|
if ( attribute.value.length === 1 ) {
|
|
|
|
else if ( attribute.value.length === 0 ) {
|
|
|
|
// single {{tag}} — may be a non-string
|
|
|
|
if ( propertyName ) {
|
|
|
|
const { snippet } = generator.contextualise( block, attribute.value[0].expression );
|
|
|
|
block.builders.create.addLine(
|
|
|
|
value = snippet;
|
|
|
|
`${state.parentNode}.${propertyName} = '';`
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
block.builders.create.addLine(
|
|
|
|
// '{{foo}} {{bar}}' — treat as string concatenation
|
|
|
|
`${generator.helper( method )}( ${state.parentNode}, '${name}', '' );`
|
|
|
|
value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
|
|
|
|
);
|
|
|
|
attribute.value.map( chunk => {
|
|
|
|
}
|
|
|
|
if ( chunk.type === 'Text' ) {
|
|
|
|
}
|
|
|
|
return JSON.stringify( chunk.data );
|
|
|
|
|
|
|
|
|
|
|
|
// static text or a single {{tag}}
|
|
|
|
|
|
|
|
else if ( attribute.value.length === 1 ) {
|
|
|
|
|
|
|
|
const value = attribute.value[0];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( value.type === 'Text' ) {
|
|
|
|
|
|
|
|
// static attributes
|
|
|
|
|
|
|
|
const result = JSON.stringify( value.data );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( propertyName ) {
|
|
|
|
|
|
|
|
block.builders.create.addLine(
|
|
|
|
|
|
|
|
`${state.parentNode}.${propertyName} = ${result};`
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
if ( name === 'xmlns' ) {
|
|
|
|
const { snippet } = generator.contextualise( block, chunk.expression );
|
|
|
|
// special case
|
|
|
|
return `( ${snippet} )`;
|
|
|
|
// TODO this attribute must be static – enforce at compile time
|
|
|
|
|
|
|
|
state.namespace = value.data;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}).join( ' + ' )
|
|
|
|
block.builders.create.addLine(
|
|
|
|
|
|
|
|
`${generator.helper( method )}( ${state.parentNode}, '${name}', ${result} );`
|
|
|
|
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else {
|
|
|
|
|
|
|
|
dynamic = true;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// dynamic – but potentially non-string – attributes
|
|
|
|
|
|
|
|
const { snippet } = generator.contextualise( block, value.expression );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const last = `last_${state.parentNode}_${name.replace( /-/g, '_')}`;
|
|
|
|
const last = `last_${state.parentNode}_${name.replace( /-/g, '_')}`;
|
|
|
|
block.builders.create.addLine( `var ${last} = ${snippet};` );
|
|
|
|
block.builders.create.addLine( `var ${last} = ${value};` );
|
|
|
|
|
|
|
|
|
|
|
|
const updater = propertyName ?
|
|
|
|
const updater = propertyName ?
|
|
|
|
`${state.parentNode}.${propertyName} = ${last};` :
|
|
|
|
`${state.parentNode}.${propertyName} = ${last};` :
|
|
|
|
`${generator.helper( method )}( ${state.parentNode}, '${name}', ${last} );`;
|
|
|
|
`${generator.helper( method )}( ${state.parentNode}, '${name}', ${last} );`;
|
|
|
|
|
|
|
|
|
|
|
|
block.builders.create.addLine( updater );
|
|
|
|
block.builders.create.addLine( updater );
|
|
|
|
|
|
|
|
|
|
|
|
block.builders.update.addBlock( deindent`
|
|
|
|
block.builders.update.addBlock( deindent`
|
|
|
|
if ( ( ${block.tmp()} = ${snippet} ) !== ${last} ) {
|
|
|
|
if ( ( ${block.tmp()} = ${value} ) !== ${last} ) {
|
|
|
|
${last} = ${block.tmp()};
|
|
|
|
${last} = ${block.tmp()};
|
|
|
|
${updater}
|
|
|
|
${updater}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
` );
|
|
|
|
` );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else {
|
|
|
|
else {
|
|
|
|
dynamic = true;
|
|
|
|
const value = attribute.value === true ? 'true' :
|
|
|
|
|
|
|
|
attribute.value.length === 0 ? `''` :
|
|
|
|
const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
|
|
|
|
JSON.stringify( attribute.value[0].data );
|
|
|
|
attribute.value.map( chunk => {
|
|
|
|
|
|
|
|
if ( chunk.type === 'Text' ) {
|
|
|
|
|
|
|
|
return JSON.stringify( chunk.data );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
const { snippet } = generator.contextualise( block, chunk.expression );
|
|
|
|
|
|
|
|
return `( ${snippet} )`;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}).join( ' + ' )
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const updater = propertyName ?
|
|
|
|
const statement = propertyName ?
|
|
|
|
`${state.parentNode}.${propertyName} = ${value};` :
|
|
|
|
`${state.parentNode}.${propertyName} = ${value};` :
|
|
|
|
`${generator.helper( method )}( ${state.parentNode}, '${name}', ${value} );`;
|
|
|
|
`${generator.helper( method )}( ${state.parentNode}, '${name}', ${value} );`;
|
|
|
|
|
|
|
|
|
|
|
|
block.builders.create.addLine( updater );
|
|
|
|
|
|
|
|
block.builders.update.addLine( updater );
|
|
|
|
block.builders.create.addLine( statement );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// special case – autofocus. has to be handled in a bit of a weird way
|
|
|
|
|
|
|
|
if ( attribute.value === true && name === 'autofocus' ) {
|
|
|
|
|
|
|
|
block.autofocus = state.parentNode;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// special case — xmlns
|
|
|
|
|
|
|
|
if ( name === 'xmlns' ) {
|
|
|
|
|
|
|
|
// TODO this attribute must be static – enforce at compile time
|
|
|
|
|
|
|
|
state.namespace = attribute.value[0].data;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if ( isIndirectlyBoundValue ) {
|
|
|
|
if ( isIndirectlyBoundValue ) {
|
|
|
|
const updateValue = `${state.parentNode}.value = ${state.parentNode}.__value;`;
|
|
|
|
const updateValue = `${state.parentNode}.value = ${state.parentNode}.__value;`;
|
|
|
|
|
|
|
|
|
|
|
|
block.builders.create.addLine( updateValue );
|
|
|
|
block.builders.create.addLine( updateValue );
|
|
|
|
if ( dynamic ) block.builders.update.addLine( updateValue );
|
|
|
|
if ( isDynamic ) block.builders.update.addLine( updateValue );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|