wip

Author: hi-ogawa

packages/plugin-rsc/e2e/basic.test.ts

@@ -1179,4 +1179,17 @@ function defineTest(f: Fixture) {
       await expect(page.locator(selector)).toHaveCSS('color', color)
     }
   })
+
+  test('assets', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    // await expect(page.getByAltText('Vite logo')).not.toHaveJSProperty(
+    //   'naturalWidth',
+    //   0,
+    // )
+    // await expect(page.getByAltText('React logo')).not.toHaveJSProperty(
+    //   'naturalWidth',
+    //   0,
+    // )
+  })
 }

packages/plugin-rsc/examples/basic/src/routes/assets/react.svg renamed to packages/plugin-rsc/examples/basic/src/routes/assets/client-css.svg

@@ -0,0 +1,6 @@
+.test-assets-client-css {
+  background: url(./client-css.svg) no-repeat;
+  background-size: contain;
+  width: 20px;
+  height: 20px;
+}

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

@@ -1,20 +1,15 @@
 'use client'
 
-import './test-url.css'
-import viteLogo from './vite.svg'
+import './client.css'
+import svg from './client.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 style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+      <span>test-assets-client</span>
+      <img src={svg} data-testid="test-assets-client-js" width="20" />
+      {/* TODO? */}
+      <span className="test-assets-client-css" />
     </div>
   )
 }

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

@@ -0,0 +1,6 @@
+.test-assets-server-css {
+  background: url(./server-css.svg) no-repeat;
+  background-size: contain;
+  width: 20px;
+  height: 20px;
+}

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

@@ -1,19 +1,16 @@
-// import { TestAssetsClient } from "./client";
-import './test-url.css'
-import viteLogo from './vite.svg'
+import { TestAssetsClient } from './client'
+import './server.css'
+import svg from './server.svg'
 
 export function TestAssetsServer() {
   return (
     <>
-      <div>
+      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
         <span>test-assets-server</span>
-        <img src={viteLogo} data-testid="test-assets-server-js" />
-        <span
-          className="test-assets-server-css"
-          data-testid="test-assets-server-css"
-        />
+        <img src={svg} data-testid="test-assets-server-js" width="20" />
+        <span className="test-assets-server-css" />
       </div>
-      {/* <TestAssetsClient /> */}
+      <TestAssetsClient />
     </>
   )
 }