Skip to content

Commit d0bc065

Browse files
pi0pi0
committed
lint
1 parent f8e87d3 commit d0bc065

File tree

5 files changed

+80
-78
lines changed

5 files changed

+80
-78
lines changed

‎examples/vite-rsc/src/action.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
'use server'
1+
"use server";
22

3-
let serverCounter = 0
3+
let serverCounter = 0;
44

55
export async function getServerCounter() {
6-
return serverCounter
6+
return serverCounter;
77
}
88

99
export async function updateServerCounter(change: number) {
10-
serverCounter += change
10+
serverCounter += change;
1111
}

‎examples/vite-rsc/src/client.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
'use client'
1+
"use client";
22

3-
import React from 'react'
3+
import React from "react";
44

55
export function ClientCounter() {
6-
const [count, setCount] = React.useState(0)
6+
const [count, setCount] = React.useState(0);
77

88
return (
99
<button onClick={() => setCount((count) => count + 1)}>
1010
Client Counter: {count}
1111
</button>
12-
)
12+
);
1313
}

‎examples/vite-rsc/src/framework/entry.browser.tsx‎

Lines changed: 59 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -4,130 +4,131 @@ import {
44
setServerCallback,
55
createTemporaryReferenceSet,
66
encodeReply,
7-
} from '@vitejs/plugin-rsc/browser'
8-
import React from 'react'
9-
import { hydrateRoot } from 'react-dom/client'
10-
import { rscStream } from 'rsc-html-stream/client'
11-
import type { RscPayload } from './entry.rsc'
7+
} from "@vitejs/plugin-rsc/browser";
8+
import React from "react";
9+
import { hydrateRoot } from "react-dom/client";
10+
import { rscStream } from "rsc-html-stream/client";
11+
import type { RscPayload } from "./entry.rsc";
1212

1313
async function main() {
1414
// stash `setPayload` function to trigger re-rendering
1515
// from outside of `BrowserRoot` component (e.g. server function call, navigation, hmr)
16-
let setPayload: (v: RscPayload) => void
16+
let setPayload: (v: RscPayload) => void;
1717

1818
// deserialize RSC stream back to React VDOM for CSR
1919
const initialPayload = await createFromReadableStream<RscPayload>(
2020
// initial RSC stream is injected in SSR stream as <script>...FLIGHT_DATA...</script>
21-
rscStream,
22-
)
21+
rscStream
22+
);
2323

2424
// browser root component to (re-)render RSC payload as state
2525
function BrowserRoot() {
26-
const [payload, setPayload_] = React.useState(initialPayload)
26+
const [payload, setPayload_] = React.useState(initialPayload);
2727

2828
React.useEffect(() => {
29-
setPayload = (v) => React.startTransition(() => setPayload_(v))
30-
}, [setPayload_])
29+
setPayload = (v) => React.startTransition(() => setPayload_(v));
30+
}, [setPayload_]);
3131

3232
// re-fetch/render on client side navigation
3333
React.useEffect(() => {
34-
return listenNavigation(() => fetchRscPayload())
35-
}, [])
34+
return listenNavigation(() => fetchRscPayload());
35+
}, []);
3636

37-
return payload.root
37+
return payload.root;
3838
}
3939

4040
// re-fetch RSC and trigger re-rendering
4141
async function fetchRscPayload() {
4242
const payload = await createFromFetch<RscPayload>(
43-
fetch(window.location.href),
44-
)
45-
setPayload(payload)
43+
fetch(globalThis.location.href)
44+
);
45+
setPayload(payload);
4646
}
4747

4848
// register a handler which will be internally called by React
4949
// on server function request after hydration.
5050
setServerCallback(async (id, args) => {
51-
const url = new URL(window.location.href)
52-
const temporaryReferences = createTemporaryReferenceSet()
51+
const url = new URL(globalThis.location.href);
52+
const temporaryReferences = createTemporaryReferenceSet();
5353
const payload = await createFromFetch<RscPayload>(
5454
fetch(url, {
55-
method: 'POST',
55+
method: "POST",
5656
body: await encodeReply(args, { temporaryReferences }),
5757
headers: {
58-
'x-rsc-action': id,
58+
"x-rsc-action": id,
5959
},
6060
}),
61-
{ temporaryReferences },
62-
)
63-
setPayload(payload)
64-
return payload.returnValue
65-
})
61+
{ temporaryReferences }
62+
);
63+
setPayload(payload);
64+
return payload.returnValue;
65+
});
6666

6767
// hydration
6868
const browserRoot = (
6969
<React.StrictMode>
7070
<BrowserRoot />
7171
</React.StrictMode>
72-
)
72+
);
7373
hydrateRoot(document, browserRoot, {
7474
formState: initialPayload.formState,
75-
})
75+
});
7676

7777
// implement server HMR by trigering re-fetch/render of RSC upon server code change
7878
if (import.meta.hot) {
79-
import.meta.hot.on('rsc:update', () => {
80-
fetchRscPayload()
81-
})
79+
import.meta.hot.on("rsc:update", () => {
80+
fetchRscPayload();
81+
});
8282
}
8383
}
8484

8585
// a little helper to setup events interception for client side navigation
8686
function listenNavigation(onNavigation: () => void) {
87-
window.addEventListener('popstate', onNavigation)
88-
89-
const oldPushState = window.history.pushState
90-
window.history.pushState = function (...args) {
91-
const res = oldPushState.apply(this, args)
92-
onNavigation()
93-
return res
94-
}
95-
96-
const oldReplaceState = window.history.replaceState
97-
window.history.replaceState = function (...args) {
98-
const res = oldReplaceState.apply(this, args)
99-
onNavigation()
100-
return res
101-
}
87+
globalThis.addEventListener("popstate", onNavigation);
88+
89+
const oldPushState = globalThis.history.pushState;
90+
globalThis.history.pushState = function (...args) {
91+
const res = oldPushState.apply(this, args);
92+
onNavigation();
93+
return res;
94+
};
95+
96+
const oldReplaceState = globalThis.history.replaceState;
97+
globalThis.history.replaceState = function (...args) {
98+
const res = oldReplaceState.apply(this, args);
99+
onNavigation();
100+
return res;
101+
};
102102

103103
function onClick(e: MouseEvent) {
104-
let link = (e.target as Element).closest('a')
104+
const link = (e.target as Element).closest("a");
105105
if (
106106
link &&
107107
link instanceof HTMLAnchorElement &&
108108
link.href &&
109-
(!link.target || link.target === '_self') &&
109+
(!link.target || link.target === "_self") &&
110110
link.origin === location.origin &&
111-
!link.hasAttribute('download') &&
111+
!link.hasAttribute("download") &&
112112
e.button === 0 && // left clicks only
113113
!e.metaKey && // open in new tab (mac)
114114
!e.ctrlKey && // open in new tab (windows)
115115
!e.altKey && // download
116116
!e.shiftKey &&
117117
!e.defaultPrevented
118118
) {
119-
e.preventDefault()
120-
history.pushState(null, '', link.href)
119+
e.preventDefault();
120+
history.pushState(null, "", link.href);
121121
}
122122
}
123-
document.addEventListener('click', onClick)
123+
document.addEventListener("click", onClick);
124124

125125
return () => {
126-
document.removeEventListener('click', onClick)
127-
window.removeEventListener('popstate', onNavigation)
128-
window.history.pushState = oldPushState
129-
window.history.replaceState = oldReplaceState
130-
}
126+
document.removeEventListener("click", onClick);
127+
globalThis.removeEventListener("popstate", onNavigation);
128+
globalThis.history.pushState = oldPushState;
129+
globalThis.history.replaceState = oldReplaceState;
130+
};
131131
}
132132

133-
main()
133+
// eslint-disable-next-line unicorn/prefer-top-level-await
134+
main();

‎examples/vite-rsc/src/framework/entry.rsc.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export default async function handler(request: Request): Promise<Response> {
4242
temporaryReferences = createTemporaryReferenceSet();
4343
const args = await decodeReply(body, { temporaryReferences });
4444
const action = await loadServerAction(actionId);
45+
// eslint-disable-next-line prefer-spread
4546
returnValue = await action.apply(null, args);
4647
} else {
4748
// otherwise server function is called via `<form action={...}>`

‎examples/vite-rsc/src/root.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import './index.css' // css import is automatically injected in exported server components
2-
import viteLogo from '/vite.svg'
3-
import { getServerCounter, updateServerCounter } from './action.tsx'
4-
import reactLogo from './assets/react.svg'
5-
import { ClientCounter } from './client.tsx'
1+
import "./index.css"; // css import is automatically injected in exported server components
2+
import viteLogo from "/vite.svg";
3+
import { getServerCounter, updateServerCounter } from "./action.tsx";
4+
import reactLogo from "./assets/react.svg";
5+
import { ClientCounter } from "./client.tsx";
66

77
export function Root(props: { url: URL }) {
88
return (
99
<html lang="en">
1010
<head>
11-
<meta charSet="UTF-8" />
11+
<meta charSet="utf8" />
1212
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
1313
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1414
<title>Vite + RSC</title>
@@ -17,7 +17,7 @@ export function Root(props: { url: URL }) {
1717
<App {...props} />
1818
</body>
1919
</html>
20-
)
20+
);
2121
}
2222

2323
function App(props: { url: URL }) {
@@ -52,20 +52,20 @@ function App(props: { url: URL }) {
5252
Edit <code>src/root.tsx</code> to test server HMR.
5353
</li>
5454
<li>
55-
Visit{' '}
55+
Visit{" "}
5656
<a href="?__rsc" target="_blank">
5757
<code>?__rsc</code>
58-
</a>{' '}
58+
</a>{" "}
5959
to view RSC stream payload.
6060
</li>
6161
<li>
62-
Visit{' '}
62+
Visit{" "}
6363
<a href="?__nojs" target="_blank">
6464
<code>?__nojs</code>
65-
</a>{' '}
65+
</a>{" "}
6666
to test server action without js enabled.
6767
</li>
6868
</ul>
6969
</div>
70-
)
70+
);
7171
}

0 commit comments

Comments
 (0)