test(rsc): test assets

Author: hi-ogawa

packages/plugin-rsc/examples/basic/src/routes/assets/client.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import './test-url.css'
+import viteLogo from './vite.svg'
+
+export function TestAssetsClient() {
+  return (
+    <div className="flex flex-col p-2 gap-2">
+      <h3 className="font-bold">Test Assets</h3>
+      <div className="flex items-center gap-2">
+        <img src={viteLogo} className="size-10" data-testid="js-import" /> js
+        import
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="test-css-url size-10" data-testid="css-url" /> css
+        url()
+      </div>
+    </div>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/assets/react.svg

@@ -0,0 +1,16 @@
+// import { TestAssetsClient } from "./client";
+import './test-url.css'
+import viteLogo from './vite.svg'
+
+export function TestAssetsServer() {
+  return (
+    <>
+      <div>
+        <span>test-assets-server</span>
+        <img src={viteLogo} className="size-10" data-testid="js-import" />
+        <span className="test-css-url size-10" data-testid="css-url" />
+      </div>
+      {/* <TestAssetsClient /> */}
+    </>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/assets/server.tsx

@@ -0,0 +1,4 @@
+.test-css-url {
+  background: url(./react.svg) no-repeat;
+  background-size: contain;
+}

packages/plugin-rsc/examples/basic/src/routes/assets/test-url.css

@@ -37,6 +37,7 @@ import { TestHmrSharedClient } from './hmr-shared/client'
 import { TestHmrSharedAtomic } from './hmr-shared/atomic/server'
 import { TestCssQueries } from './css-queries/server'
 import { TestImportMetaGlob } from './import-meta-glob/server'
+import { TestAssetsServer } from './assets/server'
 
 export function Root(props: { url: URL }) {
   return (
@@ -87,6 +88,7 @@ export function Root(props: { url: URL }) {
         <TestReactCache url={props.url} />
         <TestCssQueries />
         <TestImportMetaGlob />
+        <TestAssetsServer />
       </body>
     </html>
   )

packages/plugin-rsc/examples/basic/src/routes/assets/vite.svg

@@ -27,6 +27,7 @@ export default async function handler(request: Request): Promise<Response> {
       // `unsafe-eval` is required during dev since React uses eval for findSourceMapURL feature
       `script-src 'self' 'nonce-${nonce}' ${import.meta.env.DEV ? `'unsafe-eval'` : ``};`,
       `style-src 'self' 'unsafe-inline';`,
+      `img-src 'self' data:;`,
       // allow blob: worker for Vite server ping shared worker
       import.meta.hot && `worker-src 'self' blob:;`,
     ]