@igstack/app-catalog-frontend-build-vite 0.0.1

package/src/frontendViteConfig.ts

@@ -0,0 +1,178 @@
+import viteReact from '@vitejs/plugin-react'
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import * as process from 'node:process'
+import type { UserConfig } from 'vite'
+import type { ManifestOptions } from 'vite-plugin-pwa'
+import { VitePWA } from 'vite-plugin-pwa'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
+import svgr from 'vite-plugin-svgr'
+
+export function frontendViteConfig(options?: {
+  appRoot?: string
+  pwa?: {
+    manifest?: Partial<ManifestOptions>
+    registerType?: 'autoUpdate' | 'prompt'
+    selfDestroying?: boolean
+  }
+}) {
+  const plugins: UserConfig['plugins'] = []
+
+  // Set up static copy for public assets if appRoot is provided
+  if (options?.appRoot) {
+    const appPublicDir = path.join(options.appRoot, 'public')
+
+    // Copy core public assets first, then local public assets (local takes precedence)
+    plugins.push(
+      viteStaticCopy({
+        targets: [
+          {
+            src: 'node_modules/@igstack/app-catalog-frontend-core/public/[!.]*',
+            dest: '.',
+          },
+          ...(fs.existsSync(appPublicDir)
+            ? [
+                {
+                  src: 'public/[!.]*',
+                  dest: '.',
+                },
+              ]
+            : []),
+        ],
+      }),
+    )
+  }
+
+  // Configure VitePWA
+  const registerType =
+    options?.pwa?.registerType ||
+    (process.env['VITE_AUTO_UPDATE'] === 'true' ? 'autoUpdate' : 'prompt')
+
+  const selfDestroying =
+    options?.pwa?.selfDestroying !== undefined
+      ? options.pwa.selfDestroying
+      : process.env['VITE_SELF_DESTROYING'] === 'true'
+        ? true
+        : undefined
+
+  plugins.push(
+    VitePWA({
+      registerType,
+      selfDestroying,
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+      },
+      includeAssets: [
+        'favicon.ico',
+        'apple-touch-180x180.png',
+        'app-catalog-*.png',
+        'app-catalog-square.svg',
+      ],
+      manifest: {
+        name: 'App Catalog',
+        short_name: 'EH',
+        description: 'Jump between environments',
+        theme_color: '#1f2937',
+        background_color: '#ffffff',
+        display: 'standalone',
+        start_url: '/',
+        icons: [
+          {
+            src: 'favicon.ico',
+            sizes: '48x48',
+            type: 'image/x-icon',
+          },
+          {
+            src: 'app-catalog-16x16.png',
+            sizes: '16x16',
+            type: 'image/png',
+          },
+          {
+            src: 'app-catalog-32x32.png',
+            sizes: '32x32',
+            type: 'image/png',
+          },
+          {
+            src: 'app-catalog-48x48.png',
+            sizes: '48x48',
+            type: 'image/png',
+          },
+          {
+            src: 'app-catalog-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: 'app-catalog-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: 'app-catalog-square.svg',
+            sizes: '150x150',
+            type: 'image/svg+xml',
+          },
+          {
+            src: 'app-catalog-square.svg',
+            sizes: '150x150',
+            purpose: 'maskable',
+            type: 'image/svg+xml',
+          },
+        ],
+        ...options?.pwa?.manifest,
+      },
+      devOptions: {
+        enabled: true,
+      },
+    }),
+  )
+
+  plugins.push(svgr())
+  plugins.push(viteReact())
+
+  if (process.env['NODE_ENV'] === 'test') {
+    plugins.push({
+      name: 'load-svg',
+      enforce: 'pre',
+      transform(_: string, id: string) {
+        if (id.endsWith('.svg?react')) {
+          return `export default () => "svg-stub"`
+        }
+        return undefined
+      },
+    })
+  }
+
+  // plugins.push(tanstackRouter());
+
+  return {
+    server: {
+      port: 4000,
+      strictPort: true,
+      host: 'localhost',
+      proxy: {
+        '/api': {
+          target: 'http://localhost:4001',
+          changeOrigin: true,
+          cookieDomainRewrite: 'localhost',
+        },
+        '/trpc': {
+          target: 'http://localhost:4001',
+          changeOrigin: true,
+          cookieDomainRewrite: 'localhost',
+        },
+        '/static': {
+          target: 'http://localhost:4001',
+          changeOrigin: true,
+        },
+      },
+    },
+    resolve: {
+      // Use 'my-custom-condition' to resolve @igstack/app-catalog-frontend-core to source files
+      // This enables HMR when developing the core library alongside the consuming app
+      conditions: ['my-custom-condition'],
+    },
+    publicDir: '.vite-merged-public',
+    plugins,
+  } satisfies UserConfig
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { frontendViteConfig } from './frontendViteConfig'
+export {
+  watchExternalSource,
+  createSourceAliases,
+  createFsAllowPaths,
+  type WatchExternalSourceOptions,
+} from './watchExternalSource'

package/src/watchExternalSource.ts

@@ -0,0 +1,177 @@
+import type { Plugin, ViteDevServer } from 'vite'
+
+export interface WatchExternalSourceOptions {
+  /**
+   * Name to display in console logs (e.g., '@igstack/app-catalog-frontend-core')
+   */
+  name: string
+  /**
+   * Absolute path to the source directory to watch
+   */
+  srcPath: string
+  /**
+   * Polling interval in ms (default: 500)
+   * Polling is required for cross-monorepo watching
+   */
+  interval?: number
+}
+
+/**
+ * Creates a Vite plugin that watches an external source directory for changes
+ * and triggers HMR updates or full reloads.
+ *
+ * This is useful when developing with linked packages from another monorepo
+ * where Vite's default file watcher doesn't detect changes.
+ *
+ * @example
+ * ```ts
+ * // In vite.config.ts
+ * import { watchExternalSource } from '@igstack/app-catalog-frontend-build-vite'
+ * import path from 'node:path'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     watchExternalSource({
+ *       name: '@igstack/app-catalog-frontend-core',
+ *       srcPath: path.resolve(__dirname, '../../../app-catalog/packages/frontend-core/src'),
+ *     }),
+ *   ],
+ * })
+ * ```
+ */
+export function watchExternalSource(
+  options: WatchExternalSourceOptions,
+): Plugin {
+  const { name, srcPath, interval = 500 } = options
+  let watcher: import('chokidar').FSWatcher | null = null // eslint-disable-line @typescript-eslint/consistent-type-imports
+
+  return {
+    name: `watch-external-source:${name}`,
+    configureServer(server: ViteDevServer) {
+       
+      import('chokidar').then(({ watch }) => {
+        watcher = watch(srcPath, {
+          ignoreInitial: true,
+          usePolling: true, // Required for cross-monorepo watching
+          interval,
+        })
+
+        watcher.on('ready', () => {
+          console.log(`[HMR] Watching ${name} for changes`)
+        })
+
+        watcher.on('change', async (file: string) => {
+          const shortPath = file.replace(srcPath, `${name}/src`)
+          console.log(`[HMR] ${shortPath} changed`)
+
+          // Try multiple ways to find the module in Vite's graph
+          let modules = server.moduleGraph.getModulesByFile(file)
+
+          // If not found, try searching by URL patterns
+          if (!modules || modules.size === 0) {
+            const allModules = [...server.moduleGraph.idToModuleMap.values()]
+            const fileName = file.split('/').pop() || ''
+            const matchingModules = allModules.filter((mod) => {
+              if (!mod.file) return false
+              return (
+                mod.file === file ||
+                mod.file.endsWith(fileName) ||
+                mod.url.includes(fileName)
+              )
+            })
+            if (matchingModules.length > 0) {
+              modules = new Set(matchingModules)
+            }
+          }
+
+          if (modules && modules.size > 0) {
+            // Module is tracked - try true HMR
+            const updates: Array<{
+              type: 'js-update' | 'css-update'
+              path: string
+              acceptedPath: string
+              timestamp: number
+            }> = []
+
+            for (const mod of modules) {
+              server.moduleGraph.invalidateModule(mod)
+              const isCss = mod.file?.endsWith('.css')
+
+              updates.push({
+                type: isCss ? 'css-update' : 'js-update',
+                path: mod.url,
+                acceptedPath: mod.url,
+                timestamp: Date.now(),
+              })
+
+              console.log(`[HMR] Sending update for: ${mod.url}`)
+            }
+
+            if (updates.length > 0) {
+              server.ws.send({
+                type: 'update',
+                updates,
+              })
+              console.log(`[HMR] Sent ${updates.length} HMR update(s)`)
+              return
+            }
+          }
+
+          // Module not in graph - fall back to full reload
+          console.log(`[HMR] Module not tracked, triggering full reload`)
+          server.moduleGraph.invalidateAll()
+          server.ws.send({
+            type: 'full-reload',
+            path: '*',
+          })
+        })
+
+        watcher.on('error', (error: unknown) => {
+          console.error(`[HMR] Watcher error for ${name}:`, error)
+        })
+      })
+    },
+    closeBundle() {
+      if (watcher) {
+        watcher.close()
+      }
+    },
+  }
+}
+
+/**
+ * Creates resolve aliases for pointing to source files instead of dist.
+ * Use this with watchExternalSource for full HMR support.
+ *
+ * @example
+ * ```ts
+ * // In vite.config.ts
+ * import { createSourceAliases } from '@igstack/app-catalog-frontend-build-vite'
+ * import path from 'node:path'
+ *
+ * const frontendCoreSrc = path.resolve(__dirname, '../../../app-catalog/packages/frontend-core/src')
+ *
+ * export default defineConfig({
+ *   resolve: {
+ *     alias: createSourceAliases({
+ *       '@igstack/app-catalog-frontend-core': `${frontendCoreSrc}/index.tsx`,
+ *       '~': frontendCoreSrc, // Internal path alias used by frontend-core
+ *     }),
+ *   },
+ * })
+ * ```
+ */
+export function createSourceAliases(
+  aliases: Record<string, string>,
+): Record<string, string> {
+  return aliases
+}
+
+/**
+ * Creates fs.allow paths for serving files from external directories.
+ *
+ * @param paths - Array of absolute paths to allow
+ */
+export function createFsAllowPaths(paths: Array<string>): Array<string> {
+  return paths
+}