feat: Script and HasIsland available at multiple runtimes with `A…

…syncLocalStorage` (#168)

* feat: Use AsyncLocalStorage to share context in same request

* feat: replace reactApiImportSource also in server components

* feat: use `any` instead of `FC` for components for multi-runtime compatibility

* test: add test for server/components

src/server/components/has-islands.tsx

@@ -1,8 +1,11 @@
-import type { FC } from 'hono/jsx'
-import { useRequestContext } from 'hono/jsx-renderer'
 import { IMPORTING_ISLANDS_ID } from '../../constants.js'
+import { contextStorage } from '../context-storage.js'
 
-export const HasIslands: FC = ({ children }) => {
-  const c = useRequestContext()
-  return <>{c.get(IMPORTING_ISLANDS_ID) ? children : <></>}</>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const HasIslands = ({ children }: { children: any }): any => {
+  const c = contextStorage.getStore()
+  if (!c) {
+    throw new Error('No context found')
+  }
+  return <>{c.get(IMPORTING_ISLANDS_ID) && children}</>
 }

src/server/components/script.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'hono/jsx'
 import type { Manifest } from 'vite'
 import { HasIslands } from './has-islands.js'
 
@@ -10,7 +9,8 @@ type Options = {
   nonce?: string
 }
 
-export const Script: FC<Options> = async (options) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Script = (options: Options): any => {
   const src = options.src
   if (options.prod ?? import.meta.env.PROD) {
     let manifest: Manifest | undefined = options.manifest

src/server/context-storage.ts

@@ -0,0 +1,3 @@
+import { AsyncLocalStorage } from 'node:async_hooks'
+import type { Context } from 'hono'
+export const contextStorage = new AsyncLocalStorage<Context>()

src/server/server.ts

@@ -10,6 +10,7 @@ import {
   listByDirectory,
   sortDirectoriesByDepth,
 } from '../utils/file.js'
+import { contextStorage } from './context-storage.js'
 
 const NOTFOUND_FILENAME = '_404.tsx'
 const ERROR_FILENAME = '_error.tsx'
@@ -62,6 +63,11 @@ export const createApp = <E extends Env>(options: BaseServerOptions<E>): Hono<E>
   const app = options.app ?? new Hono()
   const trailingSlash = options.trailingSlash ?? false
 
+  // Share context by AsyncLocalStorage
+  app.use(async function ShareContext(c, next) {
+    await contextStorage.run(c, () => next())
+  })
+
   if (options.init) {
     options.init(app)
   }

src/vite/island-components.test.ts

@@ -1,3 +1,5 @@
+import fs from 'fs'
+import os from 'os'
 import path from 'path'
 import { transformJsxTags, islandComponents } from './island-components'
 
@@ -218,30 +220,67 @@ export { utilityFn, WrappedExportViaVariable as default };`
 
 describe('options', () => {
   describe('reactApiImportSource', () => {
-    // get full path of honox-island.tsx
-    const component = path
-      .resolve(__dirname, '../vite/components/honox-island.tsx')
-      // replace backslashes for Windows
-      .replace(/\\/g, '/')
-
-    // prettier-ignore
-    it('use \'hono/jsx\' by default', async () => {
-      const plugin = islandComponents()
-      await (plugin.configResolved as Function)({ root: 'root' })
-      const res = await (plugin.load as Function)(component)
-      expect(res.code).toMatch(/'hono\/jsx'/)
-      expect(res.code).not.toMatch(/'react'/)
+    describe('vite/components', () => {
+      // get full path of honox-island.tsx
+      const component = path
+        .resolve(__dirname, '../vite/components/honox-island.tsx')
+        // replace backslashes for Windows
+        .replace(/\\/g, '/')
+
+      // prettier-ignore
+      it('use \'hono/jsx\' by default', async () => {
+        const plugin = islandComponents()
+        await (plugin.configResolved as Function)({ root: 'root' })
+        const res = await (plugin.load as Function)(component)
+        expect(res.code).toMatch(/'hono\/jsx'/)
+        expect(res.code).not.toMatch(/'react'/)
+      })
+
+      // prettier-ignore
+      it('enable to specify \'react\'', async () => {
+        const plugin = islandComponents({
+          reactApiImportSource: 'react',
+        })
+        await (plugin.configResolved as Function)({ root: 'root' })
+        const res = await (plugin.load as Function)(component)
+        expect(res.code).not.toMatch(/'hono\/jsx'/)
+        expect(res.code).toMatch(/'react'/)
+      })
     })
 
-    // prettier-ignore
-    it('enable to specify \'react\'', async () => {
-      const plugin = islandComponents({
-        reactApiImportSource: 'react',
+    describe('server/components', () => {
+      const tmpdir = os.tmpdir()
+
+      // has-islands.tsx under src/server/components does not contain 'hono/jsx'
+      // 'hono/jsx' is injected by `npm run build`
+      // so we need to create a file with 'hono/jsx' manually for testing
+      const component = path
+        .resolve(tmpdir, 'honox/dist/server/components/has-islands.js')
+        // replace backslashes for Windows
+        .replace(/\\/g, '/')
+      fs.mkdirSync(path.dirname(component), { recursive: true })
+      // prettier-ignore
+      fs.writeFileSync(component, 'import { jsx } from \'hono/jsx/jsx-runtime\'')
+
+      // prettier-ignore
+      it('use \'hono/jsx\' by default', async () => {
+        const plugin = islandComponents()
+        await (plugin.configResolved as Function)({ root: 'root' })
+        const res = await (plugin.load as Function)(component)
+        expect(res.code).toMatch(/'hono\/jsx\/jsx-runtime'/)
+        expect(res.code).not.toMatch(/'react\/jsx-runtime'/)
+      })
+
+      // prettier-ignore
+      it('enable to specify \'react\'', async () => {
+        const plugin = islandComponents({
+          reactApiImportSource: 'react',
+        })
+        await (plugin.configResolved as Function)({ root: 'root' })
+        const res = await (plugin.load as Function)(component)
+        expect(res.code).not.toMatch(/'hono\/jsx\/jsx-runtime'/)
+        expect(res.code).toMatch(/'react\/jsx-runtime'/)
       })
-      await (plugin.configResolved as Function)({ root: 'root' })
-      const res = await (plugin.load as Function)(component)
-      expect(res.code).not.toMatch(/'hono\/jsx'/)
-      expect(res.code).toMatch(/'react'/)
     })
   })
 })

src/vite/island-components.ts

@@ -244,7 +244,7 @@ export function islandComponents(options?: IslandComponentsOptions): Plugin {
     },
 
     async load(id) {
-      if (/\/honox\/.*?\/vite\/components\//.test(id)) {
+      if (/\/honox\/.*?\/(?:server|vite)\/components\//.test(id)) {
         if (!reactApiImportSource) {
           return
         }

test-integration/api.test.ts

@@ -17,6 +17,7 @@ describe('Basic', () => {
 
   it('Should have correct routes', () => {
     const routes = [
+      { path: '/*', method: 'ALL', handler: expect.anything() }, // ShareContext
       { path: '/*', method: 'ALL', handler: expect.anything() },
       {
         path: '/about/*',

test-integration/apps.test.ts

@@ -18,6 +18,11 @@ describe('Basic', () => {
 
   it('Should have correct routes', () => {
     const routes = [
+      {
+        path: '/*',
+        method: 'ALL',
+        handler: expect.any(Function), // ShareContext
+      },
       {
         path: '/*',
         method: 'ALL',