From 8a6acda7afc187fa3542857becdd559f2a0b2da8 Mon Sep 17 00:00:00 2001
From: Yusuke Wada <yusuke@kamawada.com>
Date: Sun, 4 Feb 2024 23:15:22 +0900
Subject: [PATCH] feat: `<Script />` don't emits `script` if no island (#29)

---
 src/server/components/script.tsx              |  7 ++++-
 .../hono-jsx/app-script/islands/Component.tsx |  3 +++
 test/hono-jsx/app-script/routes/_renderer.tsx | 26 +++++++++++++++++++
 test/hono-jsx/app-script/routes/index.tsx     | 18 +++----------
 test/hono-jsx/integration.test.ts             | 10 +++++--
 5 files changed, 47 insertions(+), 17 deletions(-)
 create mode 100644 test/hono-jsx/app-script/islands/Component.tsx
 create mode 100644 test/hono-jsx/app-script/routes/_renderer.tsx
diff --git a/src/server/components/script.tsx b/src/server/components/script.tsx
index c57f77f..defd8d6 100644
--- 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
new file mode 100644
index 0000000..b841f56
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e68d4e3
--- /dev/null
+++ 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
index fe67487..ef19fcb 100644
--- 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
index b387e20..4cc6e57 100644
--- 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>'
     )
   })
 })
