Skip to content

Commit

Permalink
feat: importMode option
Browse files Browse the repository at this point in the history 
Close #47
  • Loading branch information
@posva
posva committed Aug 17, 2022
1 parent 144a887 commit 9aa2e33
Show file tree
Hide file tree
Showing 6 changed files with 247 additions and 39 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Expand Up @@ -207,6 +207,10 @@ VueRouter({
// Customizes the default langage for `<route>` blocks
// json5 is just a more permissive version of json
routeBlockLang: 'json5',

// Change the import mode of page components. Can be 'async', 'sync', or a function with the following signature:
// (filepath: string) => 'async' | 'sync'
importMode: 'async',
})
```

Expand Down
98 changes: 98 additions & 0 deletions src/codegen/__snapshots__/generateRouteRecords.spec.ts.snap
View file
Expand Up @@ -69,6 +69,104 @@ exports[`generateRouteRecord > correctly names index.vue files 1`] = `
]"
`;

exports[`generateRouteRecord > generate custom imports 1`] = `
"[
{
path: '/a',
name: '/a',
component: _page_a_vue,
/* no props */
/* no children */
},
{
path: '/b',
name: '/b',
component: () => import('b.vue'),
/* no props */
/* no children */
},
{
path: '/nested',
/* no name */
/* no component */
/* no props */
children: [
{
path: 'file',
/* no name */
/* no component */
/* no props */
children: [
{
path: 'c',
name: '/nested/file/c',
component: () => import('nested/file/c.vue'),
/* no props */
/* no children */
}
],
}
],
}
]"
`;

exports[`generateRouteRecord > generate custom imports 2`] = `
Map {
"a.vue" => "_page_a_vue",
}
`;

exports[`generateRouteRecord > generate static imports 1`] = `
"[
{
path: '/a',
name: '/a',
component: _page_a_vue,
/* no props */
/* no children */
},
{
path: '/b',
name: '/b',
component: _page_b_vue,
/* no props */
/* no children */
},
{
path: '/nested',
/* no name */
/* no component */
/* no props */
children: [
{
path: 'file',
/* no name */
/* no component */
/* no props */
children: [
{
path: 'c',
name: '/nested/file/c',
component: _page_nested_file_c_vue,
/* no props */
/* no children */
}
],
}
],
}
]"
`;

exports[`generateRouteRecord > generate static imports 2`] = `
Map {
"a.vue" => "_page_a_vue",
"b.vue" => "_page_b_vue",
"nested/file/c.vue" => "_page_nested_file_c_vue",
}
`;

exports[`generateRouteRecord > handles multiple named views 1`] = `
"[
{
Expand Down
82 changes: 59 additions & 23 deletions src/codegen/generateRouteRecords.spec.ts
View file
@@ -1,14 +1,18 @@
import { basename } from 'pathe'
import { describe, expect, it } from 'vitest'
import { createPrefixTree } from '../core/tree'
import { DEFAULT_OPTIONS } from '../options'
import { RouteRecordRaw } from 'vue-router'
import { createPrefixTree, TreeLeaf } from '../core/tree'
import { DEFAULT_OPTIONS, ResolvedOptions } from '../options'
import { generateRouteRecord } from './generateRouteRecords'

describe('generateRouteRecord', () => {
function generateRouteRecordSimple(tree: TreeLeaf) {
return generateRouteRecord(tree, DEFAULT_OPTIONS, new Map())
}

it('works with an empty tree', () => {
const tree = createPrefixTree(DEFAULT_OPTIONS)

expect(generateRouteRecord(tree)).toMatchInlineSnapshot(`
expect(generateRouteRecordSimple(tree)).toMatchInlineSnapshot(`
"[
]"
Expand All @@ -20,21 +24,21 @@ describe('generateRouteRecord', () => {
tree.insert('a.vue')
tree.insert('b.vue')
tree.insert('c.vue')
expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('handles multiple named views', () => {
const tree = createPrefixTree(DEFAULT_OPTIONS)
tree.insert('foo.vue')
tree.insert('foo@a.vue')
tree.insert('foo@b.vue')
expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('handles single named views', () => {
const tree = createPrefixTree(DEFAULT_OPTIONS)
tree.insert('foo@a.vue')
expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('nested children', () => {
Expand All @@ -45,10 +49,10 @@ describe('generateRouteRecord', () => {
tree.insert('b/b.vue')
tree.insert('b/c.vue')
tree.insert('b/d.vue')
expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
tree.insert('c.vue')
tree.insert('d.vue')
expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('adds children and name when folder and component exist', () => {
Expand All @@ -57,14 +61,14 @@ describe('generateRouteRecord', () => {
tree.insert('b/c.vue')
tree.insert('a.vue')
tree.insert('d.vue')
expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('correctly names index.vue files', () => {
const tree = createPrefixTree(DEFAULT_OPTIONS)
tree.insert('index.vue')
tree.insert('b/index.vue')
expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('handles non nested routes', () => {
Expand All @@ -78,7 +82,39 @@ describe('generateRouteRecord', () => {
tree.insert('users/[id].vue')
tree.insert('users/[id].not-nested.vue')
tree.insert('users.[id].also-not-nested.vue')
expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('generate static imports', () => {
const options: ResolvedOptions = {
...DEFAULT_OPTIONS,
importMode: 'sync',
} as const
const tree = createPrefixTree(options)
tree.insert('a.vue')
tree.insert('b.vue')
tree.insert('nested/file/c.vue')
const importList = new Map<string, string>()
expect(generateRouteRecord(tree, options, importList)).toMatchSnapshot()

expect(importList).toMatchSnapshot()
})

it('generate custom imports', () => {
const options: ResolvedOptions = {
...DEFAULT_OPTIONS,
importMode: (filepath) =>
basename(filepath) === 'a.vue' ? 'sync' : 'async',
}

const tree = createPrefixTree(options)
tree.insert('a.vue')
tree.insert('b.vue')
tree.insert('nested/file/c.vue')
const importList = new Map<string, string>()
expect(generateRouteRecord(tree, options, importList)).toMatchSnapshot()

expect(importList).toMatchSnapshot()
})

describe('names', () => {
Expand All @@ -91,7 +127,7 @@ describe('generateRouteRecord', () => {
tree.insert('users/[id]/edit.vue')
tree.insert('users/new.vue')

expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('creates multi word names', () => {
Expand All @@ -101,7 +137,7 @@ describe('generateRouteRecord', () => {
tree.insert('MyPascalCaseUsers.vue')
tree.insert('some-nested/file-with-[id]-in-the-middle.vue')

expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('works with nested views', () => {
Expand All @@ -112,7 +148,7 @@ describe('generateRouteRecord', () => {
tree.insert('users/[id]/edit.vue')
tree.insert('users/[id].vue')

expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})
})

Expand All @@ -127,7 +163,7 @@ describe('generateRouteRecord', () => {
},
})

expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('merges multiple meta properties', async () => {
Expand All @@ -146,7 +182,7 @@ describe('generateRouteRecord', () => {
},
})

expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

it('merges regardless of order', async () => {
Expand All @@ -159,7 +195,7 @@ describe('generateRouteRecord', () => {
name: 'b',
})

const one = generateRouteRecord(tree)
const one = generateRouteRecordSimple(tree)

node.setCustomRouteBlock('index@named.vue', {
name: 'b',
Expand All @@ -168,7 +204,7 @@ describe('generateRouteRecord', () => {
name: 'a',
})

expect(generateRouteRecord(tree)).toBe(one)
expect(generateRouteRecordSimple(tree)).toBe(one)

expect(one).toMatchSnapshot()
})
Expand All @@ -188,11 +224,11 @@ describe('generateRouteRecord', () => {
// coming from index@named.vue (no route block)
node.setCustomRouteBlock('index@named.vue', undefined)

expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})

// FIXME: allow aliases
it('merges alias properties', async () => {
it.todo('merges alias properties', async () => {
const tree = createPrefixTree(DEFAULT_OPTIONS)
const node = tree.insert('index.vue')
node.setCustomRouteBlock('index.vue', {
Expand All @@ -202,7 +238,7 @@ describe('generateRouteRecord', () => {
alias: ['/two', '/three'],
})

expect(generateRouteRecord(tree)).toMatchInlineSnapshot(`
expect(generateRouteRecordSimple(tree)).toMatchInlineSnapshot(`
"[
{
path: '/',
Expand Down Expand Up @@ -231,7 +267,7 @@ describe('generateRouteRecord', () => {
},
})

expect(generateRouteRecord(tree)).toMatchSnapshot()
expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
})
})
})

0 comments on commit 9aa2e33

Please sign in to comment.