Skip to content

Commit

Permalink
Merge pull request #19659 from mixonic/mixonic/remove-renderTemplate
Browse files Browse the repository at this point in the history 
Remove renderTemplate, disconnectOutlet, render
  • Loading branch information
@rwjblue
rwjblue authored Jul 21, 2021
2 parents 6233490 + 8547049 commit cc45f94
Show file tree
Hide file tree
Showing 9 changed files with 37 additions and 1,925 deletions.
22 changes: 0 additions & 22 deletions packages/@ember/-internals/glimmer/lib/syntax/outlet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,28 +33,6 @@ import { OutletState } from '../utils/outlet';
<MyFooter />
```
You may also specify a name for the `{{outlet}}`, which is useful when using more than one
`{{outlet}}` in a template:
```app/templates/application.hbs
{{outlet "menu"}}
{{outlet "sidebar"}}
{{outlet "main"}}
```
Your routes can then render into a specific one of these `outlet`s by specifying the `outlet`
attribute in your `renderTemplate` function:
```app/routes/menu.js
import Route from '@ember/routing/route';
export default class MenuRoute extends Route {
renderTemplate() {
this.render({ outlet: 'menu' });
}
}
```
See the [routing guide](https://guides.emberjs.com/release/routing/rendering-a-template/) for more
information on how your `route` interacts with the `{{outlet}}` helper.
Note: Your content __will not render__ if there isn't an `{{outlet}}` for it.
Expand Down
112 changes: 0 additions & 112 deletions packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {
ApplicationTestCase,
expectDeprecation,
ModuleBasedTestResolver,
moduleFor,
strip,
Expand Down Expand Up @@ -180,117 +179,6 @@ if (ENV._DEBUG_RENDER_TREE) {
]);
}

async '@test named outlets'() {
expectDeprecation('Usage of `renderTemplate` is deprecated.');
this.addTemplate(
'application',
strip`
<div id="header">{{outlet "header"}}</div>
{{outlet}}
`
);
this.addTemplate('header', 'header');
this.addTemplate('index', 'index');

this.add(
'controller:index',
class extends Controller {
queryParams = ['showHeader'];
showHeader = false;
}
);

interface Model {
showHeader: boolean;
}

this.add(
'route:index',
class extends Route {
queryParams = {
showHeader: {
refreshModel: true,
},
};

model({ showHeader }: Model): Model {
return { showHeader };
}

setupController(controller: Controller, { showHeader }: Model): void {
controller.setProperties({ showHeader });
}

renderTemplate(_: Controller, { showHeader }: Model): void {
expectDeprecation(() => this.render(), /Usage of `render` is deprecated/);

if (showHeader) {
expectDeprecation(
() => this.render('header', { outlet: 'header' }),
/Usage of `render` is deprecated/
);
} else {
expectDeprecation(
() => this.disconnectOutlet('header'),
'The usage of `disconnectOutlet` is deprecated.'
);
}
}
}
);

await this.visit('/');

this.assertRenderTree([
this.outlet({
type: 'route-template',
name: 'index',
args: { positional: [], named: { model: { showHeader: false } } },
instance: this.controllerFor('index'),
template: 'my-app/templates/index.hbs',
bounds: this.nodeBounds(this.element.lastChild),
children: [],
}),
]);

await this.visit('/?showHeader');

this.assertRenderTree([
this.outlet('header', {
type: 'route-template',
name: 'header',
args: { positional: [], named: { model: { showHeader: true } } },
instance: this.controllerFor('index'),
template: 'my-app/templates/header.hbs',
bounds: this.elementBounds(this.element.firstChild),
children: [],
}),
this.outlet({
type: 'route-template',
name: 'index',
args: { positional: [], named: { model: { showHeader: true } } },
instance: this.controllerFor('index'),
template: 'my-app/templates/index.hbs',
bounds: this.nodeBounds(this.element.lastChild),
children: [],
}),
]);

await this.visit('/');

this.assertRenderTree([
this.outlet({
type: 'route-template',
name: 'index',
args: { positional: [], named: { model: { showHeader: false } } },
instance: this.controllerFor('index'),
template: 'my-app/templates/index.hbs',
bounds: this.nodeBounds(this.element.lastChild),
children: [],
}),
]);
}

async '@test {{mount}}'() {
this.addTemplate(
'application',
Expand Down
180 changes: 0 additions & 180 deletions packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -439,78 +439,6 @@ moduleFor(
});
}

['@test it can render into named outlets']() {
expectDeprecation('Usage of `renderTemplate` is deprecated.');
this.router.map(function () {
this.route('colors');
});

this.addTemplate(
'application',
strip`
<nav>{{outlet "nav"}}</nav>
<main>{{outlet}}</main>
`
);

this.addTemplate(
'nav',
strip`
<a href="https://emberjs.com/">Ember</a>
`
);

this.add(
'route:application',
Route.extend({
renderTemplate() {
expectDeprecation(() => {
this.render();
this.render('nav', {
into: 'application',
outlet: 'nav',
});
}, /Usage of `render` is deprecated/);
},
})
);

this.add(
'route:colors',
Route.extend({
model() {
return ['red', 'yellow', 'blue'];
},
})
);

this.addTemplate(
'colors',
strip`
<ul>
{{#each @model as |item|}}
<li>{{item}}</li>
{{/each}}
</ul>
`
);

return this.visit('/colors').then(() => {
this.assertInnerHTML(strip`
<nav>
<a href="https://emberjs.com/">Ember</a>
</nav>
<main>
<ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
</ul>
</main>
`);
});
}

['@test it should update the outlets when switching between routes']() {
this.router.map(function () {
this.route('a');
Expand Down Expand Up @@ -601,114 +529,6 @@ moduleFor(
.then(() => this.assertText('b'));
}

['@test it should update correctly when the controller changes']() {
expectDeprecation('Usage of `renderTemplate` is deprecated.');
this.router.map(function () {
this.route('color', { path: '/colors/:color' });
});

this.add(
'route:color',
Route.extend({
model(params) {
return { color: params.color };
},

renderTemplate(controller, model) {
expectDeprecation(
() => this.render({ controller: model.color, model }),
/Usage of `render` is deprecated/
);
},
})
);

this.add(
'controller:red',
Controller.extend({
color: 'red',
})
);

this.add(
'controller:green',
Controller.extend({
color: 'green',
})
);

this.addTemplate('color', 'model color: {{@model.color}}, controller color: {{this.color}}');

return this.visit('/colors/red')
.then(() => {
this.assertInnerHTML('model color: red, controller color: red');
return this.visit('/colors/green');
})
.then(() => {
this.assertInnerHTML('model color: green, controller color: green');
});
}

['@test it should produce a stable DOM when two routes render the same template']() {
expectDeprecation('Usage of `renderTemplate` is deprecated.');
this.router.map(function () {
this.route('a');
this.route('b');
});

this.add(
'route:a',
Route.extend({
model() {
return 'A';
},

renderTemplate(controller, model) {
expectDeprecation(
() => this.render('common', { controller: 'common', model }),
/Usage of `render` is deprecated/
);
},
})
);

this.add(
'route:b',
Route.extend({
model() {
return 'B';
},

renderTemplate(controller, model) {
expectDeprecation(
() => this.render('common', { controller: 'common', model }),
/Usage of `render` is deprecated/
);
},
})
);

this.add(
'controller:common',
Controller.extend({
prefix: 'common',
})
);

this.addTemplate('common', '{{this.prefix}} {{@model}}');

return this.visit('/a')
.then(() => {
this.assertInnerHTML('common A');
this.takeSnapshot();
return this.visit('/b');
})
.then(() => {
this.assertInnerHTML('common B');
this.assertInvariants();
});
}

// Regression test, glimmer child outlets tried to assume the first element.
// but the if put-args clobbered the args used by did-create-element.
// I wish there was a way to assert that the OutletComponentManager did not
Expand Down
Loading

0 comments on commit cc45f94

Please sign in to comment.