extra-attributes}} />' };
+ },
+ { attributes: [ 'name' ] }
+ ),
+ proxy2: Ractive.proxy(
+ handle => {
+ t.equal( handle.template.m.length, 2 );
+ return { template: '
extra-attributes}} />' };
+ }
+ )
+ }
+ });
+
+ t.htmlEqual( fixture.innerHTML, '' );
+ });
+
+ test( `optional proxy invalidate callback`, t => {
+ t.expect( 1 );
+
+ const r = new Ractive({
+ target: fixture,
+ template: `{{#if bar}}...{{/if}}{{#if foo}}...{{/if}}`,
+ data: {
+ foo: true,
+ bar: true
+ },
+ proxies: {
+ proxy: Ractive.proxy(
+ () => {
+ return {
+ template: '{{>content}}',
+ invalidate () {
+ t.ok( true );
+ }
+ };
+ }
+ )
+ }
+ });
+
+ r.toggle( 'foo' );
+ r.toggle( 'bar' );
+ });
+
+ test( `proxy refresh`, t => {
+ let handle;
+ const proxy = {};
+
+ new Ractive({
+ target: fixture,
+ template: '',
+ proxies: {
+ proxy: Ractive.proxy( h => {
+ handle = h;
+ return proxy;
+ })
+ }
+ });
+
+ const script = document.createElement( 'script' );
+ script.setAttribute( 'type', 'text/html' );
+ script.setAttribute( 'id', 'proxy-template' );
+ script.textContent = 'hello';
+ document.body.appendChild( script );
+
+ t.htmlEqual( fixture.innerHTML, '' );
+
+ proxy.template = '#proxy-template';
+ handle.refresh();
+ t.htmlEqual( fixture.innerHTML, 'hello' );
+
+ proxy.template = 'testing';
+ handle.refresh();
+ t.htmlEqual( fixture.innerHTML, 'testing' );
+
+ proxy.template = { template: 'partial style obj' };
+ handle.refresh();
+ t.htmlEqual( fixture.innerHTML, 'partial style obj' );
+
+ proxy.template = { t: [ 'other partial' ] };
+ handle.refresh();
+ t.htmlEqual( fixture.innerHTML, 'other partial' );
+
+ proxy.template = [ 'direct template' ];
+ handle.refresh();
+ t.htmlEqual( fixture.innerHTML, 'direct template' );
+
+ document.body.removeChild( script );
+ });
+
+ test( `proxy progressive enhancement`, t => {
+ fixture.innerHTML = `hello
`;
+ const div = fixture.childNodes[0];
+
+ new Ractive({
+ target: fixture,
+ enhance: true,
+ template: '',
+ proxies: {
+ proxy: Ractive.proxy( () => ({ template: 'hello
' }) )
+ }
+ });
+
+ t.ok( fixture.childNodes.length === 1 );
+ t.ok( fixture.childNodes[0] === div );
+ });
+
+ test( `proxy kept set`, t => {
+ const r = new Ractive({
+ target: fixture,
+ template: '{{#if foo}}{{/if}}',
+ data: {
+ foo: true
+ },
+ proxies: {
+ proxy: Ractive.proxy( () => ({ template: 'hello
' }) )
+ }
+ });
+
+ const div = fixture.childNodes[0];
+
+ r.toggle( 'foo', { keep: true } );
+ r.toggle( 'foo' );
+
+ t.ok( fixture.childNodes.length === 1 );
+ t.ok( fixture.childNodes[0] === div );
+ });
+
+ test( `proxy in component`, t => {
+ new Ractive({
+ target: fixture,
+ template: '',
+ components: {
+ cmp: Ractive.extend({
+ template: '',
+ proxies: {
+ div: Ractive.proxy( () => ({ template: '' }) )
+ }
+ })
+ }
+ });
+
+ t.htmlEqual( fixture.innerHTML, '' );
+ });
+
+ test( `proxy teardown callback`, t => {
+ let up = 0;
+ let down = 0;
+
+ const r = new Ractive({
+ target: fixture,
+ template: `{{#if foo}}{{/if}}`,
+ proxies: {
+ proxy: Ractive.proxy(
+ () => ++up && {
+ template: 'yep',
+ teardown () { down++; }
+ }
+ )
+ }
+ });
+
+ r.toggle( 'foo' );
+
+ t.equal( up, 1 );
+ t.equal( down, 0 );
+
+ r.toggle( 'foo' );
+
+ t.equal( up, 1 );
+ t.equal( down, 1 );
+
+ r.toggle( 'foo' );
+
+ t.equal( up, 2 );
+ t.equal( down, 1 );
+
+ r.toggle( 'foo' );
+
+ t.equal( up, 2 );
+ t.equal( down, 2 );
+ });
+
+ test( `proxy css`, t => {
+ const r = new Ractive({
+ target: fixture,
+ template: ``,
+ proxies: {
+ proxy: Ractive.proxy(
+ () => ({ template: '' }),
+ {
+ css: 'div { width: 123px; }'
+ }
+ )
+ }
+ });
+
+ t.equal( r.find( 'div' ).clientWidth, 123 );
+ });
+
+ test( `proxy css no transform`, t => {
+ const r = new Ractive({
+ target: fixture,
+ template: ``,
+ proxies: {
+ proxy: Ractive.proxy(
+ () => ({ template: [ 'yep' ] }),
+ {
+ css: '.proxy-css-no-transforms { width: 123px; }',
+ noCssTransform: true
+ }
+ )
+ }
+ });
+
+ t.equal( r.find( 'div' ).clientWidth, 123 );
+ });
+
+ test( `proxy css fn`, t => {
+ const proxy = Ractive.proxy(
+ () => ({ template: '' }),
+ {
+ css ( data ) {
+ return `div { width: ${data('width')}; }`;
+ }
+ }
+ );
+
+ proxy.styleSet( 'width', '123px' );
+
+ const r = new Ractive({
+ target: fixture,
+ template: ``,
+ proxies: {
+ proxy
+ }
+ });
+
+ t.equal( r.find( 'div' ).clientWidth, 123 );
+
+ proxy.styleSet( 'width', '124px' );
+
+ t.equal( r.find( 'div' ).clientWidth, 124 );
+ });
+}