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

View File

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

View File

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

View File

@@ -1,7 +1,16 @@
import fs from 'fs/promises'; import fs from 'fs/promises';
import path from 'path'; 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); modulesPath = path.join(__dirname, modulesPath);
const moduleStatusesPath = path.join(__dirname, 'modules_statuses.json'); const moduleStatusesPath = path.join(__dirname, 'modules_statuses.json');
@@ -37,10 +46,10 @@ async function collectModuleAssetsPaths(paths, modulesPath) {
const moduleConfig = await import(viteConfigPath); const moduleConfig = await import(viteConfigPath);
if ( if (
moduleConfig.paths && moduleConfig[attribute] &&
Array.isArray(moduleConfig.paths) 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,11 +2,23 @@ import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin'; import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; import vue from '@vitejs/plugin-vue';
import checker from 'vite-plugin-checker'; import checker from 'vite-plugin-checker';
import {
collectModuleAssetsPaths,
collectModulePlugins,
} from './vite-module-loader.js';
export default defineConfig({ 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: [ plugins: [
laravel({ laravel({
input: 'resources/js/app.ts', input: [...paths, ...modulePaths],
refresh: true, refresh: true,
}), }),
vue({ vue({
@@ -23,6 +35,7 @@ export default defineConfig({
vueTsc: true, vueTsc: true,
lintCommand: 'eslint "./**/*.{ts,vue}"', lintCommand: 'eslint "./**/*.{ts,vue}"',
}), }),
...additionalPlugins,
], ],
server: { server: {
host: true, host: true,
@@ -31,4 +44,7 @@ export default defineConfig({
clientPort: 80, clientPort: 80,
}, },
}, },
}); });
}
export default getConfig();