framework.ts•5.05 kB
/**
* Framework selection utility for shadcn/ui MCP server
*
* This module handles switching between React Svelte, Vue and React Native implementations
* based on environment variables or command line arguments.
*
* Usage:
* - Set FRAMEWORK environment variable to 'react' or 'svelte' or 'vue'
* - Or use --framework command line argument
* - Defaults to 'react' if not specified
*/
import { logInfo, logWarning } from "./logger.js";
// Framework types
export type Framework = "react" | "svelte" | "vue" | "react-native";
// Default framework
const DEFAULT_FRAMEWORK: Framework = "react";
/**
* Get the current framework from environment or command line arguments
* @returns The selected framework ('react' or 'svelte' or 'vue')
*/
export function getFramework(): Framework {
// Check command line arguments first
const args = process.argv.slice(2);
const frameworkIndex = args.findIndex(
(arg) => arg === "--framework" || arg === "-f"
);
if (frameworkIndex !== -1 && args[frameworkIndex + 1]) {
const framework = args[frameworkIndex + 1].toLowerCase() as Framework;
if (
framework === "react" ||
framework === "svelte" ||
framework === "vue" ||
framework === "react-native"
) {
logInfo(`Framework set to '${framework}' via command line argument`);
return framework;
} else {
logWarning(
`Invalid framework '${framework}' specified. Using default '${DEFAULT_FRAMEWORK}'`
);
}
}
// Check environment variable
const envFramework = process.env.FRAMEWORK?.toLowerCase() as Framework;
if (
envFramework === "react" ||
envFramework === "svelte" ||
envFramework === "vue" ||
envFramework === "react-native"
) {
logInfo(`Framework set to '${envFramework}' via environment variable`);
return envFramework;
}
// Return default
logInfo(`Using default framework: '${DEFAULT_FRAMEWORK}'`);
return DEFAULT_FRAMEWORK;
}
/**
* Get the axios implementation based on the current framework
* @returns The appropriate axios implementation
*/
export async function getAxiosImplementation() {
const framework = getFramework();
if (framework === "svelte") {
// Dynamic import for Svelte implementation
return import("./axios-svelte.js").then((module) => module.axios);
} else if (framework === "vue") {
// Dynamic import for Vue implementation
return import("./axios-vue.js").then((module) => module.axios);
} else if (framework === "react-native") {
// Dynamic import for React Native implementation
return import("./axios-react-native.js").then((module) => module.axios);
} else {
// Dynamic import for React implementation (default)
return import("./axios.js").then((module) => module.axios);
}
}
/**
* Get framework-specific information for help text
* @returns Framework information object
*/
export function getFrameworkInfo() {
const framework = getFramework();
return {
current: framework,
repository:
framework === "svelte"
? "huntabyte/shadcn-svelte"
: framework === "vue"
? "unovue/shadcn-vue"
: framework === "react-native"
? "founded-labs/react-native-reusables"
: "shadcn-ui/ui",
fileExtension:
framework === "svelte"
? ".svelte"
: framework === "vue"
? ".vue"
: framework === "react-native"
? ".tsx"
: ".tsx",
description:
framework === "svelte"
? "Svelte components from shadcn-svelte"
: framework === "vue"
? "Vue components from shadcn-vue"
: framework === "react-native"
? "React Native components from react-native-reusables"
: "React components from shadcn/ui v4",
};
}
/**
* Validate framework selection and provide helpful feedback
*/
export function validateFrameworkSelection() {
const framework = getFramework();
const info = getFrameworkInfo();
logInfo(`MCP Server configured for ${framework.toUpperCase()} framework`);
logInfo(`Repository: ${info.repository}`);
logInfo(`File extension: ${info.fileExtension}`);
logInfo(`Description: ${info.description}`);
// Provide helpful information about switching frameworks
if (framework === "react") {
logInfo(
"To switch frameworks: set FRAMEWORK=svelte|vue|react-native or use --framework svelte|vue|react-native"
);
} else if (framework === "svelte") {
logInfo(
"To switch frameworks: set FRAMEWORK=react|vue|react-native or use --framework react|vue|react-native"
);
} else if (framework === "vue") {
logInfo(
"To switch frameworks: set FRAMEWORK=react|svelte|react-native or use --framework react|svelte|react-native"
);
} else if (framework === "react-native") {
logInfo(
"To switch frameworks: set FRAMEWORK=react|svelte|vue or use --framework react|svelte|vue"
);
} else {
logInfo(
"To switch frameworks: set FRAMEWORK=react|svelte|vue|react-native or use --framework react|svelte|vue|react-native"
);
}
}