Last active
October 27, 2022 07:34
-
-
Save innocenzi/5334b9679c35465defe72bdb57dd541c to your computer and use it in GitHub Desktop.
Laravel domain-driven front-end with Vite
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import type { Plugin } from 'vite' | |
const PLUGIN_NAME = 'vite:inertia:layout' | |
const TEMPLATE_LAYOUT_REGEX = /<template +layout(?: *= *['"](?:(?:(\w+):)?(\w+))['"] *)?>/ | |
export default (): Plugin => ({ | |
name: PLUGIN_NAME, | |
transform: (code: string) => { | |
if (!TEMPLATE_LAYOUT_REGEX.test(code)) { | |
return | |
} | |
const isTypeScript = /lang=['"]ts['"]/.test(code) | |
return code.replace(TEMPLATE_LAYOUT_REGEX, (_, domainName, layoutName) => { | |
const resolvedLayoutName = layoutName ?? 'default' | |
const layout = domainName | |
? `@/domains/${domainName}/layouts/${resolvedLayoutName}.vue` | |
: `@/layouts/${resolvedLayoutName}.vue` | |
return ` | |
<script${isTypeScript ? ' lang="ts"' : ''}> | |
import layout from '${layout}' | |
export default { layout } | |
</script> | |
<template> | |
` | |
}) | |
}, | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export async function resolvePageComponent(name: string, pages: Record<string, any>, defaultLayout?: any) { | |
const mapped: string[] = [] | |
const path = Object.keys(pages) | |
.sort((a, b) => a.length - b.length) | |
.find((path) => { | |
mapped.push( | |
path = path | |
.replace('../domains/', '') | |
.replace('/pages/', '/') | |
.replace('.vue', '') | |
.replace('/', '.'), | |
) | |
return path === name | |
}) | |
if (!path) { | |
throw new Error(`Page component "${name}" could not be found. Available pages: \n- ${mapped.join('\n- ')}`) | |
} | |
let component = typeof pages[path] === 'function' | |
? await pages[path]() | |
: pages[path] | |
component = component.default ?? component | |
component.layout ??= defaultLayout | |
return component | |
} |
Hey, yes, this function was specifically updated for Vite 3. The sorting part is what I came up with to make up for the import.meta.glob
order changes. This one function is for DDD and uses a specific architecture though, so you should adapt it to your needs.
Hey... Thanks for the feedback... I'm using a striped down version of this, but in my case I had to add enforce: 'pre'
to the plugin export after upgrading to Vite 3.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Does this work on Vite 3?
I'm upgrading a project that used this with Vite 2 and I couldn't get this to work....