@hybridly/vite 0.5.6 → 0.6.0

package/dist/index.cjs

@@ -2,9 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const laravel = require('laravel-vite-plugin');
-const path = require('node:path');
 const fs = require('node:fs');
+const path = require('node:path');
+const colors = require('picocolors');
+const vite = require('vite');
+require('node:url');
+const os = require('node:os');
 const makeDebugger = require('debug');
 const localPkg = require('local-pkg');
 const node_child_process = require('node:child_process');
@@ -21,9 +24,10 @@ const vue = require('@vitejs/plugin-vue');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
-const laravel__default = /*#__PURE__*/_interopDefaultCompat(laravel);
-const path__default = /*#__PURE__*/_interopDefaultCompat(path);
 const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
+const path__default = /*#__PURE__*/_interopDefaultCompat(path);
+const colors__default = /*#__PURE__*/_interopDefaultCompat(colors);
+const os__default = /*#__PURE__*/_interopDefaultCompat(os);
 const makeDebugger__default = /*#__PURE__*/_interopDefaultCompat(makeDebugger);
 const MagicString__default = /*#__PURE__*/_interopDefaultCompat(MagicString);
 const run__default = /*#__PURE__*/_interopDefaultCompat(run);
@@ -33,6 +37,215 @@ const iconsResolver__default = /*#__PURE__*/_interopDefaultCompat(iconsResolver)
 const icons__default = /*#__PURE__*/_interopDefaultCompat(icons);
 const vue__default = /*#__PURE__*/_interopDefaultCompat(vue);
 
+function isIpv6(address) {
+  return address.family === "IPv6" || address.family === 6;
+}
+
+function determineDevelopmentEnvironmentConfigPath() {
+  const herdConfigPath = path__default.resolve(os__default.homedir(), "Library", "Application Support", "Herd", "config", "valet");
+  if (fs__default.existsSync(herdConfigPath)) {
+    return herdConfigPath;
+  }
+  return path__default.resolve(os__default.homedir(), ".config", "valet");
+}
+function resolveDevelopmentEnvironmentHost(configPath) {
+  const configFile = path__default.resolve(configPath, "config.json");
+  if (!fs__default.existsSync(configFile)) {
+    throw new Error(`Unable to find the configuration file [${configFile}]. You will need to manually specify the host in the \`detectTls\` configuration option.`);
+  }
+  const config = JSON.parse(fs__default.readFileSync(configFile, "utf-8"));
+  return `${path__default.basename(process.cwd())}.${config.tld}`;
+}
+function resolveDevelopmentEnvironmentServerConfig() {
+  const configPath = determineDevelopmentEnvironmentConfigPath();
+  const host = resolveDevelopmentEnvironmentHost(configPath);
+  const keyPath = path__default.resolve(configPath, "Certificates", `${host}.key`);
+  const certPath = path__default.resolve(configPath, "Certificates", `${host}.crt`);
+  if (!fs__default.existsSync(keyPath) || !fs__default.existsSync(certPath)) {
+    return;
+  }
+  return {
+    hmr: { host },
+    host,
+    https: {
+      key: fs__default.readFileSync(keyPath),
+      cert: fs__default.readFileSync(certPath)
+    }
+  };
+}
+function resolveEnvironmentServerConfig(env) {
+  if (!env.VITE_DEV_SERVER_KEY && !env.VITE_DEV_SERVER_CERT) {
+    return;
+  }
+  if (!fs__default.existsSync(env.VITE_DEV_SERVER_KEY) || !fs__default.existsSync(env.VITE_DEV_SERVER_CERT)) {
+    throw new Error(`Unable to find the certificate files specified in your environment. Ensure you have correctly configured VITE_DEV_SERVER_KEY: [${env.VITE_DEV_SERVER_KEY}] and VITE_DEV_SERVER_CERT: [${env.VITE_DEV_SERVER_CERT}].`);
+  }
+  const host = resolveHostFromEnv(env);
+  return {
+    hmr: { host },
+    host,
+    https: {
+      key: fs__default.readFileSync(env.VITE_DEV_SERVER_KEY),
+      cert: fs__default.readFileSync(env.VITE_DEV_SERVER_CERT)
+    }
+  };
+}
+function resolveHostFromEnv(env) {
+  if (env.VITE_DEV_SERVER_KEY) {
+    return env.VITE_DEV_SERVER_KEY;
+  }
+  try {
+    return new URL(env.APP_URL).host;
+  } catch {
+    throw new Error(`Unable to determine the host from the environment's APP_URL: [${env.APP_URL}].`);
+  }
+}
+
+let exitHandlersBound = false;
+function laravel(options, hybridlyConfig) {
+  let viteDevServerUrl;
+  let resolvedConfig;
+  let userConfig;
+  const publicDirectory = "public";
+  const buildDirectory = "build";
+  const hotFile = path__default.join(publicDirectory, "hot");
+  return {
+    name: "hybridly:laravel",
+    enforce: "post",
+    config: (config, { command, mode }) => {
+      userConfig = config;
+      const ssr = !!userConfig.build?.ssr;
+      const env = vite.loadEnv(mode, userConfig.envDir || process.cwd(), "");
+      const assetUrl = env.ASSET_URL ?? "";
+      const base = `${assetUrl + (!assetUrl.endsWith("/") ? "/" : "") + buildDirectory}/`;
+      const serverConfig = command === "serve" ? resolveEnvironmentServerConfig(env) ?? resolveDevelopmentEnvironmentServerConfig() : void 0;
+      ensureCommandShouldRunInEnvironment(command, env);
+      return {
+        base: userConfig.base ?? (command === "build" ? base : ""),
+        publicDir: userConfig.publicDir ?? false,
+        build: {
+          manifest: ssr === true ? false : userConfig.build?.manifest ?? "manifest.json",
+          outDir: userConfig.build?.outDir ?? path__default.join(publicDirectory, buildDirectory),
+          rollupOptions: {
+            input: resolveInput(config, hybridlyConfig)
+          },
+          assetsInlineLimit: userConfig.build?.assetsInlineLimit ?? 0
+        },
+        server: {
+          origin: userConfig.server?.origin ?? "__laravel_vite_placeholder__",
+          ...process.env.LARAVEL_SAIL ? {
+            host: userConfig.server?.host ?? "0.0.0.0",
+            port: userConfig.server?.port ?? (env.VITE_PORT ? parseInt(env.VITE_PORT) : 5173),
+            strictPort: userConfig.server?.strictPort ?? true
+          } : void 0,
+          ...serverConfig ? {
+            host: userConfig.server?.host ?? serverConfig.host,
+            hmr: userConfig.server?.hmr === false ? false : {
+              ...serverConfig.hmr,
+              ...userConfig.server?.hmr === true ? {} : userConfig.server?.hmr
+            },
+            https: userConfig.server?.https ?? serverConfig.https
+          } : void 0
+        }
+      };
+    },
+    configResolved(config) {
+      resolvedConfig = config;
+    },
+    transform(code) {
+      if (resolvedConfig.command === "serve") {
+        return code.replace(/__laravel_vite_placeholder__/g, viteDevServerUrl);
+      }
+    },
+    configureServer(server) {
+      const envDir = resolvedConfig.envDir || process.cwd();
+      const appUrl = vite.loadEnv(resolvedConfig.mode, envDir, "APP_URL").APP_URL ?? "undefined";
+      server.httpServer?.once("listening", () => {
+        const address = server.httpServer?.address();
+        const isAddressInfo = (x) => typeof x === "object";
+        if (isAddressInfo(address)) {
+          viteDevServerUrl = resolveDevServerUrl(address, server.config, userConfig);
+          fs__default.writeFileSync(hotFile, viteDevServerUrl);
+          if (!hybridlyConfig.versions) {
+            return;
+          }
+          let registered = `${colors__default.bold(hybridlyConfig.components.views.length)} ${colors__default.dim("views")}, `;
+          registered += `${colors__default.bold(hybridlyConfig.components.components.length)} ${colors__default.dim("components")}, `;
+          registered += `${colors__default.bold(hybridlyConfig.components.layouts.length)} ${colors__default.dim("layouts")}, `;
+          registered += `${colors__default.bold(hybridlyConfig.components.directories.length)} ${colors__default.dim("directories")}`;
+          const latest = hybridlyConfig.versions.is_latest ? "" : colors__default.dim(`(${colors__default.yellow(`${hybridlyConfig.versions.latest} is available`)})`);
+          let version = `${colors__default.yellow(`v${hybridlyConfig.versions.composer}`)} ${colors__default.dim("(composer)")}, `;
+          version += `${colors__default.yellow(`v${hybridlyConfig.versions.npm}`)} ${colors__default.dim("(npm)")}`;
+          version += ` \u2014 ${colors__default.yellow("this may lead to undefined behavior")}`;
+          setTimeout(() => {
+            server.config.logger.info(`
+  ${colors__default.magenta(`${colors__default.bold("HYBRIDLY")} v${hybridlyConfig.versions.composer}`)}  ${latest}`);
+            server.config.logger.info("");
+            server.config.logger.info(`  ${colors__default.green("\u279C")}  ${colors__default.bold("URL")}: ${colors__default.cyan(hybridlyConfig.routing.url)}`);
+            server.config.logger.info(`  ${colors__default.green("\u279C")}  ${colors__default.bold("Registered")}: ${registered}`);
+            if (hybridlyConfig.versions.composer !== hybridlyConfig.versions.npm) {
+              server.config.logger.info(`  ${colors__default.yellow("\u279C")}  ${colors__default.bold("Version mismatch")}: ${version}`);
+            }
+          }, 100);
+        }
+      });
+      if (!exitHandlersBound) {
+        let clean = function() {
+          if (fs__default.existsSync(hotFile)) {
+            fs__default.rmSync(hotFile);
+          }
+        };
+        process.on("exit", clean);
+        process.on("SIGINT", () => process.exit());
+        process.on("SIGTERM", () => process.exit());
+        process.on("SIGHUP", () => process.exit());
+        exitHandlersBound = true;
+      }
+      return () => server.middlewares.use((req, res, next) => {
+        if (req.url === "/index.html") {
+          res.writeHead(302, { Location: appUrl });
+          res.end();
+        }
+        next();
+      });
+    }
+  };
+}
+function ensureCommandShouldRunInEnvironment(command, env) {
+  if (command === "build" || env.LARAVEL_BYPASS_ENV_CHECK === "1") {
+    return;
+  }
+  if (typeof env.LARAVEL_VAPOR !== "undefined") {
+    throw new TypeError("You should not run the Vite HMR server on Vapor. You should build your assets for production instead. To disable this ENV check you may set LARAVEL_BYPASS_ENV_CHECK=1");
+  }
+  if (typeof env.LARAVEL_FORGE !== "undefined") {
+    throw new TypeError("You should not run the Vite HMR server in your Forge deployment script. You should build your assets for production instead. To disable this ENV check you may set LARAVEL_BYPASS_ENV_CHECK=1");
+  }
+  if (typeof env.LARAVEL_ENVOYER !== "undefined") {
+    throw new TypeError("You should not run the Vite HMR server in your Envoyer hook. You should build your assets for production instead. To disable this ENV check you may set LARAVEL_BYPASS_ENV_CHECK=1");
+  }
+  if (typeof env.CI !== "undefined") {
+    throw new TypeError("You should not run the Vite HMR server in CI environments. You should build your assets for production instead. To disable this ENV check you may set LARAVEL_BYPASS_ENV_CHECK=1");
+  }
+}
+function resolveInput(userConfig, hybridlyConfig, ssr) {
+  return userConfig.build?.rollupOptions?.input ?? hybridlyConfig.architecture.application_main_path;
+}
+function resolveDevServerUrl(address, config, userConfig) {
+  const configHmrProtocol = typeof config.server.hmr === "object" ? config.server.hmr.protocol : null;
+  const clientProtocol = configHmrProtocol ? configHmrProtocol === "wss" ? "https" : "http" : null;
+  const serverProtocol = config.server.https ? "https" : "http";
+  const protocol = clientProtocol ?? serverProtocol;
+  const configHmrHost = typeof config.server.hmr === "object" ? config.server.hmr.host : null;
+  const configHost = typeof config.server.host === "string" ? config.server.host : null;
+  const sailHost = process.env.LARAVEL_SAIL && !userConfig.server?.host ? "localhost" : null;
+  const serverAddress = isIpv6(address) ? `[${address.address}]` : address.address;
+  const host = configHmrHost ?? sailHost ?? configHost ?? serverAddress;
+  const configHmrClientPort = typeof config.server.hmr === "object" ? config.server.hmr.clientPort : null;
+  const port = configHmrClientPort ?? address.port;
+  return `${protocol}://${host}:${port}`;
+}
+
 const LAYOUT_PLUGIN_NAME = "vite:hybridly:layout";
 const CONFIG_PLUGIN_NAME = "vite:hybridly:config";
 const CONFIG_VIRTUAL_MODULE_ID = "virtual:hybridly/config";
@@ -45,6 +258,14 @@ const debug = {
 function isPackageInstalled(name, paths = [process.cwd()]) {
   return localPkg.isPackageExists(name, { paths });
 }
+function importPackage(name, paths = [process.cwd()]) {
+  const mod = localPkg.resolveModule(name, { paths });
+  if (!mod) {
+    console.warn(`Could not resolve package [${name}]`);
+    return;
+  }
+  return localPkg.importModule(mod);
+}
 function toKebabCase(key) {
   const result = key.replace(/([A-Z])/g, " $1").trim();
   return result.split(" ").join("-").toLowerCase();
@@ -55,7 +276,7 @@ function generateTsConfig(options, config) {
     compilerOptions: {
       target: "esnext",
       module: "esnext",
-      moduleResolution: "node",
+      moduleResolution: "bundler",
       strict: true,
       jsx: "preserve",
       sourceMap: true,
@@ -81,7 +302,7 @@ function generateTsConfig(options, config) {
           "./*"
         ],
         "@/*": [
-          `./${config.architecture.root}/*`
+          `./${config.architecture.root_directory}/*`
         ]
       }
     },
@@ -89,7 +310,7 @@ function generateTsConfig(options, config) {
       ...config.components.views.map(({ path: path2 }) => `../${path2}`),
       ...config.components.layouts.map(({ path: path2 }) => `../${path2}`),
       ...config.components.components.map(({ path: path2 }) => `../${path2}`),
-      `../${config.architecture.root}/**/*`,
+      `../${config.architecture.root_directory}/**/*`,
       "../app/**/*",
       "../src/**/*",
       "./php-types.d.ts",
@@ -101,8 +322,6 @@ function generateTsConfig(options, config) {
     ],
     exclude: [
       "../public/**/*",
-      "../node_modules",
-      "../vendor",
       ...options.tsconfig?.exclude ?? []
     ]
   };
@@ -181,7 +400,7 @@ async function loadConfiguration(options) {
   }
 }
 
-function getClientCode(config) {
+function getClientCode$1(config) {
   const paths = config.components.views.map(({ path }) => `"~/${path}"`).join(",");
   return `
 		import { initializeHybridly as init } from 'hybridly/vue'
@@ -207,7 +426,7 @@ const initialize = (options, config) => {
       return {
         resolve: {
           alias: {
-            "@": path__default.join(process.cwd(), config.architecture.root),
+            "@": path__default.join(process.cwd(), config.architecture.root_directory),
             "#": path__default.join(process.cwd(), ".hybridly"),
             "~": path__default.join(process.cwd())
           }
@@ -253,7 +472,7 @@ const initialize = (options, config) => {
     },
     async load(id) {
       if (id === RESOLVED_CONFIG_VIRTUAL_MODULE_ID) {
-        return getClientCode(config);
+        return getClientCode$1(config);
       }
     },
     // Denies HMR for `.hybridly` content, it causes unwanted reloads
@@ -347,13 +566,6 @@ function getRunOptions(options) {
   ];
 }
 
-function getLaravelOptions(options, config) {
-  return {
-    input: `${config.architecture.root}/application/main.ts`,
-    ...options.laravel ?? {}
-  };
-}
-
 const HybridlyImports = {
   "hybridly/vue": [
     "useProperty",
@@ -402,8 +614,8 @@ function getAutoImportsOptions(options, config) {
       vueTemplate: true,
       dts: ".hybridly/auto-imports.d.ts",
       dirs: [
-        `${config.architecture.root}/utils`,
-        `${config.architecture.root}/composables`,
+        `${config.architecture.root_directory}/utils`,
+        `${config.architecture.root_directory}/composables`,
         ...config.components.directories.map((directory) => `${directory}/**/*.ts`)
       ],
       imports: [
@@ -419,21 +631,7 @@ function getAutoImportsOptions(options, config) {
   );
 }
 
-function HybridlyResolver(linkName = "RouterLink") {
-  return {
-    type: "component",
-    resolve: (name) => {
-      if (name === linkName) {
-        return {
-          from: "hybridly/vue",
-          name: "RouterLink",
-          as: linkName
-        };
-      }
-    }
-  };
-}
-function getVueComponentsOptions(options, config) {
+async function getVueComponentsOptions(options, config) {
   if (options.vueComponents === false) {
     return {};
   }
@@ -441,16 +639,18 @@ function getVueComponentsOptions(options, config) {
   const customCollections = Array.isArray(options.customIcons) ? options.customIcons : options.customIcons?.collections ?? [];
   const overrideResolvers = options.overrideResolvers ? Array.isArray(options.overrideResolvers) ? options.overrideResolvers : [options.overrideResolvers] : false;
   const hasHeadlessUI = isPackageInstalled("@headlessui/vue");
+  const hasRadix = isPackageInstalled("radix-vue");
   return utils.merge(
     {
       dirs: [
-        `./${config.architecture.root}/components`
+        `./${config.architecture.root_directory}/${config.architecture.components_directory}`
       ],
       directoryAsNamespace: true,
       dts: ".hybridly/components.d.ts",
       resolvers: overrideResolvers || [
         ...hasIcons ? [iconsResolver__default({ customCollections })] : [],
         ...hasHeadlessUI ? [resolvers.HeadlessUiResolver({ prefix: options?.vueComponents?.headlessUiPrefix ?? "Headless" })] : [],
+        ...hasRadix ? [await RadixResolver(options?.vueComponents?.radixPrefix)] : [],
         ProvidedComponentListResolver(config),
         HybridlyResolver(options.vueComponents?.linkName)
       ]
@@ -459,6 +659,24 @@ function getVueComponentsOptions(options, config) {
     { overwriteArray: false }
   );
 }
+async function RadixResolver(prefix = "Radix") {
+  const radix = await importPackage("radix-vue/resolver");
+  return radix.default({ prefix });
+}
+function HybridlyResolver(linkName = "RouterLink") {
+  return {
+    type: "component",
+    resolve: (name) => {
+      if (name === linkName) {
+        return {
+          from: "hybridly/vue",
+          name: "RouterLink",
+          as: linkName
+        };
+      }
+    }
+  };
+}
 function ProvidedComponentListResolver(config) {
   function resolveComponentPath(name) {
     const kebabName = toKebabCase(name);
@@ -485,7 +703,7 @@ function getIconsOptions(options, config) {
   const customIconDirectoryName = resolved?.icons ?? "icons";
   const customCollections = Object.fromEntries(resolved?.collections?.map((collection) => [
     collection,
-    loaders.FileSystemIconLoader(`./${config.architecture.root}/${customIconDirectoryName}/${collection}`)
+    loaders.FileSystemIconLoader(`./${config.architecture.root_directory}/${customIconDirectoryName}/${collection}`)
   ]) ?? []);
   return {
     autoInstall: true,
@@ -548,18 +766,121 @@ function killSwitch() {
   };
 }
 
+function getClientCode() {
+  const style = `
+		.local-build {
+			position: fixed;
+			bottom: 1rem;
+			left: 1rem;
+			z-index: 50;
+			display: inline-flex;
+			max-width: 26rem;
+			align-items: center;
+			background-color: rgba(0, 0, 0, 0.9);
+			padding: 0.75rem;
+			font-size: 0.75rem;
+			color: #8C8C8C;
+			transition: opacity 0.3s;
+		}
+
+		.local-build:hover {
+			opacity: 0.1;
+		}
+
+		.local-build .icon {
+			margin-right: 0.5rem;
+			height: 1.25rem;
+			width: 1.25rem;
+			fill: currentColor;
+		}
+
+		.local-build .content {
+			display: inline-flex;
+			flex-direction: column;
+			gap: 0.5rem;
+		}
+
+		.local-build .title {
+			font-weight: 500;
+		}
+	`;
+  const html = `
+		<div class="local-build">
+		<svg viewBox="0 0 24 24" width="1.2em" height="1.2em" class="icon"><path fill="currentColor" d="M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8"></path></svg>
+			<span class="content">
+					<span class="title">This is a local production build. Changes will not be reflected.</span>
+			</span>
+		</div>
+		`;
+  return `
+		;(function() {
+			const style = document.createElement('style')
+			style.innerHTML = \`${style}\`
+			document.head.appendChild(style)
+
+			const html = document.createElement('div')
+			html.innerHTML = \`${html}\`
+			document.body.appendChild(html)
+			html.addEventListener('click', () => html.remove())
+		})()
+	`;
+}
+
+const LOCAL_BUILD_VIRTUAL_ID = "virtual:hybridly/local-build";
+const RESOLVED_LOCAL_BUILD_VIRTUAL_ID = `\0${LOCAL_BUILD_VIRTUAL_ID}`;
+function warnOnLocalBuilds() {
+  let shouldDisplayWarning = false;
+  return {
+    name: "vite:hybridly:local-build",
+    enforce: "pre",
+    apply: "build",
+    config(config, { mode }) {
+      const env = vite.loadEnv(mode, config.envDir ?? process.cwd(), "");
+      shouldDisplayWarning = env.APP_ENV === "local";
+    },
+    async resolveId(id) {
+      if (!shouldDisplayWarning) {
+        return;
+      }
+      if (id === LOCAL_BUILD_VIRTUAL_ID) {
+        return RESOLVED_LOCAL_BUILD_VIRTUAL_ID;
+      }
+    },
+    async load(id) {
+      if (!shouldDisplayWarning) {
+        return;
+      }
+      if (id === RESOLVED_LOCAL_BUILD_VIRTUAL_ID) {
+        return getClientCode();
+      }
+    },
+    transform(code, id) {
+      if (!shouldDisplayWarning) {
+        return;
+      }
+      if (!id.endsWith(CONFIG_VIRTUAL_MODULE_ID)) {
+        return;
+      }
+      code = `${code}
+import '${LOCAL_BUILD_VIRTUAL_ID}'`;
+      return code;
+    }
+  };
+}
+
 async function plugin(options = {}) {
   const config = await loadConfiguration(options);
   return [
     initialize(options, config),
     layout(options, config),
-    options.laravel !== false && laravel__default(getLaravelOptions(options, config)),
+    options.laravel !== false && laravel(options, config),
     options.run !== false && run__default(getRunOptions(options)),
-    options.vueComponents !== false && vueComponents__default(getVueComponentsOptions(options, config)),
+    options.vueComponents !== false && vueComponents__default(await getVueComponentsOptions(options, config)),
     options.autoImports !== false && autoimport__default(getAutoImportsOptions(options, config)),
     options.icons !== false && icons__default(getIconsOptions(options, config)),
     options.vue !== false && vue__default(getVueOptions(options)),
-    options.killSwitch !== false && killSwitch()
+    options.killSwitch !== false && killSwitch(),
+    options.warnOnLocalBuilds !== false && warnOnLocalBuilds()
   ];
 }
 

package/dist/index.d.cts

@@ -2,7 +2,6 @@ import { Plugin } from 'vite';
 import { DynamicConfiguration } from '@hybridly/core';
 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';
@@ -22,8 +21,6 @@ type CustomIconOptions = string[] | {
     collections?: string[];
 };
 
-type LaravelOptions = Exclude<Parameters<typeof laravel>[0], string | string[]>;
-
 type VueOptions = Parameters<typeof vue>[0];
 
 type VueComponentsOptions = Parameters<typeof vueComponents>[0] & {
@@ -31,6 +28,8 @@ type VueComponentsOptions = Parameters<typeof vueComponents>[0] & {
     linkName?: string;
     /** Custom prefix for Headless UI components. */
     headlessUiPrefix?: string;
+    /** Custom prefix for Radix components. */
+    radixPrefix?: string;
 };
 type CustomResolvers = ComponentResolver | ComponentResolver[];
 type CustomComponentsOptions = VueComponentsOptions;
@@ -46,12 +45,12 @@ declare function HybridlyResolver(linkName?: string): {
 interface ViteOptions {
     /** Path to the PHP executable. */
     php?: string;
+    /** Disables the Laravel integration. Useful if you prefer to use the official one. */
+    laravel?: false;
     /** Options for the layout plugin. */
     layout?: LayoutOptions;
     /** 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. */
@@ -70,6 +69,8 @@ interface ViteOptions {
     killSwitch?: boolean;
     /** Extra `tsconfig.json` options. */
     tsconfig?: TsConfigOptions;
+    /** Warns when displaying local builds. */
+    warnOnLocalBuilds?: boolean;
 }
 interface LayoutOptions {
     /** Custom RegExp for parsing the template string. */

package/dist/index.d.mts

@@ -2,7 +2,6 @@ import { Plugin } from 'vite';
 import { DynamicConfiguration } from '@hybridly/core';
 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';
@@ -22,8 +21,6 @@ type CustomIconOptions = string[] | {
     collections?: string[];
 };
 
-type LaravelOptions = Exclude<Parameters<typeof laravel>[0], string | string[]>;
-
 type VueOptions = Parameters<typeof vue>[0];
 
 type VueComponentsOptions = Parameters<typeof vueComponents>[0] & {
@@ -31,6 +28,8 @@ type VueComponentsOptions = Parameters<typeof vueComponents>[0] & {
     linkName?: string;
     /** Custom prefix for Headless UI components. */
     headlessUiPrefix?: string;
+    /** Custom prefix for Radix components. */
+    radixPrefix?: string;
 };
 type CustomResolvers = ComponentResolver | ComponentResolver[];
 type CustomComponentsOptions = VueComponentsOptions;
@@ -46,12 +45,12 @@ declare function HybridlyResolver(linkName?: string): {
 interface ViteOptions {
     /** Path to the PHP executable. */
     php?: string;
+    /** Disables the Laravel integration. Useful if you prefer to use the official one. */
+    laravel?: false;
     /** Options for the layout plugin. */
     layout?: LayoutOptions;
     /** 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. */
@@ -70,6 +69,8 @@ interface ViteOptions {
     killSwitch?: boolean;
     /** Extra `tsconfig.json` options. */
     tsconfig?: TsConfigOptions;
+    /** Warns when displaying local builds. */
+    warnOnLocalBuilds?: boolean;
 }
 interface LayoutOptions {
     /** Custom RegExp for parsing the template string. */

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import { Plugin } from 'vite';
 import { DynamicConfiguration } from '@hybridly/core';
 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';
@@ -22,8 +21,6 @@ type CustomIconOptions = string[] | {
     collections?: string[];
 };
 
-type LaravelOptions = Exclude<Parameters<typeof laravel>[0], string | string[]>;
-
 type VueOptions = Parameters<typeof vue>[0];
 
 type VueComponentsOptions = Parameters<typeof vueComponents>[0] & {
@@ -31,6 +28,8 @@ type VueComponentsOptions = Parameters<typeof vueComponents>[0] & {
     linkName?: string;
     /** Custom prefix for Headless UI components. */
     headlessUiPrefix?: string;
+    /** Custom prefix for Radix components. */
+    radixPrefix?: string;
 };
 type CustomResolvers = ComponentResolver | ComponentResolver[];
 type CustomComponentsOptions = VueComponentsOptions;
@@ -46,12 +45,12 @@ declare function HybridlyResolver(linkName?: string): {
 interface ViteOptions {
     /** Path to the PHP executable. */
     php?: string;
+    /** Disables the Laravel integration. Useful if you prefer to use the official one. */
+    laravel?: false;
     /** Options for the layout plugin. */
     layout?: LayoutOptions;
     /** 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. */
@@ -70,6 +69,8 @@ interface ViteOptions {
     killSwitch?: boolean;
     /** Extra `tsconfig.json` options. */
     tsconfig?: TsConfigOptions;
+    /** Warns when displaying local builds. */
+    warnOnLocalBuilds?: boolean;
 }
 interface LayoutOptions {
     /** Custom RegExp for parsing the template string. */

package/dist/index.mjs

@@ -1,8 +1,11 @@
-import laravel from 'laravel-vite-plugin';
-import path from 'node:path';
 import fs from 'node:fs';
+import path from 'node:path';
+import colors from 'picocolors';
+import { loadEnv } from 'vite';
+import 'node:url';
+import os from 'node:os';
 import makeDebugger from 'debug';
-import { isPackageExists } from 'local-pkg';
+import { isPackageExists, resolveModule, importModule } from 'local-pkg';
 import { execSync } from 'node:child_process';
 import MagicString from 'magic-string';
 import run from 'vite-plugin-run';
@@ -15,6 +18,215 @@ import icons from 'unplugin-icons/vite';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 import vue from '@vitejs/plugin-vue';
 
+function isIpv6(address) {
+  return address.family === "IPv6" || address.family === 6;
+}
+
+function determineDevelopmentEnvironmentConfigPath() {
+  const herdConfigPath = path.resolve(os.homedir(), "Library", "Application Support", "Herd", "config", "valet");
+  if (fs.existsSync(herdConfigPath)) {
+    return herdConfigPath;
+  }
+  return path.resolve(os.homedir(), ".config", "valet");
+}
+function resolveDevelopmentEnvironmentHost(configPath) {
+  const configFile = path.resolve(configPath, "config.json");
+  if (!fs.existsSync(configFile)) {
+    throw new Error(`Unable to find the configuration file [${configFile}]. You will need to manually specify the host in the \`detectTls\` configuration option.`);
+  }
+  const config = JSON.parse(fs.readFileSync(configFile, "utf-8"));
+  return `${path.basename(process.cwd())}.${config.tld}`;
+}
+function resolveDevelopmentEnvironmentServerConfig() {
+  const configPath = determineDevelopmentEnvironmentConfigPath();
+  const host = resolveDevelopmentEnvironmentHost(configPath);
+  const keyPath = path.resolve(configPath, "Certificates", `${host}.key`);
+  const certPath = path.resolve(configPath, "Certificates", `${host}.crt`);
+  if (!fs.existsSync(keyPath) || !fs.existsSync(certPath)) {
+    return;
+  }
+  return {
+    hmr: { host },
+    host,
+    https: {
+      key: fs.readFileSync(keyPath),
+      cert: fs.readFileSync(certPath)
+    }
+  };
+}
+function resolveEnvironmentServerConfig(env) {
+  if (!env.VITE_DEV_SERVER_KEY && !env.VITE_DEV_SERVER_CERT) {
+    return;
+  }
+  if (!fs.existsSync(env.VITE_DEV_SERVER_KEY) || !fs.existsSync(env.VITE_DEV_SERVER_CERT)) {
+    throw new Error(`Unable to find the certificate files specified in your environment. Ensure you have correctly configured VITE_DEV_SERVER_KEY: [${env.VITE_DEV_SERVER_KEY}] and VITE_DEV_SERVER_CERT: [${env.VITE_DEV_SERVER_CERT}].`);
+  }
+  const host = resolveHostFromEnv(env);
+  return {
+    hmr: { host },
+    host,
+    https: {
+      key: fs.readFileSync(env.VITE_DEV_SERVER_KEY),
+      cert: fs.readFileSync(env.VITE_DEV_SERVER_CERT)
+    }
+  };
+}
+function resolveHostFromEnv(env) {
+  if (env.VITE_DEV_SERVER_KEY) {
+    return env.VITE_DEV_SERVER_KEY;
+  }
+  try {
+    return new URL(env.APP_URL).host;
+  } catch {
+    throw new Error(`Unable to determine the host from the environment's APP_URL: [${env.APP_URL}].`);
+  }
+}
+
+let exitHandlersBound = false;
+function laravel(options, hybridlyConfig) {
+  let viteDevServerUrl;
+  let resolvedConfig;
+  let userConfig;
+  const publicDirectory = "public";
+  const buildDirectory = "build";
+  const hotFile = path.join(publicDirectory, "hot");
+  return {
+    name: "hybridly:laravel",
+    enforce: "post",
+    config: (config, { command, mode }) => {
+      userConfig = config;
+      const ssr = !!userConfig.build?.ssr;
+      const env = loadEnv(mode, userConfig.envDir || process.cwd(), "");
+      const assetUrl = env.ASSET_URL ?? "";
+      const base = `${assetUrl + (!assetUrl.endsWith("/") ? "/" : "") + buildDirectory}/`;
+      const serverConfig = command === "serve" ? resolveEnvironmentServerConfig(env) ?? resolveDevelopmentEnvironmentServerConfig() : void 0;
+      ensureCommandShouldRunInEnvironment(command, env);
+      return {
+        base: userConfig.base ?? (command === "build" ? base : ""),
+        publicDir: userConfig.publicDir ?? false,
+        build: {
+          manifest: ssr === true ? false : userConfig.build?.manifest ?? "manifest.json",
+          outDir: userConfig.build?.outDir ?? path.join(publicDirectory, buildDirectory),
+          rollupOptions: {
+            input: resolveInput(config, hybridlyConfig)
+          },
+          assetsInlineLimit: userConfig.build?.assetsInlineLimit ?? 0
+        },
+        server: {
+          origin: userConfig.server?.origin ?? "__laravel_vite_placeholder__",
+          ...process.env.LARAVEL_SAIL ? {
+            host: userConfig.server?.host ?? "0.0.0.0",
+            port: userConfig.server?.port ?? (env.VITE_PORT ? parseInt(env.VITE_PORT) : 5173),
+            strictPort: userConfig.server?.strictPort ?? true
+          } : void 0,
+          ...serverConfig ? {
+            host: userConfig.server?.host ?? serverConfig.host,
+            hmr: userConfig.server?.hmr === false ? false : {
+              ...serverConfig.hmr,
+              ...userConfig.server?.hmr === true ? {} : userConfig.server?.hmr
+            },
+            https: userConfig.server?.https ?? serverConfig.https
+          } : void 0
+        }
+      };
+    },
+    configResolved(config) {
+      resolvedConfig = config;
+    },
+    transform(code) {
+      if (resolvedConfig.command === "serve") {
+        return code.replace(/__laravel_vite_placeholder__/g, viteDevServerUrl);
+      }
+    },
+    configureServer(server) {
+      const envDir = resolvedConfig.envDir || process.cwd();
+      const appUrl = loadEnv(resolvedConfig.mode, envDir, "APP_URL").APP_URL ?? "undefined";
+      server.httpServer?.once("listening", () => {
+        const address = server.httpServer?.address();
+        const isAddressInfo = (x) => typeof x === "object";
+        if (isAddressInfo(address)) {
+          viteDevServerUrl = resolveDevServerUrl(address, server.config, userConfig);
+          fs.writeFileSync(hotFile, viteDevServerUrl);
+          if (!hybridlyConfig.versions) {
+            return;
+          }
+          let registered = `${colors.bold(hybridlyConfig.components.views.length)} ${colors.dim("views")}, `;
+          registered += `${colors.bold(hybridlyConfig.components.components.length)} ${colors.dim("components")}, `;
+          registered += `${colors.bold(hybridlyConfig.components.layouts.length)} ${colors.dim("layouts")}, `;
+          registered += `${colors.bold(hybridlyConfig.components.directories.length)} ${colors.dim("directories")}`;
+          const latest = hybridlyConfig.versions.is_latest ? "" : colors.dim(`(${colors.yellow(`${hybridlyConfig.versions.latest} is available`)})`);
+          let version = `${colors.yellow(`v${hybridlyConfig.versions.composer}`)} ${colors.dim("(composer)")}, `;
+          version += `${colors.yellow(`v${hybridlyConfig.versions.npm}`)} ${colors.dim("(npm)")}`;
+          version += ` \u2014 ${colors.yellow("this may lead to undefined behavior")}`;
+          setTimeout(() => {
+            server.config.logger.info(`
+  ${colors.magenta(`${colors.bold("HYBRIDLY")} v${hybridlyConfig.versions.composer}`)}  ${latest}`);
+            server.config.logger.info("");
+            server.config.logger.info(`  ${colors.green("\u279C")}  ${colors.bold("URL")}: ${colors.cyan(hybridlyConfig.routing.url)}`);
+            server.config.logger.info(`  ${colors.green("\u279C")}  ${colors.bold("Registered")}: ${registered}`);
+            if (hybridlyConfig.versions.composer !== hybridlyConfig.versions.npm) {
+              server.config.logger.info(`  ${colors.yellow("\u279C")}  ${colors.bold("Version mismatch")}: ${version}`);
+            }
+          }, 100);
+        }
+      });
+      if (!exitHandlersBound) {
+        let clean = function() {
+          if (fs.existsSync(hotFile)) {
+            fs.rmSync(hotFile);
+          }
+        };
+        process.on("exit", clean);
+        process.on("SIGINT", () => process.exit());
+        process.on("SIGTERM", () => process.exit());
+        process.on("SIGHUP", () => process.exit());
+        exitHandlersBound = true;
+      }
+      return () => server.middlewares.use((req, res, next) => {
+        if (req.url === "/index.html") {
+          res.writeHead(302, { Location: appUrl });
+          res.end();
+        }
+        next();
+      });
+    }
+  };
+}
+function ensureCommandShouldRunInEnvironment(command, env) {
+  if (command === "build" || env.LARAVEL_BYPASS_ENV_CHECK === "1") {
+    return;
+  }
+  if (typeof env.LARAVEL_VAPOR !== "undefined") {
+    throw new TypeError("You should not run the Vite HMR server on Vapor. You should build your assets for production instead. To disable this ENV check you may set LARAVEL_BYPASS_ENV_CHECK=1");
+  }
+  if (typeof env.LARAVEL_FORGE !== "undefined") {
+    throw new TypeError("You should not run the Vite HMR server in your Forge deployment script. You should build your assets for production instead. To disable this ENV check you may set LARAVEL_BYPASS_ENV_CHECK=1");
+  }
+  if (typeof env.LARAVEL_ENVOYER !== "undefined") {
+    throw new TypeError("You should not run the Vite HMR server in your Envoyer hook. You should build your assets for production instead. To disable this ENV check you may set LARAVEL_BYPASS_ENV_CHECK=1");
+  }
+  if (typeof env.CI !== "undefined") {
+    throw new TypeError("You should not run the Vite HMR server in CI environments. You should build your assets for production instead. To disable this ENV check you may set LARAVEL_BYPASS_ENV_CHECK=1");
+  }
+}
+function resolveInput(userConfig, hybridlyConfig, ssr) {
+  return userConfig.build?.rollupOptions?.input ?? hybridlyConfig.architecture.application_main_path;
+}
+function resolveDevServerUrl(address, config, userConfig) {
+  const configHmrProtocol = typeof config.server.hmr === "object" ? config.server.hmr.protocol : null;
+  const clientProtocol = configHmrProtocol ? configHmrProtocol === "wss" ? "https" : "http" : null;
+  const serverProtocol = config.server.https ? "https" : "http";
+  const protocol = clientProtocol ?? serverProtocol;
+  const configHmrHost = typeof config.server.hmr === "object" ? config.server.hmr.host : null;
+  const configHost = typeof config.server.host === "string" ? config.server.host : null;
+  const sailHost = process.env.LARAVEL_SAIL && !userConfig.server?.host ? "localhost" : null;
+  const serverAddress = isIpv6(address) ? `[${address.address}]` : address.address;
+  const host = configHmrHost ?? sailHost ?? configHost ?? serverAddress;
+  const configHmrClientPort = typeof config.server.hmr === "object" ? config.server.hmr.clientPort : null;
+  const port = configHmrClientPort ?? address.port;
+  return `${protocol}://${host}:${port}`;
+}
+
 const LAYOUT_PLUGIN_NAME = "vite:hybridly:layout";
 const CONFIG_PLUGIN_NAME = "vite:hybridly:config";
 const CONFIG_VIRTUAL_MODULE_ID = "virtual:hybridly/config";
@@ -27,6 +239,14 @@ const debug = {
 function isPackageInstalled(name, paths = [process.cwd()]) {
   return isPackageExists(name, { paths });
 }
+function importPackage(name, paths = [process.cwd()]) {
+  const mod = resolveModule(name, { paths });
+  if (!mod) {
+    console.warn(`Could not resolve package [${name}]`);
+    return;
+  }
+  return importModule(mod);
+}
 function toKebabCase(key) {
   const result = key.replace(/([A-Z])/g, " $1").trim();
   return result.split(" ").join("-").toLowerCase();
@@ -37,7 +257,7 @@ function generateTsConfig(options, config) {
     compilerOptions: {
       target: "esnext",
       module: "esnext",
-      moduleResolution: "node",
+      moduleResolution: "bundler",
       strict: true,
       jsx: "preserve",
       sourceMap: true,
@@ -63,7 +283,7 @@ function generateTsConfig(options, config) {
           "./*"
         ],
         "@/*": [
-          `./${config.architecture.root}/*`
+          `./${config.architecture.root_directory}/*`
         ]
       }
     },
@@ -71,7 +291,7 @@ function generateTsConfig(options, config) {
       ...config.components.views.map(({ path: path2 }) => `../${path2}`),
       ...config.components.layouts.map(({ path: path2 }) => `../${path2}`),
       ...config.components.components.map(({ path: path2 }) => `../${path2}`),
-      `../${config.architecture.root}/**/*`,
+      `../${config.architecture.root_directory}/**/*`,
       "../app/**/*",
       "../src/**/*",
       "./php-types.d.ts",
@@ -83,8 +303,6 @@ function generateTsConfig(options, config) {
     ],
     exclude: [
       "../public/**/*",
-      "../node_modules",
-      "../vendor",
       ...options.tsconfig?.exclude ?? []
     ]
   };
@@ -163,7 +381,7 @@ async function loadConfiguration(options) {
   }
 }
 
-function getClientCode(config) {
+function getClientCode$1(config) {
   const paths = config.components.views.map(({ path }) => `"~/${path}"`).join(",");
   return `
 		import { initializeHybridly as init } from 'hybridly/vue'
@@ -189,7 +407,7 @@ const initialize = (options, config) => {
       return {
         resolve: {
           alias: {
-            "@": path.join(process.cwd(), config.architecture.root),
+            "@": path.join(process.cwd(), config.architecture.root_directory),
             "#": path.join(process.cwd(), ".hybridly"),
             "~": path.join(process.cwd())
           }
@@ -235,7 +453,7 @@ const initialize = (options, config) => {
     },
     async load(id) {
       if (id === RESOLVED_CONFIG_VIRTUAL_MODULE_ID) {
-        return getClientCode(config);
+        return getClientCode$1(config);
       }
     },
     // Denies HMR for `.hybridly` content, it causes unwanted reloads
@@ -329,13 +547,6 @@ function getRunOptions(options) {
   ];
 }
 
-function getLaravelOptions(options, config) {
-  return {
-    input: `${config.architecture.root}/application/main.ts`,
-    ...options.laravel ?? {}
-  };
-}
-
 const HybridlyImports = {
   "hybridly/vue": [
     "useProperty",
@@ -384,8 +595,8 @@ function getAutoImportsOptions(options, config) {
       vueTemplate: true,
       dts: ".hybridly/auto-imports.d.ts",
       dirs: [
-        `${config.architecture.root}/utils`,
-        `${config.architecture.root}/composables`,
+        `${config.architecture.root_directory}/utils`,
+        `${config.architecture.root_directory}/composables`,
         ...config.components.directories.map((directory) => `${directory}/**/*.ts`)
       ],
       imports: [
@@ -401,21 +612,7 @@ function getAutoImportsOptions(options, config) {
   );
 }
 
-function HybridlyResolver(linkName = "RouterLink") {
-  return {
-    type: "component",
-    resolve: (name) => {
-      if (name === linkName) {
-        return {
-          from: "hybridly/vue",
-          name: "RouterLink",
-          as: linkName
-        };
-      }
-    }
-  };
-}
-function getVueComponentsOptions(options, config) {
+async function getVueComponentsOptions(options, config) {
   if (options.vueComponents === false) {
     return {};
   }
@@ -423,16 +620,18 @@ function getVueComponentsOptions(options, config) {
   const customCollections = Array.isArray(options.customIcons) ? options.customIcons : options.customIcons?.collections ?? [];
   const overrideResolvers = options.overrideResolvers ? Array.isArray(options.overrideResolvers) ? options.overrideResolvers : [options.overrideResolvers] : false;
   const hasHeadlessUI = isPackageInstalled("@headlessui/vue");
+  const hasRadix = isPackageInstalled("radix-vue");
   return merge(
     {
       dirs: [
-        `./${config.architecture.root}/components`
+        `./${config.architecture.root_directory}/${config.architecture.components_directory}`
       ],
       directoryAsNamespace: true,
       dts: ".hybridly/components.d.ts",
       resolvers: overrideResolvers || [
         ...hasIcons ? [iconsResolver({ customCollections })] : [],
         ...hasHeadlessUI ? [HeadlessUiResolver({ prefix: options?.vueComponents?.headlessUiPrefix ?? "Headless" })] : [],
+        ...hasRadix ? [await RadixResolver(options?.vueComponents?.radixPrefix)] : [],
         ProvidedComponentListResolver(config),
         HybridlyResolver(options.vueComponents?.linkName)
       ]
@@ -441,6 +640,24 @@ function getVueComponentsOptions(options, config) {
     { overwriteArray: false }
   );
 }
+async function RadixResolver(prefix = "Radix") {
+  const radix = await importPackage("radix-vue/resolver");
+  return radix.default({ prefix });
+}
+function HybridlyResolver(linkName = "RouterLink") {
+  return {
+    type: "component",
+    resolve: (name) => {
+      if (name === linkName) {
+        return {
+          from: "hybridly/vue",
+          name: "RouterLink",
+          as: linkName
+        };
+      }
+    }
+  };
+}
 function ProvidedComponentListResolver(config) {
   function resolveComponentPath(name) {
     const kebabName = toKebabCase(name);
@@ -467,7 +684,7 @@ function getIconsOptions(options, config) {
   const customIconDirectoryName = resolved?.icons ?? "icons";
   const customCollections = Object.fromEntries(resolved?.collections?.map((collection) => [
     collection,
-    FileSystemIconLoader(`./${config.architecture.root}/${customIconDirectoryName}/${collection}`)
+    FileSystemIconLoader(`./${config.architecture.root_directory}/${customIconDirectoryName}/${collection}`)
   ]) ?? []);
   return {
     autoInstall: true,
@@ -530,18 +747,121 @@ function killSwitch() {
   };
 }
 
+function getClientCode() {
+  const style = `
+		.local-build {
+			position: fixed;
+			bottom: 1rem;
+			left: 1rem;
+			z-index: 50;
+			display: inline-flex;
+			max-width: 26rem;
+			align-items: center;
+			background-color: rgba(0, 0, 0, 0.9);
+			padding: 0.75rem;
+			font-size: 0.75rem;
+			color: #8C8C8C;
+			transition: opacity 0.3s;
+		}
+
+		.local-build:hover {
+			opacity: 0.1;
+		}
+
+		.local-build .icon {
+			margin-right: 0.5rem;
+			height: 1.25rem;
+			width: 1.25rem;
+			fill: currentColor;
+		}
+
+		.local-build .content {
+			display: inline-flex;
+			flex-direction: column;
+			gap: 0.5rem;
+		}
+
+		.local-build .title {
+			font-weight: 500;
+		}
+	`;
+  const html = `
+		<div class="local-build">
+		<svg viewBox="0 0 24 24" width="1.2em" height="1.2em" class="icon"><path fill="currentColor" d="M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8"></path></svg>
+			<span class="content">
+					<span class="title">This is a local production build. Changes will not be reflected.</span>
+			</span>
+		</div>
+		`;
+  return `
+		;(function() {
+			const style = document.createElement('style')
+			style.innerHTML = \`${style}\`
+			document.head.appendChild(style)
+
+			const html = document.createElement('div')
+			html.innerHTML = \`${html}\`
+			document.body.appendChild(html)
+			html.addEventListener('click', () => html.remove())
+		})()
+	`;
+}
+
+const LOCAL_BUILD_VIRTUAL_ID = "virtual:hybridly/local-build";
+const RESOLVED_LOCAL_BUILD_VIRTUAL_ID = `\0${LOCAL_BUILD_VIRTUAL_ID}`;
+function warnOnLocalBuilds() {
+  let shouldDisplayWarning = false;
+  return {
+    name: "vite:hybridly:local-build",
+    enforce: "pre",
+    apply: "build",
+    config(config, { mode }) {
+      const env = loadEnv(mode, config.envDir ?? process.cwd(), "");
+      shouldDisplayWarning = env.APP_ENV === "local";
+    },
+    async resolveId(id) {
+      if (!shouldDisplayWarning) {
+        return;
+      }
+      if (id === LOCAL_BUILD_VIRTUAL_ID) {
+        return RESOLVED_LOCAL_BUILD_VIRTUAL_ID;
+      }
+    },
+    async load(id) {
+      if (!shouldDisplayWarning) {
+        return;
+      }
+      if (id === RESOLVED_LOCAL_BUILD_VIRTUAL_ID) {
+        return getClientCode();
+      }
+    },
+    transform(code, id) {
+      if (!shouldDisplayWarning) {
+        return;
+      }
+      if (!id.endsWith(CONFIG_VIRTUAL_MODULE_ID)) {
+        return;
+      }
+      code = `${code}
+import '${LOCAL_BUILD_VIRTUAL_ID}'`;
+      return code;
+    }
+  };
+}
+
 async function plugin(options = {}) {
   const config = await loadConfiguration(options);
   return [
     initialize(options, config),
     layout(options, config),
-    options.laravel !== false && laravel(getLaravelOptions(options, config)),
+    options.laravel !== false && laravel(options, config),
     options.run !== false && run(getRunOptions(options)),
-    options.vueComponents !== false && vueComponents(getVueComponentsOptions(options, config)),
+    options.vueComponents !== false && vueComponents(await getVueComponentsOptions(options, config)),
     options.autoImports !== false && autoimport(getAutoImportsOptions(options, config)),
     options.icons !== false && icons(getIconsOptions(options, config)),
     options.vue !== false && vue(getVueOptions(options)),
-    options.killSwitch !== false && killSwitch()
+    options.killSwitch !== false && killSwitch(),
+    options.warnOnLocalBuilds !== false && warnOnLocalBuilds()
   ];
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vite",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "description": "Vite plugin for Hybridly",
   "keywords": [
     "hybridly",
@@ -8,10 +8,6 @@
     "vite",
     "vite-plugin"
   ],
-  "homepage": "https://github.com/hybridly/hybridly/tree/main/packages/vite#readme",
-  "bugs": {
-    "url": "https://github.com/hybridly/hybridly/issues"
-  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -20,6 +16,11 @@
   },
   "funding": "https://github.com/sponsors/innocenzi",
   "author": "Enzo Innocenzi <enzo@innocenzi.dev>",
+  "type": "module",
+  "homepage": "https://github.com/hybridly/hybridly/tree/main/packages/vite#readme",
+  "bugs": {
+    "url": "https://github.com/hybridly/hybridly/issues"
+  },
   "sideEffects": false,
   "files": [
     "dist",
@@ -36,27 +37,27 @@
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "peerDependencies": {
-    "vite": "^4.4.9",
+    "vite": "^5.0.8",
     "vue": "^3.2.45"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^4.4.0",
-    "fast-glob": "^3.3.1",
-    "laravel-vite-plugin": "^0.8.1",
-    "local-pkg": "^0.4.3",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "fast-glob": "^3.3.2",
+    "local-pkg": "^0.5.0",
     "magic-string": "^0.30.5",
+    "picocolors": "^1.0.0",
     "throttle-debounce": "^5.0.0",
-    "unplugin-auto-import": "^0.16.6",
-    "unplugin-icons": "^0.17.1",
-    "unplugin-vue-components": "^0.25.2",
+    "unplugin-auto-import": "^0.17.3",
+    "unplugin-icons": "^0.18.1",
+    "unplugin-vue-components": "^0.26.0",
     "vite-plugin-run": "^0.5.1",
-    "@hybridly/core": "0.5.6"
+    "@hybridly/core": "0.6.0"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.133",
-    "rollup": "^3.29.4",
-    "vite": "^4.5.0",
-    "vue": "^3.3.7"
+    "@iconify/json": "^2.2.163",
+    "rollup": "^4.9.2",
+    "vite": "^5.0.10",
+    "vue": "^3.4.3"
   },
   "scripts": {
     "build": "unbuild",