feat: <Script /> don't emits script if no island (#29)

honojs · Feb 4, 2024 · 8a6acda · 8a6acda
1 parent ef9fd5b
commit 8a6acda
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 17 deletions.
diff --git a/src/server/components/script.tsx b/src/server/components/script.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'hono/jsx'
 import type { Manifest } from 'vite'
+import { HasIslands } from './has-islands.js'
 
 type Options = {
   src: string
@@ -19,7 +20,11 @@ export const Script: FC<Options> = async (options) => {
     if (manifest) {
       const scriptInManifest = manifest[src.replace(/^\//, '')]
       if (scriptInManifest) {
-        return <script type='module' src={`/${scriptInManifest.file}`}></script>
+        return (
+          <HasIslands>
+            <script type='module' src={`/${scriptInManifest.file}`}></script>
+          </HasIslands>
+        )
       }
     }
     return <></>

diff --git a/test/hono-jsx/app-script/islands/Component.tsx b/test/hono-jsx/app-script/islands/Component.tsx
@@ -0,0 +1,3 @@
+export default function Component() {
+  return <p>Component</p>
+}
diff --git a/test/hono-jsx/app-script/routes/_renderer.tsx b/test/hono-jsx/app-script/routes/_renderer.tsx
@@ -0,0 +1,26 @@
+import { jsxRenderer } from 'hono/jsx-renderer'
+import { Script } from '../../../../src/server'
+
+export default jsxRenderer(
+  ({ children }) => {
+    return (
+      <html>
+        <head>
+          <Script
+            src='/app/client.ts'
+            prod={true}
+            manifest={{
+              'app/client.ts': {
+                file: 'static/client-abc.js',
+              },
+            }}
+          />
+        </head>
+        <body>{children}</body>
+      </html>
+    )
+  },
+  {
+    docType: false,
+  }
+)
diff --git a/test/hono-jsx/app-script/routes/index.tsx b/test/hono-jsx/app-script/routes/index.tsx
@@ -1,19 +1,9 @@
-import { Script } from '../../../../src/server'
+import Component from '../islands/Component'
 
 export default function Hello() {
   return (
-    <html>
-      <head>
-        <Script
-          src='/app/client.ts'
-          prod={true}
-          manifest={{
-            'app/client.ts': {
-              file: 'static/client-abc.js',
-            },
-          }}
-        />
-      </head>
-    </html>
+    <main>
+      <Component />
+    </main>
   )
 }
diff --git a/test/hono-jsx/integration.test.ts b/test/hono-jsx/integration.test.ts
@@ -212,7 +212,7 @@ describe('With preserved', () => {
 })
 
 describe('API', () => {
-  const ROUES = import.meta.glob('./app/routes//**/[a-z[-][a-z-_[]*.(tsx|ts)', {
+  const ROUES = import.meta.glob('./app/routes/**/[a-z[-][a-z-_[]*.(tsx|ts)', {
     eager: true,
   })
 
@@ -284,16 +284,22 @@ describe('<Script /> component', () => {
   const ROUTES = import.meta.glob('./app-script/routes/index.tsx', {
     eager: true,
   })
+
+  const RENDERER = import.meta.glob('./app-script/routes/**/_renderer.tsx', {
+    eager: true,
+  })
+
   const app = createApp({
     root: './app-script/routes',
     ROUTES: ROUTES as any,
+    RENDERER: RENDERER as any,
   })
 
   it('Should convert the script path correctly', async () => {
     const res = await app.request('/')
     expect(res.status).toBe(200)
     expect(await res.text()).toBe(
-      '<html><head><script type="module" src="/static/client-abc.js"></script></head></html>'
+      '<html><head><script type="module" src="/static/client-abc.js"></script></head><body><main><honox-island component-name="Component.tsx" data-serialized-props="{}"><p>Component</p></honox-island></main></body></html>'
     )
   })
 })