@reliverse/rse-sdk/bin/providers/better-t-stack/prompts/frontend.js

@reliverse/rse-sdk allows you to create new plugins for @reliverse/rse CLI, interact with reliverse.org, and even extend your own CLI functionality (you may also try @reliverse/dler-sdk for this case).

import { re } from "@reliverse/relico";
import { cancel, isCancel, multiselect, select } from "@reliverse/rempts";
import { DEFAULT_CONFIG } from "../constants.js";
export async function getFrontendChoice(frontendOptions, backend) {
  if (frontendOptions !== void 0) return frontendOptions;
  const frontendTypes = await multiselect({
    message: "Select platforms to develop for",
    options: [
      {
        value: "web",
        label: "Web",
        hint: "React, Vue or Svelte Web Application"
      },
      {
        value: "native",
        label: "Native",
        hint: "Create a React Native/Expo app"
      }
    ],
    required: false,
    initialValues: ["web"]
  });
  if (isCancel(frontendTypes)) {
    cancel(re.red("Operation cancelled"));
    process.exit(0);
  }
  const result = [];
  if (frontendTypes.includes("web")) {
    const allWebOptions = [
      {
        value: "tanstack-router",
        label: "TanStack Router",
        hint: "Modern and scalable routing for React Applications"
      },
      {
        value: "react-router",
        label: "React Router",
        hint: "A user\u2011obsessed, standards\u2011focused, multi\u2011strategy router"
      },
      {
        value: "next",
        label: "Next.js",
        hint: "The React Framework for the Web"
      },
      {
        value: "nuxt",
        label: "Nuxt",
        hint: "The Progressive Web Framework for Vue.js"
      },
      {
        value: "svelte",
        label: "Svelte",
        hint: "web development for the rest of us"
      },
      {
        value: "solid",
        label: "Solid",
        hint: "Simple and performant reactivity for building user interfaces"
      },
      {
        value: "tanstack-start",
        label: "TanStack Start (devinxi)",
        hint: "SSR, Server Functions, API Routes and more with TanStack Router"
      }
    ];
    const webOptions = allWebOptions.filter((option) => {
      if (backend === "convex") {
        return option.value !== "nuxt" && option.value !== "solid";
      }
      return true;
    });
    const webFramework = await select({
      message: "Choose web",
      options: webOptions,
      initialValue: DEFAULT_CONFIG.frontend[0]
    });
    if (isCancel(webFramework)) {
      cancel(re.red("Operation cancelled"));
      process.exit(0);
    }
    result.push(webFramework);
  }
  if (frontendTypes.includes("native")) {
    const nativeFramework = await select({
      message: "Choose native",
      options: [
        {
          value: "native-nativewind",
          label: "NativeWind",
          hint: "Use Tailwind CSS for React Native"
        },
        {
          value: "native-unistyles",
          label: "Unistyles",
          hint: "Consistent styling for React Native"
        }
      ],
      initialValue: "native-nativewind"
    });
    if (isCancel(nativeFramework)) {
      cancel(re.red("Operation cancelled"));
      process.exit(0);
    }
    result.push(nativeFramework);
  }
  return result;
}