component-gen-cli 1.0.0

package/bin/cli.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { Command, Option } from "commander";
+import { generateComponent } from "../src/commands/generate.js";
+import { FRAMEWORKS } from "../src/generators/index.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkgPath = join(__dirname, "..", "package.json");
+const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
+
+const program = new Command();
+
+program
+  .name("cg")
+  .description("Generate UI components for popular JavaScript frameworks")
+  .version(pkg.version ?? "0.0.0");
+
+program
+  .command("generate")
+  .alias("g")
+  .argument("<name>", "Component name (PascalCase recommended, e.g. UserCard)")
+  .addOption(
+    new Option("-f, --framework <fw>", `Framework (${FRAMEWORKS.join("|")})`)
+      .choices([...FRAMEWORKS])
+      .makeOptionMandatory(true)
+  )
+  .option("-o, --out <dir>", "Output directory (default: current directory)", ".")
+  .option("--ts, --typescript", "Use TypeScript where applicable", false)
+  .option("--scss", "Use SCSS for style files (Angular / optional CSS splits)", false)
+  .option("--client", "Next.js: add \"use client\" directive", false)
+  .description("Create a component file (or Angular multi-file scaffold)")
+  .action(async (name, opts) => {
+    try {
+      const result = await generateComponent(name, opts);
+      console.log(result.message);
+      if (result.files?.length) {
+        for (const f of result.files) console.log(`  ${f}`);
+      }
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : String(err));
+      process.exitCode = 1;
+    }
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "component-gen-cli",
+  "version": "1.0.0",
+  "description": "Generate framework components for React, Vue, Angular, Svelte, Solid, and Next.js",
+  "type": "module",
+  "bin": {
+    "cg": "bin/cli.js",
+    "component-gen": "bin/cli.js"
+  },
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "node bin/cli.js",
+    "test": "node --test"
+  },
+  "keywords": [
+    "cli",
+    "generator",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "solid",
+    "nextjs",
+    "scaffold",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "commander": "^13.1.0"
+  }
+}

package/src/commands/generate.js

@@ -0,0 +1,42 @@
+import { FRAMEWORKS, buildFiles } from "../generators/index.js";
+import { parseComponentName } from "../lib/naming.js";
+import { writeTree } from "../lib/fs.js";
+
+/**
+ * @typedef {{ framework: string; out: string; typescript?: boolean; scss?: boolean; client?: boolean; ts?: boolean }} GenerateOpts
+ */
+
+/**
+ * @param {string} name
+ * @param {GenerateOpts} opts
+ */
+export async function generateComponent(name, opts) {
+  const fw = String(opts.framework ?? "").toLowerCase();
+
+  const allowed = FRAMEWORKS;
+  if (!allowed.includes(fw)) {
+    throw new Error(`Unknown framework "${opts.framework}". Use one of: ${allowed.join(", ")}`);
+  }
+
+  const identifiers = parseComponentName(name);
+
+  /** @type {GenerateOpts & { typescript: boolean }} */
+  const full = {
+    ...opts,
+    framework: fw,
+    typescript: Boolean(opts.typescript ?? opts.ts),
+    scss: Boolean(opts.scss),
+    client: Boolean(opts.client),
+    out: opts.out ?? ".",
+  };
+
+  const files = buildFiles(fw, identifiers, full);
+  const written = await writeTree(full.out, files);
+
+  const count = written.length;
+  const messageCount = `${count === 1 ? "1 file" : `${count} files`}`;
+  return {
+    message: `${messageCount} wrote for ${fw} component ${identifiers.pascal}.`,
+    files: written,
+  };
+}

package/src/generators/angular.js

@@ -0,0 +1,44 @@
+/** @typedef {import("../lib/naming.js").Identifiers} Identifiers */
+
+/**
+ * @param {Identifiers} ids
+ * @param {{ scss?: boolean }} opts
+ */
+export function angularFiles(ids, opts) {
+  const styleExt = opts.scss ? "scss" : "css";
+  const folder = ids.kebab;
+  const selector = `app-${ids.kebab}`;
+  const className = `${ids.pascal}Component`;
+
+  const tsPath = `${folder}/${ids.kebab}.component.ts`;
+  const htmlPath = `${folder}/${ids.kebab}.component.html`;
+  const stylePath = `${folder}/${ids.kebab}.component.${styleExt}`;
+
+  const tsContent = `import { Component } from "@angular/core";
+
+@Component({
+  selector: "${selector}",
+  standalone: true,
+  imports: [],
+  templateUrl: "./${ids.kebab}.component.html",
+  styleUrl: "./${ids.kebab}.component.${styleExt}",
+})
+export class ${className} {}
+`;
+
+  const htmlContent = `<section class="${ids.kebab}">
+  <p>${ids.pascal}</p>
+</section>
+`;
+
+  const styleContent = `.${ids.kebab} {
+}
+
+`;
+
+  return {
+    [tsPath]: tsContent,
+    [htmlPath]: htmlContent,
+    [stylePath]: styleContent.trimEnd() + `\n`,
+  };
+}

package/src/generators/index.js

@@ -0,0 +1,42 @@
+/** @typedef {{ pascal: string; kebab: string; camel: string; tag: string }} Identifiers */
+
+import { angularFiles } from "./angular.js";
+import { nextFiles } from "./next.js";
+import { reactLikeFiles } from "./react-like.js";
+import { svelteFiles } from "./svelte.js";
+import { vueFiles } from "./vue.js";
+
+export const FRAMEWORKS = /** @type {const} */ ([
+  "react",
+  "vue",
+  "angular",
+  "svelte",
+  "solid",
+  "next",
+]);
+
+/**
+ * @param {typeof FRAMEWORKS[number]} fw
+ * @param {Identifiers} ids
+ * @param {{ typescript: boolean; scss?: boolean; client?: boolean }} opts
+ */
+export function buildFiles(fw, ids, opts) {
+  switch (fw) {
+    case "react":
+      return reactLikeFiles(ids, { ...opts, solid: false });
+    case "solid":
+      return reactLikeFiles(ids, { ...opts, solid: true });
+    case "next":
+      return nextFiles(ids, opts);
+    case "vue":
+      return vueFiles(ids, opts);
+    case "angular":
+      return angularFiles(ids, opts);
+    case "svelte":
+      return svelteFiles(ids, opts);
+    default: {
+      const _exhaustive = fw;
+      throw new Error(`Unsupported framework: ${_exhaustive}`);
+    }
+  }
+}

package/src/generators/next.js

@@ -0,0 +1,41 @@
+/** @typedef {import("../lib/naming.js").Identifiers} Identifiers */
+
+/** @param {boolean} typescript */
+function extTs(typescript) {
+  return typescript ? "tsx" : "jsx";
+}
+
+/**
+ * @param {Identifiers} ids
+ * @param {{ typescript: boolean; client?: boolean }} opts
+ */
+export function nextFiles(ids, opts) {
+  const ext = extTs(opts.typescript);
+  const fname = `${ids.pascal}.${ext}`;
+  let head = "";
+
+  if (opts.client) {
+    head = "'use client';\n\n";
+  }
+
+  if (opts.typescript) {
+    head += `import type { ReactNode } from "react";
+`;
+  }
+
+  const nl = `
+`;
+  const propsType = opts.typescript
+    ? `type ${ids.pascal}Props = {
+  children?: ReactNode;
+};${nl}${nl}`
+    : "";
+
+  const param = opts.typescript ? `(props: ${ids.pascal}Props)` : "(props)";
+  const body = `{${nl}  return <div>${ids.pascal}</div>;${nl}}`;
+
+  const content = `${head}${propsType}export function ${ids.pascal}${param}${body}${nl}${nl}export default ${ids.pascal};
+`;
+
+  return { [fname]: content };
+}

package/src/generators/react-like.js

@@ -0,0 +1,76 @@
+/** @typedef {import("../lib/naming.js").Identifiers} Identifiers */
+
+/** @param {boolean} typescript */
+function extTs(typescript) {
+  return typescript ? "tsx" : "jsx";
+}
+
+/**
+ * @param {Identifiers} ids
+ * @param {{ typescript: boolean; solid: boolean }} opts
+ */
+export function reactLikeFiles(ids, opts) {
+  const ext = extTs(opts.typescript);
+  const fname = `${ids.pascal}.${ext}`;
+
+  if (opts.solid) {
+    return { [fname]: solidTemplate(ids, opts) };
+  }
+
+  return { [fname]: reactTemplate(ids, opts) };
+}
+
+/**
+ * @param {Identifiers} ids
+ * @param {{ typescript: boolean }} opts
+ */
+function reactTemplate(ids, opts) {
+  const nl = `
+`;
+  let head = "";
+
+  if (opts.typescript) {
+    head = `import type { ReactNode } from "react";
+`;
+  }
+
+  const propsType = opts.typescript
+    ? `type ${ids.pascal}Props = {
+  children?: ReactNode;
+};${nl}${nl}`
+    : "";
+
+  const param = opts.typescript ? `(props: ${ids.pascal}Props)` : "(props)";
+  const body = `{${nl}  return <div>${ids.pascal}</div>;${nl}}`;
+
+  return `${head}${propsType}export function ${ids.pascal}${param}${body}${nl}${nl}export default ${ids.pascal};
+`;
+}
+
+/**
+ * @param {Identifiers} ids
+ * @param {{ typescript: boolean }} opts
+ */
+function solidTemplate(ids, opts) {
+  const nl = `
+`;
+  let head = "";
+
+  if (opts.typescript) {
+    head = `import type { Component } from "solid-js";
+`;
+  }
+
+  const propsType = opts.typescript ? `export type ${ids.pascal}Props = {};${nl}${nl}` : "";
+
+  const annotation = opts.typescript
+    ? `: Component<${ids.pascal}Props>`
+    : "";
+  const body = `{${nl}  return <div>${ids.pascal}</div>;${nl}}`;
+
+  const exportLine = opts.typescript
+    ? `${head}${propsType}export const ${ids.pascal}${annotation} = (_props`
+    : `${head}export const ${ids.pascal} = (_props`;
+
+  return `${exportLine})${body}${nl}`;
+}

package/src/generators/svelte.js

@@ -0,0 +1,32 @@
+/** @typedef {import("../lib/naming.js").Identifiers} Identifiers */
+
+/**
+ * @param {Identifiers} ids
+ * @param {{ typescript: boolean }} opts
+ */
+export function svelteFiles(ids, opts) {
+  const fname = `${ids.pascal}.svelte`;
+
+  const scriptTag = opts.typescript ? `<script lang="ts">` : `<script>`;
+  const nl = `\n`;
+
+  const propsLine = opts.typescript
+    ? `  export let label = "${ids.pascal}"`
+    : `  export let label = "${ids.pascal}"`;
+
+  const content = `${scriptTag}
+${propsLine};
+</script>
+
+<div class="${ids.kebab}">
+  {label}
+</div>
+
+<style>
+  .${ids.kebab} {
+  }
+</style>
+`;
+
+  return { [fname]: content };
+}

package/src/generators/vue.js

@@ -0,0 +1,33 @@
+/** @typedef {import("../lib/naming.js").Identifiers} Identifiers */
+
+/**
+ * @param {Identifiers} ids
+ * @param {{ typescript: boolean }} opts
+ */
+export function vueFiles(ids, opts) {
+  const fname = `${ids.pascal}.vue`;
+
+  const scriptOpen = opts.typescript ? '<script setup lang="ts">' : "<script setup>";
+  const nl = `\n`;
+
+  const content = `<template>
+  <div class="${ids.kebab}">
+    {{ message }}
+  </div>
+</template>
+
+${scriptOpen}
+import { ref } from "vue";
+
+const message = ref("${ids.pascal}");
+${opts.typescript ? `// define typed props here${nl}` : ""}
+</script>
+
+<style scoped>
+.${ids.kebab} {
+}
+</style>
+`;
+
+  return { [fname]: content };
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export { generateComponent } from "./commands/generate.js";
+export { parseComponentName, toPascalCase } from "./lib/naming.js";
+export { FRAMEWORKS } from "./generators/index.js";

package/src/lib/fs.js

@@ -0,0 +1,24 @@
+import { dirname, resolve } from "node:path";
+import { mkdir } from "node:fs/promises";
+import { writeFile } from "node:fs/promises";
+
+/**
+ * @param {string} cwd
+ * @param {Record<string, string>} files Relative path → content
+ */
+export async function writeTree(cwd, files) {
+  const base = resolve(cwd);
+  const written = [];
+
+  for (const [relPath, content] of Object.entries(files)) {
+    const absolute = resolve(base, relPath);
+    if (!absolute.startsWith(base)) {
+      throw new Error(`Refused to write outside output directory: ${relPath}`);
+    }
+    await mkdir(dirname(absolute), { recursive: true });
+    await writeFile(absolute, content.endsWith("\n") ? content : `${content}\n`, "utf8");
+    written.push(absolute);
+  }
+
+  return written;
+}

package/src/lib/naming.js

@@ -0,0 +1,64 @@
+/** @param {string} raw User input component name */
+
+export function parseComponentName(raw) {
+  const trimmed = String(raw ?? "").trim();
+  if (!trimmed) throw new Error("Component name is required.");
+
+  const pascal = toPascalCase(trimmed);
+  if (/^\d/.test(pascal)) {
+    throw new Error("Component name cannot start with a digit.");
+  }
+  const camel = pascal.charAt(0).toLowerCase() + pascal.slice(1);
+  const kebab = toKebabCase(pascal);
+
+  return { pascal, kebab, camel, tag: kebab };
+}
+
+/** PascalCase-ish → kebab-case */
+/** @param {string} input */
+export function toKebabCase(input) {
+  return input
+    .replace(/([a-z\d])([A-Z])/g, "$1-$2")
+    .replace(/_/g, "-")
+    .toLowerCase();
+}
+
+/** @param {string} one Alphanumeric word possibly camelCase/PascalCase */
+function splitWords(one) {
+  return one
+
+    .replace(/([a-z\d])([A-Z])/g, "$1 $2")
+    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+    .split(/[^\w$]+/)
+    .filter(Boolean);
+}
+
+/** @param {string} input */
+export function toPascalCase(input) {
+  const raw = String(input).trim().replace(/^[^\w$]*|[^\w$]*$/g, "");
+  if (!raw) throw new Error(`Invalid component name: "${input}"`);
+
+  const segments = raw.split(/[^a-zA-Z0-9$]+/).filter(Boolean);
+
+  const words =
+    segments.length === 1
+      ? splitWords(segments[0])
+
+      : segments.flatMap(splitWords).filter(Boolean);
+
+  if (!words.length) throw new Error(`Invalid component name: "${input}"`);
+
+  const pascal = words.map(capitalizeSegment).join("");
+
+  return pascal;
+}
+
+/** @param {string} w */
+function capitalizeSegment(w) {
+  const head = w.charAt(0).toUpperCase();
+  const tail = w.slice(1).toLowerCase();
+  const result = `${head}${tail}`;
+  const looksLikeAcronym = /^[A-Z]{2,}\d*$/.test(w);
+
+  return looksLikeAcronym ? w : result;
+}