Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-28 08:32:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): move layout resolution to build time

Browse Source
This commit is contained in:
Daniel Roe 2023-10-16 11:38:15 +01:00
parent 78939769c9
commit 96f5400492
3 changed files with 7 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/nuxt/src/app/components/nuxt-layout.ts
View File

@ -47,46 +47,7 @@ export default defineComponent({
const injectedRoute = inject(PageRouteSymbol) const injectedRoute = inject(PageRouteSymbol)
const route = injectedRoute === useRoute() ? useVueRouterRoute() : injectedRoute const route = injectedRoute === useRoute() ? useVueRouterRoute() : injectedRoute
const layout = computed(() => { const layout = computed(() => unref(props.name) ?? route.meta.layout as string ?? 'default')
const layoutName = unref(props.name) ?? route.meta.layout as string ?? 'default'
if (typeof layoutName === 'string') {
const layoutPath = layoutName.replace(/-/g, '/')
// Check if layout exists for example `desktop-default` will translate to `layouts/desktop/default`
if (layoutPath in layouts) {
return layoutPath
}
// Check if layout exists for example `desktop` or `desktop-index` will translate to ` `layouts/desktop/index`
if ((layoutPath + '/index') in layouts) {
return layoutPath + '/index'
}
// If the directory inside layouts has has a dash in the name such as `desktop-base` we need to check for that
if (layoutName.includes('-')) {
const layoutPath = layoutName.replace(/-/g, '/')
// Check if layout exists for example `desktop-base` will translate to `layouts/desktop/base`
if (layoutPath in layouts) {
return layoutPath
}
// Check if layout exists for example `desktop-base` will translate to `layouts/desktop-base/base`
const layoutPathLast = layoutName.split('-').pop()
if (layoutName + '/' + layoutPathLast in layouts) {
return layoutName + '/' + layoutPathLast
}
// Check if layout exists for example `desktop-base` will translate to `layouts/desktop-base/index`
if (layoutName + '/index' in layouts) {
return layoutName + '/index'
}
}
}
return layoutName
})
const layoutRef = ref() const layoutRef = ref()
context.expose({ layoutRef }) context.expose({ layoutRef })

4
packages/nuxt/src/core/app.ts
View File

@ -110,9 +110,9 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
app.layouts = {} app.layouts = {}
for (const config of nuxt.options._layers.map(layer => layer.config)) { for (const config of nuxt.options._layers.map(layer => layer.config)) {
const layoutDir = (config.rootDir === nuxt.options.rootDir ? nuxt.options : config).dir?.layouts || 'layouts' const layoutDir = (config.rootDir === nuxt.options.rootDir ? nuxt.options : config).dir?.layouts || 'layouts'
const layoutFiles = await resolveFiles(config.srcDir, `${layoutDir}/*{${nuxt.options.extensions.join(',')}}`) const layoutFiles = await resolveFiles(config.srcDir, `${layoutDir}/**/*{${nuxt.options.extensions.join(',')}}`)
for (const file of layoutFiles) { for (const file of layoutFiles) {
const name = getNameFromPathLocal(file, config.srcDir + '/layouts') const name = getNameFromPathLocal(file, resolve(config.srcDir, layoutDir))
app.layouts[name] = app.layouts[name] || { name, file } app.layouts[name] = app.layouts[name] || { name, file }
} }
} }

16
packages/nuxt/src/core/utils/names.ts
View File

@ -1,5 +1,6 @@
import { basename, extname } from 'pathe' import { basename, extname } from 'pathe'
import { kebabCase } from 'scule' import { kebabCase } from 'scule'
import { withTrailingSlash } from 'ufo'
export function getNameFromPath (path: string) { export function getNameFromPath (path: string) {
return kebabCase(basename(path).replace(extname(path), '')).replace(/["']/g, '') return kebabCase(basename(path).replace(extname(path), '')).replace(/["']/g, '')
@ -9,16 +10,7 @@ export function hasSuffix (path: string, suffix: string) {
return basename(path).replace(extname(path), '').endsWith(suffix) return basename(path).replace(extname(path), '').endsWith(suffix)
} }
export function getNameFromPathLocal (path: string, src: string) { export function getNameFromPathLocal (path: string, localDir: string) {
const sourcePath = path const file = path.replace(withTrailingSlash(localDir), '')
.replace(src + '/', '') return getNameFromPath(file.replace(/[\\/]+/g, '-').replace(/\/index\.\w+$/, ''))
.split('/')
.slice(0, -1)
// .map(e => snakeCase(e))
.join('/')
return (
sourcePath +
(sourcePath ? '/' : '') +
kebabCase(basename(path).replace(extname(path), '')).replace(/["']/g, '')
)
} }