Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove renderTemplate, disconnectOutlet, render #19659

Merged
merged 1 commit into from
Jul 21, 2021
Merged

Remove renderTemplate, disconnectOutlet, render #19659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 0 additions & 22 deletions packages/@ember/-internals/glimmer/lib/syntax/outlet.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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