add support for extension vite plugin loading, add vue setup hook for extensions

This commit is contained in:
Gregor Vostrak
2024-04-23 22:37:30 +02:00
parent 2f0ad0eb44
commit a3196c4964
5 changed files with 70 additions and 40 deletions

View File

@@ -18,11 +18,14 @@ createInertiaApp({
import.meta.glob<DefineComponent>('./Pages/**/*.vue')
),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.use(pinia)
.use(ZiggyVue)
.mount(el);
const app = createApp({ render: () => h(App, props) });
// currently only one vue app setup hook is supported
if (window.vueAppSetupHook) {
window.vueAppSetupHook(app);
}
app.use(plugin).use(pinia).use(ZiggyVue).mount(el);
},
progress: {

View File

@@ -2,11 +2,13 @@ import { PageProps as InertiaPageProps } from '@inertiajs/core';
import { AxiosInstance } from 'axios';
import ziggyRoute from 'ziggy-js';
import { PageProps as AppPageProps } from './';
import type { App } from 'vue';
declare global {
interface Window {
axios: AxiosInstance;
initialDataLoaded: boolean;
vueAppSetupHook?: (app: App) => void;
}
let route: typeof ziggyRoute;

View File

@@ -23,7 +23,7 @@
<!-- Scripts -->
@routes
@vite(['resources/js/app.ts', "resources/js/Pages/{$page['component']}.vue"])
@vite(\Nwidart\Modules\Module::getAssets())
@inertiaHead
</head>
<body class="font-sans antialiased">

View File

@@ -1,7 +1,16 @@
import fs from 'fs/promises';
import path from 'path';
async function collectModuleAssetsPaths(paths, modulesPath) {
async function collectModuleAssetsPaths(modulesPath) {
return await getExportedModulesArrayAttributes(modulesPath, 'paths');
}
async function collectModulePlugins(modulesPath) {
return await getExportedModulesArrayAttributes(modulesPath, 'plugins');
}
async function getExportedModulesArrayAttributes(modulesPath, attribute) {
const result = [];
modulesPath = path.join(__dirname, modulesPath);
const moduleStatusesPath = path.join(__dirname, 'modules_statuses.json');
@@ -37,10 +46,10 @@ async function collectModuleAssetsPaths(paths, modulesPath) {
const moduleConfig = await import(viteConfigPath);
if (
moduleConfig.paths &&
Array.isArray(moduleConfig.paths)
moduleConfig[attribute] &&
Array.isArray(moduleConfig[attribute])
) {
paths.push(...moduleConfig.paths);
result.push(...moduleConfig[attribute]);
}
}
}
@@ -51,7 +60,7 @@ async function collectModuleAssetsPaths(paths, modulesPath) {
);
}
return paths;
return result;
}
export default collectModuleAssetsPaths;
export { collectModuleAssetsPaths, collectModulePlugins };

View File

@@ -2,33 +2,49 @@ import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import checker from 'vite-plugin-checker';
import {
collectModuleAssetsPaths,
collectModulePlugins,
} from './vite-module-loader.js';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.ts',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
checker({
// e.g. use TypeScript check
typescript: true,
vueTsc: true,
lintCommand: 'eslint "./**/*.{ts,vue}"',
}),
],
server: {
host: true,
hmr: {
host: process.env.VITE_HOST_NAME,
clientPort: 80,
async function getConfig() {
const paths = ['resources/js/app.ts'];
const modulePaths = await collectModuleAssetsPaths('extensions');
const additionalPlugins = await collectModulePlugins('extensions');
return defineConfig({
build: {
sourcemap: true, // Source map generation must be turned on
},
},
});
plugins: [
laravel({
input: [...paths, ...modulePaths],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
checker({
// e.g. use TypeScript check
typescript: true,
vueTsc: true,
lintCommand: 'eslint "./**/*.{ts,vue}"',
}),
...additionalPlugins,
],
server: {
host: true,
hmr: {
host: process.env.VITE_HOST_NAME,
clientPort: 80,
},
},
});
}
export default getConfig();