Clean up federation example, remove host modules

examples/federation/epic-stack-remote/app/components/error-boundary.tsx

@@ -41,7 +41,7 @@ export function GeneralErrorBoundary({
 	}, [error, isResponse])
 
 	return (
-		<div className="container flex items-center justify-center p-20 text-h2">
+		<div className="container flex items-center justify-center p-20 text-h2 border-2 border-red-500">
 			{isResponse
 				? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
 						error,

examples/federation/epic-stack-remote/app/components/forms.tsx

@@ -24,7 +24,7 @@ export function ErrorList({
 	const errorsToRender = errors?.filter(Boolean)
 	if (!errorsToRender?.length) return null
 	return (
-		<ul id={id} className="flex flex-col gap-1">
+		<ul id={id} className="flex flex-col gap-1 border-2 border-red-500">
 			{errorsToRender.map((e) => (
 				<li key={e} className="text-[10px] text-foreground-destructive">
 					{e}
@@ -49,7 +49,7 @@ export function Field({
 	const id = inputProps.id ?? fallbackId
 	const errorId = errors?.length ? `${id}-error` : undefined
 	return (
-		<div className={className}>
+		<div className={className + " border-2 border-red-500"}>
 			<Label htmlFor={id} {...labelProps} />
 			<Input
 				id={id}
@@ -79,7 +79,7 @@ export function OTPField({
 	const id = inputProps.id ?? fallbackId
 	const errorId = errors?.length ? `${id}-error` : undefined
 	return (
-		<div className={className}>
+		<div className={className + " border-2 border-red-500"}>
 			<Label htmlFor={id} {...labelProps} />
 			<InputOTP
 				pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
@@ -123,7 +123,7 @@ export function TextareaField({
 	const id = textareaProps.id ?? textareaProps.name ?? fallbackId
 	const errorId = errors?.length ? `${id}-error` : undefined
 	return (
-		<div className={className}>
+		<div className={className + " border-2 border-red-500"}>
 			<Label htmlFor={id} {...labelProps} />
 			<Textarea
 				id={id}
@@ -166,7 +166,7 @@ export function CheckboxField({
 	const errorId = errors?.length ? `${id}-error` : undefined
 
 	return (
-		<div className={className}>
+		<div className={className + " border-2 border-red-500"}>
 			<div className="flex gap-2">
 				<Checkbox
 					{...checkboxProps}

examples/federation/epic-stack-remote/app/components/progress-bar.tsx

@@ -32,7 +32,7 @@ function EpicProgress() {
 			role="progressbar"
 			aria-hidden={delayedPending ? undefined : true}
 			aria-valuetext={delayedPending ? 'Loading' : undefined}
-			className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse"
+			className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse border-2 border-red-500"
 		>
 			<div
 				ref={ref}

examples/federation/epic-stack-remote/app/components/search-bar.tsx

@@ -31,7 +31,7 @@ export function SearchBar({
 		<Form
 			method="GET"
 			action="/users"
-			className="flex flex-wrap items-center justify-center gap-2"
+			className="flex flex-wrap items-center justify-center gap-2 border-2 border-red-500"
 			onChange={(e) => autoSubmit && handleFormChange(e.currentTarget)}
 		>
 			<div className="flex-1">

examples/federation/epic-stack-remote/app/components/spacer.tsx

@@ -53,5 +53,5 @@ export function Spacer({
 		'4xl': 'h-44',
 	}
 	const className = options[size]
-	return <div className={className} />
+	return <div className={className + " border-2 border-red-500"} />
 }

examples/federation/epic-stack-remote/app/components/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-within:ring-2 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-within:ring-2 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-2 border-red-500',
 	{
 		variants: {
 			variant: {

examples/federation/epic-stack-remote/app/components/ui/checkbox.tsx

@@ -17,7 +17,7 @@ const Checkbox = React.forwardRef<
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
-			'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+			'peer h-4 w-4 shrink-0 rounded-sm border-2 border-red-500 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
 			className,
 		)}
 		{...props}

examples/federation/epic-stack-remote/app/components/ui/dropdown-menu.tsx

@@ -180,7 +180,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
 	return (
 		<span
-			className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+			className={cn('ml-auto text-xs tracking-widest opacity-60 border-2 border-red-500', className)}
 			{...props}
 		/>
 	)

examples/federation/epic-stack-remote/app/components/ui/icon.tsx

@@ -1,5 +1,6 @@
 import { type SVGProps } from 'react'
 import { cn } from '#app/utils/misc.tsx'
+//@ts-ignore
 import href from './icons/sprite.svg'
 import { type IconName } from '@/icon-name'
 

examples/federation/epic-stack-remote/app/components/ui/input-otp.tsx

@@ -23,7 +23,7 @@ const InputOTPGroup = React.forwardRef<
 	React.ElementRef<'div'>,
 	React.ComponentPropsWithoutRef<'div'>
 >(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn('flex items-center', className)} {...props} />
+	<div ref={ref} className={cn('flex items-center border-2 border-red-500', className)} {...props} />
 ))
 InputOTPGroup.displayName = 'InputOTPGroup'
 
@@ -40,7 +40,7 @@ const InputOTPSlot = React.forwardRef<
 		<div
 			ref={ref}
 			className={cn(
-				'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base transition-all first:rounded-l-md first:border-l last:rounded-r-md md:text-sm',
+				'relative flex h-10 w-10 items-center justify-center border-2 border-red-500 text-base transition-all first:rounded-l-md first:border-l last:rounded-r-md md:text-sm',
 				isActive && 'z-10 ring-2 ring-ring ring-offset-background',
 				className,
 			)}
@@ -61,7 +61,7 @@ const InputOTPSeparator = React.forwardRef<
 	React.ElementRef<'div'>,
 	React.ComponentPropsWithoutRef<'div'>
 >(({ ...props }, ref) => (
-	<div ref={ref} role="separator" {...props}>
+	<div ref={ref} role="separator" className="border-2 border-red-500" {...props}>
 		-
 	</div>
 ))

examples/federation/epic-stack-remote/app/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
+					'flex h-10 w-full rounded-md border-2 border-red-500 bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
 					className,
 				)}
 				ref={ref}

examples/federation/epic-stack-remote/app/components/ui/status-button.tsx

@@ -27,23 +27,23 @@ export const StatusButton = React.forwardRef<
 		pending: delayedPending ? (
 			<div
 				role="status"
-				className="inline-flex h-6 w-6 items-center justify-center"
+				className="inline-flex h-6 w-6 items-center justify-center border-2 border-red-500"
 			>
 				<Icon name="update" className="animate-spin" title="loading" />
 			</div>
 		) : null,
 		success: (
 			<div
 				role="status"
-				className="inline-flex h-6 w-6 items-center justify-center"
+				className="inline-flex h-6 w-6 items-center justify-center border-2 border-red-500"
 			>
 				<Icon name="check" title="success" />
 			</div>
 		),
 		error: (
 			<div
 				role="status"
-				className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-destructive"
+				className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-destructive border-2 border-red-500"
 			>
 				<Icon
 					name="cross-1"
@@ -58,7 +58,7 @@ export const StatusButton = React.forwardRef<
 	return (
 		<Button
 			ref={ref}
-			className={cn('flex justify-center gap-4', className)}
+			className={cn('flex justify-center gap-4 border-2 border-red-500', className)}
 			{...props}
 		>
 			<div>{children}</div>

examples/federation/epic-stack-remote/app/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 		return (
 			<textarea
 				className={cn(
-					'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
+					'flex min-h-[80px] w-full rounded-md border-2 border-red-500 bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
 					className,
 				)}
 				ref={ref}

examples/federation/epic-stack-remote/app/components/user-dropdown.tsx

@@ -16,6 +16,7 @@ export function UserDropdown() {
 	const user = useUser()
 	const formRef = useRef<HTMLFormElement>(null)
 	return (
+		<div className="border-2 border-red-500">
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<Button asChild variant="secondary">
@@ -64,5 +65,6 @@ export function UserDropdown() {
 				</DropdownMenuContent>
 			</DropdownMenuPortal>
 		</DropdownMenu>
+		</div>
 	)
 }

examples/federation/epic-stack-remote/app/root.tsx

@@ -11,7 +11,9 @@ import {
 } from 'react-router'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
 import { type Route } from './+types/root.ts'
+//@ts-ignore
 import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'
+//@ts-ignore
 import faviconAssetUrl from './assets/favicons/favicon.svg'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
 import { EpicProgress } from './components/progress-bar.tsx'

examples/federation/epic-stack-remote/app/routes/_marketing+/logos/logos.ts

@@ -1,3 +1,5 @@
+//@ts-nocheck
+
 import docker from './docker.svg'
 import eslint from './eslint.svg'
 import fakerJS from './faker.svg'

examples/federation/epic-stack-remote/app/utils/misc.use-double-check.test.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 /**
  * @vitest-environment jsdom
  */

examples/federation/epic-stack-remote/package.json

@@ -49,9 +49,9 @@
     "@epic-web/remember": "1.1.0",
     "@epic-web/totp": "2.1.1",
     "@mjackson/form-data-parser": "0.7.0",
-    "@module-federation/enhanced": "0.0.0-next-20250321011937",
-    "@module-federation/node": "0.0.0-next-20250321011937",
-    "@module-federation/rsbuild-plugin": "0.0.0-next-20250321011937",
+    "@module-federation/enhanced": "0.0.0-next-20250325035711",
+    "@module-federation/node": "0.0.0-next-20250325035711",
+    "@module-federation/rsbuild-plugin": "0.0.0-next-20250325035711",
     "@nasa-gcn/remix-seo": "2.0.1",
     "@oslojs/crypto": "1.0.1",
     "@oslojs/encoding": "1.1.0",
@@ -170,5 +170,8 @@
   },
   "prisma": {
     "seed": "tsx prisma/seed.ts"
+  },
+  "vitest": {
+    "setupFiles": ["./vitest.setup.ts"]
   }
 }

examples/federation/epic-stack-remote/rsbuild.config.ts

@@ -27,6 +27,12 @@ const sharedDependencies = {
 	'react-dom/': {
 		singleton: true,
 	},
+	"@prisma/client": {
+		singleton: true,
+	},
+	"remix-utils/": {
+		singleton: true,
+	}
 }
 
 // Common exposed components
@@ -52,15 +58,23 @@ const exposedComponents = {
 	'./components/ui/checkbox': './app/components/ui/checkbox',
 	"./utils/connections": "./app/utils/connections",
 	"./utils/misc": "./app/utils/misc",
+	"./routes/login": "./app/routes/_auth+/login?react-router-route",
+	"./routes/login.server": "./app/routes/_auth+/login.server.ts"
 }
 
+// Filter out .server exposes for web environment
+const webExposedComponents = Object.fromEntries(
+	Object.entries(exposedComponents).filter(([_, value]) => !value.includes('.server'))
+)
+
 // Common Module Federation configuration
 const commonFederationConfig = {
 	name: 'remote',
 	shareStrategy: "loaded-first" as const,
 	runtime: undefined,
 	exposes: exposedComponents,
-	shared: sharedDependencies
+	shared: sharedDependencies,
+	dts: false
 }
 
 // Web-specific federation config
@@ -69,6 +83,7 @@ const webFederationConfig = {
 	library: {
 		type: 'module'
 	},
+	exposes: webExposedComponents
 }
 
 // Node-specific federation config
@@ -82,7 +97,7 @@ const nodeFederationConfig = {
 	],
 	// see https://github.com/module-federation/core/blob/main/packages/manifest/src/ManifestManager.ts#L106
 	manifest:{
-		additionalData:(additionalDataOptions)=>{
+		additionalData:(additionalDataOptions: { stats: any })=>{
 			const { stats, } =additionalDataOptions;
 			stats.metaData.ssrRemoteEntry = stats.metaData.remoteEntry;
 			return stats;

examples/federation/epic-stack-remote/tailwind.config.ts

@@ -20,7 +20,7 @@ export default {
 	presets: [marketingPreset],
 	plugins: [animatePlugin, radixPlugin],
 	safelist: [
-		// Match everything
-		/.*/
+		// Using string pattern to match everything instead of RegExp
+		'*'
 	],
 } satisfies Config