Skip to content

Commit 5ff6e1a

Browse files
reosabloreosablo
committed
fix(remix-3): update to remix@3.0.0-alpha.2
1 parent 9ff875c commit 5ff6e1a

File tree

3 files changed

+53
-55
lines changed

3 files changed

+53
-55
lines changed

‎remix-3/deno.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"imports": {
3-
"@remix-run/dom": "https://esm.sh/*@remix-run/dom@0.0.0-experimental-remix-jam.6?dev",
4-
"@remix-run/dom/": "https://esm.sh/*@remix-run/dom@0.0.0-experimental-remix-jam.6&dev/",
5-
"@remix-run/events": "https://esm.sh/*@remix-run/events@0.0.0-experimental-remix-jam.1?dev",
6-
"@remix-run/events/": "https://esm.sh/*@remix-run/events@0.0.0-experimental-remix-jam.1&dev/",
7-
"@remix-run/style": "https://esm.sh/*@remix-run/style@0.0.0-experimental-remix-jam.1?dev"
3+
"@remix-run/component": "https://esm.sh/*@remix-run/component@0.4.0?dev",
4+
"@remix-run/component/": "https://esm.sh/*@remix-run/component@0.4.0&dev/",
5+
"@remix-run/interaction": "https://esm.sh/*@remix-run/interaction@0.5.0?dev",
6+
"@remix-run/interaction/": "https://esm.sh/*@remix-run/interaction@0.5.0&dev/",
7+
"remix/": "https://esm.sh/*remix@3.0.0-alpha.2&dev/"
88
}
99
}

‎remix-3/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
<script type="importmap">
88
{
99
"imports": {
10-
"@remix-run/dom": "https://esm.sh/*@remix-run/dom@0.0.0-experimental-remix-jam.6?dev",
11-
"@remix-run/dom/": "https://esm.sh/*@remix-run/dom@0.0.0-experimental-remix-jam.6&dev/",
12-
"@remix-run/events": "https://esm.sh/*@remix-run/events@0.0.0-experimental-remix-jam.1?dev",
13-
"@remix-run/events/": "https://esm.sh/*@remix-run/events@0.0.0-experimental-remix-jam.1&dev/",
14-
"@remix-run/style": "https://esm.sh/*@remix-run/style@0.0.0-experimental-remix-jam.1?dev"
10+
"@remix-run/component": "https://esm.sh/*@remix-run/component@0.4.0?dev",
11+
"@remix-run/component/": "https://esm.sh/*@remix-run/component@0.4.0&dev/",
12+
"@remix-run/interaction": "https://esm.sh/*@remix-run/interaction@0.5.0?dev",
13+
"@remix-run/interaction/": "https://esm.sh/*@remix-run/interaction@0.5.0&dev/",
14+
"remix/": "https://esm.sh/*remix@3.0.0-alpha.2&dev/"
1515
}
1616
}
1717
</script>

‎remix-3/main.tsx‎

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
/** @jsxImportSource @remix-run/dom */
1+
/** @jsxImportSource remix/component */
22

3-
import { createRoot, type Remix } from "@remix-run/dom";
4-
import { dom } from "@remix-run/events";
3+
import { createRoot, type Handle } from "remix/component";
54
import type { Post } from "jsonplaceholder-types/types/post";
65
import type { User } from "jsonplaceholder-types/types/user";
76

8-
function App(this: Remix.Handle) {
7+
function App(handle: Handle) {
98
const urlBase = "https://jsonplaceholder.typicode.com";
109

1110
let users: User[] | undefined;
@@ -15,39 +14,38 @@ function App(this: Remix.Handle) {
1514

1615
const fetchUsers = async (signal: AbortSignal) => {
1716
loadingUsers = true;
18-
this.update();
17+
handle.update();
1918
try {
2019
const response = await fetch(`${urlBase}/users`, { signal });
21-
const data = await response.json() as User[];
20+
const data = (await response.json()) as User[];
2221
signal.throwIfAborted();
2322
users = data;
2423
loadingUsers = false;
25-
this.update();
24+
handle.update();
2625
} catch (error) {
2726
if (signal.aborted) return;
2827
loadingUsers = false;
29-
this.update();
28+
handle.update();
3029
throw error;
3130
}
3231
};
3332

3433
const fetchPosts = async (userId: number, signal: AbortSignal) => {
3534
loadingPosts = true;
36-
this.update();
35+
handle.update();
3736
try {
38-
const response = await fetch(
39-
`${urlBase}/posts?userId=${userId}`,
40-
{ signal },
41-
);
42-
const data = await response.json() as Post[];
37+
const response = await fetch(`${urlBase}/posts?userId=${userId}`, {
38+
signal,
39+
});
40+
const data = (await response.json()) as Post[];
4341
signal.throwIfAborted();
4442
posts = data;
4543
loadingPosts = false;
46-
this.update();
44+
handle.update();
4745
} catch (error) {
4846
if (signal.aborted) return;
4947
loadingPosts = false;
50-
this.update();
48+
handle.update();
5149
throw error;
5250
}
5351
};
@@ -56,40 +54,40 @@ function App(this: Remix.Handle) {
5654
fetchPosts(userId, signal);
5755
};
5856

59-
this.queueTask(() => {
60-
fetchUsers(this.signal);
57+
handle.queueTask(() => {
58+
fetchUsers(handle.signal);
6159
});
6260

6361
return () => (
6462
<>
6563
<h1>Buildless Remix 3 app</h1>
66-
{users !== undefined && (
67-
<label>
68-
Select User:
69-
<select
70-
on={[
71-
dom.change(function handleChange(event, signal) {
72-
selectUserId(+event.currentTarget.value, signal);
73-
}),
74-
]}
75-
>
76-
<option hidden selected></option>
77-
{users.map((user) => (
78-
<option key={user.id} value={user.id}>
79-
@{user.username}: {user.name}
80-
</option>
81-
))}
82-
</select>
83-
</label>
84-
) ||
85-
loadingUsers && <p>Loading Users...</p>}
86-
{posts !== undefined && (
87-
<ul>
88-
{posts.map((post) => <li key={post.id}>{post.title}</li>)}
89-
</ul>
90-
) ||
91-
loadingPosts && <p>Loading Posts...</p> ||
92-
users !== undefined && <p>Select User to view posts</p>}
64+
{(users !== undefined && (
65+
<label>
66+
Select User:
67+
<select
68+
on={{
69+
change(event, signal) {
70+
selectUserId(+event.currentTarget.value, signal);
71+
},
72+
}}
73+
>
74+
<option hidden selected></option>
75+
{users.map((user) => (
76+
<option key={user.id} value={user.id}>
77+
@{user.username}: {user.name}
78+
</option>
79+
))}
80+
</select>
81+
</label>
82+
)) ||
83+
(loadingUsers && <p>Loading Users...</p>)}
84+
{(posts !== undefined && (
85+
<ul>
86+
{posts.map((post) => <li key={post.id}>{post.title}</li>)}
87+
</ul>
88+
)) ||
89+
(loadingPosts && <p>Loading Posts...</p>) ||
90+
(users !== undefined && <p>Select User to view posts</p>)}
9391
</>
9492
);
9593
}

0 commit comments

Comments
 (0)