mirror of https://github.com/sveltejs/svelte
parent
9187c2dd09
commit
91903cb927
@ -0,0 +1,47 @@
|
||||
import deindent from '../utils/deindent.js';
|
||||
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const name = generator.current.counter( 'raw' );
|
||||
|
||||
generator.addSourcemapLocations( node.expression );
|
||||
const { snippet } = generator.contextualise( node.expression );
|
||||
|
||||
// we would have used comments here, but the `insertAdjacentHTML` api only
|
||||
// exists for `Element`s.
|
||||
const before = `${name}_before`;
|
||||
generator.addElement( before, `document.createElement( 'noscript' )`, true );
|
||||
const after = `${name}_after`;
|
||||
generator.addElement( after, `document.createElement( 'noscript' )`, true );
|
||||
|
||||
const isToplevel = generator.current.localElementDepth === 0;
|
||||
|
||||
const mountStatement = deindent`
|
||||
${before}.insertAdjacentHTML( 'afterend', ${snippet} );
|
||||
`;
|
||||
const detachStatement = deindent`
|
||||
while ( ${before}.nextSibling && ${before}.nextSibling !== ${after} ) {
|
||||
${before}.parentNode.removeChild( ${before}.nextSibling );
|
||||
}
|
||||
`;
|
||||
|
||||
if ( isToplevel ) {
|
||||
generator.current.mountStatements.push(mountStatement);
|
||||
} else {
|
||||
generator.current.initStatements.push(mountStatement);
|
||||
}
|
||||
|
||||
generator.current.updateStatements.push( deindent`
|
||||
${detachStatement}
|
||||
${mountStatement}
|
||||
` );
|
||||
|
||||
if ( isToplevel ) {
|
||||
const { detachStatements } = generator.current;
|
||||
// we need `before` and `after` to still be in the DOM when running the
|
||||
// detach code, so splice in the detach code *before* detaching
|
||||
// `before`/`after`.
|
||||
detachStatements.splice( detachStatements.length - 2, 0, detachStatement);
|
||||
}
|
||||
}
|
||||
};
|
@ -0,0 +1,16 @@
|
||||
const ns = '<noscript></noscript>';
|
||||
export default {
|
||||
data: {
|
||||
raw: '<span><em>raw html!!!\\o/</span></em>'
|
||||
},
|
||||
html: `before${ns}<span><em>raw html!!!\\o/</span></em>${ns}after`,
|
||||
|
||||
test ( assert, component, target ) {
|
||||
component.set({ raw: '' });
|
||||
assert.equal( target.innerHTML, `before${ns}${ns}after` );
|
||||
component.set({ raw: 'how about <strong>unclosed elements?' });
|
||||
assert.equal( target.innerHTML, `before${ns}how about <strong>unclosed elements?</strong>${ns}after` );
|
||||
component.teardown();
|
||||
assert.equal( target.innerHTML, '' );
|
||||
}
|
||||
};
|
@ -0,0 +1 @@
|
||||
before{{{raw}}}after
|
Loading…
Reference in new issue