adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-16 12:12:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

13
resources/js/app.ts
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: {

2
resources/js/types/global.d.ts vendored
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;

2
resources/views/app.blade.php
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">

21
vite-module-loader.js
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 };

72
vite.config.js
View File

@@ -2,33 +2,49 @@ 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() {
plugins: [ const paths = ['resources/js/app.ts'];
laravel({ const modulePaths = await collectModuleAssetsPaths('extensions');
input: 'resources/js/app.ts', const additionalPlugins = await collectModulePlugins('extensions');
refresh: true,
}), return defineConfig({
vue({ build: {
template: { sourcemap: true, // Source map generation must be turned on
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,
}, },
}, 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();