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

fix: identifiers are not incorrectly scoped to state #1630

Merged
merged 17 commits into from
Nov 8, 2024
Merged

fix: identifiers are not incorrectly scoped to state #1630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
eabaab6
add failing test
liamdebeasi Nov 1, 2024
8da8feb
update tests
liamdebeasi Nov 1, 2024
effcbe6
fails
liamdebeasi Nov 1, 2024
54f5611
fix: only map state variables used in useState
liamdebeasi Nov 5, 2024
086e4d9
base tests
liamdebeasi Nov 5, 2024
6727bba
update tests
liamdebeasi Nov 6, 2024
cdd6c11
account for other state values and functions
liamdebeasi Nov 6, 2024
1403523
update snapshots
liamdebeasi Nov 6, 2024
14f2981
changeset
liamdebeasi Nov 6, 2024
f89cd6b
make sure state is actually used
liamdebeasi Nov 6, 2024
029f940
rename
liamdebeasi Nov 6, 2024
d5ee5b0
fix angular
liamdebeasi Nov 6, 2024
e6c7f9f
snapshots
liamdebeasi Nov 6, 2024
9702bd3
sync
liamdebeasi Nov 6, 2024
ed6b5f8
Update late-papayas-eat.md
liamdebeasi Nov 7, 2024
b591cb7
Merge branch 'main' into ENG-7338
liamdebeasi Nov 8, 2024
6a0fc6b
Update .changeset/late-papayas-eat.md
samijaber Nov 8, 2024
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
6 changes: 6 additions & 0 deletions .changeset/late-papayas-eat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@builder.io/mitosis': patch
---

[All] Fix: scope renaming of state methods to not include shadow variables
[Angular]: Update `state.*` -> `this.*` transform to new AST transform approach
64 changes: 64 additions & 0 deletions packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1395,6 +1395,38 @@ exports[`Alpine.js > jsx > Javascript Test > StoreComment 1`] = `
"
`;
exports[`Alpine.js > jsx > Javascript Test > StoreShadowVars 1`] = `
"<div x-data=\\"myComponent()\\"><span x-html=\\"foo(errors)\\"></span></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"myComponent\\", () => ({
errors: {},
foo(errors) {
return errors;
},
}));
});
</script>
"
`;
exports[`Alpine.js > jsx > Javascript Test > StoreWithState 1`] = `
"<div x-data=\\"myComponent()\\"><span x-html=\\"bar()\\"></span></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"myComponent\\", () => ({
foo: false,
bar() {
return this.foo;
},
}));
});
</script>
"
`;
exports[`Alpine.js > jsx > Javascript Test > Submit 1`] = `
"<button type=\\"submit\\" x-data=\\"submitButton()\\" x-bind=\\"attributes\\">
<span x-html=\\"text\\"></span>
Expand Down Expand Up @@ -4416,6 +4448,38 @@ exports[`Alpine.js > jsx > Typescript Test > StoreComment 1`] = `
"
`;
exports[`Alpine.js > jsx > Typescript Test > StoreShadowVars 1`] = `
"<div x-data=\\"myComponent()\\"><span x-html=\\"foo(errors)\\"></span></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"myComponent\\", () => ({
errors: {},
foo(errors) {
return errors;
},
}));
});
</script>
"
`;
exports[`Alpine.js > jsx > Typescript Test > StoreWithState 1`] = `
"<div x-data=\\"myComponent()\\"><span x-html=\\"bar()\\"></span></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"myComponent\\", () => ({
foo: false,
bar() {
return this.foo;
},
}));
});
</script>
"
`;
exports[`Alpine.js > jsx > Typescript Test > Submit 1`] = `
"<button type=\\"submit\\" x-data=\\"submitButton()\\" x-bind=\\"attributes\\">
<span x-html=\\"text\\"></span>
Expand Down
178 changes: 154 additions & 24 deletions packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2750,6 +2750,76 @@ export class StringLiteralStoreModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > StoreShadowVars 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";

@Component({
selector: \\"my-component\\",
template: \`
<ng-container>{{foo(errors)}}</ng-container>
\`,
styles: [
\`
:host {
display: contents;
}
\`,
],
})
export default class MyComponent {
errors = {};
foo(errors) {
return errors;
}
}

@NgModule({
declarations: [MyComponent],
imports: [CommonModule],
exports: [MyComponent],
})
export class MyComponentModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > StoreWithState 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";

@Component({
selector: \\"my-component\\",
template: \`
<ng-container>{{bar()}}</ng-container>
\`,
styles: [
\`
:host {
display: contents;
}
\`,
],
})
export default class MyComponent {
foo = false;
bar() {
return this.foo;
}
}

@NgModule({
declarations: [MyComponent],
imports: [CommonModule],
exports: [MyComponent],
})
export class MyComponentModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > Submit 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down Expand Up @@ -4574,12 +4644,12 @@ export default class MultipleOnUpdateWithDeps {

ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
console.log(\\"Runs when this.a or this.b changes\\", this.a, this.b);
console.log(\\"Runs when a or b changes\\", this.a, this.b);

if (this.a === \\"a\\") {
this.a = \\"b\\";
}
console.log(\\"Runs when this.c or this.d changes\\", this.c, this.d);
console.log(\\"Runs when c or d changes\\", this.c, this.d);

if (this.a === \\"a\\") {
this.a = \\"b\\";
Expand Down Expand Up @@ -5124,12 +5194,7 @@ export default class OnUpdateWithDeps {

ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
console.log(
\\"Runs when this.a, this.b or size changes\\",
this.a,
this.b,
this.size
);
console.log(\\"Runs when a, b or size changes\\", this.a, this.b, this.size);
}
}
}
Expand Down Expand Up @@ -5507,7 +5572,7 @@ export default class RenderBlock {
if (!ref) {
// TODO: Public doc page with more info about this message
console.warn(\`
Could not find a registered this.component named \\"\${componentName}\\".
Could not find a registered component named \\"\${componentName}\\".
If you registered it, is the file that registered it imported by the file that needs to render it?\`);
return undefined;
} else {
Expand Down Expand Up @@ -5560,8 +5625,8 @@ export default class RenderBlock {
...getBlockComponentOptions(this.useBlock),

/**
* These this.attributes are passed to the wrapper element when there is one. If \`noWrap\` is set to true, then
* they are provided to the this.component itself directly.
* These attributes are passed to the wrapper element when there is one. If \`noWrap\` is set to true, then
* they are provided to the component itself directly.
*/
...(this.shouldWrap
? {}
Expand Down Expand Up @@ -5656,7 +5721,7 @@ export default class RenderBlock {
if (TARGET === \\"reactNative\\") {
return RenderComponentWithContext;
} else if (TARGET === \\"vue3\\") {
// vue3 expects a string for the this.component tag
// vue3 expects a string for the component tag
return \\"RenderComponent\\";
} else {
return RenderComponent;
Expand Down Expand Up @@ -10292,6 +10357,76 @@ export class StringLiteralStoreModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > StoreShadowVars 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";

@Component({
selector: \\"my-component\\",
template: \`
<ng-container>{{foo(errors)}}</ng-container>
\`,
styles: [
\`
:host {
display: contents;
}
\`,
],
})
export default class MyComponent {
errors = {};
foo(errors) {
return errors;
}
}

@NgModule({
declarations: [MyComponent],
imports: [CommonModule],
exports: [MyComponent],
})
export class MyComponentModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > StoreWithState 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";

@Component({
selector: \\"my-component\\",
template: \`
<ng-container>{{bar()}}</ng-container>
\`,
styles: [
\`
:host {
display: contents;
}
\`,
],
})
export default class MyComponent {
foo = false;
bar() {
return this.foo;
}
}

@NgModule({
declarations: [MyComponent],
imports: [CommonModule],
exports: [MyComponent],
})
export class MyComponentModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > Submit 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down Expand Up @@ -12239,12 +12374,12 @@ export default class MultipleOnUpdateWithDeps {

ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
console.log(\\"Runs when this.a or this.b changes\\", this.a, this.b);
console.log(\\"Runs when a or b changes\\", this.a, this.b);

if (this.a === \\"a\\") {
this.a = \\"b\\";
}
console.log(\\"Runs when this.c or this.d changes\\", this.c, this.d);
console.log(\\"Runs when c or d changes\\", this.c, this.d);

if (this.a === \\"a\\") {
this.a = \\"b\\";
Expand Down Expand Up @@ -12808,12 +12943,7 @@ export default class OnUpdateWithDeps {

ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
console.log(
\\"Runs when this.a, this.b or size changes\\",
this.a,
this.b,
this.size
);
console.log(\\"Runs when a, b or size changes\\", this.a, this.b, this.size);
}
}
}
Expand Down Expand Up @@ -13242,7 +13372,7 @@ export default class RenderBlock {
if (!ref) {
// TODO: Public doc page with more info about this message
console.warn(\`
Could not find a registered this.component named \\"\${componentName}\\".
Could not find a registered component named \\"\${componentName}\\".
If you registered it, is the file that registered it imported by the file that needs to render it?\`);
return undefined;
} else {
Expand Down Expand Up @@ -13295,8 +13425,8 @@ export default class RenderBlock {
...getBlockComponentOptions(this.useBlock),

/**
* These this.attributes are passed to the wrapper element when there is one. If \`noWrap\` is set to true, then
* they are provided to the this.component itself directly.
* These attributes are passed to the wrapper element when there is one. If \`noWrap\` is set to true, then
* they are provided to the component itself directly.
*/
...(this.shouldWrap
? {}
Expand Down Expand Up @@ -13391,7 +13521,7 @@ export default class RenderBlock {
if (TARGET === \\"reactNative\\") {
return RenderComponentWithContext;
} else if (TARGET === \\"vue3\\") {
// vue3 expects a string for the this.component tag
// vue3 expects a string for the component tag
return \\"RenderComponent\\";
} else {
return RenderComponent;
Expand Down
Loading