Skip to content

Remove layout/layoutName from classic Component #21284

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

Draft
NullVoxPopuli-ai-agent wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Remove layout/layoutName from classic Component #21284

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
19 changes: 3 additions & 16 deletions packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import type {
Environment,
InternalComponentCapabilities,
PreparedArguments,
TemplateFactory,
VMArguments,
WithCreateInstance,
WithDynamicLayout,
Expand All @@ -42,7 +41,7 @@ import {
import type Component from '../component';
import type { DynamicScope } from '../renderer';
import type RuntimeResolver from '../resolver';
import { isTemplateFactory } from '../template';
import { getComponentTemplate } from '@glimmer/manager';
import {
createClassNameBindingRef,
createSimpleClassNameBindingRef,
Expand Down Expand Up @@ -132,24 +131,12 @@ export default class CurlyComponentManager
WithDynamicTagName<ComponentStateBucket>
{
protected templateFor(component: Component): CompilableProgram | null {
Copy link
Copy Markdown
Contributor

@NullVoxPopuli NullVoxPopuli Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm currently exploring if I can get rid of templateFor, but will save that for a separate PR

let { layout, layoutName } = component;
let owner = getOwner(component);
assert('Component is unexpectedly missing an owner', owner);

let factory: TemplateFactory;
let factory = getComponentTemplate(component.constructor as object);

if (layout === undefined) {
if (layoutName !== undefined) {
let _factory = owner.lookup(`template:${layoutName}`) as TemplateFactory;
assert(`Layout \`${layoutName}\` not found!`, _factory !== undefined);
factory = _factory;
} else {
return null;
}
} else if (isTemplateFactory(layout)) {
factory = layout;
} else {
// no layout was found, use the default layout
if (factory === undefined) {
return null;
}

Expand Down
22 changes: 1 addition & 21 deletions packages/@ember/-internals/glimmer/lib/component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
import { guidFor } from '@ember/-internals/utils';
import { assert } from '@ember/debug';
import { DEBUG } from '@glimmer/env';
import type { Environment, Template, TemplateFactory } from '@glimmer/interfaces';
import type { Environment } from '@glimmer/interfaces';
import { setInternalComponentManager } from '@glimmer/manager';
import { isUpdatableRef, updateRef } from '@glimmer/reference';
import { normalizeProperty } from '@glimmer/runtime';
Expand Down Expand Up @@ -202,7 +202,6 @@ interface ComponentMethods {
@type String
@public
*/
layoutName?: string;
}

// A zero-runtime-overhead private symbol to use in branding the component to
Expand Down Expand Up @@ -1268,25 +1267,6 @@ class Component<S = unknown>
*/
declare static positionalParams: string | string[];

/**
Layout can be used to wrap content in a component.
@property layout
@type Function
@public
*/
declare layout?: TemplateFactory | Template;
Copy link
Copy Markdown
Member

@kategengler kategengler Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did we ever deprecate this?

Copy link
Copy Markdown
Contributor

@NullVoxPopuli NullVoxPopuli Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been treating it like a shadow-deprecation from https://deprecations.emberjs.com/id/component-template-resolving

testing a new app tho with layout doesn't work as I expect: https://github.com/NullVoxPopuli/my-app-trying-to-use-layout-pls-dont-no-one-look-please-use-gjs

Copy link
Copy Markdown
Contributor

@NullVoxPopuli NullVoxPopuli Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose I should try Ember 5.12 tho, cause the deprecation was probably removed

Copy link
Copy Markdown
Contributor

@NullVoxPopuli NullVoxPopuli Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

5.12 with vite has the same behavior as 6.11+ with vite -- not working (good)

Copy link
Copy Markdown
Contributor

@NullVoxPopuli NullVoxPopuli Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

5.8 classic also doesn't have layout working.

or something since 5.8 prevents hbs files from being imported "as templates"


/**
The name of the layout to lookup if no layout is provided.
Copy link
Copy Markdown
Contributor

@NullVoxPopuli NullVoxPopuli Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any form of looking up was deprecated during 5.x

By default `Component` will lookup a template with this name in
`Ember.TEMPLATES` (a shared global object).
@property layoutName
@type String
@default undefined
@private
*/
declare layoutName?: string;

/**
The WAI-ARIA role of the control represented by this view. For example, a
button may have a role of type 'button', or a pane may have a role of
Expand Down
5 changes: 2 additions & 3 deletions packages/@ember/-internals/glimmer/tests/integration/application/engine-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,9 +235,8 @@ moduleFor(

let sharedLayout = precompileTemplate('{{ambiguous-curlies}}');

let sharedComponent = class extends Component {
layout = sharedLayout;
};
let sharedComponent = class extends Component {};
setComponentTemplate(sharedLayout, sharedComponent);

this.add(
'template:application',
Expand Down
195 changes: 87 additions & 108 deletions packages/@ember/-internals/glimmer/tests/integration/components/append-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ class AbstractAppendTest extends RenderingTestCase {
let componentsByName = {};

// TODO: refactor/combine with other life-cycle tests
let registerLoggerComponent = (name, { ComponentClass, resolveableTemplate }) => {
let registerLoggerComponent = (name, { ComponentClass, compiledTemplate }) => {
function pushHook(hookName) {
hooks.push([name, hookName]);
}
Expand Down Expand Up @@ -351,19 +351,17 @@ class AbstractAppendTest extends RenderingTestCase {
}
};

this.owner.register(`component:${name}`, ExtendedClass);

if (resolveableTemplate) {
this.owner.register(`template:components/${name}`, resolveableTemplate);
if (compiledTemplate) {
setComponentTemplate(compiledTemplate, ExtendedClass);
}

this.owner.register(`component:${name}`, ExtendedClass);
};

registerLoggerComponent('x-parent', {
ComponentClass: class extends Component {
layoutName = 'components/x-parent';
},
ComponentClass: class extends Component {},

resolveableTemplate: precompileTemplate(
compiledTemplate: precompileTemplate(
'[parent: {{this.foo}}]{{#x-child bar=this.foo}}[yielded: {{this.foo}}]{{/x-child}}'
),
});
Expand All @@ -373,7 +371,7 @@ class AbstractAppendTest extends RenderingTestCase {
tagName = '';
},

resolveableTemplate: precompileTemplate('[child: {{this.bar}}]{{yield}}'),
compiledTemplate: precompileTemplate('[child: {{this.bar}}]{{yield}}'),
});

let XParent;
Expand Down Expand Up @@ -530,17 +528,18 @@ class AbstractAppendTest extends RenderingTestCase {
let willDestroyCalled = 0;

let XParentClass = class extends Component {
layoutName = 'components/x-parent';
willDestroyElement() {
willDestroyCalled++;
}
};

this.owner.register('component:x-parent', XParentClass);
this.owner.register(
'template:components/x-parent',
precompileTemplate(
'[parent: {{this.foo}}]{{#x-child bar=this.foo}}[yielded: {{this.foo}}]{{/x-child}}'
'component:x-parent',
setComponentTemplate(
precompileTemplate(
'[parent: {{this.foo}}]{{#x-child bar=this.foo}}[yielded: {{this.foo}}]{{/x-child}}'
),
XParentClass
)
);

Expand Down Expand Up @@ -639,28 +638,25 @@ class AbstractAppendTest extends RenderingTestCase {
let willDestroyCalled = 0;

let XFirstClass = class extends Component {
layoutName = 'components/x-first';

willDestroyElement() {
willDestroyCalled++;
}
};

this.owner.register('component:x-first', XFirstClass);
this.owner.register('template:components/x-first', precompileTemplate('x-first {{this.foo}}!'));
this.owner.register(
'component:x-first',
setComponentTemplate(precompileTemplate('x-first {{this.foo}}!'), XFirstClass)
);

let XSecondClass = class extends Component {
layoutName = 'components/x-second';

willDestroyElement() {
willDestroyCalled++;
}
};

this.owner.register('component:x-second', XSecondClass);
this.owner.register(
'template:components/x-second',
precompileTemplate('x-second {{this.bar}}!')
'component:x-second',
setComponentTemplate(precompileTemplate('x-second {{this.bar}}!'), XSecondClass)
);

let First, Second;
Expand Down Expand Up @@ -777,31 +773,25 @@ class AbstractAppendTest extends RenderingTestCase {
};

let element1, element2;
this.owner.register(
'component:first-component',
class extends Component {
layout = precompileTemplate('component-one');

didInsertElement() {
element1 = this.element;
let FirstComponentClass = class extends Component {
didInsertElement() {
element1 = this.element;

let SecondComponent = owner.factoryFor('component:second-component');
let SecondComponent = owner.factoryFor('component:second-component');

append(SecondComponent.create());
}
append(SecondComponent.create());
}
);

this.owner.register(
'component:second-component',
class extends Component {
layout = precompileTemplate(`component-two`);
};
setComponentTemplate(precompileTemplate('component-one'), FirstComponentClass);
this.owner.register('component:first-component', FirstComponentClass);

didInsertElement() {
element2 = this.element;
}
let SecondComponentClass = class extends Component {
didInsertElement() {
element2 = this.element;
}
);
};
setComponentTemplate(precompileTemplate('component-two'), SecondComponentClass);
this.owner.register('component:second-component', SecondComponentClass);

let FirstComponent = this.owner.factoryFor('component:first-component');

Expand All @@ -819,84 +809,75 @@ class AbstractAppendTest extends RenderingTestCase {
};

let element1, element2, element3, element4, component1, component2;
this.owner.register(
'component:foo-bar',
class extends Component {
layout = precompileTemplate('foo-bar');

init() {
super.init(...arguments);
component1 = this;
}

didInsertElement() {
element1 = this.element;
let FooBarComponent = class extends Component {
init() {
super.init(...arguments);
component1 = this;
}

let OtherRoot = owner.factoryFor('component:other-root');
didInsertElement() {
element1 = this.element;

this._instance = OtherRoot.create({
didInsertElement() {
element2 = this.element;
},
});
let OtherRoot = owner.factoryFor('component:other-root');

append(this._instance);
}
this._instance = OtherRoot.create({
didInsertElement() {
element2 = this.element;
},
});

willDestroy() {
this._instance.destroy();
}
append(this._instance);
}
);

this.owner.register(
'component:baz-qux',
class extends Component {
layout = precompileTemplate('baz-qux');
willDestroy() {
this._instance.destroy();
}
};
setComponentTemplate(precompileTemplate('foo-bar'), FooBarComponent);
this.owner.register('component:foo-bar', FooBarComponent);

init() {
super.init(...arguments);
component2 = this;
}
let BazQuxComponent = class extends Component {
init() {
super.init(...arguments);
component2 = this;
}

didInsertElement() {
element3 = this.element;
didInsertElement() {
element3 = this.element;

let OtherRoot = owner.factoryFor('component:other-root');
let OtherRoot = owner.factoryFor('component:other-root');

this._instance = OtherRoot.create({
didInsertElement() {
element4 = this.element;
},
});
this._instance = OtherRoot.create({
didInsertElement() {
element4 = this.element;
},
});

append(this._instance);
}
append(this._instance);
}

willDestroy() {
this._instance.destroy();
}
willDestroy() {
this._instance.destroy();
}
);
};
setComponentTemplate(precompileTemplate('baz-qux'), BazQuxComponent);
this.owner.register('component:baz-qux', BazQuxComponent);

let instantiatedRoots = 0;
let destroyedRoots = 0;
this.owner.register(
'component:other-root',
class extends Component {
layout = precompileTemplate(`fake-thing: {{this.counter}}`);

init() {
super.init(...arguments);
this.counter = instantiatedRoots++;
}
let OtherRootComponent = class extends Component {
init() {
super.init(...arguments);
this.counter = instantiatedRoots++;
}

willDestroy() {
destroyedRoots++;
super.willDestroy(...arguments);
}
willDestroy() {
destroyedRoots++;
super.willDestroy(...arguments);
}
);
};
setComponentTemplate(precompileTemplate('fake-thing: {{this.counter}}'), OtherRootComponent);
this.owner.register('component:other-root', OtherRootComponent);

this.render(
strip`
Expand Down Expand Up @@ -954,12 +935,10 @@ moduleFor(
}

['@test raises an assertion when the target does not exist in the DOM'](assert) {
let FooBarClass = class extends Component {
layoutName = 'components/foo-bar';
};
let FooBarClass = class extends Component {};
setComponentTemplate(precompileTemplate('FOO BAR!'), FooBarClass);

this.owner.register('component:foo-bar', FooBarClass);
this.owner.register('template:components/foo-bar', precompileTemplate('FOO BAR!'));

let FooBar = this.owner.factoryFor('component:foo-bar');

Expand Down
Loading
Loading