@hardimpactdev/craft-ui 0.0.6 → 0.0.8

package/dist/src/vite/defineCraftConfig.d.ts

@@ -1,21 +1,6 @@
-interface viteConfigOptions {
-    laravel?: {
-        input?: string[];
-        refresh?: boolean;
-    };
-    plugins?: any[];
-    aliases?: any[];
-    ui?: {
-        localPath?: string;
-    };
-}
-export declare function defineCraftConfig(options?: viteConfigOptions): import('vite').UserConfigFnObject;
-export declare function pluginConfig(options: viteConfigOptions): ({
-    name: string;
-    enforce: string;
-}[] | import('vite').PluginOption)[];
-export declare function aliasConfig(aliases?: any[], ui?: any): {
-    dedupe: string[];
-    alias: any[];
-};
-export {};
+import { CraftConfigOptions } from './types.js';
+export type { CraftConfigOptions } from './types.js';
+export { getPlugins } from './plugins.js';
+export { getServerConfig } from './server.js';
+export { getResolveConfig } from './aliases.js';
+export declare function defineCraftConfig(options?: CraftConfigOptions): import('vite').UserConfigFnObject;

package/dist/src/vite/plugins.d.ts

@@ -0,0 +1,17 @@
+import { CraftConfigOptions } from './types.js';
+/**
+ * Configure all Vite plugins for the Craft stack
+ *
+ * Includes:
+ * - craft: Virtual module for Inertia app initialization
+ * - laravel: Laravel Vite integration
+ * - tailwindcss: Tailwind CSS v4
+ * - i18n: Laravel Vue i18n
+ * - vue: Vue 3 SFC support
+ * - vueDevTools: Vue DevTools integration
+ * - run: Auto-run artisan commands on file changes (dev only)
+ */
+export declare function getPlugins(options: CraftConfigOptions): (false | {
+    name: string;
+    enforce: string;
+}[] | import('vite').Plugin<any> | import('vite').PluginOption[] | Promise<import('vite').Plugin<any> | (false | null | undefined) | import('vite').PluginOption[]> | null | undefined)[];

package/dist/src/vite/server.d.ts

@@ -0,0 +1,10 @@
+import { ServerOptions } from 'vite';
+/**
+ * Configure Vite dev server for Laravel apps behind a reverse proxy (Caddy/nginx)
+ *
+ * Handles:
+ * - HMR WebSocket connection through the proxy (wss://app.test:443)
+ * - Correct origin for CORS and asset URLs
+ * - Binding to all interfaces for proxy access
+ */
+export declare function getServerConfig(mode: string): ServerOptions;

package/dist/src/vite/types.d.ts

@@ -0,0 +1,64 @@
+import { Alias } from 'vite';
+/**
+ * Configuration options for defineCraftConfig
+ */
+export interface CraftConfigOptions {
+    /**
+     * Laravel Vite plugin options
+     */
+    laravel?: {
+        /** Entry points for the application */
+        input?: string[];
+        /** Enable file refresh on changes */
+        refresh?: boolean;
+    };
+    /**
+     * Additional Vite plugins to include
+     */
+    plugins?: any[];
+    /**
+     * Additional Vite aliases
+     */
+    aliases?: Alias[];
+    /**
+     * Local UI library configuration for development with symlinked packages
+     */
+    ui?: LocalUiOptions;
+}
+/**
+ * Configuration for local UI library development
+ *
+ * When developing craft-ui alongside an app, this enables HMR by:
+ * 1. Redirecting package imports to source files instead of dist/
+ * 2. Resolving conflicting aliases (like @/) based on importer location
+ */
+export interface LocalUiOptions {
+    /**
+     * Relative path from app root to the symlinked craft-ui directory
+     * @example '../craft-ui'
+     */
+    localPath?: string;
+}
+/**
+ * Internal alias configuration for local package resolution
+ */
+export interface LocalAliasConfig {
+    /** Regex pattern to match imports */
+    pattern: RegExp;
+    /** The replacement path or alias */
+    replacement: string;
+    /**
+     * Absolute path to the library (for importer detection)
+     * If set along with basePaths, enables context-aware resolution
+     */
+    libraryPath?: string;
+    /**
+     * Base paths for context-aware resolution
+     */
+    basePaths?: {
+        /** Path to use when import is from the app */
+        app: string;
+        /** Path to use when import is from the library */
+        library: string;
+    };
+}

package/dist/vite/aliases.js

@@ -0,0 +1,62 @@
+import path from "path";
+function getResolveConfig(options) {
+  const aliases = [...options.aliases || []];
+  if (isDevMode() && options.ui?.localPath) {
+    aliases.push(...createLocalDevAliases(options.ui.localPath));
+  }
+  return {
+    // Prevent duplicate instances of packages that must be singletons
+    dedupe: ["@inertiajs/vue3", "@tailwindcss/vite"],
+    alias: aliases
+  };
+}
+function createLocalDevAliases(localPath) {
+  const absoluteLibraryPath = path.resolve(process.cwd(), localPath);
+  const configs = [
+    // Handle @/ alias - resolve based on importer location
+    {
+      pattern: /^@\//,
+      replacement: "@/",
+      libraryPath: absoluteLibraryPath,
+      basePaths: {
+        app: "./resources/js",
+        library: path.join(localPath, "src")
+      }
+    },
+    // Redirect package imports to source
+    {
+      pattern: /^@hardimpactdev\/craft-ui/,
+      replacement: path.join(localPath, "index.ts")
+    }
+  ];
+  return configs.map(createAliasFromConfig);
+}
+function createAliasFromConfig(config) {
+  if (!config.libraryPath || !config.basePaths) {
+    return {
+      find: config.pattern,
+      replacement: path.resolve(process.cwd(), config.replacement)
+    };
+  }
+  return {
+    find: config.pattern,
+    replacement: config.replacement,
+    customResolver: createContextAwareResolver(config)
+  };
+}
+function createContextAwareResolver(config) {
+  return async function customResolver(source, importer) {
+    const isFromLibrary = importer?.includes(config.libraryPath);
+    const basePath = isFromLibrary ? config.basePaths.library : config.basePaths.app;
+    const importPath = source.replace(config.replacement, "");
+    const resolvedPath = path.resolve(process.cwd(), basePath, importPath);
+    const result = await this.resolve(resolvedPath);
+    return result?.id;
+  };
+}
+function isDevMode() {
+  return !process.argv.includes("build");
+}
+export {
+  getResolveConfig
+};

package/dist/vite/defineCraftConfig.js

@@ -1,166 +1,23 @@
-import { defineConfig, loadEnv } from "vite";
-import vue from "@vitejs/plugin-vue";
-import path from "path";
-import laravel from "laravel-vite-plugin";
-import { run } from "vite-plugin-run";
-import { craft } from "./craftPlugin.js";
-import tailwindcss from "@tailwindcss/vite";
-import i18n from "laravel-vue-i18n/vite";
-import vueDevTools from "vite-plugin-vue-devtools";
+import { defineConfig } from "vite";
+import { getPlugins } from "./plugins.js";
+import { getServerConfig } from "./server.js";
+import { getResolveConfig } from "./aliases.js";
+import { getPlugins as getPlugins2 } from "./plugins.js";
+import { getServerConfig as getServerConfig2 } from "./server.js";
+import { getResolveConfig as getResolveConfig2 } from "./aliases.js";
 function defineCraftConfig(options = {}) {
-  return defineConfig(({ mode }) => {
-    const serverConfig = getServerConfig(mode);
-    return {
-      plugins: [
-        ...pluginConfig(options),
-        ...options.plugins || [],
-        // Plugin to enforce allowedHosts after laravel-vite-plugin
-        // This bypasses Vite's DNS rebinding protection which conflicts with reverse proxy setups
-        {
-          name: "craft-allowed-hosts",
-          enforce: "post",
-          config() {
-            return {
-              server: {
-                allowedHosts: true
-              }
-            };
-          }
-        }
-      ],
-      resolve: {
-        ...aliasConfig(options.aliases, options.ui)
-      },
-      server: serverConfig
-    };
-  });
-}
-function getServerConfig(mode) {
-  const env = loadEnv(mode, process.cwd());
-  const appUrl = env.VITE_APP_URL;
-  if (!appUrl) {
-    return { host: "0.0.0.0" };
-  }
-  try {
-    const url = new URL(appUrl);
-    const isHttps = url.protocol === "https:";
-    return {
-      host: "0.0.0.0",
-      origin: appUrl,
-      allowedHosts: true,
-      hmr: {
-        host: url.hostname,
-        protocol: isHttps ? "wss" : "ws",
-        clientPort: isHttps ? 443 : parseInt(url.port) || 80
-      }
-    };
-  } catch {
-    return { host: "0.0.0.0" };
-  }
-}
-function pluginConfig(options) {
-  return [
-    craft(),
-    laravel({
-      input: options.laravel?.input || ["resources/js/app.ts"],
-      refresh: options.laravel?.refresh || true
-    }),
-    tailwindcss(),
-    i18n(),
-    vue({
-      template: {
-        transformAssetUrls: {
-          base: null,
-          includeAbsolute: false
-        },
-        compilerOptions: {
-          isCustomElement: (tag) => tag === "trix-editor"
-        }
-      }
-    }),
-    runConfiguration(),
-    vueDevTools({
-      appendTo: "virtual:craft",
-      launchEditor: import.meta.env?.VITE_EDITOR || "cursor"
-    })
-  ].filter(Boolean);
-}
-function runConfiguration() {
-  if (false) {
-    return null;
-  }
-  return run([
-    {
-      name: "waymaker",
-      run: ["php", "artisan", "waymaker:generate"],
-      pattern: ["app/**/Http/**/*.php"]
-    },
-    {
-      name: "wayfinder",
-      run: ["php", "artisan", "wayfinder:generate"],
-      pattern: ["routes/*.php", "app/**/Http/**/*.php"]
-    },
-    {
-      name: "typescript",
-      run: ["php", "artisan", "typescript:transform"],
-      pattern: ["app/{Data,Enums}/**/*.php"]
-    }
-  ]);
-}
-function aliasConfig(aliases = [], ui = {}) {
-  if (!process.argv.includes("build") && ui.localPath) {
-    const absoluteLibraryPath = path.resolve(process.cwd(), ui.localPath);
-    const localAliases = [
-      // The following alias will make the @ alias work correctly depending on the importer path.
-      {
-        regex: /^@\//,
-        replacement: "@/",
-        libraryPath: absoluteLibraryPath,
-        aliasLocalBasePath: "./resources/js",
-        aliasExternalBasePath: path.join(ui.localPath, "src")
-      },
-      // The following alias config will change all package references like import { Dialog } from '@hardimpactdev/craft-ui';
-      // to the library's index.ts file instead.
-      {
-        regex: /^@hardimpactdev\/craft-ui/,
-        replacement: path.join(ui.localPath, "index.ts")
-      }
-    ];
-    aliases.push(...aliasLocalPackage(localAliases));
-  }
-  return {
-    dedupe: ["@inertiajs/vue3", "@tailwindcss/vite"],
-    alias: aliases
-  };
-}
-function aliasLocalPackage(aliases) {
-  return aliases.map((alias) => {
-    if (!alias.libraryPath && !alias.aliasLocalBasePath && !alias.aliasExternalBasePath) {
-      return {
-        find: alias.regex,
-        replacement: path.resolve(process.cwd(), alias.replacement)
-      };
-    }
-    return {
-      find: alias.regex,
-      replacement: alias.replacement,
-      async customResolver(source, importer) {
-        let resolvedPath = "";
-        resolvedPath = path.resolve(
-          // get the directory name of the importer
-          process.cwd(),
-          // if the importer string includes the folder name, use the external path, otherwise use the local path
-          importer?.includes(alias.libraryPath) ? alias.aliasExternalBasePath : alias.aliasLocalBasePath,
-          // remove the alias replacement from the source path
-          source.replace(alias.replacement, "")
-        );
-        return (await this.resolve(resolvedPath))?.id;
-      }
-    };
-  });
+  return defineConfig(({ mode }) => ({
+    plugins: [
+      ...getPlugins(options),
+      ...options.plugins || []
+    ],
+    resolve: getResolveConfig(options),
+    server: getServerConfig(mode)
+  }));
 }
 export {
-  aliasConfig,
   defineCraftConfig,
-  pluginConfig
+  getPlugins2 as getPlugins,
+  getResolveConfig2 as getResolveConfig,
+  getServerConfig2 as getServerConfig
 };

package/dist/vite/plugins.js

@@ -0,0 +1,59 @@
+import vue from "@vitejs/plugin-vue";
+import laravel from "laravel-vite-plugin";
+import { run } from "vite-plugin-run";
+import tailwindcss from "@tailwindcss/vite";
+import i18n from "laravel-vue-i18n/vite";
+import vueDevTools from "vite-plugin-vue-devtools";
+import { craft } from "./craftPlugin.js";
+function getPlugins(options) {
+  return [
+    craft(),
+    laravel({
+      input: options.laravel?.input || ["resources/js/app.ts"],
+      refresh: options.laravel?.refresh ?? true
+    }),
+    tailwindcss(),
+    i18n(),
+    vue({
+      template: {
+        transformAssetUrls: {
+          base: null,
+          includeAbsolute: false
+        },
+        compilerOptions: {
+          isCustomElement: (tag) => tag === "trix-editor"
+        }
+      }
+    }),
+    getArtisanRunners(),
+    vueDevTools({
+      appendTo: "virtual:craft",
+      launchEditor: import.meta.env?.VITE_EDITOR || "cursor"
+    })
+  ].filter(Boolean);
+}
+function getArtisanRunners() {
+  if (false) {
+    return null;
+  }
+  return run([
+    {
+      name: "waymaker",
+      run: ["php", "artisan", "waymaker:generate"],
+      pattern: ["app/**/Http/**/*.php"]
+    },
+    {
+      name: "wayfinder",
+      run: ["php", "artisan", "wayfinder:generate"],
+      pattern: ["routes/*.php", "app/**/Http/**/*.php"]
+    },
+    {
+      name: "typescript",
+      run: ["php", "artisan", "typescript:transform"],
+      pattern: ["app/{Data,Enums}/**/*.php"]
+    }
+  ]);
+}
+export {
+  getPlugins
+};

package/dist/vite/server.js

@@ -0,0 +1,30 @@
+import { loadEnv } from "vite";
+function getServerConfig(mode) {
+  const env = loadEnv(mode, process.cwd());
+  const appUrl = env.VITE_APP_URL;
+  if (!appUrl) {
+    return { host: "0.0.0.0" };
+  }
+  try {
+    const url = new URL(appUrl);
+    const isHttps = url.protocol === "https:";
+    return {
+      // Accept connections from reverse proxy
+      host: "0.0.0.0",
+      // Tell Vite the public origin for asset URLs
+      origin: appUrl,
+      // Configure HMR to connect through the reverse proxy
+      // Without this, browser would try localhost:5173 directly
+      hmr: {
+        host: url.hostname,
+        protocol: isHttps ? "wss" : "ws",
+        clientPort: isHttps ? 443 : parseInt(url.port) || 80
+      }
+    };
+  } catch {
+    return { host: "0.0.0.0" };
+  }
+}
+export {
+  getServerConfig
+};

package/dist/vite/ts/aliases.ts

@@ -0,0 +1,132 @@
+import path from 'path';
+import type { Alias } from 'vite';
+import type { CraftConfigOptions, LocalAliasConfig } from './types.js';
+
+/**
+ * Configure Vite resolve options for the Craft stack
+ *
+ * Handles two scenarios:
+ * 1. Normal: Just returns dedupe config and any custom aliases
+ * 2. Local development: Adds aliases for symlinked craft-ui to enable HMR
+ */
+export function getResolveConfig(options: CraftConfigOptions) {
+    const aliases: Alias[] = [...(options.aliases || [])];
+
+    // Add local development aliases when craft-ui is symlinked
+    if (isDevMode() && options.ui?.localPath) {
+        aliases.push(...createLocalDevAliases(options.ui.localPath));
+    }
+
+    return {
+        // Prevent duplicate instances of packages that must be singletons
+        dedupe: ['@inertiajs/vue3', '@tailwindcss/vite'],
+        alias: aliases,
+    };
+}
+
+/**
+ * Create aliases for local craft-ui development
+ *
+ * When craft-ui is symlinked (e.g., for development), we need to:
+ *
+ * 1. Redirect package imports to source files
+ *    `import { Button } from '@hardimpactdev/craft-ui'`
+ *    → resolves to `../craft-ui/index.ts` instead of `dist/`
+ *    This enables HMR (dist files can't hot-reload)
+ *
+ * 2. Handle the @/ alias conflict
+ *    Both the app and craft-ui use @/ as an alias:
+ *    - App: @/ → ./resources/js
+ *    - craft-ui: @/ → ./src
+ *
+ *    When a file in craft-ui imports `@/lib/utils`, we need to resolve
+ *    it to craft-ui/src/lib/utils, not app/resources/js/lib/utils.
+ *    The resolver checks WHERE the import comes from to decide.
+ */
+function createLocalDevAliases(localPath: string): Alias[] {
+    const absoluteLibraryPath = path.resolve(process.cwd(), localPath);
+
+    const configs: LocalAliasConfig[] = [
+        // Handle @/ alias - resolve based on importer location
+        {
+            pattern: /^@\//,
+            replacement: '@/',
+            libraryPath: absoluteLibraryPath,
+            basePaths: {
+                app: './resources/js',
+                library: path.join(localPath, 'src'),
+            },
+        },
+
+        // Redirect package imports to source
+        {
+            pattern: /^@hardimpactdev\/craft-ui/,
+            replacement: path.join(localPath, 'index.ts'),
+        },
+    ];
+
+    return configs.map(createAliasFromConfig);
+}
+
+/**
+ * Create a Vite alias from our config format
+ */
+function createAliasFromConfig(config: LocalAliasConfig): Alias {
+    // Simple redirect (no context-aware resolution needed)
+    if (!config.libraryPath || !config.basePaths) {
+        return {
+            find: config.pattern,
+            replacement: path.resolve(process.cwd(), config.replacement),
+        };
+    }
+
+    // Context-aware resolution: choose base path based on importer location
+    return {
+        find: config.pattern,
+        replacement: config.replacement,
+        customResolver: createContextAwareResolver(config),
+    };
+}
+
+/**
+ * Create a resolver that picks the right base path based on where the import comes from
+ *
+ * @example
+ * // Import from app file → use app base path
+ * // resources/js/pages/Home.vue imports @/lib/utils
+ * // → resolves to resources/js/lib/utils
+ *
+ * // Import from library file → use library base path
+ * // ../craft-ui/src/components/Button.vue imports @/lib/utils
+ * // → resolves to ../craft-ui/src/lib/utils
+ */
+function createContextAwareResolver(config: LocalAliasConfig) {
+    return async function customResolver(
+        this: { resolve: (id: string, importer?: string) => Promise<{ id: string } | null> },
+        source: string,
+        importer: string | undefined
+    ): Promise<string | undefined> {
+        // Determine if the import is coming from the library or the app
+        const isFromLibrary = importer?.includes(config.libraryPath!);
+        const basePath = isFromLibrary ? config.basePaths!.library : config.basePaths!.app;
+
+        // Build the full path by combining:
+        // 1. Current working directory
+        // 2. The appropriate base path (app or library)
+        // 3. The import path (minus the alias prefix)
+        const importPath = source.replace(config.replacement, '');
+        const resolvedPath = path.resolve(process.cwd(), basePath, importPath);
+
+        // Use Vite's resolver to get the final path (handles extensions, index files, etc.)
+        const result = await this.resolve(resolvedPath);
+        return result?.id;
+    };
+}
+
+/**
+ * Check if we're in development mode
+ * Used to skip local dev aliases during production builds
+ */
+function isDevMode(): boolean {
+    return !process.argv.includes('build');
+}