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