@lazarv/create-react-server 0.0.0-experimental-d003259-20250211-2495688e

package/steps/features.mjs

@@ -0,0 +1,415 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+
+import { checkbox, Separator } from "@inquirer/prompts";
+import colors from "picocolors";
+
+import { json } from "../lib/files.mjs";
+import { createTheme } from "../lib/theme.mjs";
+
+export default async (context) => {
+  const choices = [
+    {
+      selectedName: "TypeScript",
+      name: `TypeScript ${colors.yellow("(recommended)")}`,
+      value: "ts",
+      description: "Add TypeScript support",
+      checked: context.props.preset?.features.includes("ts"),
+    },
+    new Separator(),
+    {
+      name: "ESLint",
+      value: "eslint",
+      description: "Add ESLint support",
+      checked: context.props.preset?.features.includes("eslint"),
+    },
+    {
+      name: "Prettier",
+      value: "prettier",
+      description: "Add Prettier support",
+      checked: context.props.preset?.features.includes("prettier"),
+    },
+    {
+      name: "Tailwind CSS",
+      value: "tailwind",
+      description: "Add Tailwind CSS support",
+      checked: context.props.preset?.features.includes("tailwind"),
+    },
+    {
+      name: "Lightning CSS",
+      value: "lightningcss",
+      description: "Add Lightning CSS support",
+      checked: context.props.preset?.features.includes("lightningcss"),
+    },
+    {
+      name: "CSS Modules",
+      value: "css-modules",
+      description: "Add CSS Modules support",
+      checked: context.props.preset?.features.includes("css-modules"),
+    },
+    {
+      name: "React Compiler",
+      value: "react-compiler",
+      description: "Add React Compiler support",
+      checked: context.props.preset?.features.includes("react-compiler"),
+    },
+    {
+      name: "React SWC",
+      value: "react-swc",
+      description: "Use SWC for faster builds",
+      checked: context.props.preset?.features.includes("react-swc"),
+    },
+    new Separator(),
+    {
+      name: "Git",
+      value: "git",
+      description: "Initialize a Git repository",
+      checked: context.props.preset?.features.includes("git"),
+    },
+    new Separator(),
+  ].map((choice) => ({
+    ...choice,
+    disabled: context.props.preset?.features.includes(choice.value),
+  }));
+
+  const theme = createTheme("info", {
+    ...context,
+    env: {
+      ...context.env,
+      style: {
+        disabledChoice(text) {
+          const raw = text.replace("(disabled)", "").trim();
+          const choice = choices.find((choice) => choice.name === raw);
+          const isPresetFeature = context.props.preset?.features?.includes(
+            choice?.value
+          );
+          const message = ` ${isPresetFeature ? "✅" : "  "} ${isPresetFeature ? colors.whiteBright(raw) : raw} ${colors.gray(`(${choice.reason ?? (isPresetFeature ? "preset" : "disabled")})`)}`;
+          return isPresetFeature ? message : colors.gray(message);
+        },
+      },
+      features: choices
+        .filter((choice) => choice.type !== "separator")
+        .reduce((features, choice) => {
+          features[choice.value] = choice;
+          return features;
+        }, {}),
+    },
+  });
+
+  const answer = [
+    ...(context.props.preset?.features ?? []),
+    ...(context.env.options.features?.split(",") ??
+      (!context.props.custom || context.env.hasOptions
+        ? context.props.preset.features ?? []
+        : await checkbox(
+            {
+              message: "Enabled features",
+              choices,
+              pageSize: choices.length - 2,
+              theme,
+            },
+            context
+          ))),
+  ];
+
+  const partials = {
+    ...context.partials,
+  };
+  const props = {
+    ...context.props,
+  };
+  const files = context.files;
+
+  if (answer.includes("eslint")) {
+    partials["package.json"] = {
+      ...partials["package.json"],
+      merge: [
+        ...partials["package.json"].merge,
+        await json(context.env.templateDir, "package.eslint.json"),
+        ...(answer.includes("ts")
+          ? [await json(context.env.templateDir, "package.eslint.ts.json")]
+          : []),
+      ],
+    };
+
+    partials["eslint.config.mjs"] = {
+      type: "text",
+      format: "babel",
+      template: await readFile(
+        join(context.env.templateDir, "eslint.config.template.mjs"),
+        "utf8"
+      ),
+    };
+  }
+
+  if (answer.includes("ts")) {
+    partials["tsconfig.json"] = {
+      type: "json",
+      merge: [await json(context.env.templateDir, "tsconfig.template.json")],
+    };
+
+    partials["package.json"] = {
+      ...partials["package.json"],
+      merge: [
+        ...partials["package.json"].merge,
+        await json(context.env.templateDir, "package.ts.json"),
+      ],
+    };
+
+    partials["vite.config.ts"] = {
+      type: "code",
+      merge: [
+        await readFile(join(context.env.templateDir, "vite.config.ts"), "utf8"),
+      ],
+    };
+
+    props.eslint = {
+      ...props.eslint,
+      typescript: {
+        import: `import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";`,
+        config: `...compat
+    .extends("eslint:recommended", "plugin:@typescript-eslint/recommended")
+    .map((config) => ({
+      ...config,
+      files: ["**/*.{ts,tsx}"],
+    })),
+  {
+    files: ["**/*.{ts,tsx}"],
+
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+
+      parser: tsParser,
+    },
+
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+        },
+      ],
+
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+    },
+  },`,
+      },
+    };
+  }
+
+  if (answer.includes("prettier")) {
+    partials["package.json"] = {
+      ...partials["package.json"],
+      merge: [
+        ...partials["package.json"].merge,
+        await json(context.env.templateDir, "package.prettier.json"),
+      ],
+    };
+    files.push(
+      join(context.env.templateDir, ".prettierignore"),
+      join(context.env.templateDir, ".prettierrc")
+    );
+    props.eslint = {
+      ...props.eslint,
+      prettier: {
+        import: `import prettier from "eslint-plugin-prettier";`,
+        compat: `,"plugin:prettier/recommended"`,
+        plugin: `prettier,`,
+        rules: `"prettier/prettier": [
+        "error",
+        {
+          endOfLine: "auto",
+        },
+      ],`,
+      },
+    };
+  }
+
+  if (answer.includes("tailwind")) {
+    partials["package.json"] = {
+      ...partials["package.json"],
+      merge: [
+        ...partials["package.json"].merge,
+        await json(context.env.templateDir, "package.tailwind.json"),
+      ],
+    };
+    files.push(
+      join(context.env.templateDir, "tailwind.config.mjs"),
+      join(context.env.templateDir, "postcss.config.mjs")
+    );
+  }
+
+  if (answer.includes("css-modules")) {
+    partials["package.json"] = {
+      ...partials["package.json"],
+      merge: [
+        ...partials["package.json"].merge,
+        await json(context.env.templateDir, "package.css.json"),
+      ],
+    };
+
+    if (answer.includes("ts")) {
+      partials["tsconfig.json"] = {
+        ...partials["tsconfig.json"],
+        merge: [
+          ...partials["tsconfig.json"].merge,
+          await json(context.env.templateDir, "tsconfig.css.json"),
+        ],
+      };
+    }
+  }
+
+  if (answer.includes("lightningcss")) {
+    if (!answer.includes("tailwind")) {
+      partials["package.json"] = {
+        ...partials["package.json"],
+        merge: [
+          ...partials["package.json"].merge,
+          await json(context.env.templateDir, "package.lightningcss.json"),
+        ],
+      };
+
+      if (answer.includes("ts")) {
+        partials["vite.config.ts"] = {
+          ...partials["vite.config.ts"],
+          merge: [
+            await readFile(
+              join(context.env.templateDir, "vite.config.lightningcss.ts"),
+              "utf8"
+            ),
+          ],
+        };
+      } else {
+        partials["vite.config.mjs"] = {
+          ...partials["vite.config.mjs"],
+          type: "code",
+          merge: [
+            await readFile(
+              join(context.env.templateDir, "vite.config.lightningcss.mjs"),
+              "utf8"
+            ),
+          ],
+        };
+      }
+    } else {
+      context.env.logger.warn(
+        "Lightning CSS is not compatible with Tailwind CSS v3. Lightning CSS will not be installed."
+      );
+    }
+  }
+
+  if (answer.includes("react-compiler")) {
+    partials["package.json"] = {
+      ...partials["package.json"],
+      merge: [
+        ...partials["package.json"].merge,
+        await json(context.env.templateDir, "package.react-compiler.json"),
+      ],
+    };
+    props.eslint = {
+      ...props.eslint,
+      reactCompiler: {
+        import: `import reactCompiler from "eslint-plugin-react-compiler";`,
+        plugin: `"react-compiler": reactCompiler,`,
+        rules: `"react-compiler/react-compiler": "error",`,
+      },
+    };
+
+    if (answer.includes("ts")) {
+      partials["vite.config.ts"] = {
+        ...partials["vite.config.ts"],
+        merge: [
+          ...(partials["vite.config.ts"]?.merge ?? []),
+          await readFile(
+            join(context.env.templateDir, "vite.config.react-compiler.ts"),
+            "utf8"
+          ),
+        ],
+      };
+    } else {
+      partials["vite.config.mjs"] = {
+        ...partials["vite.config.mjs"],
+        type: "code",
+        merge: [
+          ...(partials["vite.config.mjs"]?.merge ?? []),
+          await readFile(
+            join(context.env.templateDir, "vite.config.react-compiler.mjs"),
+            "utf8"
+          ),
+        ],
+      };
+    }
+  }
+
+  if (answer.includes("react-swc")) {
+    if (!answer.includes("react-compiler")) {
+      partials["package.json"] = {
+        ...partials["package.json"],
+        merge: [
+          ...partials["package.json"].merge,
+          await json(context.env.templateDir, "package.swc.json"),
+        ],
+      };
+
+      if (answer.includes("ts")) {
+        partials["vite.config.ts"] = {
+          ...partials["vite.config.ts"],
+          merge: [
+            ...(partials["vite.config.ts"]?.merge ?? []),
+            await readFile(
+              join(context.env.templateDir, "vite.config.swc.ts"),
+              "utf8"
+            ),
+          ],
+        };
+      } else {
+        partials["vite.config.mjs"] = {
+          ...partials["vite.config.mjs"],
+          type: "code",
+          merge: [
+            ...(partials["vite.config.mjs"]?.merge ?? []),
+            await readFile(
+              join(context.env.templateDir, "vite.config.swc.mjs"),
+              "utf8"
+            ),
+          ],
+        };
+      }
+    } else {
+      context.env.logger.warn(
+        "React Compiler is not yet supported when using the SWC compiler. Falling back to using the Babel compiler."
+      );
+    }
+  }
+
+  if (answer.includes("git")) {
+    partials[".gitignore"] = {
+      ...partials[".gitignore"],
+      type: "text",
+      merge: [
+        ...(partials[".gitignore"]?.merge ?? []),
+        await readFile(
+          join(context.env.templateDir, ".gitignore.template"),
+          "utf8"
+        ),
+        ...(answer.includes("eslint") ? ["\n# Cache\n.eslintcache\n"] : []),
+      ],
+    };
+  }
+
+  return {
+    ...context,
+    features: answer,
+    props,
+    files,
+    partials,
+  };
+};

package/steps/host.mjs

@@ -0,0 +1,40 @@
+import { input } from "@inquirer/prompts";
+
+import { theme } from "../lib/theme.mjs";
+
+export default async (context) => {
+  const host =
+    context.env.options.host ??
+    (!context.props.custom || context.env.hasOptions
+      ? "localhost"
+      : await input(
+          {
+            message: "Hostname",
+            default: "localhost",
+            description: "The hostname to use for the server",
+            theme,
+          },
+          context
+        ));
+  return {
+    ...context,
+    props: {
+      ...context.props,
+      host,
+    },
+    partials:
+      host !== "localhost"
+        ? {
+            ...context.partials,
+            "react-server.config.json": {
+              ...context.partials["react-server.config.json"],
+              type: "json",
+              merge: [
+                ...(context.partials["react-server.config.json"]?.merge ?? []),
+                { server: { host } },
+              ],
+            },
+          }
+        : context.partials,
+  };
+};

package/steps/index.mjs

@@ -0,0 +1,33 @@
+import alias from "./alias.mjs";
+// import authentication from "./authentication.mjs";
+// import database from "./database.mjs";
+import deploy, { prepare as prepareDeploy } from "./deploy.mjs";
+import features from "./features.mjs";
+import host from "./host.mjs";
+// import integrations from "./integrations.mjs";
+import name from "./name.mjs";
+import packageManager from "./package.mjs";
+import port from "./port.mjs";
+// import stateManagement from "./state-management.mjs";
+import preset, { prepare as preparePreset } from "./preset.mjs";
+// import thirdParty from "./third-party.mjs";
+// import ui from "./ui.mjs";
+
+export default [
+  name,
+  preset,
+  features,
+  alias,
+  // thirdParty,
+  // ui,
+  // stateManagement,
+  // database,
+  // authentication,
+  // integrations,
+  host,
+  port,
+  preparePreset,
+  deploy,
+  packageManager,
+  prepareDeploy,
+];

package/steps/integrations.mjs

@@ -0,0 +1,104 @@
+import { checkbox, Separator } from "@inquirer/prompts";
+
+import { theme } from "../lib/theme.mjs";
+
+export default [
+  (context) => context.props.thirdParty,
+  async (context) => {
+    const integrations = !context.props.custom
+      ? []
+      : await checkbox(
+          {
+            message: "Integrations",
+            choices: [
+              {
+                name: "None",
+                value: "none",
+                description: "No integrations",
+              },
+              new Separator(),
+              {
+                name: "Vitest",
+                value: "vitest",
+                description: "Run unit tests using Vitest",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Playwright",
+                value: "playwright",
+                description: "Run browser tests using Playwright",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Storybook",
+                value: "storybook",
+                description: "Create a Storybook setup",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Paraglide",
+                value: "paraglide",
+                description: "Localization using Paraglide",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Stripe",
+                value: "stripe",
+                description: "Add Stripe integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "LemonSqueezy",
+                value: "lemonsqueezy",
+                description: "Add LemonSqueezy integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Sentry",
+                value: "sentry",
+                description: "Add Sentry integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Vercel Analytics",
+                value: "vercel-analytics",
+                description: "Add Vercel Analytics integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Vercel Speed Insights",
+                value: "vercel-speed-insights",
+                description: "Add Vercel Speed Insights integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Vercel Flags",
+                value: "vercel-flags",
+                description: "Add Vercel Flags SDK integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Resend",
+                value: "resend",
+                description: "Add Resend + react-email integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "GitHub Actions",
+                value: "github-actions",
+                description: "Add GitHub Actions for CI",
+                disabled: "(coming soon)",
+              },
+              new Separator(),
+            ],
+            theme,
+          },
+          context
+        );
+
+    return {
+      ...context,
+      props: { ...context.props, integrations },
+    };
+  },
+];

package/steps/name.mjs

@@ -0,0 +1,69 @@
+import { statSync } from "node:fs";
+import { join, relative } from "node:path";
+
+import { input } from "@inquirer/prompts";
+
+import { generateProjectName } from "../lib/generate-name.mjs";
+import { theme } from "../lib/theme.mjs";
+
+const cwd = process.cwd();
+
+export default async (context) => {
+  const answer =
+    context.env.options.name ??
+    (await input(
+      {
+        message: "Project name",
+        default: generateProjectName(),
+        theme,
+        validate: async (value) => {
+          if (
+            !/^(?:(?:@(?:[a-z0-9-*~][a-z0-9-*._~]*)?\/[a-z0-9-._~])|[a-z0-9-~])[a-z0-9-._~]*$/.test(
+              value
+            )
+          ) {
+            return "Invalid project name!";
+          }
+          try {
+            if (statSync(join(cwd, value)).isDirectory()) {
+              return "Project already exists!";
+            }
+          } catch {
+            // no directory exists, so it's valid
+          }
+          return true;
+        },
+      },
+      context
+    ));
+
+  const projectDir = join(cwd, answer);
+  if (relative(cwd, projectDir).startsWith("..")) {
+    throw "Project name cannot be outside the current directory";
+  }
+
+  return {
+    ...context,
+    interactive: !context.env.options.name,
+    env: {
+      ...context.env,
+      projectDir,
+    },
+    props: {
+      ...context.props,
+      projectName: answer,
+    },
+    partials: {
+      ...context.partials,
+      "package.json": {
+        type: "json",
+        merge: [
+          {
+            name: answer,
+          },
+          ...(context.partials["package.json"]?.merge ?? []),
+        ],
+      },
+    },
+  };
+};