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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Viktor Lázár
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# @lazarv/create-react-server
+
+To bootstrap your `@lazarv/react-server` project, you can also use `@lazarv/create-react-server`, the official CLI tool to create a new project and add initial tools, features and third-party integrations to your project with ease, just by answering a few questions. To use the tool, run:
+
+```sh
+npx @lazarv/create-react-server
+```
+
+Completing the wizard, follow the instructions in your terminal to explore your new project and have fun!
+
+```
+Usage:
+  $ create-react-server [options]
+
+Options:
+  --name <name>             The name of the project 
+  --preset <preset>         The preset to use 
+  --features <features>     The features to use 
+  --alias <alias>           The TypeScript path alias to use 
+  --host <host>             The host to use 
+  --port <port>             The port to use 
+  --deploy <deploy>         The deployment adapter to use 
+  --git                     Initialize a git repository 
+  --dev                     Run in development mode 
+  --open                    Open the project in the browser 
+  --clean                   Clean the project directory before bootstrapping 
+  --no-install              Do not install dependencies (default: true)
+  --react-server <version>  The version of @lazarv/react-server to use 
+  -v, --version             Display version number 
+  -h, --help                Display this message
+```

package/generator.mjs

@@ -0,0 +1,195 @@
+import { execSync, spawn } from "node:child_process";
+import { statSync } from "node:fs";
+import { cp, mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import { extname, isAbsolute, join, relative } from "node:path";
+
+import banner from "@lazarv/react-server/lib/utils/banner.mjs";
+import merge from "@lazarv/react-server/lib/utils/merge.mjs";
+import { filesize } from "filesize";
+import colors from "picocolors";
+
+import { mergeCodeFiles } from "./lib/code-merge.mjs";
+import { format } from "./lib/formatter.mjs";
+
+const extensionColor = {
+  ".json": "magenta",
+  ".css": "magenta",
+  ".scss": "magenta",
+};
+
+function size(bytes) {
+  const s = filesize(bytes);
+  return " ".repeat(Math.max(0, 8 - s.length)) + s;
+}
+
+function logFileEmit(name, file, bytes, maxLength) {
+  const padding = " ".repeat(maxLength - file.length + 1);
+  console.log(
+    `${colors.gray(`${name}/${colors[extensionColor[extname(file)] ?? "cyan"](file.replace(/\\/g, "/"))}${padding} ${colors.bold(size(bytes))}`).replace(/^\/+/, "")}`
+  );
+}
+
+const mergeFunctions = {
+  json: async (partials) => merge(...partials),
+  text: (partials) => partials.join("\n"),
+  code: (partials) => mergeCodeFiles(...partials),
+};
+
+function renderTemplate(template, context) {
+  return template.replace(/(?:\/\*)?<%=\s*([^\s]+)\s*%>(?:\*\/)?/g, (_, key) =>
+    key.split(".").reduce((acc, k) => acc?.[k] ?? "", context)
+  );
+}
+
+export async function generate(context) {
+  const {
+    env: { logger },
+  } = context;
+
+  console.log();
+  banner("bootstrapping project");
+
+  try {
+    if (statSync(context.env.projectDir).isDirectory()) {
+      if (context.env.options.clean) {
+        await rm(context.env.projectDir, { recursive: true });
+      } else {
+        logger.error(
+          `Directory ${colors.italic(relative(context.env.cwd, context.env.projectDir))} already exists!`
+        );
+        process.exit(1);
+      }
+    }
+  } catch {
+    // directory does not exist
+  }
+
+  await mkdir(context.env.projectDir, { recursive: true });
+
+  const maxLength = Math.max(
+    24,
+    ...(context.files?.map((file) => file.length) ?? []),
+    ...Object.keys(context.partials)
+  );
+  if (context.files?.length > 0) {
+    const { files } = context;
+
+    for (const file of files) {
+      const filename = relative(
+        context.env.projectDir,
+        Array.isArray(file) ? file[1] : file
+      );
+      if (context.partials[filename]) {
+        const partial = context.partials[filename];
+        if (partial.merge) {
+          const content = await readFile(
+            Array.isArray(file) ? file[0] : file,
+            "utf8"
+          );
+          partial.merge = [
+            ...partial.merge,
+            partial.type === "json" ? JSON.parse(content) : content,
+          ];
+        }
+        continue;
+      }
+      const [src, dest] = Array.isArray(file)
+        ? file
+        : [
+            isAbsolute(file) ? file : join(context.env.templateAppDir, file),
+            join(
+              context.env.projectDir,
+              relative(context.env.templateDir, file)
+            ),
+          ];
+      logFileEmit(
+        context.props.projectName,
+        relative(context.env.projectDir, dest),
+        statSync(src).size,
+        maxLength
+      );
+      await cp(src, dest);
+    }
+  }
+
+  for (const [file, partial] of Object.entries(context.partials)) {
+    if (partial.merge) {
+      partial.content = await mergeFunctions[partial.type](partial.merge);
+    }
+
+    if (partial.template) {
+      partial.content = renderTemplate(partial.template, context);
+    }
+
+    if (partial.type === "json") {
+      partial.content = `${JSON.stringify(partial.content, null, 2)}\n`;
+    }
+
+    const content =
+      partial.type === "json"
+        ? await format(partial.content, "json")
+        : partial.format
+          ? await format(
+              partial.content,
+              typeof partial.format === "string" ? partial.format : "js"
+            )
+          : partial.content;
+    logFileEmit(context.props.projectName, file, content.length, maxLength);
+    await writeFile(join(context.env.projectDir, file), content, "utf8");
+  }
+
+  console.log();
+
+  if (
+    context.env.options.git ||
+    (context.features.includes("git") && context.env.options.git !== false)
+  ) {
+    logger.info("Initializing git repository 🗃️");
+    execSync("git init", { cwd: context.env.projectDir, stdio: "ignore" });
+  }
+
+  if (
+    context.props.packageManager &&
+    context.env.options.install !== false &&
+    context.props.packageManager.install !== false &&
+    (!context.props.custom ||
+      (context.props.custom && context.props.packageManager.install !== false))
+  ) {
+    logger.info(
+      `Installing dependencies using ${context.props.packageManager.name} 📦`
+    );
+
+    await new Promise((resolve, reject) => {
+      const child = spawn(
+        context.props.packageManager.name,
+        ["install", ...context.props.packageManager.ciInstallArgs.split(" ")],
+        {
+          cwd: context.env.projectDir,
+          encoding: "utf8",
+          stdio: ["inherit", "pipe", "pipe"],
+          env: { ...process.env, NPM_CONFIG_COLOR: "always", CI: "1" },
+        }
+      );
+
+      child.stdout.on("data", (data) => {
+        process.stdout.write(colors.gray(data));
+      });
+      child.stderr.on("data", (data) => {
+        process.stdout.write(colors.gray(data));
+      });
+      child.on("close", (code) => {
+        if (code === 0) {
+          resolve(code);
+        } else {
+          reject(new Error(`Process exited with code ${code}`));
+        }
+      });
+    });
+
+    console.log();
+    logger.info("Ready to launch your project! 🚀");
+  } else {
+    logger.warn("You need to install dependencies to start your project!");
+    context.props.installInstructions = true;
+  }
+}

package/globals.d.ts

@@ -0,0 +1,59 @@
+interface VitePlugin {
+  (): {
+    name: string;
+  };
+}
+
+declare module "vite" {
+  export interface UserConfig {
+    resolve?: {
+      alias?: Record<string, string>;
+    };
+    plugins?: VitePlugin[];
+    css?: {
+      transformer?: string;
+      lightningcss?: {
+        targets?: Record<string, string>;
+      };
+    };
+    build?: {
+      cssMinify?: string;
+    };
+  }
+  export function defineConfig(config: UserConfig): UserConfig;
+}
+
+declare namespace global {
+  interface ImportMeta {
+    readonly url: URL;
+  }
+}
+
+declare module "@vitejs/plugin-react" {
+  export default function reactPlugin(options: {
+    babel?: {
+      plugins: [
+        [
+          "babel-plugin-react-compiler",
+          {
+            compilationMode: "annotation";
+          },
+        ],
+      ];
+    };
+  }): VitePlugin;
+}
+
+declare module "@vitejs/plugin-react-swc" {
+  export default function reactSwcPlugin(): VitePlugin;
+}
+
+declare module "browserslist" {
+  export default function browserslist(query: string): string[];
+}
+
+declare module "lightningcss" {
+  export function browserslistToTargets(
+    browsers: string[]
+  ): Record<string, string>;
+}

package/index.mjs

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+
+import {
+  experimentalWarningSilence,
+  suppressReactWarnings,
+} from "@lazarv/react-server/lib/sys.mjs";
+
+experimentalWarningSilence();
+suppressReactWarnings();
+
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import createLogger from "@lazarv/react-server/lib/dev/create-logger.mjs";
+import cac from "cac";
+
+const cli = cac();
+
+const { default: packageJson } = await import("./package.json", {
+  with: { type: "json" },
+});
+
+cli.usage("[options]");
+
+cli
+  .option("--name <name>", "The name of the project")
+  .option("--preset <preset>", "The preset to use")
+  .option("--features <features>", "The features to use")
+  .option("--alias <alias>", "The TypeScript path alias to use")
+  .option("--host <host>", "The host to use")
+  .option("--port <port>", "The port to use")
+  .option("--deploy <deploy>", "The deployment adapter to use")
+  .option("--git", "Initialize a git repository")
+  .option("--dev", "Run in development mode")
+  .option("--open", "Open the project in the browser")
+  .option("--clean", "Clean the project directory before bootstrapping")
+  .option("--no-install", "Do not install dependencies")
+  .option(
+    "--react-server <version>",
+    "The version of @lazarv/react-server to use"
+  )
+  .version(packageJson.version);
+
+cli.name = packageJson.name.split("/").pop();
+cli.help();
+
+const { options } = cli.parse();
+const {
+  help,
+  v: version,
+  reactServer,
+  install,
+  // eslint-disable-next-line no-unused-vars
+  "--": _,
+  ...createOptions
+} = options;
+const hasOptions = Object.keys(createOptions).length > 1 || install === false;
+createOptions.install = install;
+
+if (help || version) {
+  process.exit(0);
+}
+
+await import("./logo.mjs");
+
+const logger = createLogger();
+
+const cwd = process.cwd();
+const templateDir = join(dirname(fileURLToPath(import.meta.url)), "templates");
+
+const [{ wizard }, { generate }, { launch }] = await Promise.all([
+  import("./wizard.mjs"),
+  import("./generator.mjs"),
+  import("./launch.mjs"),
+]);
+
+const context = await wizard({
+  cwd,
+  logger,
+  templateDir,
+  hasOptions,
+  options: createOptions,
+  reactServer,
+});
+
+await generate(context);
+await launch(context);

package/launch.mjs

@@ -0,0 +1,136 @@
+import { spawn } from "node:child_process";
+import { relative } from "node:path";
+
+import { confirm } from "@inquirer/prompts";
+import colors from "picocolors";
+
+import { theme } from "./lib/theme.mjs";
+
+export async function launch(context) {
+  const {
+    env: { cwd, logger, projectDir },
+    props: {
+      packageManager: { name: packageManager },
+      adapter,
+      projectName,
+      port,
+    },
+  } = context;
+
+  const launchInDev =
+    context.env.options.install !== false &&
+    context.props.packageManager.install !== false &&
+    (context.env.options.dev ??
+      (context.env.hasOptions
+        ? false
+        : await confirm({
+            message: "Launch in development mode?",
+            theme,
+          })));
+
+  const devCommand = {
+    npm: "npm run dev",
+    pnpm: "pnpm dev",
+    yarn: "yarn dev",
+  };
+
+  const buildCommand = {
+    npm: "npm run build",
+    pnpm: "pnpm build",
+    yarn: "yarn build",
+  };
+
+  const startCommand = {
+    npm: "npm start",
+    pnpm: "pnpm start",
+    yarn: "yarn start",
+  };
+
+  const instructions = () => {
+    console.log(`\n📂 You can launch your project later by changing into the project directory by running:
+${colors.cyan(`cd ${relative(cwd, projectDir)}`)}
+
+${
+  context.props.installInstructions
+    ? `📦 To install dependencies, run:
+${colors.cyan(`${context.props.packageManager.name} install`)}
+
+`
+    : ""
+}Then choose from the following commands.
+
+🚧 To launch the project in development mode, run:
+${colors.cyan(devCommand[packageManager])}
+
+🔧 To build the project for production, run:
+${colors.cyan(buildCommand[packageManager])}
+
+🚀 To start the production server, run:
+${colors.cyan(startCommand[packageManager])}
+${
+  adapter === "docker"
+    ? `\n🐳 To build a Docker image and start your application in a Docker container, run:
+${colors.cyan(`docker build -t ${projectName} .`)}
+${colors.cyan(`docker run --rm -ti -p ${port}:${port} ${projectName}`)}\n`
+    : ""
+}
+💕 Thanks for choosing ${colors.bold("@lazarv/react-server")}!
+📚 Check out the documentation at ${colors.underline("https://react-server.dev")}
+💻 Happy coding!
+`);
+  };
+
+  if (launchInDev) {
+    process.chdir(projectDir);
+    const server = spawn(
+      packageManager,
+      [
+        ...(packageManager === "npm" ? ["run"] : []),
+        "dev",
+        ...(packageManager === "pnpm" ? [] : ["--"]),
+        "--host",
+        context.props.host,
+        "--port",
+        context.props.port,
+        ...(context.env.options.open || !context.props.custom
+          ? ["--open"]
+          : []),
+      ],
+      {
+        cwd: projectDir,
+        stdio: ["inherit", "pipe", "pipe"],
+        shell: true,
+        env: {
+          ...process.env,
+          NODE_ENV: "development",
+          NO_REACT_SERVER_LOGO: "true",
+          FORCE_COLOR: process.env.NO_COLOR ? undefined : "true",
+        },
+      }
+    );
+    server.stdout.on("data", (data) => {
+      let out = data;
+      const message = data.toString();
+      const lines = message.split("\n");
+      if (lines.length > 1) {
+        out = lines.filter((line) => !line.startsWith("> ")).join("\n");
+        out = out.replace(/\n\n/g, "\n");
+      }
+      process.stdout.write(out);
+    });
+    server.stderr.on("data", (data) => {
+      process.stderr.write(data);
+    });
+    server.on("error", (error) => {
+      logger.error(error);
+      process.exit(1);
+    });
+    server.on("close", () => {
+      process.chdir(cwd);
+      instructions();
+      process.exit(server.status);
+    });
+  } else {
+    instructions();
+  }
+}