Skip to content

signal proxy without signal maping #2

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

Open
benjavicente wants to merge 1 commit into
base: refactor/require-angular-v19
Choose a base branch
from
Open

signal proxy without signal maping #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 3 additions & 3 deletions examples/angular/auto-refetching/src/app/components/auto-refetching.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ <h1>Auto Refetch with stale-time set to {{ intervalMs() }}ms</h1>
marginLeft: '.5rem',
width: '10px',
height: '10px',
background: tasks.isFetching() ? 'green' : 'transparent',
transition: !tasks.isFetching() ? 'all .3s ease' : 'none',
background: tasks.isFetching ? 'green' : 'transparent',
transition: !tasks.isFetching ? 'all .3s ease' : 'none',
borderRadius: '100%',
transform: 'scale(2)',
}"
Expand All @@ -25,7 +25,7 @@ <h2>Todo List</h2>

<input placeholder="Enter something" (keydown.enter)="addItem($event)" />
<ul>
@for (item of tasks.data(); track item) {
@for (item of tasks.data; track item) {
<li>{{ item }}</li>
}
</ul>
Expand Down
10 changes: 5 additions & 5 deletions examples/angular/basic-persister/src/app/components/post.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@
<div>
<a (click)="setPostId.emit(-1)" href="#"> Back </a>
</div>
@if (postQuery.isPending()) {
@if (postQuery.isPending) {
Loading...
} @else if (postQuery.isError()) {
Error: {{ postQuery.error().message }}
} @else if (postQuery.isError) {
Error: {{ postQuery.error.message }}
}
@if (postQuery.data(); as post) {
@if (postQuery.data; as post) {
<h1>{{ post.title }}</h1>
<div>
<p>{{ post.body }}</p>
</div>
@if (postQuery.isFetching()) {
@if (postQuery.isFetching) {
Background Updating...
}
}
Expand Down
12 changes: 6 additions & 6 deletions examples/angular/basic-persister/src/app/components/posts.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div>
<h1>Posts</h1>
@if (postsQuery.isPending()) {
@if (postsQuery.isPending) {
Loading...
} @else if (postsQuery.isError()) {
Error: {{ postsQuery.error().message }}
} @else if (postsQuery.isSuccess()) {
} @else if (postsQuery.isError) {
Error: {{ postsQuery.error.message }}
} @else if (postsQuery.isSuccess) {
<div class="todo-container">
@for (post of postsQuery.data(); track post.id) {
@for (post of postsQuery.data; track post.id) {
<p>
<!-- We can access the query data here to show bold links for-->
<!-- ones that are cached-->
Expand All @@ -28,7 +28,7 @@ <h1>Posts</h1>
</div>
}
<div>
@if (postsQuery.isFetching()) {
@if (postsQuery.isFetching) {
Background Updating...
}
</div>
Expand Down
10 changes: 5 additions & 5 deletions examples/angular/basic/src/app/components/post.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@
<div>
<a (click)="setPostId.emit(-1)" href="#"> Back </a>
</div>
@if (postQuery.isPending()) {
@if (postQuery.isPending) {
Loading...
} @else if (postQuery.isError()) {
Error: {{ postQuery.error().message }}
} @else if (postQuery.isError) {
Error: {{ postQuery.error.message }}
}
@if (postQuery.data(); as post) {
@if (postQuery.data; as post) {
<h1>{{ post.title }}</h1>
<div>
<p>{{ post.body }}</p>
</div>
@if (postQuery.isFetching()) {
@if (postQuery.isFetching) {
Background Updating...
}
}
Expand Down
12 changes: 6 additions & 6 deletions examples/angular/basic/src/app/components/posts.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div>
<h1>Posts</h1>
@if (postsQuery.isPending()) {
@if (postsQuery.isPending) {
Loading...
} @else if (postsQuery.isError()) {
Error: {{ postsQuery.error().message }}
} @else if (postsQuery.isSuccess()) {
} @else if (postsQuery.isError) {
Error: {{ postsQuery.error.message }}
} @else if (postsQuery.isSuccess) {
<div class="todo-container">
@for (post of postsQuery.data(); track post.id) {
@for (post of postsQuery.data; track post.id) {
<p>
<!-- We can access the query data here to show bold links for-->
<!-- ones that are cached-->
Expand All @@ -28,7 +28,7 @@ <h1>Posts</h1>
</div>
}
<div>
@if (postsQuery.isFetching()) {
@if (postsQuery.isFetching) {
Background Updating...
}
</div>
Expand Down
10 changes: 5 additions & 5 deletions examples/angular/devtools-panel/src/app/components/example-query.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ interface Response {
selector: 'example-query',
template: `
<div style="padding-bottom: 20px">
@if (query.isPending()) {
@if (query.isPending) {
<div>Loading...</div>
}
@if (query.isError()) {
<div>An error has occurred: {{ query.error().message }}</div>
@if (query.isError) {
<div>An error has occurred: {{ query.error.message }}</div>
}
@if (query.isSuccess()) {
@let data = query.data();
@if (query.isSuccess) {
@let data = query.data;
<h1>{{ data.name }}</h1>
<p>{{ data.description }}</p>
<strong>👀 {{ data.subscribers_count }}</strong>
Expand Down
10 changes: 5 additions & 5 deletions examples/angular/infinite-query-with-max-pages/src/app/components/example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<h1>Infinite Query with max pages</h1>
<h3>4 projects per page</h3>
<h3>3 pages max</h3>
@if (query.isPending()) {
@if (query.isPending) {
<p>Loading...</p>
} @else if (query.isError()) {
<span>Error: {{ query.error().message }}</span>
} @else if (query.isError) {
<span>Error: {{ query.error.message }}</span>
} @else {
<div>
<button
Expand All @@ -15,7 +15,7 @@ <h3>3 pages max</h3>
{{ previousButtonText() }}
</button>
</div>
@for (page of query.data().pages; track $index) {
@for (page of query.data.pages; track $index) {
@for (project of page.data; track project.id) {
<p [projectStyle]="project.id">{{ project.name }} {{ project.id }}</p>
}
Expand All @@ -27,7 +27,7 @@ <h3>3 pages max</h3>
</div>
<div>
{{
query.isFetching() && !query.isFetchingNextPage()
query.isFetching && !query.isFetchingNextPage
? 'Background Updating...'
: null
}}
Expand Down
12 changes: 6 additions & 6 deletions examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,24 @@ export class ExampleComponent {
}))

readonly nextButtonDisabled = computed(
() => !this.query.hasNextPage() || this.query.isFetchingNextPage(),
() => !this.query.hasNextPage || this.query.isFetchingNextPage,
)

readonly nextButtonText = computed(() =>
this.query.isFetchingNextPage()
this.query.isFetchingNextPage
? 'Loading more...'
: this.query.hasNextPage()
: this.query.hasNextPage
? 'Load newer'
: 'Nothing more to load',
)

readonly previousButtonDisabled = computed(
() => !this.query.hasPreviousPage() || this.query.isFetchingPreviousPage(),
() => !this.query.hasPreviousPage || this.query.isFetchingPreviousPage,
)
readonly previousButtonText = computed(() =>
this.query.isFetchingPreviousPage()
this.query.isFetchingPreviousPage
? 'Loading more...'
: this.query.hasPreviousPage()
: this.query.hasPreviousPage
? 'Load Older'
: 'Nothing more to load',
)
Expand Down
8 changes: 4 additions & 4 deletions examples/angular/optimistic-updates/src/app/components/optimistic-updates.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { TasksService } from '../services/tasks.service'
</p>

<hr />
@if (tasks.isLoading()) {
@if (tasks.isLoading) {
<p>Loading...</p>
}

Expand All @@ -36,16 +36,16 @@ import { TasksService } from '../services/tasks.service'
<input type="text" [(ngModel)]="newItem" placeholder="Enter text" />
<button (click)="addItem()">Create</button>
<ul>
@for (task of tasks.data(); track $index) {
@for (task of tasks.data; track $index) {
<li>{{ task }}</li>
}
</ul>

<div>
Updated At: {{ tasks.dataUpdatedAt() | date: 'MMMM d, h:mm:ss a ' }}
Updated At: {{ tasks.dataUpdatedAt | date: 'MMMM d, h:mm:ss a ' }}
</div>
</div>
@if (!tasks.isLoading() && tasks.isFetching()) {
@if (!tasks.isLoading && tasks.isFetching) {
<p>Fetching in background</p>
}
</div>
Expand Down
14 changes: 7 additions & 7 deletions examples/angular/pagination/src/app/components/example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
instantaneously while they are also refetched invisibly in the background.
</p>

@if (query.isPending()) {
@if (query.isPending) {
<div>Loading...</div>
} @else if (query.isError()) {
<div>Error: {{ query.error().message }}</div>
} @else if (query.isSuccess()) {
} @else if (query.isError) {
<div>Error: {{ query.error.message }}</div>
} @else if (query.isSuccess) {
<div>
@for (project of query.data().projects; track project.id) {
@for (project of query.data.projects; track project.id) {
<p>{{ project.name }}</p>
}
</div>
Expand All @@ -26,14 +26,14 @@
</button>
<button
(click)="nextPage()"
[disabled]="query.isPlaceholderData() || !query.data()?.hasMore"
[disabled]="query.isPlaceholderData || !query.data?.hasMore"
>
Next Page
</button>
<!-- Since the last page's data potentially sticks around between page requests, -->
<!-- we can use `isFetching` to show a background loading -->
<!-- indicator since our `status === 'pending'` state won't be triggered -->
@if (query.isFetching()) {
@if (query.isFetching) {
<span>Loading...</span>
}
</div>
6 changes: 3 additions & 3 deletions examples/angular/pagination/src/app/components/example.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ export class ExampleComponent {
}))

readonly prefetchEffect = effect(() => {
const data = this.query.data()
const isPlaceholderData = this.query.isPlaceholderData()
const data = this.query.data
const isPlaceholderData = this.query.isPlaceholderData
const newPage = this.page() + 1

untracked(() => {
Expand All @@ -57,7 +57,7 @@ export class ExampleComponent {

nextPage() {
this.page.update((currentPage) => {
return this.query.data()?.hasMore ? currentPage + 1 : currentPage
return this.query.data?.hasMore ? currentPage + 1 : currentPage
})
}
}
12 changes: 6 additions & 6 deletions examples/angular/query-options-from-a-service/src/app/components/post.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
<div>
<a routerLink="/" href="#">Back</a>
</div>
@if (postQuery.isPending()) {
@if (postQuery.isPending) {
Loading...
} @else if (postQuery.isError()) {
Error: {{ postQuery.error().message }}
} @else if (postQuery.isError) {
Error: {{ postQuery.error.message }}
}
@if (postQuery.isSuccess()) {
@let post = postQuery.data();
@if (postQuery.isSuccess) {
@let post = postQuery.data;
<h1>{{ post.title }}</h1>
<div>
<p>{{ post.body }}</p>
</div>
@if (postQuery.isFetching()) {
@if (postQuery.isFetching) {
Background Updating...
}
}
Expand Down
12 changes: 6 additions & 6 deletions examples/angular/query-options-from-a-service/src/app/components/posts.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div>
<h1>Posts</h1>
@if (postsQuery.isPending()) {
@if (postsQuery.isPending) {
Loading...
} @else if (postsQuery.isError()) {
Error: {{ postsQuery.error().message }}
} @else if (postsQuery.isSuccess()) {
} @else if (postsQuery.isError) {
Error: {{ postsQuery.error.message }}
} @else if (postsQuery.isSuccess) {
<div class="todo-container">
@for (post of postsQuery.data(); track post.id) {
@for (post of postsQuery.data; track post.id) {
<p>
<!-- We can access the query data here to show bold links for-->
<!-- ones that are cached-->
Expand All @@ -27,7 +27,7 @@ <h1>Posts</h1>
</div>
}
<div>
@if (postsQuery.isFetching()) {
@if (postsQuery.isFetching) {
Background Updating...
}
</div>
Expand Down
12 changes: 6 additions & 6 deletions examples/angular/router/src/app/components/post.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
<div>
<a routerLink="/" href="#">Back</a>
</div>
@if (postQuery.isPending()) {
@if (postQuery.isPending) {
Loading...
} @else if (postQuery.isError()) {
Error: {{ postQuery.error().message }}
} @else if (postQuery.isError) {
Error: {{ postQuery.error.message }}
}
@if (postQuery.isSuccess()) {
@let post = postQuery.data();
@if (postQuery.isSuccess) {
@let post = postQuery.data;
<h1>{{ post.title }}</h1>
<div>
<p>{{ post.body }}</p>
</div>
@if (postQuery.isFetching()) {
@if (postQuery.isFetching) {
Background Updating...
}
}
Expand Down
12 changes: 6 additions & 6 deletions examples/angular/router/src/app/components/posts.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div>
<h1>Posts</h1>
@if (postsQuery.isPending()) {
@if (postsQuery.isPending) {
Loading...
} @else if (postsQuery.isError()) {
Error: {{ postsQuery.error().message }}
} @else if (postsQuery.isSuccess()) {
} @else if (postsQuery.isError) {
Error: {{ postsQuery.error.message }}
} @else if (postsQuery.isSuccess) {
<div class="todo-container">
@for (post of postsQuery.data(); track post.id) {
@for (post of postsQuery.data; track post.id) {
<p>
<!-- We can access the query data here to show bold links for-->
<!-- ones that are cached-->
Expand All @@ -27,7 +27,7 @@ <h1>Posts</h1>
</div>
}
<div>
@if (postsQuery.isFetching()) {
@if (postsQuery.isFetching) {
Background Updating...
}
</div>
Expand Down
Loading