fix: escape vite asset import suffixes (#46)

* fix: escape vite asset import suffixes

Add the regix to exclude all vite asset import suffixes,
might be better done in the @hono/vite-dev-server, but this
fixes the issue for now

* move the image and add a test for vite dev

---------

Co-authored-by: Yusuke Wada <[email protected]>

examples/cloudflare-pages/app/routes/_index.tsx

@@ -1,5 +1,6 @@
 import type { LoaderFunctionArgs } from '@remix-run/cloudflare'
 import { useLoaderData } from '@remix-run/react'
+import logoDark from '/logo-dark.png?inline'
 
 export const loader = (args: LoaderFunctionArgs) => {
   const extra = args.context.extra
@@ -23,6 +24,7 @@ export default function Index() {
       <h4>Extra is {extra}</h4>
       <h5>Var in Variables is {myVarInVariables}</h5>
       <h6>waitUntil is {isWaitUntilDefined ? 'defined' : 'not defined'}</h6>
+      <img src={logoDark} alt='Remix' />
     </div>
   )
 }

examples/cloudflare-pages/e2e.test.ts

@@ -24,6 +24,9 @@ test('Should return 200 response - /', async ({ page }) => {
 
   const contentH6 = await page.textContent('h6')
   expect(contentH6).toBe('waitUntil is defined')
+
+  const imageResponse = await page.goto('/logo-dark.png?inline')
+  expect(imageResponse?.status()).toBe(200)
 })
 
 test('Should return 200 response - /api', async ({ page }) => {

src/vite-plugin.ts

@@ -31,6 +31,8 @@ export default (options: Options): Plugin => {
       '/assets/**',
       '/app/**',
       '/src/app/**',
+      // matches for vite's import assets suffixes
+      /\?(import(&)?)?(inline|url|no-inline|raw)?$/,
     ],
     injectClientScript: false,
     loadModule: async (server, entry) => {