@mostrom/app-shell 0.1.0

package/src/urls.ts

@@ -0,0 +1,83 @@
+/**
+ * URL helpers for path-based routing
+ *
+ * Uses Vite's BASE_URL (set from VITE_BASE_PATH at build time) as the single
+ * source of truth for constructing URLs that work with ALB path-based routing.
+ *
+ * Note: BASE_URL is normalized (no trailing slash) so both /demo and /demo/ work.
+ */
+
+type ImportMetaWithOptionalEnv = ImportMeta & {
+  env?: {
+    BASE_URL?: string;
+  };
+};
+
+const FALLBACK_BASE_PATH = "/";
+
+function normalizeBasePath(rawBasePath: string): string {
+  if (!rawBasePath || rawBasePath === "/") {
+    return "/";
+  }
+
+  const withLeadingSlash = rawBasePath.startsWith("/")
+    ? rawBasePath
+    : `/${rawBasePath}`;
+
+  return withLeadingSlash.replace(/\/+$/, "");
+}
+
+function normalizeRelativePath(path: string): string {
+  return path.replace(/^\/+/, "");
+}
+
+/**
+ * Returns the base path for this service (e.g., "/demo")
+ * Normalized without trailing slash.
+ */
+export function basePath(): string {
+  const rawBasePath =
+    (import.meta as ImportMetaWithOptionalEnv).env?.BASE_URL ??
+    FALLBACK_BASE_PATH;
+  return normalizeBasePath(rawBasePath);
+}
+
+/**
+ * Constructs an API URL relative to the service's base path.
+ *
+ * @example
+ * apiUrl("copilotkit") // => "/demo/api/copilotkit"
+ * apiUrl("healthcheck") // => "/demo/api/healthcheck"
+ */
+export function apiUrl(path: string): string {
+  const base = basePath();
+  const relativePath = normalizeRelativePath(path);
+  const apiPath = relativePath ? `api/${relativePath}` : "api";
+
+  if (base === "/") {
+    return `/${apiPath}`;
+  }
+
+  return `${base}/${apiPath}`;
+}
+
+/**
+ * Constructs any URL relative to the service's base path.
+ *
+ * @example
+ * serviceUrl("copilot-demo") // => "/demo/copilot-demo"
+ */
+export function serviceUrl(path: string): string {
+  const base = basePath();
+  const relativePath = normalizeRelativePath(path);
+
+  if (!relativePath) {
+    return base;
+  }
+
+  if (base === "/") {
+    return `/${relativePath}`;
+  }
+
+  return `${base}/${relativePath}`;
+}

package/src/vite.d.ts

@@ -0,0 +1,22 @@
+import type { UserConfig } from "vite";
+
+/**
+ * Returns shared Vite configuration for all platform apps.
+ * Ensures consistent settings and proper monorepo file access.
+ *
+ * @param appDir - The directory of the app (use __dirname)
+ * @returns Vite configuration object
+ *
+ * @example
+ * // In your vite.config.ts:
+ * import { getSharedViteConfig } from "@platform/app-shell/vite";
+ * import { mergeConfig } from "vite";
+ *
+ * export default defineConfig(({ mode }) => {
+ *   const shared = getSharedViteConfig(__dirname);
+ *   return mergeConfig(shared, {
+ *     // your app-specific config
+ *   });
+ * });
+ */
+export function getSharedViteConfig(appDir: string): UserConfig;

package/src/vite.js

@@ -0,0 +1,241 @@
+import fs from "node:fs";
+import path from "node:path";
+
+/**
+ * Returns the monorepo root directory (platform/).
+ * @param {string} currentDir
+ * @returns {string}
+ */
+function getMonorepoRoot(currentDir) {
+  let dir = currentDir;
+  while (dir !== "/") {
+    if (path.basename(dir) === "platform") {
+      return dir;
+    }
+    dir = path.dirname(dir);
+  }
+  // Fallback: assume we're 3 levels deep (services/*/frontend)
+  return path.resolve(currentDir, "../../..");
+}
+
+/**
+ * Vite plugin to handle problematic CSS imports during SSR.
+ *
+ * The streamdown package (used by @copilotkit) has a dynamic import:
+ *   (O||y)&&import('katex/dist/katex.min.css')
+ *
+ * This executes at runtime during SSR, and Node's ESM loader can't handle CSS.
+ *
+ * Strategy:
+ * 1. Transform SSR bundle to replace dynamic CSS imports with Promise.resolve()
+ * 2. Handle any static imports via resolveId/load hooks
+ */
+function ssrCssStubPlugin() {
+  return {
+    name: "ssr-css-stub",
+    enforce: "pre",
+    resolveId(source, importer, options) {
+      // Only handle SSR requests
+      if (!options?.ssr) return null;
+
+      // Stub out katex CSS imports during SSR - return a virtual module
+      if (source.includes("katex") && source.endsWith(".css")) {
+        return { id: "\0virtual:ssr-css-stub", external: false };
+      }
+      return null;
+    },
+    load(id, options) {
+      // Handle the virtual CSS stub
+      if (id === "\0virtual:ssr-css-stub") {
+        return "export default '';";
+      }
+      // During SSR, stub out ONLY katex CSS files
+      if (options?.ssr && id.includes("katex") && id.endsWith(".css")) {
+        return "export default '';";
+      }
+      return null;
+    },
+    // Transform ALL files during SSR to catch the dynamic import
+    // This is necessary because streamdown is bundled and the dynamic import
+    // runs at runtime, bypassing Vite's normal resolution
+    transform(code, id, options) {
+      if (!options?.ssr) return null;
+
+      // Transform any file that contains the katex CSS dynamic import
+      if (code.includes("katex") && code.includes(".css") && code.includes("import(")) {
+        const transformed = code.replace(
+          /import\s*\(\s*['"]katex\/[^'"]+\.css['"]\s*\)/g,
+          "Promise.resolve()"
+        );
+        if (transformed !== code) {
+          return { code: transformed, map: null };
+        }
+      }
+      return null;
+    },
+  };
+}
+
+
+/**
+ * Returns shared Vite configuration for all platform apps.
+ * Ensures consistent settings and proper monorepo file access.
+ *
+ * @param {string} appDir - The directory of the app (use __dirname)
+ * @returns {import('vite').UserConfig}
+ *
+ * @example
+ * // In your vite.config.ts:
+ * import { getSharedViteConfig } from "@platform/app-shell/vite";
+ * import { mergeConfig } from "vite";
+ *
+ * export default defineConfig(({ mode }) => {
+ *   const shared = getSharedViteConfig(__dirname);
+ *   return mergeConfig(shared, {
+ *     // your app-specific config
+ *   });
+ * });
+ */
+export function getSharedViteConfig(appDir) {
+  const monorepoRoot = getMonorepoRoot(appDir);
+  const appNodeModules = path.resolve(appDir, "node_modules");
+  const sharedPackages = path.resolve(monorepoRoot, "shared/packages");
+  const appShellSrc = path.resolve(sharedPackages, "app-shell/src");
+  const appShellNodeModules = path.resolve(sharedPackages, "app-shell/node_modules");
+  const appHasDndKit = fs.existsSync(path.resolve(appNodeModules, "@dnd-kit/core"));
+  const dndKitNodeModules = appHasDndKit ? appNodeModules : appShellNodeModules;
+
+  return {
+    plugins: [ssrCssStubPlugin()],
+    resolve: {
+      preserveSymlinks: true,
+      alias: [
+        // Source aliases for HMR during development
+        {
+          find: /^@platform\/service-catalog(\/.*)?$/,
+          replacement: `${path.resolve(sharedPackages, "service-catalog/src")}$1`,
+        },
+        {
+          find: /^@platform\/app-shell(\/.*)?$/,
+          replacement: `${appShellSrc}$1`,
+        },
+        // Resolve @/ alias used inside app-shell source files
+        {
+          find: /^@\/(.*)$/,
+          replacement: `${appShellSrc}/$1`,
+        },
+        // Resolve @dnd-kit from the consumer app when available, otherwise from app-shell
+        {
+          find: /^@dnd-kit\/(core|sortable|utilities|modifiers)(\/.*)?$/,
+          replacement: `${dndKitNodeModules}/@dnd-kit/$1$2`,
+        },
+        // Resolve app-shell dependencies from app-shell's node_modules
+        // This is necessary because when Vite processes files from app-shell via alias,
+        // the module resolution context is the consumer app, not app-shell
+        {
+          find: /^radix-ui(\/.*)?$/,
+          replacement: `${appShellNodeModules}/radix-ui$1`,
+        },
+        {
+          find: /^@base-ui\/react(\/.*)?$/,
+          replacement: `${appShellNodeModules}/@base-ui/react/esm$1`,
+        },
+        // Dependencies of recharts (version 2.15.4 in app-shell)
+        {
+          find: /^recharts(\/.*)?$/,
+          replacement: `${appShellNodeModules}/recharts$1`,
+        },
+        {
+          find: /^decimal\.js-light(\/.*)?$/,
+          replacement: `${appShellNodeModules}/decimal.js-light$1`,
+        },
+        // victory-vendor has both CJS and ESM exports - use ESM version for SSR compatibility
+        {
+          find: /^victory-vendor\/(d3-[^/]+)$/,
+          replacement: `${appShellNodeModules}/victory-vendor/es/$1.js`,
+        },
+        {
+          find: /^victory-vendor$/,
+          replacement: `${appShellNodeModules}/victory-vendor`,
+        },
+        // Dependencies of react-day-picker
+        {
+          find: /^react-day-picker(\/.*)?$/,
+          replacement: `${appShellNodeModules}/react-day-picker$1`,
+        },
+        {
+          find: /^@date-fns\/tz(\/.*)?$/,
+          replacement: `${appShellNodeModules}/@date-fns/tz$1`,
+        },
+        // Dependencies of @tanstack/react-table
+        {
+          find: /^@tanstack\/react-table(\/.*)?$/,
+          replacement: `${appShellNodeModules}/@tanstack/react-table$1`,
+        },
+        {
+          find: /^@tanstack\/table-core(\/.*)?$/,
+          replacement: `${appShellNodeModules}/@tanstack/table-core$1`,
+        },
+        // CSS dependency used by app-shell styles
+        {
+          find: "tw-animate-css",
+          replacement: `${appShellNodeModules}/tw-animate-css/dist/tw-animate.css`,
+        },
+      ],
+      dedupe: ["react", "react-dom"],
+    },
+    server: {
+      fs: {
+        // Allow serving files from the monorepo root (for hoisted node_modules)
+        allow: [
+          appDir,
+          monorepoRoot,
+          path.resolve(monorepoRoot, ".."),
+        ],
+      },
+    },
+    ssr: {
+      external: [
+        // React must be external during SSR - it's CJS and can't be processed by Vite's ESM runner
+        /^react(\/.*)?$/,
+        /^react-dom(\/.*)?$/,
+        // @dnd-kit must be external to use the same React instance as react-dom
+        /^@dnd-kit\//,
+        // katex CSS causes issues with Node's ESM loader - externalize it
+        // The CSS import is handled by the ssrCssStubPlugin via resolveId
+        /^katex\/dist\/.*\.css$/,
+      ],
+      noExternal: [
+        /^@cloudscape-design\//,
+        /^@radix-ui\//,
+        /^@base-ui\//,
+        /^radix-ui/,
+        /^cmdk/,
+        /^@platform\/app-shell/,
+        /^date-fns/,
+        /^@copilotkit\//,
+        /^@copilotkitnext\//,
+        /^react-markdown/,
+        // These packages need to be bundled so Vite can transform their code
+        /^katex$/,
+        /^streamdown/,
+        /^rehype-katex/,
+        // App-shell dependencies that use CommonJS and need transformation
+        /^recharts/,
+        /^victory-vendor/,
+        /^react-day-picker/,
+        /^@date-fns\//,
+        /^@tanstack\//,
+        /^decimal\.js-light/,
+      ],
+    },
+    optimizeDeps: {
+      // Linked monorepo source + lazy route loading can cause repeated re-optimization
+      // and stale hash requests (504 Outdated Optimize Dep). Disable dep discovery.
+      noDiscovery: true,
+      include: [],
+      // Keep streamdown out of optimizer; SSR handles its CSS import via stubs.
+      exclude: ["streamdown"],
+    },
+  };
+}

package/tsconfig.base.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Platform Frontend Base",
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@platform/app-shell/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}