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

feat: add typescript support for useStore<T> #1555

Merged
merged 9 commits into from
Sep 30, 2024
Merged

feat: add typescript support for useStore<T> #1555

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
436016f
feat: add typescript support for useStore<T>
nmerget Sep 6, 2024
f35f51c
feat: enable typescript state for angular
nmerget Sep 9, 2024
df0fb80
chore: add changeset
nmerget Sep 9, 2024
137c0a4
chore: run prettier
nmerget Sep 9, 2024
6827bdb
fix: issue with state methods not using type
nmerget Sep 26, 2024
c4659c0
Merge branch 'main' into feat-typescript-usestore
nmerget Sep 26, 2024
0b77bfa
Merge remote-tracking branch 'origin/main' into feat-typescript-usestore
nmerget Sep 30, 2024
6adabe2
fix: issues mentioned in PR with any fo react state
nmerget Sep 30, 2024
c7397d0
Update .changeset/quick-crabs-cough.md
samijaber Sep 30, 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
7 changes: 7 additions & 0 deletions .changeset/quick-crabs-cough.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@builder.io/mitosis': patch
---

[Angular, React, Vue] feat: add typescript support for ``useStore``

[All] Add new snapshot tests to check if TypeScript works for ``useStore``
nmerget marked this conversation as resolved.
Show resolved Hide resolved
samijaber marked this conversation as resolved.
Show resolved Hide resolved
88 changes: 88 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 @@ -2644,6 +2644,50 @@ exports[`Alpine.js > jsx > Javascript Test > typeDependency 1`] = `
"
`;

exports[`Alpine.js > jsx > Javascript Test > typeExternalStore 1`] = `
"<div x-data=\\"typeExternalStore()\\">
Hello
<span x-html=\\"_name\\"></span>
!
</div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"typeExternalStore\\", () => ({
_name: \\"test\\",
}));
});
</script>
"
`;

exports[`Alpine.js > jsx > Javascript Test > typeGetterStore 1`] = `
"<div x-data=\\"typeGetterStore()\\">
Hello
<span x-html=\\"name\\"></span>
!
</div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"typeGetterStore\\", () => ({
name: \\"test\\",

getName() {
if (this.name === \\"a\\") {
return \\"b\\";
}

return this.name;
},

get test() {
return \\"test\\";
},
}));
});
</script>
"
`;

exports[`Alpine.js > jsx > Javascript Test > use-style 1`] = `
"<style>
button {
Expand Down Expand Up @@ -5391,6 +5435,50 @@ exports[`Alpine.js > jsx > Typescript Test > typeDependency 1`] = `
"
`;

exports[`Alpine.js > jsx > Typescript Test > typeExternalStore 1`] = `
"<div x-data=\\"typeExternalStore()\\">
Hello
<span x-html=\\"_name\\"></span>
!
</div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"typeExternalStore\\", () => ({
_name: \\"test\\",
}));
});
</script>
"
`;

exports[`Alpine.js > jsx > Typescript Test > typeGetterStore 1`] = `
"<div x-data=\\"typeGetterStore()\\">
Hello
<span x-html=\\"name\\"></span>
!
</div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"typeGetterStore\\", () => ({
name: \\"test\\",

getName() {
if (this.name === \\"a\\") {
return \\"b\\";
}

return this.name;
},

get test() {
return \\"test\\";
},
}));
});
</script>
"
`;

exports[`Alpine.js > jsx > Typescript Test > use-style 1`] = `
"<style>
button {
Expand Down
160 changes: 158 additions & 2 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 @@ -6530,6 +6530,80 @@ export class TypeDependencyModule {}
"
`;

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

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

@Component({
selector: \\"type-external-store\\",
template: \`
<div>Hello {{_name}} !</div>
\`,
styles: [
\`
:host {
display: contents;
}
\`,
],
})
export default class TypeExternalStore {
_name = \\"test\\";
}

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

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

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

@Component({
selector: \\"type-getter-store\\",
template: \`
<div>Hello {{name}} !</div>
\`,
styles: [
\`
:host {
display: contents;
}
\`,
],
})
export default class TypeGetterStore {
name = \\"test\\";
getName() {
if (this.name === \\"a\\") {
return \\"b\\";
}

return this.name;
}
get test() {
return \\"test\\";
}
}

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

exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > use-style 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down Expand Up @@ -6958,8 +7032,8 @@ export default class MyBasicComponent {
underscore_fn_name() {
return \\"bar\\";
}
age = 1;
sports = [\\"\\"];
age: number = 1;
sports: Array<string> = [\\"\\"];
}

@NgModule({
Expand Down Expand Up @@ -13822,6 +13896,88 @@ export class TypeDependencyModule {}
"
`;

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

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

import { FooStore } from \\"./foo-store\\";

@Component({
selector: \\"type-external-store\\",
template: \`
<div>Hello {{_name}} !</div>
\`,
styles: [
\`
:host {
display: contents;
}
\`,
],
})
export default class TypeExternalStore {
_name: FooStore[\\"_name\\"] = \\"test\\";
}

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

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

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

type GetterStore = {
getName: () => string;
name: string;
get test(): string;
};

@Component({
selector: \\"type-getter-store\\",
template: \`
<div>Hello {{name}} !</div>
\`,
styles: [
\`
:host {
display: contents;
}
\`,
],
})
export default class TypeGetterStore {
name: GetterStore[\\"name\\"] = \\"test\\";
getName(): GetterStore[\\"getName\\"] {
if (this.name === \\"a\\") {
return \\"b\\";
}

return this.name;
}
get test(): GetterStore[\\"test\\"] {
return \\"test\\";
}
}

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

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