@hybridly/vite 0.0.1-dev.3 → 0.1.0-alpha.0

package/dist/index.cjs

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const config = require('@hybridly/config');
+const laravel = require('laravel-vite-plugin');
 const path = require('node:path');
 const vite = require('vite');
 const makeDebugger = require('debug');
@@ -9,47 +11,136 @@ const fs = require('node:fs');
 const throttleDebounce = require('throttle-debounce');
 const node_child_process = require('node:child_process');
 const node_util = require('node:util');
+const run = require('vite-plugin-run');
+const autoimport = require('unplugin-auto-import/vite');
+const vueComponents = require('unplugin-vue-components/vite');
+const iconsResolver = require('unplugin-icons/resolver');
+const icons = require('unplugin-icons/vite');
+const loaders = require('unplugin-icons/loaders');
+const vue = require('@vitejs/plugin-vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
+const laravel__default = /*#__PURE__*/_interopDefaultLegacy(laravel);
 const path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 const makeDebugger__default = /*#__PURE__*/_interopDefaultLegacy(makeDebugger);
 const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
+const run__default = /*#__PURE__*/_interopDefaultLegacy(run);
+const autoimport__default = /*#__PURE__*/_interopDefaultLegacy(autoimport);
+const vueComponents__default = /*#__PURE__*/_interopDefaultLegacy(vueComponents);
+const iconsResolver__default = /*#__PURE__*/_interopDefaultLegacy(iconsResolver);
+const icons__default = /*#__PURE__*/_interopDefaultLegacy(icons);
+const vue__default = /*#__PURE__*/_interopDefaultLegacy(vue);
 
-const ROUTER_PLUGIN_NAME = "vite:hybridly:router";
-const ROUTER_HMR_UPDATE_ROUTE = "hybridly:routes:update";
-const ROUTER_VIRTUAL_MODULE_ID = "virtual:hybridly/router";
-const RESOLVED_ROUTER_VIRTUAL_MODULE_ID = `\0${ROUTER_VIRTUAL_MODULE_ID}`;
+const ROUTING_PLUGIN_NAME = "vite:hybridly:routing";
+const ROUTING_HMR_UPDATE_ROUTING = "hybridly:routing:update";
+const ROUTING_HMR_QUERY_UPDATE_ROUTING = "hybridly:routing:pls-update";
+const ROUTING_VIRTUAL_MODULE_ID = "virtual:hybridly/router";
+const RESOLVED_ROUTING_VIRTUAL_MODULE_ID = `\0${ROUTING_VIRTUAL_MODULE_ID}`;
 const LAYOUT_PLUGIN_NAME = "vite:hybridly:layout";
+const CONFIG_PLUGIN_NAME = "vite:hybridly:config";
+const CONFIG_VIRTUAL_MODULE_ID = "virtual:hybridly/config";
+const RESOLVED_CONFIG_VIRTUAL_MODULE_ID = `\0${CONFIG_VIRTUAL_MODULE_ID}`;
+
+const initialize = (options, config) => {
+  return {
+    name: CONFIG_PLUGIN_NAME,
+    enforce: "pre",
+    config() {
+      return {
+        resolve: {
+          alias: {
+            "@": path__default.join(process.cwd(), config.root),
+            "#": path__default.join(process.cwd(), ".hybridly"),
+            "~": path__default.join(process.cwd())
+          }
+        }
+      };
+    },
+    configureServer(server) {
+      const reloadServer = (file) => {
+        if (!file.endsWith("hybridly.config.ts")) {
+          return;
+        }
+        server.config.logger.info("Hybridly configuration file was changed: forcing a server restart.", {
+          clear: server.config.clearScreen,
+          timestamp: true
+        });
+        server?.restart();
+      };
+      server.watcher.on("add", reloadServer);
+      server.watcher.on("change", reloadServer);
+      server.watcher.on("unlink", reloadServer);
+    },
+    resolveId(id) {
+      if (id === CONFIG_VIRTUAL_MODULE_ID) {
+        return RESOLVED_CONFIG_VIRTUAL_MODULE_ID;
+      }
+    },
+    async load(id) {
+      if (id === RESOLVED_CONFIG_VIRTUAL_MODULE_ID) {
+        return `
+					import { initializeHybridly as init } from 'hybridly/vue'
+					import '${ROUTING_VIRTUAL_MODULE_ID}'
+
+					export function initializeHybridly(config) {
+						return init({
+							...${JSON.stringify(config)},
+							components: import.meta.glob("${config.pagesGlob}", { eager: ${config.eager ?? true} }),
+							...config,
+						})
+					}
+				`;
+      }
+    }
+  };
+};
 
 const debug = {
-  router: makeDebugger__default(ROUTER_PLUGIN_NAME),
+  router: makeDebugger__default(ROUTING_PLUGIN_NAME),
   layout: makeDebugger__default(LAYOUT_PLUGIN_NAME)
 };
 
-const TEMPLATE_LAYOUT_REGEX = /<template +layout(?: *= *['"](?:(?:(\w+):)?(\w+))['"] *)?>/;
+const TEMPLATE_LAYOUT_REGEX = /<template +layout(?: *= *['"]((?:[\w\/\-_,:](?:,\ )?)+)['"] *)?>/;
 const TYPESCRIPT_REGEX = /lang=['"]ts['"]/;
-const layout = (options = {}) => {
-  const base = options?.directory ? options?.directory : path__default.resolve(process.cwd(), "resources", "views", "layouts");
-  const layoutPath = options?.resolve ? options.resolve : (layoutName) => vite.normalizePath(path__default.resolve(base, `${layoutName ?? "default"}.vue`)).replaceAll("\\", "/");
-  debug.layout("Registered layout path:", base);
+const layout = (options, config$1) => {
+  const defaultLayoutName = options?.layout?.defaultLayoutName?.replace(".vue", "") ?? "default";
+  const layoutsDirectory = path__default.resolve(process.cwd(), config$1.root, config$1.layouts);
+  const templateRegExp = options?.layout?.templateRegExp ?? TEMPLATE_LAYOUT_REGEX;
+  const resolveLayoutPath = (layoutName) => {
+    const [domain, layout] = layoutName.includes(":") ? layoutName.split(":") : [void 0, layoutName];
+    const layoutPath = path__default.resolve(config.resolveLayoutsDirectory(config$1, domain), `${layout}.vue`);
+    return vite.normalizePath(layoutPath).replaceAll("\\", "/");
+  };
+  debug.layout("Resolved options:", {
+    defaultLayoutName,
+    layoutsDirectory
+  });
   return {
     name: LAYOUT_PLUGIN_NAME,
+    enforce: "pre",
     transform: (code, id) => {
-      if (!TEMPLATE_LAYOUT_REGEX.test(code)) {
+      if (!templateRegExp.test(code)) {
         return;
       }
-      return code.replace(TEMPLATE_LAYOUT_REGEX, (_, __, layoutName) => {
+      return code.replace(templateRegExp, (_, layoutName) => {
         const isTypeScript = TYPESCRIPT_REGEX.test(code);
-        const importPath = layoutPath(layoutName);
-        debug.layout(`Resolved layout "${layoutName}":`, {
+        const layouts = layoutName?.toString()?.replaceAll(" ", "").split(",") ?? [defaultLayoutName];
+        const importName = (i) => `__hybridly_layout_${i}`;
+        const exports = layouts.map((_2, i) => importName(i));
+        const imports = layouts.reduce((imports2, layoutName2, i) => `
+					${imports2}
+					import ${importName(i)} from '${resolveLayoutPath(layoutName2)}';
+				`, "").trim();
+        debug.layout(`Resolved layouts "${layouts.join(", ")}":`, {
           sourceFile: id,
-          importPath
+          layouts,
+          imports
         });
         return `
 					<script${isTypeScript ? ' lang="ts"' : ""}>
-					import layout from '${importPath}'
-					export default { layout }
+					${imports}
+					export default { layout: [${exports.join(", ")}] }
 					<\/script>
 					<template>
 				`;
@@ -58,42 +149,45 @@ const layout = (options = {}) => {
   };
 };
 
-function getClientCode(routes) {
+function getRouterClientCode(routing) {
   return `
 		if (typeof window !== 'undefined') {
 			window.hybridly = {
-				routes: ${JSON.stringify(routes)}
+				routing: ${JSON.stringify(routing)}
 			}
-	
+
 			if (import.meta.hot) {
-				import.meta.hot.on('${ROUTER_HMR_UPDATE_ROUTE}', (routes) => {
-					window.dispatchEvent(
-						new CustomEvent('hybridly:routes', { detail: routes })
-					)
+				import.meta.hot.on('${ROUTING_HMR_UPDATE_ROUTING}', (routing) => {
+					window.dispatchEvent(new CustomEvent('hybridly:routing', { detail: routing }))
 				})
+
+				import.meta.hot.send('${ROUTING_HMR_QUERY_UPDATE_ROUTING}')
 			}
 		}
  `;
 }
 
 const shell = node_util.promisify(node_child_process.exec);
-async function fetchRoutesFromArtisan(options) {
-  const php = options.php ?? "php";
-  const result = await shell(`${php} artisan hybridly:routes`);
-  const routes = JSON.parse(result.stdout);
-  write(options, routes);
-  return routes;
+async function fetchRoutingFromArtisan(options) {
+  try {
+    const php = options.php ?? "php";
+    const result = await shell(`${php} artisan hybridly:routes`);
+    const routing = JSON.parse(result.stdout);
+    write$1(options, routing);
+    return routing;
+  } catch {
+  }
 }
 
-const write = throttleDebounce.debounce(1e3, writeDefinitions, { atBegin: true });
-async function writeDefinitions(options, collection) {
-  collection ?? (collection = await fetchRoutesFromArtisan(options));
-  if (options.dts === false) {
+const write$1 = throttleDebounce.debounce(1e3, writeDefinitions, { atBegin: true });
+async function writeDefinitions(options, routing) {
+  routing ?? (routing = await fetchRoutingFromArtisan(options));
+  if (options.dts === false || !routing) {
     return;
   }
-  debug.router("Writing types for route collection:", collection);
-  const target = path__default.resolve(options.dts ?? "resources/types/routes.d.ts");
-  const routes = Object.fromEntries(Object.entries(collection.routes).map(([key, route]) => {
+  debug.router("Writing types for routing:", routing);
+  const target = path__default.resolve(options.dts ?? ".hybridly/routes.d.ts");
+  const routes = Object.fromEntries(Object.entries(routing.routes).map(([key, route]) => {
     const bindings = route.bindings ? Object.fromEntries(Object.entries(route.bindings).map(([key2]) => [key2, "__key_placeholder__"])) : void 0;
     return [key, {
       ...route.uri ? { uri: route.uri } : {},
@@ -102,7 +196,8 @@ async function writeDefinitions(options, collection) {
       ...route.bindings ? { bindings } : {}
     }];
   }));
-  const definitions = generateDefinitions().replace("__URL__", collection?.url ?? "").replace("__ROUTES__", JSON.stringify(routes).replaceAll('"__key_placeholder__"', "any"));
+  const definitions = generateDefinitions().replace("__URL__", routing?.url ?? "").replace("__ROUTES__", JSON.stringify(routes).replaceAll('"__key_placeholder__"', "any"));
+  fs__default.mkdirSync(path__default.dirname(target), { recursive: true });
   fs__default.writeFileSync(target, definitions, { encoding: "utf-8" });
 }
 function generateDefinitions() {
@@ -111,7 +206,7 @@ function generateDefinitions() {
 // Modifications will be discarded
 // It is recommended to add it in your .gitignore
 
-declare module 'hybridly/vue' {
+declare module 'hybridly' {
 	export interface GlobalRouteCollection {
 		url: '__URL__'
 		routes: __ROUTES__
@@ -121,46 +216,52 @@ declare module 'hybridly/vue' {
 export {}`;
 }
 
-const router = (options = {}) => {
+const router = (options, config) => {
   const resolved = {
     php: "php",
-    dts: "resources/types/routes.d.ts",
+    dts: ".hybridly/routes.d.ts",
     watch: [
       /routes\/.*\.php/
     ],
     ...options
   };
-  let previousRoutes;
+  let routingBeforeUpdate;
+  async function sendRoutingUpdate(server, force = false) {
+    const routing = await fetchRoutingFromArtisan(resolved) ?? routingBeforeUpdate;
+    if (force || JSON.stringify(routing) !== JSON.stringify(routingBeforeUpdate)) {
+      debug.router("Updating routes via HMR:", routing);
+      server.ws.send({
+        type: "custom",
+        event: ROUTING_HMR_UPDATE_ROUTING,
+        data: routing
+      });
+      write$1(resolved);
+      routingBeforeUpdate = routing;
+    }
+  }
   return {
-    name: ROUTER_PLUGIN_NAME,
+    name: ROUTING_PLUGIN_NAME,
     configureServer(server) {
-      write(resolved);
+      write$1(resolved);
+      server.ws.on(ROUTING_HMR_QUERY_UPDATE_ROUTING, () => {
+        sendRoutingUpdate(server, true);
+      });
       server.watcher.on("change", async (path) => {
         if (!resolved.watch.some((regex) => regex.test(path))) {
           return;
         }
-        const routes = await fetchRoutesFromArtisan(resolved);
-        if (JSON.stringify(routes) !== JSON.stringify(previousRoutes)) {
-          debug.router("Updating routes via HMR:", routes);
-          server.ws.send({
-            type: "custom",
-            event: ROUTER_HMR_UPDATE_ROUTE,
-            data: routes
-          });
-          write(resolved);
-          previousRoutes = routes;
-        }
+        sendRoutingUpdate(server);
       });
     },
     resolveId(id) {
-      if (id === ROUTER_VIRTUAL_MODULE_ID) {
-        return RESOLVED_ROUTER_VIRTUAL_MODULE_ID;
+      if (id === ROUTING_VIRTUAL_MODULE_ID) {
+        return RESOLVED_ROUTING_VIRTUAL_MODULE_ID;
       }
     },
     async load(id) {
-      if (id === RESOLVED_ROUTER_VIRTUAL_MODULE_ID) {
-        const routes = await fetchRoutesFromArtisan(resolved);
-        return getClientCode(routes);
+      if (id === RESOLVED_ROUTING_VIRTUAL_MODULE_ID) {
+        const routing = await fetchRoutingFromArtisan(resolved);
+        return getRouterClientCode(routing);
       }
     },
     async handleHotUpdate(ctx) {
@@ -169,15 +270,231 @@ const router = (options = {}) => {
       }
     },
     transform() {
-      write(resolved);
+      write$1(resolved);
     }
   };
 };
 
-function plugin(options = {}) {
+function getRunOptions(options) {
+  if (options.run === false) {
+    return [];
+  }
+  return [
+    {
+      name: "Generate TypeScript types",
+      run: ["php", "artisan", "hybridly:types"],
+      pattern: [
+        "(app|src)/**/*Data.php",
+        "(app|src)/**/Enums/*.php",
+        "(app|src)/**/Middlewrare/HandleHybridRequests.php"
+      ]
+    },
+    {
+      name: "Generate i18n",
+      run: ["php", "artisan", "hybridly:i18n"],
+      pattern: "lang/**/*.php"
+    },
+    ...options.run ?? []
+  ];
+}
+
+function getLaravelOptions(options, config) {
+  return {
+    input: `${config.root}/application/main.ts`,
+    ...options.laravel ?? {}
+  };
+}
+
+function getAutoImportsOptions(options, config) {
+  if (options.autoImports === false) {
+    return;
+  }
+  return {
+    vueTemplate: true,
+    dts: ".hybridly/auto-imports.d.ts",
+    dirs: [
+      `${config.root}/utils`,
+      `${config.root}/composables`,
+      ...options.autoImports?.dirs ?? []
+    ],
+    imports: [
+      "vue",
+      "vue/macros",
+      "@vueuse/core",
+      "@vueuse/head",
+      {
+        "hybridly/vue": [
+          "useProperty",
+          "useTypedProperty",
+          "useProperties",
+          "useBackForward",
+          "useContext",
+          "useForm",
+          "useDialog",
+          "useHistoryState",
+          "usePaginator",
+          "defineLayout",
+          "defineLayoutProperties",
+          "registerHook"
+        ],
+        "hybridly": [
+          "router",
+          "route",
+          "current",
+          "can"
+        ]
+      }
+    ],
+    ...options.autoImports
+  };
+}
+
+function getVueComponentsOptions(options, config) {
+  if (options.vueComponents === false) {
+    return {};
+  }
+  const linkName = options.vueComponents?.linkName ?? "RouterLink";
+  const hasIcons = options?.icons !== false;
+  const customCollections = Array.isArray(options.customIcons) ? options.customIcons : options.customIcons?.collections ?? [];
+  const customResolvers = options.customResolvers ? Array.isArray(options.customResolvers) ? options.customResolvers : [options.customResolvers] : [];
+  return {
+    globs: [
+      `${config.root}/components/**/*.vue`,
+      ...config.domains ? [`${config.root}/${config.domains}/**/components/**/*.vue`] : []
+    ],
+    dts: ".hybridly/components.d.ts",
+    resolvers: [
+      ...hasIcons ? [iconsResolver__default({ customCollections })] : [],
+      {
+        type: "component",
+        resolve: (name) => {
+          if (name === linkName) {
+            return {
+              from: "hybridly/vue",
+              name: "RouterLink",
+              as: linkName
+            };
+          }
+        }
+      },
+      ...customResolvers
+    ]
+  };
+}
+
+function getIconsOptions(options, config) {
+  if (options.icons === false) {
+    return {};
+  }
+  const resolved = Array.isArray(options.customIcons) ? { icons: void 0, collections: options.customIcons } : options.customIcons;
+  const customIconDirectoryName = resolved?.icons ?? "icons";
+  const customCollections = Object.fromEntries(resolved?.collections?.map((collection) => [
+    collection,
+    loaders.FileSystemIconLoader(`./${config.root}/${customIconDirectoryName}/${collection}`)
+  ]) ?? []);
+  return {
+    autoInstall: true,
+    customCollections,
+    ...options.icons
+  };
+}
+
+function getVueOptions(options) {
+  if (options.vue === false) {
+    return;
+  }
+  return {
+    template: {
+      transformAssetUrls: {
+        base: null,
+        includeAbsolute: false
+      }
+    },
+    ...options.vue
+  };
+}
+
+function generateTsConfig(options, config) {
+  const tsconfig = {
+    compilerOptions: {
+      target: "esnext",
+      module: "esnext",
+      moduleResolution: "node",
+      strict: true,
+      jsx: "preserve",
+      sourceMap: true,
+      resolveJsonModule: true,
+      esModuleInterop: true,
+      allowSyntheticDefaultImports: true,
+      lib: [
+        "esnext",
+        "dom"
+      ],
+      types: [
+        "vite/client",
+        "hybridly/client",
+        ...options.icons !== false ? ["unplugin-icons/types/vue"] : []
+      ],
+      baseUrl: "..",
+      paths: {
+        "#/*": [
+          ".hybridly/*"
+        ],
+        "~/*": [
+          "./*"
+        ],
+        "@/*": [
+          `./${config.root}/*`
+        ]
+      }
+    },
+    include: [
+      `../${config.root}/**/*`,
+      "./*"
+    ],
+    exclude: [
+      "../public/**/*",
+      "../node_modules",
+      "../vendor"
+    ]
+  };
+  write(JSON.stringify(tsconfig, null, 2), "tsconfig.json");
+}
+function generateVueShims(options) {
+  if (options.shims === false) {
+    return;
+  }
+  const shims = `declare module '*.vue' {
+	import type { DefineComponent } from 'vue'
+	const component: DefineComponent<{}, {}, any>
+	export default component
+}`;
+  write(shims, "vue-shims.d.ts");
+}
+function write(data, filename) {
+  const hybridlyPath = path__default.resolve(process.cwd(), ".hybridly");
+  if (!fs__default.existsSync(hybridlyPath)) {
+    fs__default.mkdirSync(hybridlyPath);
+  }
+  fs__default.writeFileSync(path__default.resolve(hybridlyPath, filename), data, {
+    encoding: "utf-8"
+  });
+}
+
+async function plugin(options = {}) {
+  const config$1 = await config.loadHybridlyConfig();
+  generateTsConfig(options, config$1);
+  generateVueShims(options);
   return [
-    options.layout !== false && layout(options.layout),
-    options.router !== false && router(options.router)
+    initialize(options, config$1),
+    layout(options, config$1),
+    router(options),
+    options.laravel !== false && laravel__default(getLaravelOptions(options, config$1)),
+    options.run !== false && run__default(getRunOptions(options)),
+    options.vueComponents !== false && vueComponents__default(getVueComponentsOptions(options, config$1)),
+    options.autoImports !== false && autoimport__default(getAutoImportsOptions(options, config$1)),
+    options.icons !== false && icons__default(getIconsOptions(options, config$1)),
+    options.vue !== false && vue__default(getVueOptions(options))
   ];
 }
 

package/dist/index.d.ts

@@ -1,16 +1,63 @@
-import { Plugin, PluginOption } from 'vite';
+import { ResolvedHybridlyConfig, HybridlyConfig } from '@hybridly/config';
+import { Plugin } from 'vite';
+import autoimport from 'unplugin-auto-import/vite';
+import icons from 'unplugin-icons/vite';
+import laravel from 'laravel-vite-plugin';
+import { Runner } from 'vite-plugin-run';
+import vue from '@vitejs/plugin-vue';
+import vueComponents from 'unplugin-vue-components/vite';
+import { ComponentResolver } from 'unplugin-vue-components/types';
 
-interface Options {
+type AutoImportOptions = Parameters<typeof autoimport>[0];
+
+type IconsOptions = Parameters<typeof icons>[0];
+type CustomIconOptions = string[] | {
+    /** Name of the icons directory under the root directory. */
+    icons?: string;
+    /** Names of the custom icon collections that should be registered. */
+    collections?: string[];
+};
+
+type LaravelOptions = Exclude<Parameters<typeof laravel>[0], string | string[]>;
+
+type VueOptions = Parameters<typeof vue>[0];
+
+type VueComponentsOptions = Parameters<typeof vueComponents>[0] & {
+    /** Name of the Link component. */
+    linkName?: string;
+};
+type CustomResolvers = ComponentResolver | ComponentResolver[];
+type CustomComponentsOptions = VueComponentsOptions;
+
+interface ViteOptions {
     /** Options for the layout plugin. */
-    layout?: false | LayoutOptions;
+    layout?: LayoutOptions;
     /** Options for the router plugin. */
-    router?: false | RouterOptions;
+    router?: RouterOptions;
+    /** Options for `@vitejs/plugin-vue`. */
+    vue?: false | VueOptions;
+    /** Options for `laravel-vite-plugin`. Set to `false` to disable. */
+    laravel?: false | Partial<LaravelOptions>;
+    /** Options for `vite-plugin-run`. Set to `false` to disable. */
+    run?: false | Runner[];
+    /** Options for `unplugin-auto-import`. Set to `false` to disable. */
+    autoImports?: false | AutoImportOptions;
+    /** Options for `unplugin-vue-components`. Set to `false` to disable. */
+    vueComponents?: false | CustomComponentsOptions;
+    /** Options for `unplugin-icons`. Set to `false` to disable. */
+    icons?: false | IconsOptions;
+    /** Options for custom icon collections. */
+    customIcons?: CustomIconOptions;
+    /** Custom vue component resolvers. */
+    customResolvers?: CustomResolvers;
+    /** Whether to write shims. */
+    shims?: boolean;
 }
 interface LayoutOptions {
-    /** The directory in which layouts are stored. */
-    directory?: string;
-    /** Function that resolves the layout path given its name. */
-    resolve?: (layout: string) => string;
+    /** Custom RegExp for parsing the template string. */
+    templateRegExp?: RegExp;
+    /** Name of the layout used when no argument is provided to `layout`. */
+    defaultLayoutName?: string;
 }
 interface RouterOptions {
     /** Path to the PHP executable. */
@@ -21,19 +68,10 @@ interface RouterOptions {
     watch?: RegExp[];
 }
 
-/**
- * A basic Vite plugin that adds a <template layout="name"> syntax to Vite SFCs.
- * It must be used before the Vue plugin.
- */
-declare const _default$1: (options?: LayoutOptions) => Plugin;
+declare const _default$1: (options: ViteOptions, config: ResolvedHybridlyConfig) => Plugin;
 
-/**
- * A basic Vite plugin that adds a <template layout="name"> syntax to Vite SFCs.
- * It must be used before the Vue plugin.
- */
-declare const _default: (options?: RouterOptions) => Plugin;
+declare const _default: (options: ViteOptions, config: HybridlyConfig) => Plugin;
 
-/** Registers `unplugin-vue-define-options`. */
-declare function plugin(options?: Options): PluginOption[];
+declare function plugin(options?: ViteOptions): Promise<any[]>;
 
-export { Options, plugin as default, _default$1 as layout, _default as router };
+export { ViteOptions as Options, plugin as default, _default$1 as layout, _default as router };

package/dist/index.mjs

@@ -1,3 +1,5 @@
+import { resolveLayoutsDirectory, loadHybridlyConfig } from '@hybridly/config';
+import laravel from 'laravel-vite-plugin';
 import path from 'node:path';
 import { normalizePath } from 'vite';
 import makeDebugger from 'debug';
@@ -5,41 +7,123 @@ import fs from 'node:fs';
 import { debounce } from 'throttle-debounce';
 import { exec } from 'node:child_process';
 import { promisify } from 'node:util';
+import run from 'vite-plugin-run';
+import autoimport from 'unplugin-auto-import/vite';
+import vueComponents from 'unplugin-vue-components/vite';
+import iconsResolver from 'unplugin-icons/resolver';
+import icons from 'unplugin-icons/vite';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import vue from '@vitejs/plugin-vue';
 
-const ROUTER_PLUGIN_NAME = "vite:hybridly:router";
-const ROUTER_HMR_UPDATE_ROUTE = "hybridly:routes:update";
-const ROUTER_VIRTUAL_MODULE_ID = "virtual:hybridly/router";
-const RESOLVED_ROUTER_VIRTUAL_MODULE_ID = `\0${ROUTER_VIRTUAL_MODULE_ID}`;
+const ROUTING_PLUGIN_NAME = "vite:hybridly:routing";
+const ROUTING_HMR_UPDATE_ROUTING = "hybridly:routing:update";
+const ROUTING_HMR_QUERY_UPDATE_ROUTING = "hybridly:routing:pls-update";
+const ROUTING_VIRTUAL_MODULE_ID = "virtual:hybridly/router";
+const RESOLVED_ROUTING_VIRTUAL_MODULE_ID = `\0${ROUTING_VIRTUAL_MODULE_ID}`;
 const LAYOUT_PLUGIN_NAME = "vite:hybridly:layout";
+const CONFIG_PLUGIN_NAME = "vite:hybridly:config";
+const CONFIG_VIRTUAL_MODULE_ID = "virtual:hybridly/config";
+const RESOLVED_CONFIG_VIRTUAL_MODULE_ID = `\0${CONFIG_VIRTUAL_MODULE_ID}`;
+
+const initialize = (options, config) => {
+  return {
+    name: CONFIG_PLUGIN_NAME,
+    enforce: "pre",
+    config() {
+      return {
+        resolve: {
+          alias: {
+            "@": path.join(process.cwd(), config.root),
+            "#": path.join(process.cwd(), ".hybridly"),
+            "~": path.join(process.cwd())
+          }
+        }
+      };
+    },
+    configureServer(server) {
+      const reloadServer = (file) => {
+        if (!file.endsWith("hybridly.config.ts")) {
+          return;
+        }
+        server.config.logger.info("Hybridly configuration file was changed: forcing a server restart.", {
+          clear: server.config.clearScreen,
+          timestamp: true
+        });
+        server?.restart();
+      };
+      server.watcher.on("add", reloadServer);
+      server.watcher.on("change", reloadServer);
+      server.watcher.on("unlink", reloadServer);
+    },
+    resolveId(id) {
+      if (id === CONFIG_VIRTUAL_MODULE_ID) {
+        return RESOLVED_CONFIG_VIRTUAL_MODULE_ID;
+      }
+    },
+    async load(id) {
+      if (id === RESOLVED_CONFIG_VIRTUAL_MODULE_ID) {
+        return `
+					import { initializeHybridly as init } from 'hybridly/vue'
+					import '${ROUTING_VIRTUAL_MODULE_ID}'
+
+					export function initializeHybridly(config) {
+						return init({
+							...${JSON.stringify(config)},
+							components: import.meta.glob("${config.pagesGlob}", { eager: ${config.eager ?? true} }),
+							...config,
+						})
+					}
+				`;
+      }
+    }
+  };
+};
 
 const debug = {
-  router: makeDebugger(ROUTER_PLUGIN_NAME),
+  router: makeDebugger(ROUTING_PLUGIN_NAME),
   layout: makeDebugger(LAYOUT_PLUGIN_NAME)
 };
 
-const TEMPLATE_LAYOUT_REGEX = /<template +layout(?: *= *['"](?:(?:(\w+):)?(\w+))['"] *)?>/;
+const TEMPLATE_LAYOUT_REGEX = /<template +layout(?: *= *['"]((?:[\w\/\-_,:](?:,\ )?)+)['"] *)?>/;
 const TYPESCRIPT_REGEX = /lang=['"]ts['"]/;
-const layout = (options = {}) => {
-  const base = options?.directory ? options?.directory : path.resolve(process.cwd(), "resources", "views", "layouts");
-  const layoutPath = options?.resolve ? options.resolve : (layoutName) => normalizePath(path.resolve(base, `${layoutName ?? "default"}.vue`)).replaceAll("\\", "/");
-  debug.layout("Registered layout path:", base);
+const layout = (options, config) => {
+  const defaultLayoutName = options?.layout?.defaultLayoutName?.replace(".vue", "") ?? "default";
+  const layoutsDirectory = path.resolve(process.cwd(), config.root, config.layouts);
+  const templateRegExp = options?.layout?.templateRegExp ?? TEMPLATE_LAYOUT_REGEX;
+  const resolveLayoutPath = (layoutName) => {
+    const [domain, layout] = layoutName.includes(":") ? layoutName.split(":") : [void 0, layoutName];
+    const layoutPath = path.resolve(resolveLayoutsDirectory(config, domain), `${layout}.vue`);
+    return normalizePath(layoutPath).replaceAll("\\", "/");
+  };
+  debug.layout("Resolved options:", {
+    defaultLayoutName,
+    layoutsDirectory
+  });
   return {
     name: LAYOUT_PLUGIN_NAME,
+    enforce: "pre",
     transform: (code, id) => {
-      if (!TEMPLATE_LAYOUT_REGEX.test(code)) {
+      if (!templateRegExp.test(code)) {
         return;
       }
-      return code.replace(TEMPLATE_LAYOUT_REGEX, (_, __, layoutName) => {
+      return code.replace(templateRegExp, (_, layoutName) => {
         const isTypeScript = TYPESCRIPT_REGEX.test(code);
-        const importPath = layoutPath(layoutName);
-        debug.layout(`Resolved layout "${layoutName}":`, {
+        const layouts = layoutName?.toString()?.replaceAll(" ", "").split(",") ?? [defaultLayoutName];
+        const importName = (i) => `__hybridly_layout_${i}`;
+        const exports = layouts.map((_2, i) => importName(i));
+        const imports = layouts.reduce((imports2, layoutName2, i) => `
+					${imports2}
+					import ${importName(i)} from '${resolveLayoutPath(layoutName2)}';
+				`, "").trim();
+        debug.layout(`Resolved layouts "${layouts.join(", ")}":`, {
           sourceFile: id,
-          importPath
+          layouts,
+          imports
         });
         return `
 					<script${isTypeScript ? ' lang="ts"' : ""}>
-					import layout from '${importPath}'
-					export default { layout }
+					${imports}
+					export default { layout: [${exports.join(", ")}] }
 					<\/script>
 					<template>
 				`;
@@ -48,42 +132,45 @@ const layout = (options = {}) => {
   };
 };
 
-function getClientCode(routes) {
+function getRouterClientCode(routing) {
   return `
 		if (typeof window !== 'undefined') {
 			window.hybridly = {
-				routes: ${JSON.stringify(routes)}
+				routing: ${JSON.stringify(routing)}
 			}
-	
+
 			if (import.meta.hot) {
-				import.meta.hot.on('${ROUTER_HMR_UPDATE_ROUTE}', (routes) => {
-					window.dispatchEvent(
-						new CustomEvent('hybridly:routes', { detail: routes })
-					)
+				import.meta.hot.on('${ROUTING_HMR_UPDATE_ROUTING}', (routing) => {
+					window.dispatchEvent(new CustomEvent('hybridly:routing', { detail: routing }))
 				})
+
+				import.meta.hot.send('${ROUTING_HMR_QUERY_UPDATE_ROUTING}')
 			}
 		}
  `;
 }
 
 const shell = promisify(exec);
-async function fetchRoutesFromArtisan(options) {
-  const php = options.php ?? "php";
-  const result = await shell(`${php} artisan hybridly:routes`);
-  const routes = JSON.parse(result.stdout);
-  write(options, routes);
-  return routes;
+async function fetchRoutingFromArtisan(options) {
+  try {
+    const php = options.php ?? "php";
+    const result = await shell(`${php} artisan hybridly:routes`);
+    const routing = JSON.parse(result.stdout);
+    write$1(options, routing);
+    return routing;
+  } catch {
+  }
 }
 
-const write = debounce(1e3, writeDefinitions, { atBegin: true });
-async function writeDefinitions(options, collection) {
-  collection ?? (collection = await fetchRoutesFromArtisan(options));
-  if (options.dts === false) {
+const write$1 = debounce(1e3, writeDefinitions, { atBegin: true });
+async function writeDefinitions(options, routing) {
+  routing ?? (routing = await fetchRoutingFromArtisan(options));
+  if (options.dts === false || !routing) {
     return;
   }
-  debug.router("Writing types for route collection:", collection);
-  const target = path.resolve(options.dts ?? "resources/types/routes.d.ts");
-  const routes = Object.fromEntries(Object.entries(collection.routes).map(([key, route]) => {
+  debug.router("Writing types for routing:", routing);
+  const target = path.resolve(options.dts ?? ".hybridly/routes.d.ts");
+  const routes = Object.fromEntries(Object.entries(routing.routes).map(([key, route]) => {
     const bindings = route.bindings ? Object.fromEntries(Object.entries(route.bindings).map(([key2]) => [key2, "__key_placeholder__"])) : void 0;
     return [key, {
       ...route.uri ? { uri: route.uri } : {},
@@ -92,7 +179,8 @@ async function writeDefinitions(options, collection) {
       ...route.bindings ? { bindings } : {}
     }];
   }));
-  const definitions = generateDefinitions().replace("__URL__", collection?.url ?? "").replace("__ROUTES__", JSON.stringify(routes).replaceAll('"__key_placeholder__"', "any"));
+  const definitions = generateDefinitions().replace("__URL__", routing?.url ?? "").replace("__ROUTES__", JSON.stringify(routes).replaceAll('"__key_placeholder__"', "any"));
+  fs.mkdirSync(path.dirname(target), { recursive: true });
   fs.writeFileSync(target, definitions, { encoding: "utf-8" });
 }
 function generateDefinitions() {
@@ -101,7 +189,7 @@ function generateDefinitions() {
 // Modifications will be discarded
 // It is recommended to add it in your .gitignore
 
-declare module 'hybridly/vue' {
+declare module 'hybridly' {
 	export interface GlobalRouteCollection {
 		url: '__URL__'
 		routes: __ROUTES__
@@ -111,46 +199,52 @@ declare module 'hybridly/vue' {
 export {}`;
 }
 
-const router = (options = {}) => {
+const router = (options, config) => {
   const resolved = {
     php: "php",
-    dts: "resources/types/routes.d.ts",
+    dts: ".hybridly/routes.d.ts",
     watch: [
       /routes\/.*\.php/
     ],
     ...options
   };
-  let previousRoutes;
+  let routingBeforeUpdate;
+  async function sendRoutingUpdate(server, force = false) {
+    const routing = await fetchRoutingFromArtisan(resolved) ?? routingBeforeUpdate;
+    if (force || JSON.stringify(routing) !== JSON.stringify(routingBeforeUpdate)) {
+      debug.router("Updating routes via HMR:", routing);
+      server.ws.send({
+        type: "custom",
+        event: ROUTING_HMR_UPDATE_ROUTING,
+        data: routing
+      });
+      write$1(resolved);
+      routingBeforeUpdate = routing;
+    }
+  }
   return {
-    name: ROUTER_PLUGIN_NAME,
+    name: ROUTING_PLUGIN_NAME,
     configureServer(server) {
-      write(resolved);
+      write$1(resolved);
+      server.ws.on(ROUTING_HMR_QUERY_UPDATE_ROUTING, () => {
+        sendRoutingUpdate(server, true);
+      });
       server.watcher.on("change", async (path) => {
         if (!resolved.watch.some((regex) => regex.test(path))) {
           return;
         }
-        const routes = await fetchRoutesFromArtisan(resolved);
-        if (JSON.stringify(routes) !== JSON.stringify(previousRoutes)) {
-          debug.router("Updating routes via HMR:", routes);
-          server.ws.send({
-            type: "custom",
-            event: ROUTER_HMR_UPDATE_ROUTE,
-            data: routes
-          });
-          write(resolved);
-          previousRoutes = routes;
-        }
+        sendRoutingUpdate(server);
       });
     },
     resolveId(id) {
-      if (id === ROUTER_VIRTUAL_MODULE_ID) {
-        return RESOLVED_ROUTER_VIRTUAL_MODULE_ID;
+      if (id === ROUTING_VIRTUAL_MODULE_ID) {
+        return RESOLVED_ROUTING_VIRTUAL_MODULE_ID;
       }
     },
     async load(id) {
-      if (id === RESOLVED_ROUTER_VIRTUAL_MODULE_ID) {
-        const routes = await fetchRoutesFromArtisan(resolved);
-        return getClientCode(routes);
+      if (id === RESOLVED_ROUTING_VIRTUAL_MODULE_ID) {
+        const routing = await fetchRoutingFromArtisan(resolved);
+        return getRouterClientCode(routing);
       }
     },
     async handleHotUpdate(ctx) {
@@ -159,15 +253,231 @@ const router = (options = {}) => {
       }
     },
     transform() {
-      write(resolved);
+      write$1(resolved);
     }
   };
 };
 
-function plugin(options = {}) {
+function getRunOptions(options) {
+  if (options.run === false) {
+    return [];
+  }
+  return [
+    {
+      name: "Generate TypeScript types",
+      run: ["php", "artisan", "hybridly:types"],
+      pattern: [
+        "(app|src)/**/*Data.php",
+        "(app|src)/**/Enums/*.php",
+        "(app|src)/**/Middlewrare/HandleHybridRequests.php"
+      ]
+    },
+    {
+      name: "Generate i18n",
+      run: ["php", "artisan", "hybridly:i18n"],
+      pattern: "lang/**/*.php"
+    },
+    ...options.run ?? []
+  ];
+}
+
+function getLaravelOptions(options, config) {
+  return {
+    input: `${config.root}/application/main.ts`,
+    ...options.laravel ?? {}
+  };
+}
+
+function getAutoImportsOptions(options, config) {
+  if (options.autoImports === false) {
+    return;
+  }
+  return {
+    vueTemplate: true,
+    dts: ".hybridly/auto-imports.d.ts",
+    dirs: [
+      `${config.root}/utils`,
+      `${config.root}/composables`,
+      ...options.autoImports?.dirs ?? []
+    ],
+    imports: [
+      "vue",
+      "vue/macros",
+      "@vueuse/core",
+      "@vueuse/head",
+      {
+        "hybridly/vue": [
+          "useProperty",
+          "useTypedProperty",
+          "useProperties",
+          "useBackForward",
+          "useContext",
+          "useForm",
+          "useDialog",
+          "useHistoryState",
+          "usePaginator",
+          "defineLayout",
+          "defineLayoutProperties",
+          "registerHook"
+        ],
+        "hybridly": [
+          "router",
+          "route",
+          "current",
+          "can"
+        ]
+      }
+    ],
+    ...options.autoImports
+  };
+}
+
+function getVueComponentsOptions(options, config) {
+  if (options.vueComponents === false) {
+    return {};
+  }
+  const linkName = options.vueComponents?.linkName ?? "RouterLink";
+  const hasIcons = options?.icons !== false;
+  const customCollections = Array.isArray(options.customIcons) ? options.customIcons : options.customIcons?.collections ?? [];
+  const customResolvers = options.customResolvers ? Array.isArray(options.customResolvers) ? options.customResolvers : [options.customResolvers] : [];
+  return {
+    globs: [
+      `${config.root}/components/**/*.vue`,
+      ...config.domains ? [`${config.root}/${config.domains}/**/components/**/*.vue`] : []
+    ],
+    dts: ".hybridly/components.d.ts",
+    resolvers: [
+      ...hasIcons ? [iconsResolver({ customCollections })] : [],
+      {
+        type: "component",
+        resolve: (name) => {
+          if (name === linkName) {
+            return {
+              from: "hybridly/vue",
+              name: "RouterLink",
+              as: linkName
+            };
+          }
+        }
+      },
+      ...customResolvers
+    ]
+  };
+}
+
+function getIconsOptions(options, config) {
+  if (options.icons === false) {
+    return {};
+  }
+  const resolved = Array.isArray(options.customIcons) ? { icons: void 0, collections: options.customIcons } : options.customIcons;
+  const customIconDirectoryName = resolved?.icons ?? "icons";
+  const customCollections = Object.fromEntries(resolved?.collections?.map((collection) => [
+    collection,
+    FileSystemIconLoader(`./${config.root}/${customIconDirectoryName}/${collection}`)
+  ]) ?? []);
+  return {
+    autoInstall: true,
+    customCollections,
+    ...options.icons
+  };
+}
+
+function getVueOptions(options) {
+  if (options.vue === false) {
+    return;
+  }
+  return {
+    template: {
+      transformAssetUrls: {
+        base: null,
+        includeAbsolute: false
+      }
+    },
+    ...options.vue
+  };
+}
+
+function generateTsConfig(options, config) {
+  const tsconfig = {
+    compilerOptions: {
+      target: "esnext",
+      module: "esnext",
+      moduleResolution: "node",
+      strict: true,
+      jsx: "preserve",
+      sourceMap: true,
+      resolveJsonModule: true,
+      esModuleInterop: true,
+      allowSyntheticDefaultImports: true,
+      lib: [
+        "esnext",
+        "dom"
+      ],
+      types: [
+        "vite/client",
+        "hybridly/client",
+        ...options.icons !== false ? ["unplugin-icons/types/vue"] : []
+      ],
+      baseUrl: "..",
+      paths: {
+        "#/*": [
+          ".hybridly/*"
+        ],
+        "~/*": [
+          "./*"
+        ],
+        "@/*": [
+          `./${config.root}/*`
+        ]
+      }
+    },
+    include: [
+      `../${config.root}/**/*`,
+      "./*"
+    ],
+    exclude: [
+      "../public/**/*",
+      "../node_modules",
+      "../vendor"
+    ]
+  };
+  write(JSON.stringify(tsconfig, null, 2), "tsconfig.json");
+}
+function generateVueShims(options) {
+  if (options.shims === false) {
+    return;
+  }
+  const shims = `declare module '*.vue' {
+	import type { DefineComponent } from 'vue'
+	const component: DefineComponent<{}, {}, any>
+	export default component
+}`;
+  write(shims, "vue-shims.d.ts");
+}
+function write(data, filename) {
+  const hybridlyPath = path.resolve(process.cwd(), ".hybridly");
+  if (!fs.existsSync(hybridlyPath)) {
+    fs.mkdirSync(hybridlyPath);
+  }
+  fs.writeFileSync(path.resolve(hybridlyPath, filename), data, {
+    encoding: "utf-8"
+  });
+}
+
+async function plugin(options = {}) {
+  const config = await loadHybridlyConfig();
+  generateTsConfig(options, config);
+  generateVueShims(options);
   return [
-    options.layout !== false && layout(options.layout),
-    options.router !== false && router(options.router)
+    initialize(options, config),
+    layout(options, config),
+    router(options),
+    options.laravel !== false && laravel(getLaravelOptions(options, config)),
+    options.run !== false && run(getRunOptions(options)),
+    options.vueComponents !== false && vueComponents(getVueComponentsOptions(options, config)),
+    options.autoImports !== false && autoimport(getAutoImportsOptions(options, config)),
+    options.icons !== false && icons(getIconsOptions(options, config)),
+    options.vue !== false && vue(getVueOptions(options))
   ];
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridly/vite",
-  "version": "0.0.1-dev.3",
-  "description": "A solution to develop server-driven, client-rendered applications",
+  "version": "0.1.0-alpha.0",
+  "description": "Vite plugin for Hybridly",
   "keywords": [
     "hybridly",
     "inertiajs",
@@ -36,16 +36,23 @@
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "peerDependencies": {
-    "vue": "^3.2.33"
+    "vue": "^3.2.45"
   },
   "dependencies": {
-    "@hybridly/core": "0.0.1-dev.3",
-    "throttle-debounce": "^5.0.0"
+    "@iconify/json": "^2.2.24",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "laravel-vite-plugin": "^0.7.4",
+    "throttle-debounce": "^5.0.0",
+    "unplugin-auto-import": "^0.14.3",
+    "unplugin-icons": "^0.15.3",
+    "unplugin-vue-components": "^0.24.0",
+    "vite-plugin-run": "^0.3.2",
+    "@hybridly/core": "0.1.0-alpha.0"
   },
   "devDependencies": {
-    "rollup": "^2.79.1",
-    "vite": "^3.1.7",
-    "vue": "^3.2.40"
+    "rollup": "^3.17.1",
+    "vite": "^4.1.2",
+    "vue": "^3.2.47"
   },
   "scripts": {
     "build": "unbuild",