Skip to content

Commit

Permalink
Merge pull request #20660 from NullVoxPopuli/deprecate-template-lookup
Browse files Browse the repository at this point in the history 
Implement RFC#995, Deprecate component template resolution
  • Loading branch information
@ef4
ef4 committed Apr 25, 2024
2 parents a6e93bc + eb8fc81 commit 5c8df04
Show file tree
Hide file tree
Showing 21 changed files with 606 additions and 207 deletions.
9 changes: 9 additions & 0 deletions packages/@ember/-internals/deprecations/index.ts
View file
Expand Up @@ -106,6 +106,15 @@ export const DEPRECATIONS = {
available: '5.9.0',
},
}),
DEPRECATE_COMPONENT_TEMPLATE_RESOLVING: deprecation({
id: 'component-template-resolving',
url: 'https://deprecations.emberjs.com/id/component-template-resolving',
until: '6.0.0',
for: 'ember-source',
since: {
available: '5.9.0',
},
}),
};

export function deprecateUntil(message: string, deprecation: DeprecationObject) {
Expand Down
16 changes: 15 additions & 1 deletion packages/@ember/-internals/glimmer/lib/resolver.ts
View file
Expand Up @@ -45,6 +45,7 @@ import { default as uniqueId } from './helpers/unique-id';
import actionModifier from './modifiers/action';
import { mountHelper } from './syntax/mount';
import { outletHelper } from './syntax/outlet';
import { DEPRECATIONS, deprecateUntil } from '@ember/-internals/deprecations';

function instrumentationPayload(name: string) {
return { object: `component:${name}` };
Expand All @@ -63,9 +64,22 @@ function layoutFor(
owner: InternalOwner,
options?: RegisterOptions
): Nullable<Template> {
if (DEPRECATIONS.DEPRECATE_COMPONENT_TEMPLATE_RESOLVING.isRemoved) {
return null;
}

let templateFullName = `template:components/${name}` as const;

return (owner.lookup(templateFullName, options) as Template) || null;
let result = (owner.lookup(templateFullName, options) as Template) || null;

if (result) {
deprecateUntil(
`Components with separately resolved templates are deprecated. Migrate to either co-located js/ts + hbs files or to gjs/gts. Tried to lookup '${templateFullName}'.`,
DEPRECATIONS.DEPRECATE_COMPONENT_TEMPLATE_RESOLVING
);
}

return result;
}

type LookupResult =
Expand Down
79 changes: 49 additions & 30 deletions packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
View file
@@ -1,8 +1,10 @@
import {
ApplicationTestCase,
ModuleBasedTestResolver,
expectDeprecation,
moduleFor,
strip,
testUnless,
} from 'internal-test-helpers';

import { ENV } from '@ember/-internals/environment';
Expand All @@ -22,6 +24,8 @@ import type { SimpleElement, SimpleNode } from '@simple-dom/interface';
import type { EmberPrecompileOptions } from 'ember-template-compiler';
import { compile } from 'ember-template-compiler';
import { runTask } from 'internal-test-helpers/lib/run';
import { DEPRECATIONS } from '@ember/-internals/deprecations';
import templateOnly from '@ember/component/template-only';

interface CapturedBounds {
parentElement: SimpleElement;
Expand Down Expand Up @@ -204,10 +208,13 @@ if (ENV._DEBUG_RENDER_TREE) {
)
);
this.register(
'template:components/inspect-model',
compileTemplate('{{@model}}', {
moduleName: 'foo/components/inspect-model.hbs',
})
'component:inspect-model',
setComponentTemplate(
compileTemplate('{{@model}}', {
moduleName: 'foo/components/inspect-model.hbs',
}),
templateOnly()
)
);
}

Expand Down Expand Up @@ -242,10 +249,13 @@ if (ENV._DEBUG_RENDER_TREE) {
)
);
this.register(
'template:components/inspect-model',
compileTemplate('{{@model}}', {
moduleName: 'bar/components/inspect-model.hbs',
})
'component:inspect-model',
setComponentTemplate(
compileTemplate('{{@model}}', {
moduleName: 'bar/components/inspect-model.hbs',
}),
templateOnly()
)
);
}

Expand Down Expand Up @@ -608,10 +618,13 @@ if (ENV._DEBUG_RENDER_TREE) {
})
);
this.register(
'template:components/hello',
compileTemplate('<span>Hello {{@message}}</span>', {
moduleName: 'foo/components/hello.hbs',
})
'component:hello',
setComponentTemplate(
compileTemplate('<span>Hello {{@message}}</span>', {
moduleName: 'foo/components/hello.hbs',
}),
templateOnlyComponent()
)
);
}

Expand Down Expand Up @@ -775,7 +788,13 @@ if (ENV._DEBUG_RENDER_TREE) {
]);
}

async '@test template-only components'() {
async [`${testUnless(
DEPRECATIONS.DEPRECATE_COMPONENT_TEMPLATE_RESOLVING.isRemoved
)} template-only components`]() {
expectDeprecation(
/resolved templates/,
DEPRECATIONS.DEPRECATE_COMPONENT_TEMPLATE_RESOLVING.isEnabled
);
this.addTemplate(
'application',
strip`
Expand All @@ -800,7 +819,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: null,
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand All @@ -816,7 +835,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: null,
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand All @@ -825,7 +844,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'second' } },
instance: null,
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.lastChild),
children: [],
},
Expand All @@ -841,7 +860,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: null,
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand Down Expand Up @@ -873,7 +892,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: null,
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand All @@ -889,7 +908,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: null,
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand All @@ -898,7 +917,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'second' } },
instance: null,
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.lastChild),
children: [],
},
Expand All @@ -914,7 +933,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: null,
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand All @@ -936,7 +955,7 @@ if (ENV._DEBUG_RENDER_TREE) {
this.addComponent('hello-world', {
ComponentClass: setComponentTemplate(
compileTemplate('{{@name}}', { moduleName: 'my-app/components/hello-world.hbs' }),
templateOnlyComponent()
templateOnlyComponent('my-app/components/hello-world', 'HelloWorld')
),
});

Expand Down Expand Up @@ -1021,7 +1040,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: (instance: Record<string, string>) => instance['name'] === 'first',
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand All @@ -1037,7 +1056,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: (instance: Record<string, string>) => instance['name'] === 'first',
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand All @@ -1046,7 +1065,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'second' } },
instance: (instance: Record<string, string>) => instance['name'] === 'second',
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.lastChild),
children: [],
},
Expand All @@ -1062,7 +1081,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: (instance: Record<string, string>) => instance['name'] === 'first',
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand Down Expand Up @@ -1106,7 +1125,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: (instance: Record<string, string>) => instance['name'] === 'first',
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand All @@ -1122,7 +1141,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: (instance: Record<string, string>) => instance['name'] === 'first',
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand All @@ -1131,7 +1150,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'second' } },
instance: (instance: Record<string, string>) => instance['name'] === 'second',
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.lastChild),
children: [],
},
Expand All @@ -1147,7 +1166,7 @@ if (ENV._DEBUG_RENDER_TREE) {
name: 'hello-world',
args: { positional: [], named: { name: 'first' } },
instance: (instance: Record<string, string>) => instance['name'] === 'first',
template: 'my-app/templates/components/hello-world.hbs',
template: '(unknown template module)',
bounds: this.nodeBounds(this.element!.firstChild),
children: [],
},
Expand Down
14 changes: 6 additions & 8 deletions packages/@ember/-internals/glimmer/tests/integration/application/engine-test.js
View file
Expand Up @@ -14,6 +14,8 @@ import Engine from '@ember/engine';
import { next } from '@ember/runloop';

import { compile } from '../../utils/helpers';
import { setComponentTemplate } from '@glimmer/manager';
import { templateOnlyComponent } from '@glimmer/runtime';

moduleFor(
'Application test: engine rendering',
Expand Down Expand Up @@ -217,10 +219,8 @@ moduleFor(
);
this.register('template:application', sharedTemplate);
this.register(
'template:components/ambiguous-curlies',
compile(strip`
<p>Component!</p>
`)
'component:ambiguous-curlies',
setComponentTemplate(compile(`<p>Component!</p>`), templateOnlyComponent())
);
},
})
Expand Down Expand Up @@ -275,10 +275,8 @@ moduleFor(
);
this.register('component:my-component', sharedComponent);
this.register(
'template:components/ambiguous-curlies',
compile(strip`
<p>Component!</p>
`)
'component:ambiguous-curlies',
setComponentTemplate(compile(`<p>Component!</p>`), templateOnlyComponent())
);
},
})
Expand Down

0 comments on commit 5c8df04

Please sign in to comment.