test: add atomic hmr failure example

Author: hi-ogawa

packages/plugin-rsc/examples/basic/src/routes/hmr-shared/atomic/client.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import React from 'react'
+import { testShared } from './shared'
+
+export function TestClient({
+  testSharedFromServer,
+}: {
+  testSharedFromServer: string
+}) {
+  React.useEffect(() => {
+    console.log({ testShared, testSharedFromServer })
+    if (testShared !== testSharedFromServer) {
+      throw new Error(
+        `Mismatch: ${JSON.stringify({ testShared, testSharedFromServer })}`,
+      )
+    }
+  }, [testShared, testSharedFromServer])
+
+  return <>ok ({testShared})</>
+}

packages/plugin-rsc/examples/basic/src/routes/hmr-shared/atomic/error-boundary.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import * as React from 'react'
+
+interface Props {
+  children?: React.ReactNode
+}
+
+interface State {
+  error: Error | null
+}
+
+export default class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { error: null }
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <span>
+          ERROR
+          <button
+            onClick={() => {
+              this.setState({ error: null })
+            }}
+          >
+            Reset
+          </button>
+        </span>
+      )
+    }
+    return this.props.children
+  }
+}

packages/plugin-rsc/examples/basic/src/routes/hmr-shared/atomic/server.tsx

@@ -0,0 +1,14 @@
+import { TestClient } from './client'
+import ErrorBoundary from './error-boundary'
+import { testShared } from './shared'
+
+export function TestHmrSharedAtomic() {
+  return (
+    <div>
+      test-hmr-shared-atomic:{' '}
+      <ErrorBoundary>
+        <TestClient testSharedFromServer={testShared} />
+      </ErrorBoundary>
+    </div>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/hmr-shared/atomic/shared.tsx

@@ -0,0 +1 @@
+export const testShared = 'test-shared'

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -34,6 +34,7 @@ import { TestTransitiveCjsClient } from './deps/transitive-cjs/client'
 import TestDepCssInServer from '@vitejs/test-dep-css-in-server/server'
 import { TestHmrSharedServer } from './hmr-shared/server'
 import { TestHmrSharedClient } from './hmr-shared/client'
+import { TestHmrSharedAtomic } from './hmr-shared/atomic/server'
 
 export function Root(props: { url: URL }) {
   return (
@@ -60,6 +61,7 @@ export function Root(props: { url: URL }) {
         <TestHmrClientDep />
         <TestHmrSharedServer />
         <TestHmrSharedClient />
+        <TestHmrSharedAtomic />
         <TestTemporaryReference />
         <TestServerActionError />
         <TestReplayConsoleLogs url={props.url} />