From efe20e2e7a89e2b339dc66840d165463d93ac4ba Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 28 Jun 2022 19:57:21 +0200
Subject: [PATCH] feat: keep one component if possible

---
 e2e/__snapshots__/routes.spec.ts.snap         | 108 ++---
 .../generateRouteRecords.spec.ts.snap         | 392 +++++++-----------
 src/codegen/generateRouteRecords.ts           |  25 +-
 3 files changed, 209 insertions(+), 316 deletions(-)

diff --git a/e2e/__snapshots__/routes.spec.ts.snap b/e2e/__snapshots__/routes.spec.ts.snap
index de8a32df0..07da08f52 100644
--- a/e2e/__snapshots__/routes.spec.ts.snap
+++ b/e2e/__snapshots__/routes.spec.ts.snap
@@ -3,86 +3,72 @@
 exports[`generates the routes 1`] = `
 "export const routes = [
   {
-    path: \\"/\\",
-    name: \\"/\\",
-    components: {
-      default: () => import('/routes/index.vue')
-    },
+    path: '/',
+    name: '/',
+    component: () => import('/routes/index.vue'),
     /* no children */
   },
   {
-    path: \\"/:path(.*)\\",
-    name: \\"/[...path]\\",
-    components: {
-      default: () => import('/routes/[...path].vue')
-    },
+    path: '/:path(.*)',
+    name: '/[...path]',
+    component: () => import('/routes/[...path].vue'),
     /* no children */
   },
   {
-    path: \\"/about\\",
-    name: \\"/about\\",
-    components: {
-      default: () => import('/routes/about.vue')
-    },
+    path: '/about',
+    name: '/about',
+    component: () => import('/routes/about.vue'),
     /* no children */
   },
   {
-    path: \\"/articles\\",
+    path: '/articles',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\":id\\",
-        name: \\"/articles/[id]\\",
-        components: {
-          default: () => import('/routes/articles/[id].vue')
-        },
+        path: ':id',
+        name: '/articles/[id]',
+        component: () => import('/routes/articles/[id].vue'),
         /* no children */
       },
       {
-        path: \\":slugs+\\",
-        name: \\"/articles/[slugs]+\\",
-        components: {
-          default: () => import('/routes/articles/[slugs]+.vue')
-        },
+        path: ':slugs+',
+        name: '/articles/[slugs]+',
+        component: () => import('/routes/articles/[slugs]+.vue'),
         /* no children */
       }
     ],
   },
   {
-    path: \\"/nested\\",
+    path: '/nested',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\"folder\\",
+        path: 'folder',
         /* no name */
         /* no component */
         children: [
           {
-            path: \\"\\",
-            name: \\"/nested/folder/\\",
-            components: {
-              default: () => import('/routes/nested/folder/index.vue')
-            },
+            path: '',
+            name: '/nested/folder/',
+            component: () => import('/routes/nested/folder/index.vue'),
             /* no children */
           },
           {
-            path: \\"should\\",
+            path: 'should',
             /* no name */
             /* no component */
             children: [
               {
-                path: \\"work\\",
+                path: 'work',
                 /* no name */
                 /* no component */
                 children: [
                   {
-                    path: \\"\\",
-                    name: \\"/nested/folder/should/work/\\",
-                    components: {
-                      default: () => import('/routes/nested/folder/should/work/index.vue')
-                    },
+                    path: '',
+                    name: '/nested/folder/should/work/',
+                    component: () => import('/routes/nested/folder/should/work/index.vue'),
                     /* no children */
                   }
                 ],
@@ -94,51 +80,41 @@ exports[`generates the routes 1`] = `
     ],
   },
   {
-    path: \\"/optional\\",
+    path: '/optional',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\":doc?\\",
-        name: \\"/optional/[[doc]]\\",
-        components: {
-          default: () => import('/routes/optional/[[doc]].vue')
-        },
+        path: ':doc?',
+        name: '/optional/[[doc]]',
+        component: () => import('/routes/optional/[[doc]].vue'),
         /* no children */
       },
       {
-        path: \\":docs*\\",
-        name: \\"/optional/[[docs]]+\\",
-        components: {
-          default: () => import('/routes/optional/[[docs]]+.vue')
-        },
+        path: ':docs*',
+        name: '/optional/[[docs]]+',
+        component: () => import('/routes/optional/[[docs]]+.vue'),
         /* no children */
       }
     ],
   },
   {
-    path: \\"/users\\",
-    name: \\"/users\\",
-    components: {
-      default: () => import('/routes/users.vue')
-    },
+    path: '/users',
+    name: '/users',
+    component: () => import('/routes/users.vue'),
     children: [
       {
-        path: \\":id\\",
-        name: \\"/users/[id]\\",
-        components: {
-          default: () => import('/routes/users/[id].vue')
-        },
+        path: ':id',
+        name: '/users/[id]',
+        component: () => import('/routes/users/[id].vue'),
         /* no children */
       }
     ],
   },
   {
-    path: \\"/users.new\\",
-    name: \\"/users.new\\",
-    components: {
-      default: () => import('/routes/users.new.vue')
-    },
+    path: '/users.new',
+    name: '/users.new',
+    component: () => import('/routes/users.new.vue'),
     /* no children */
   }
 ]"
diff --git a/src/codegen/__snapshots__/generateRouteRecords.spec.ts.snap b/src/codegen/__snapshots__/generateRouteRecords.spec.ts.snap
index 87d29bf22..46b36da07 100644
--- a/src/codegen/__snapshots__/generateRouteRecords.spec.ts.snap
+++ b/src/codegen/__snapshots__/generateRouteRecords.spec.ts.snap
@@ -3,43 +3,35 @@
 exports[`generateRouteRecord > adds children and name when folder and component exist 1`] = `
 "[
   {
-    path: \\"/a\\",
-    name: \\"/a\\",
-    components: {
-      default: () => import('a.vue')
-    },
+    path: '/a',
+    name: '/a',
+    component: () => import('a.vue'),
     children: [
       {
-        path: \\"c\\",
-        name: \\"/a/c\\",
-        components: {
-          default: () => import('a/c.vue')
-        },
+        path: 'c',
+        name: '/a/c',
+        component: () => import('a/c.vue'),
         /* no children */
       }
     ],
   },
   {
-    path: \\"/b\\",
+    path: '/b',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\"c\\",
-        name: \\"/b/c\\",
-        components: {
-          default: () => import('b/c.vue')
-        },
+        path: 'c',
+        name: '/b/c',
+        component: () => import('b/c.vue'),
         /* no children */
       }
     ],
   },
   {
-    path: \\"/d\\",
-    name: \\"/d\\",
-    components: {
-      default: () => import('d.vue')
-    },
+    path: '/d',
+    name: '/d',
+    component: () => import('d.vue'),
     /* no children */
   }
 ]"
@@ -48,24 +40,20 @@ exports[`generateRouteRecord > adds children and name when folder and component
 exports[`generateRouteRecord > correctly names index.vue files 1`] = `
 "[
   {
-    path: \\"/\\",
-    name: \\"/\\",
-    components: {
-      default: () => import('index.vue')
-    },
+    path: '/',
+    name: '/',
+    component: () => import('index.vue'),
     /* no children */
   },
   {
-    path: \\"/b\\",
+    path: '/b',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\"\\",
-        name: \\"/b/\\",
-        components: {
-          default: () => import('b/index.vue')
-        },
+        path: '',
+        name: '/b/',
+        component: () => import('b/index.vue'),
         /* no children */
       }
     ],
@@ -76,77 +64,59 @@ exports[`generateRouteRecord > correctly names index.vue files 1`] = `
 exports[`generateRouteRecord > handles non nested routes 1`] = `
 "[
   {
-    path: \\"/users\\",
-    name: \\"/users\\",
-    components: {
-      default: () => import('users.vue')
-    },
+    path: '/users',
+    name: '/users',
+    component: () => import('users.vue'),
     children: [
       {
-        path: \\"\\",
-        name: \\"/users/\\",
-        components: {
-          default: () => import('users/index.vue')
-        },
+        path: '',
+        name: '/users/',
+        component: () => import('users/index.vue'),
         /* no children */
       },
       {
-        path: \\":id\\",
-        name: \\"/users/[id]\\",
-        components: {
-          default: () => import('users/[id].vue')
-        },
+        path: ':id',
+        name: '/users/[id]',
+        component: () => import('users/[id].vue'),
         children: [
           {
-            path: \\"\\",
-            name: \\"/users/[id]/\\",
-            components: {
-              default: () => import('users/[id]/index.vue')
-            },
+            path: '',
+            name: '/users/[id]/',
+            component: () => import('users/[id]/index.vue'),
             /* no children */
           },
           {
-            path: \\"other\\",
-            name: \\"/users/[id]/other\\",
-            components: {
-              default: () => import('users/[id]/other.vue')
-            },
+            path: 'other',
+            name: '/users/[id]/other',
+            component: () => import('users/[id]/other.vue'),
             /* no children */
           }
         ],
       },
       {
-        path: \\":id/not-nested\\",
-        name: \\"/users/[id].not-nested\\",
-        components: {
-          default: () => import('users/[id].not-nested.vue')
-        },
+        path: ':id/not-nested',
+        name: '/users/[id].not-nested',
+        component: () => import('users/[id].not-nested.vue'),
         /* no children */
       },
       {
-        path: \\"other\\",
-        name: \\"/users/other\\",
-        components: {
-          default: () => import('users/other.vue')
-        },
+        path: 'other',
+        name: '/users/other',
+        component: () => import('users/other.vue'),
         /* no children */
       }
     ],
   },
   {
-    path: \\"/users.not-nested\\",
-    name: \\"/users.not-nested\\",
-    components: {
-      default: () => import('users.not-nested.vue')
-    },
+    path: '/users.not-nested',
+    name: '/users.not-nested',
+    component: () => import('users.not-nested.vue'),
     /* no children */
   },
   {
-    path: \\"/users/:id/also-not-nested\\",
-    name: \\"/users.[id].also-not-nested\\",
-    components: {
-      default: () => import('users.[id].also-not-nested.vue')
-    },
+    path: '/users/:id/also-not-nested',
+    name: '/users.[id].also-not-nested',
+    component: () => import('users.[id].also-not-nested.vue'),
     /* no children */
   }
 ]"
@@ -155,40 +125,32 @@ exports[`generateRouteRecord > handles non nested routes 1`] = `
 exports[`generateRouteRecord > names > creates multi word names 1`] = `
 "[
   {
-    path: \\"/\\",
-    name: \\"/\\",
-    components: {
-      default: () => import('index.vue')
-    },
+    path: '/',
+    name: '/',
+    component: () => import('index.vue'),
     /* no children */
   },
   {
-    path: \\"/my-users\\",
-    name: \\"/my-users\\",
-    components: {
-      default: () => import('my-users.vue')
-    },
+    path: '/my-users',
+    name: '/my-users',
+    component: () => import('my-users.vue'),
     /* no children */
   },
   {
-    path: \\"/MyPascalCaseUsers\\",
-    name: \\"/MyPascalCaseUsers\\",
-    components: {
-      default: () => import('MyPascalCaseUsers.vue')
-    },
+    path: '/MyPascalCaseUsers',
+    name: '/MyPascalCaseUsers',
+    component: () => import('MyPascalCaseUsers.vue'),
     /* no children */
   },
   {
-    path: \\"/some-nested\\",
+    path: '/some-nested',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\"file-with-:id-in-the-middle\\",
-        name: \\"/some-nested/file-with-[id]-in-the-middle\\",
-        components: {
-          default: () => import('some-nested/file-with-[id]-in-the-middle.vue')
-        },
+        path: 'file-with-:id-in-the-middle',
+        name: '/some-nested/file-with-[id]-in-the-middle',
+        component: () => import('some-nested/file-with-[id]-in-the-middle.vue'),
         /* no children */
       }
     ],
@@ -199,57 +161,45 @@ exports[`generateRouteRecord > names > creates multi word names 1`] = `
 exports[`generateRouteRecord > names > creates single word names 1`] = `
 "[
   {
-    path: \\"/\\",
-    name: \\"/\\",
-    components: {
-      default: () => import('index.vue')
-    },
+    path: '/',
+    name: '/',
+    component: () => import('index.vue'),
     /* no children */
   },
   {
-    path: \\"/about\\",
-    name: \\"/about\\",
-    components: {
-      default: () => import('about.vue')
-    },
+    path: '/about',
+    name: '/about',
+    component: () => import('about.vue'),
     /* no children */
   },
   {
-    path: \\"/users\\",
+    path: '/users',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\"\\",
-        name: \\"/users/\\",
-        components: {
-          default: () => import('users/index.vue')
-        },
+        path: '',
+        name: '/users/',
+        component: () => import('users/index.vue'),
         /* no children */
       },
       {
-        path: \\":id\\",
-        name: \\"/users/[id]\\",
-        components: {
-          default: () => import('users/[id].vue')
-        },
+        path: ':id',
+        name: '/users/[id]',
+        component: () => import('users/[id].vue'),
         children: [
           {
-            path: \\"edit\\",
-            name: \\"/users/[id]/edit\\",
-            components: {
-              default: () => import('users/[id]/edit.vue')
-            },
+            path: 'edit',
+            name: '/users/[id]/edit',
+            component: () => import('users/[id]/edit.vue'),
             /* no children */
           }
         ],
       },
       {
-        path: \\"new\\",
-        name: \\"/users/new\\",
-        components: {
-          default: () => import('users/new.vue')
-        },
+        path: 'new',
+        name: '/users/new',
+        component: () => import('users/new.vue'),
         /* no children */
       }
     ],
@@ -260,41 +210,31 @@ exports[`generateRouteRecord > names > creates single word names 1`] = `
 exports[`generateRouteRecord > names > works with nested views 1`] = `
 "[
   {
-    path: \\"/\\",
-    name: \\"/\\",
-    components: {
-      default: () => import('index.vue')
-    },
+    path: '/',
+    name: '/',
+    component: () => import('index.vue'),
     /* no children */
   },
   {
-    path: \\"/users\\",
-    name: \\"/users\\",
-    components: {
-      default: () => import('users.vue')
-    },
+    path: '/users',
+    name: '/users',
+    component: () => import('users.vue'),
     children: [
       {
-        path: \\"\\",
-        name: \\"/users/\\",
-        components: {
-          default: () => import('users/index.vue')
-        },
+        path: '',
+        name: '/users/',
+        component: () => import('users/index.vue'),
         /* no children */
       },
       {
-        path: \\":id\\",
-        name: \\"/users/[id]\\",
-        components: {
-          default: () => import('users/[id].vue')
-        },
+        path: ':id',
+        name: '/users/[id]',
+        component: () => import('users/[id].vue'),
         children: [
           {
-            path: \\"edit\\",
-            name: \\"/users/[id]/edit\\",
-            components: {
-              default: () => import('users/[id]/edit.vue')
-            },
+            path: 'edit',
+            name: '/users/[id]/edit',
+            component: () => import('users/[id]/edit.vue'),
             /* no children */
           }
         ],
@@ -307,63 +247,51 @@ exports[`generateRouteRecord > names > works with nested views 1`] = `
 exports[`generateRouteRecord > nested children 1`] = `
 "[
   {
-    path: \\"/a\\",
+    path: '/a',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\"a\\",
-        name: \\"/a/a\\",
-        components: {
-          default: () => import('a/a.vue')
-        },
+        path: 'a',
+        name: '/a/a',
+        component: () => import('a/a.vue'),
         /* no children */
       },
       {
-        path: \\"b\\",
-        name: \\"/a/b\\",
-        components: {
-          default: () => import('a/b.vue')
-        },
+        path: 'b',
+        name: '/a/b',
+        component: () => import('a/b.vue'),
         /* no children */
       },
       {
-        path: \\"c\\",
-        name: \\"/a/c\\",
-        components: {
-          default: () => import('a/c.vue')
-        },
+        path: 'c',
+        name: '/a/c',
+        component: () => import('a/c.vue'),
         /* no children */
       }
     ],
   },
   {
-    path: \\"/b\\",
+    path: '/b',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\"b\\",
-        name: \\"/b/b\\",
-        components: {
-          default: () => import('b/b.vue')
-        },
+        path: 'b',
+        name: '/b/b',
+        component: () => import('b/b.vue'),
         /* no children */
       },
       {
-        path: \\"c\\",
-        name: \\"/b/c\\",
-        components: {
-          default: () => import('b/c.vue')
-        },
+        path: 'c',
+        name: '/b/c',
+        component: () => import('b/c.vue'),
         /* no children */
       },
       {
-        path: \\"d\\",
-        name: \\"/b/d\\",
-        components: {
-          default: () => import('b/d.vue')
-        },
+        path: 'd',
+        name: '/b/d',
+        component: () => import('b/d.vue'),
         /* no children */
       }
     ],
@@ -374,81 +302,65 @@ exports[`generateRouteRecord > nested children 1`] = `
 exports[`generateRouteRecord > nested children 2`] = `
 "[
   {
-    path: \\"/a\\",
+    path: '/a',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\"a\\",
-        name: \\"/a/a\\",
-        components: {
-          default: () => import('a/a.vue')
-        },
+        path: 'a',
+        name: '/a/a',
+        component: () => import('a/a.vue'),
         /* no children */
       },
       {
-        path: \\"b\\",
-        name: \\"/a/b\\",
-        components: {
-          default: () => import('a/b.vue')
-        },
+        path: 'b',
+        name: '/a/b',
+        component: () => import('a/b.vue'),
         /* no children */
       },
       {
-        path: \\"c\\",
-        name: \\"/a/c\\",
-        components: {
-          default: () => import('a/c.vue')
-        },
+        path: 'c',
+        name: '/a/c',
+        component: () => import('a/c.vue'),
         /* no children */
       }
     ],
   },
   {
-    path: \\"/b\\",
+    path: '/b',
     /* no name */
     /* no component */
     children: [
       {
-        path: \\"b\\",
-        name: \\"/b/b\\",
-        components: {
-          default: () => import('b/b.vue')
-        },
+        path: 'b',
+        name: '/b/b',
+        component: () => import('b/b.vue'),
         /* no children */
       },
       {
-        path: \\"c\\",
-        name: \\"/b/c\\",
-        components: {
-          default: () => import('b/c.vue')
-        },
+        path: 'c',
+        name: '/b/c',
+        component: () => import('b/c.vue'),
         /* no children */
       },
       {
-        path: \\"d\\",
-        name: \\"/b/d\\",
-        components: {
-          default: () => import('b/d.vue')
-        },
+        path: 'd',
+        name: '/b/d',
+        component: () => import('b/d.vue'),
         /* no children */
       }
     ],
   },
   {
-    path: \\"/c\\",
-    name: \\"/c\\",
-    components: {
-      default: () => import('c.vue')
-    },
+    path: '/c',
+    name: '/c',
+    component: () => import('c.vue'),
     /* no children */
   },
   {
-    path: \\"/d\\",
-    name: \\"/d\\",
-    components: {
-      default: () => import('d.vue')
-    },
+    path: '/d',
+    name: '/d',
+    component: () => import('d.vue'),
     /* no children */
   }
 ]"
@@ -457,27 +369,21 @@ exports[`generateRouteRecord > nested children 2`] = `
 exports[`generateRouteRecord > works with some paths at root 1`] = `
 "[
   {
-    path: \\"/a\\",
-    name: \\"/a\\",
-    components: {
-      default: () => import('a.vue')
-    },
+    path: '/a',
+    name: '/a',
+    component: () => import('a.vue'),
     /* no children */
   },
   {
-    path: \\"/b\\",
-    name: \\"/b\\",
-    components: {
-      default: () => import('b.vue')
-    },
+    path: '/b',
+    name: '/b',
+    component: () => import('b.vue'),
     /* no children */
   },
   {
-    path: \\"/c\\",
-    name: \\"/c\\",
-    components: {
-      default: () => import('c.vue')
-    },
+    path: '/c',
+    name: '/c',
+    component: () => import('c.vue'),
     /* no children */
   }
 ]"
diff --git a/src/codegen/generateRouteRecords.ts b/src/codegen/generateRouteRecords.ts
index ad410297d..2b138dfc5 100644
--- a/src/codegen/generateRouteRecords.ts
+++ b/src/codegen/generateRouteRecords.ts
@@ -21,15 +21,11 @@ ${node
   const name = node.options.getRouteName(node)
 
   return `${startIndent}{
-${indentStr}path: "${(parent ? '' : '/') + node.value.pathSegment}",
-${indentStr}${node.value.filePaths.size ? `name: "${name}",` : '/* no name */'}
+${indentStr}path: '${(parent ? '' : '/') + node.value.pathSegment}',
+${indentStr}${node.value.filePaths.size ? `name: '${name}',` : '/* no name */'}
 ${indentStr}${
     node.value.filePaths.size
-      ? `components: {
-${Array.from(node.value.filePaths)
-  .map(([key, path]) => `${indentStr + '  '}'${key}': () => import('${path}')`)
-  .join(',\n')}
-${indentStr}},`
+      ? generateRouteRecordComponent(node, indentStr)
       : '/* no component */'
   }
 ${indentStr}${
@@ -44,3 +40,18 @@ ${indentStr}],`
   }
 ${startIndent}}`
 }
+
+function generateRouteRecordComponent(
+  node: TreeLeaf,
+  indentStr: string
+): string {
+  const files = Array.from(node.value.filePaths)
+  return files.length === 1
+    ? `component: () => import('${files[0][1]}'),`
+    : // files has at least one entry
+      `components: {
+${files
+  .map(([key, path]) => `${indentStr + '  '}'${key}': () => import('${path}')`)
+  .join(',\n')}
+${indentStr}},`
+}