feat: $ prefix named file as island component

mocks/app/routes/directory/$counter.tsx

@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from 'hono/jsx'
+import { useState } from 'hono/jsx'
+
+export default function Counter({
+  children,
+  initial = 0,
+  id = '',
+}: PropsWithChildren<{
+  initial?: number
+  id?: string
+}>) {
+  const [count, setCount] = useState(initial)
+  const increment = () => setCount(count + 1)
+  return (
+    <div id={id}>
+      <p>DollarCount: {count}</p>
+      <button onClick={increment}>Dollar Increment</button>
+      {children}
+    </div>
+  )
+}

mocks/app/routes/directory/_Counter.island.tsx

@@ -13,8 +13,8 @@ export default function Counter({
   const increment = () => setCount(count + 1)
   return (
     <div id={id}>
-      <p>Count: {count}</p>
-      <button onClick={increment}>Increment</button>
+      <p>UnderScoreCount: {count}</p>
+      <button onClick={increment}>UnderScore Increment</button>
       {children}
     </div>
   )

mocks/app/routes/directory/index.tsx

@@ -1,5 +1,11 @@
-import Counter from './_Counter.island'
+import DollarCounter from './$counter'
+import UnderScoreCounter from './_Counter.island'
 
 export default function Interaction() {
-  return <Counter initial={5} />
+  return (
+    <>
+      <UnderScoreCounter id='under-score' initial={5} />
+      <DollarCounter id='dollar' initial={5} />
+    </>
+  )
 }

src/vite/island-components.test.ts

@@ -1,5 +1,27 @@
 import path from 'path'
-import { transformJsxTags, islandComponents } from './island-components'
+import { matchIslandComponentId, transformJsxTags, islandComponents } from './island-components'
+
+describe('matchIslandComponentId', () => {
+  it('Should match /islands/counter.tsx', () => {
+    const match = matchIslandComponentId('/islands/counter.tsx')
+    expect(match).not.toBeNull()
+    expect(match![0]).toBe('/islands/counter.tsx')
+  })
+  it('Should match /routes/directory/$counter.tsx', () => {
+    const match = matchIslandComponentId('/routes/directory/$counter.tsx')
+    expect(match).not.toBeNull()
+    expect(match![0]).toBe('/routes/directory/$counter.tsx')
+  })
+  it('Should match /routes/directory/_counter.island.tsx', () => {
+    const match = matchIslandComponentId('/routes/directory/_counter.island.tsx')
+    expect(match).not.toBeNull()
+    expect(match![0]).toBe('/routes/directory/_counter.island.tsx')
+  })
+  it('Should not match /routes/directory/component.tsx', () => {
+    const match = matchIslandComponentId('/routes/directory/component.tsx')
+    expect(match).toBeNull()
+  })
+})
 
 describe('transformJsxTags', () => {
   it('Should add component-wrapper and component-name attribute', () => {

src/vite/island-components.ts

@@ -52,6 +52,18 @@ function isComponentName(name: string) {
   return /^[A-Z][A-Z0-9]*[a-z][A-Za-z0-9]*$/.test(name)
 }
 
+/**
+ * Matches when id is the filename of Island component
+ *
+ * @param id - The id to match
+ * @returns The result object if id is matched or null
+ */
+export function matchIslandComponentId(id: string) {
+  return id.match(
+    /(\/islands\/.+?\.tsx$)|(\/routes\/.*\_[a-zA-Z0-9[-]+\.island\.tsx$)|(\/routes.*\/\$[a-zA-Z0-9[-]+\.tsx$)/
+  )
+}
+
 function addSSRCheck(funcName: string, componentName: string, componentExport?: string) {
   const isSSR = memberExpression(
     memberExpression(identifier('import'), identifier('meta')),
@@ -263,7 +275,7 @@ export function islandComponents(options?: IslandComponentsOptions): Plugin {
       if (!matchIslandPath(id)) {
         return
       }
-      const match = id.match(/(\/islands\/.+?\.tsx$)|(\/routes\/.*\_[a-zA-Z0-9[-]+\.island\.tsx$)/)
+      const match = matchIslandComponentId(id)
       if (match) {
         const componentName = match[0]
         const contents = await fs.readFile(id, 'utf-8')

test-e2e/e2e.test.ts

@@ -24,8 +24,14 @@ test('test counter - island in the same directory', async ({ page }) => {
   await page.goto('/directory')
   await page.waitForSelector('body[data-client-loaded]')
 
-  await page.getByText('Count: 5').click()
-  await page.getByRole('button', { name: 'Increment' }).click({
+  await page.getByText('UnderScoreCount: 5').click()
+  await page.getByRole('button', { name: 'UnderScore Increment' }).click({
+    clickCount: 1,
+  })
+  await page.getByText('Count: 6').click()
+
+  await page.getByText('DollarCount: 5').click()
+  await page.getByRole('button', { name: 'Dollar Increment' }).click({
     clickCount: 1,
   })
   await page.getByText('Count: 6').click()

test-integration/apps.test.ts

@@ -338,7 +338,7 @@ describe('With preserved', () => {
     expect(res.status).toBe(200)
     // hono/jsx escape a single quote to '
     expect(await res.text()).toBe(
-      '<!DOCTYPE html><html><head><title></title></head><body><honox-island component-name="/routes/directory/_Counter.island.tsx" data-serialized-props="{&quot;initial&quot;:5}"><div id=""><p>Count: 5</p><button>Increment</button></div></honox-island><script type="module" async="" src="/app/client.ts"></script></body></html>'
+      '<!DOCTYPE html><html><head><title></title></head><body><honox-island component-name="/routes/directory/_Counter.island.tsx" data-serialized-props="{&quot;id&quot;:&quot;under-score&quot;,&quot;initial&quot;:5}"><div id="under-score"><p>UnderScoreCount: 5</p><button>UnderScore Increment</button></div></honox-island><honox-island component-name="/routes/directory/$counter.tsx" data-serialized-props="{&quot;id&quot;:&quot;dollar&quot;,&quot;initial&quot;:5}"><div id="dollar"><p>DollarCount: 5</p><button>Dollar Increment</button></div></honox-island><script type="module" async="" src="/app/client.ts"></script></body></html>'
     )
   })
 

test-integration/vitest.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
       isIsland: (id) => {
         const resolvedPath = path.resolve(root).replace(/\\/g, '\\\\')
         const regexp = new RegExp(
-          `${resolvedPath}[\\\\/]app[^\\\\/]*[\\\\/]islands[\\\\/].+\.tsx?$|${resolvedPath}[\\\\/]app[^\\\\/]*[\\\\/]routes[\\\\/].+\.island\.tsx?$`
+          `${resolvedPath}[\\\\/]app[^\\\\/]*[\\\\/]islands[\\\\/].+\.tsx?$|${resolvedPath}[\\\\/]app[^\\\\/]*[\\\\/]routes[\\\\/].+\.island\.tsx?$|${resolvedPath}[\\\\/]app[^\\\\/]*[\\\\/]routes[\\\\/].*\\$.+\.tsx?$`
         )
         return regexp.test(path.resolve(id))
       },