Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(compiler): Support class and style attrs in host bindings (#51498)

Browse source 
The template pipeline is already capable of parsing and processing class and style attributes on templates. We now extend that functionality to host bindings.

The parser, for some reason, splits out class and style attributes into a `specialAttributes` field. We merge them back into the main attributes map, and allow the template pipeline to process them normally.

PR Close #51498
This commit is contained in:
Dylan Hunn 2023-08-25 14:06:21 -07:00 committed by Jessica Janiuk
parent d0b83b14be
commit cae01dae1b
5 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/host_bindings/TEST_CASES.json
View file

@ -84,8 +84,7 @@
"host_attributes_with_classes_and_styles.js"
]
}
],
"skipForTemplatePipeline": true
]
},
{
"description": "should chain multiple host property bindings into a single instruction",

3
packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/TEST_CASES.json
View file

@ -13,8 +13,7 @@
"static_and_dynamic.js"
]
}
],
"skipForTemplatePipeline": true
]
},
{
"description": "should generate style/class instructions for multiple host binding definitions",

20
packages/compiler/src/render3/view/compiler.ts
View file

@ -566,15 +566,24 @@ function createHostBindingsFunction(
const bindings =
bindingParser.createBoundHostProperties(hostBindingsMetadata.properties, typeSourceSpan);
// Calculate host event bindings
const eventBindings =
bindingParser.createDirectiveHostEventAsts(hostBindingsMetadata.listeners, typeSourceSpan);
if (USE_TEMPLATE_PIPELINE) {
// TODO: host binding metadata is not yet parsed in the template pipeline, so we need to extract
// that code from below. Then, we will ingest a `HostBindingJob`, and run the template pipeline
// phases.
// The parser for host bindings treats class and style attributes specially -- they are
// extracted into these separate fields. This is not the case for templates, so the compiler can
// actually already handle these special attributes internally. Therefore, we just drop them
// into the attributes map.
if (hostBindingsMetadata.specialAttributes.styleAttr) {
hostBindingsMetadata.attributes.style =
o.literal(hostBindingsMetadata.specialAttributes.styleAttr);
}
if (hostBindingsMetadata.specialAttributes.classAttr) {
hostBindingsMetadata.attributes.class =
o.literal(hostBindingsMetadata.specialAttributes.classAttr);
}
const hostJob = ingestHostBinding(
{
componentName: name,
@ -585,11 +594,12 @@ function createHostBindingsFunction(
bindingParser, constantPool);
transformHostBinding(hostJob);
definitionMap.set('hostAttrs', hostJob.root.attributes);
const varCount = hostJob.root.vars;
if (varCount !== null && varCount > 0) {
definitionMap.set('hostVars', o.literal(varCount));
}
definitionMap.set('hostAttrs', hostJob.root.attributes);
return emitHostBindingFunction(hostJob);
}

1
packages/compiler/src/template/pipeline/src/emit.ts
View file

@ -110,6 +110,7 @@ export function transformHostBinding(job: HostBindingCompilationJob): void {
phaseStyleBindingSpecialization(job);
phaseBindingSpecialization(job);
phaseAttributeExtraction(job);
phaseParseExtractedStyles(job);
phasePureLiteralStructures(job);
phaseConstCollection(job);
phaseNullishCoalescing(job);

4
packages/compiler/src/template/pipeline/src/phases/parse_extracted_styles.ts
View file

@ -9,13 +9,13 @@
import * as o from '../../../../output/output_ast';
import {parse as parseStyle} from '../../../../render3/view/style_parser';
import * as ir from '../../ir';
import {ComponentCompilationJob} from '../compilation';
import type {CompilationJob} from '../compilation';
/**
* Parses extracted style and class attributes into separate ExtractedAttributeOps per style or
* class property.
*/
export function phaseParseExtractedStyles(cpl: ComponentCompilationJob) {
export function phaseParseExtractedStyles(cpl: CompilationJob) {
for (const unit of cpl.units) {
for (const op of unit.create) {
if (op.kind === ir.OpKind.ExtractedAttribute && op.bindingKind === ir.BindingKind.Attribute &&