feat: use internal not found page during development as it's more hel…

…pful (#64)
ElMassimo · Dec 27, 2021 · ccbb001 · ccbb001
1 parent 7091c4d
commit ccbb001
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 14 deletions.
diff --git a/packages/iles/src/client/app/index.ts b/packages/iles/src/client/app/index.ts
@@ -21,11 +21,6 @@ const newApp = import.meta.env.SSR ? createSSRApp : createClientApp
 function createRouter (base: string | undefined, routerOptions: Partial<RouterOptions>) {
   if (base === '/') base = undefined
 
-  // Handle 404s in development.
-  if (import.meta.env.DEV)
-    // @ts-ignore
-    routes.push({ path: '/:path(.*)*', name: 'NotFound', component: () => import('@islands/components/NotFound') })
-
   return createVueRouter({
     scrollBehavior: (current, previous, savedPosition) => {
       if (savedPosition) return savedPosition

diff --git a/packages/iles/src/node/config.ts b/packages/iles/src/node/config.ts
@@ -75,7 +75,7 @@ async function resolveUserConfig (root: string, configEnv: ConfigEnv) {
     throw new Error(`îles 'plugins' have been renamed to 'modules'. If you want to provide Vite plugins instead, place them in 'vite:'. Received 'plugins' in ${(userConfig as any).configPath}:\n${JSON.stringify((userConfig as any).plugins)}`)
 
   config.modules = compact<IlesModule>(await resolveIlesModules([
-    { name: 'iles:base-config', ...appConfigDefaults(config, userConfig as UserConfig) },
+    { name: 'iles:base-config', ...appConfigDefaults(config, userConfig as UserConfig, configEnv) },
     mdx(),
     { name: 'user-config', ...userConfig },
     ...modules,
@@ -188,9 +188,10 @@ function inferJSX (config: UserConfig) {
   }
 }
 
-function appConfigDefaults (appConfig: AppConfig, userConfig: UserConfig): AppConfig {
+function appConfigDefaults (appConfig: AppConfig, userConfig: UserConfig, env: ConfigEnv): AppConfig {
   const { root } = appConfig
   const { jsx = inferJSX(userConfig) } = userConfig
+  const isDevelopment = env.mode === 'development'
 
   return {
     debug: true,
@@ -231,6 +232,11 @@ function appConfigDefaults (appConfig: AppConfig, userConfig: UserConfig): AppCo
       if (appConfig.prettyUrls === false)
         route.path = explicitHtmlPath(route.path, route.componentFilename)
     },
+    // Handle 404s in development.
+    extendRoutes (routes) {
+      if (isDevelopment)
+        return [...routes, { path: '/:zzz(.*)*', name: 'NotFoundInDev', componentFilename: '@islands/components/NotFound' }]
+    },
     markdown: {
       jsxRuntime: 'automatic',
       jsxImportSource: 'iles',

diff --git a/packages/iles/src/node/plugin/plugin.ts b/packages/iles/src/node/plugin/plugin.ts
@@ -66,13 +66,8 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
         if (id === APP_CONFIG_REQUEST_PATH || id === USER_APP_REQUEST_PATH || id === USER_SITE_REQUEST_PATH)
           return id
 
-        if (id === NOT_FOUND_REQUEST_PATH) {
-          for (const extension of ['vue', 'mdx', 'md', 'jsx']) {
-            const path = resolve(appConfig.pagesDir, `404.${extension}`)
-            if (await exists(path)) return path
-          }
+        if (id === NOT_FOUND_REQUEST_PATH)
           return NOT_FOUND_COMPONENT_PATH
-        }
 
         // Prevent import analysis failure if the default layout doesn't exist.
         if (id === defaultLayoutPath) return resolve(root, id.slice(1))

diff --git a/packages/iles/tests/not-found.spec.ts b/packages/iles/tests/not-found.spec.ts
@@ -4,6 +4,6 @@ import NotFound from '@islands/components/NotFound'
 
 describe('not found component', () => {
   test('resolves to existing component', async () => {
-    expect(NotFound.title).toEqual('Not Found')
+    expect(NotFound.name).toEqual('NotFound')
   })
 })