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

fix(compiler): only create one class member when transforming @Element() decorators #4547

Merged
merged 2 commits into from
Jul 14, 2023
+100 −22
Merged

fix(compiler): only create one class member when transforming @Element() decorators #4547

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f3e4b5
only create one class member for an `@Element()`
Jul 6, 2023
eadaac1
add some regression tests
Jul 6, 2023
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
Next Next commit
only create one class member for an @Element()
Tanner Reits committed Jul 6, 2023
commit 9f3e4b5d6c0f4e2d75b74259035aab64b3caaa02
43 changes: 29 additions & 14 deletions src/compiler/transformers/component-lazy/lazy-element-getter.ts
View file
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I didn't abstract the changes to a shared space since it was a small amount of code and I could see there maybe being future cases where these two implementations deviate from each other and we'd have to deal with unnecessary layers of abstraction then

Original file line number Diff line number Diff line change
@@ -14,20 +14,35 @@ export const addLazyElementGetter = (
if (cmp.elementRef) {
addCoreRuntimeApi(moduleFile, RUNTIME_APIS.getElement);

classMembers.push(
ts.factory.createGetAccessorDeclaration(
undefined,
cmp.elementRef,
[],
undefined,
ts.factory.createBlock([
ts.factory.createReturnStatement(
ts.factory.createCallExpression(ts.factory.createIdentifier(GET_ELEMENT), undefined, [
ts.factory.createThis(),
])
),
])
)
// Create the getter that will be used in the transformed class declaration
const getter = ts.factory.createGetAccessorDeclaration(
undefined,
cmp.elementRef,
[],
undefined,
ts.factory.createBlock([
ts.factory.createReturnStatement(
ts.factory.createCallExpression(ts.factory.createIdentifier(GET_ELEMENT), undefined, [
ts.factory.createThis(),
])
),
])
);

// Find the index in the class members array that correlates with the element
// ref identifier we have
const index = classMembers.findIndex(
(member) =>
member.kind === ts.SyntaxKind.PropertyDeclaration && (member.name as any)?.escapedText === cmp.elementRef
);

// Index should never not be a valid integer, but we'll be safe just in case.
// If the index is valid, we'll overwrite the existing class member with the getter
// so we don't create multiple members with the same identifier
if (index >= 0) {
classMembers[index] = getter;
} else {
classMembers.push(getter);
}
}
};
32 changes: 24 additions & 8 deletions src/compiler/transformers/component-native/native-element-getter.ts
View file
Original file line number Diff line number Diff line change
@@ -7,14 +7,30 @@ export const addNativeElementGetter = (classMembers: ts.ClassElement[], cmp: d.C
// is transformed into:
// get element() { return this; }
if (cmp.elementRef) {
classMembers.push(
ts.factory.createGetAccessorDeclaration(
undefined,
cmp.elementRef,
[],
undefined,
ts.factory.createBlock([ts.factory.createReturnStatement(ts.factory.createThis())])
)
// Create the getter that will be used in the transformed class declaration
const getter = ts.factory.createGetAccessorDeclaration(
undefined,
cmp.elementRef,
[],
undefined,
ts.factory.createBlock([ts.factory.createReturnStatement(ts.factory.createThis())])
);

ts.SyntaxKind.AmpersandToken;
// Find the index in the class members array that correlates with the element
// ref identifier we have
const index = classMembers.findIndex(
(member) =>
member.kind === ts.SyntaxKind.PropertyDeclaration && (member.name as any)?.escapedText === cmp.elementRef
);

// Index should never not be a valid integer, but we'll be safe just in case.
// If the index is valid, we'll overwrite the existing class member with the getter
// so we don't create multiple members with the same identifier
if (index >= 0) {
classMembers[index] = getter;
} else {
classMembers.push(getter);
}
}
};