feat(01-code-splitting): add feature gating with ALWRITY_ENABLED_FEATURES
- Create FeatureRoute.tsx wrapper component for route-level feature gating - Add FEATURE_KEYS constant map to demoMode.ts for type-safe feature references - Wrap 47 feature-specific routes with <FeatureRoute> in App.tsx - Core routes (dashboard, billing, pricing, auth callbacks) remain ungated - Disabled features redirect to /dashboard and never load their lazy chunks - Main bundle: +259 bytes (FeatureRoute is a lightweight component) Closes Phase 1 Plan 01-02
This commit is contained in:
34
frontend/src/components/shared/FeatureRoute.tsx
Normal file
34
frontend/src/components/shared/FeatureRoute.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import { isFeatureEnabled } from '../../utils/demoMode';
|
||||
|
||||
interface FeatureRouteProps {
|
||||
feature: string;
|
||||
children: React.ReactNode;
|
||||
/** Where to redirect if feature is disabled (default: /dashboard) */
|
||||
redirectTo?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Route guard that checks if a feature is enabled via ALWRITY_ENABLED_FEATURES.
|
||||
* If disabled, redirects to the fallback route and the lazy chunk never loads.
|
||||
*
|
||||
* Usage:
|
||||
* <Route path="/blog-writer" element={
|
||||
* <ProtectedRoute>
|
||||
* <FeatureRoute feature="blog_writer"><BlogWriter /></FeatureRoute>
|
||||
* </ProtectedRoute>
|
||||
* } />
|
||||
*/
|
||||
const FeatureRoute: React.FC<FeatureRouteProps> = ({
|
||||
feature,
|
||||
children,
|
||||
redirectTo = '/dashboard'
|
||||
}) => {
|
||||
if (!isFeatureEnabled(feature)) {
|
||||
return <Navigate to={redirectTo} replace />;
|
||||
}
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default FeatureRoute;
|
||||
Reference in New Issue
Block a user