create-secra 0.1.2 → 0.1.4

package/README.md

@@ -1,6 +1,12 @@
 # create-secra
 
-Use this package to bootstrap a Secra frontend project:
+Bootstrap a Secra frontend project from a built-in local template.
+
+[中文文档](./README.zh-CN.md)
+
+## Usage
+
+Create a project:
 
 ```bash
 pnpm create secra my-app
@@ -12,10 +18,36 @@ or
 npm create secra@latest my-app
 ```
 
-By default it uses the local `template` directory in this package.
+## Template Behavior
+
+- Default template source: local `template/` directory in this package.
+- No git clone / degit is used.
+- Template copy excludes these directories:
+  - `node_modules`
+  - `dist`
+  - `.turbo`
+  - `.git`
+- The generated project's root `package.json` `name` is automatically updated from your target directory name.
+- After scaffolding, dependencies are installed automatically with your detected package manager (`pnpm`/`yarn`/`bun`/`npm`).
+
+## Override Template Source
 
-You can override the template directory temporarily:
+You can temporarily point to another local template path:
 
 ```bash
 SECRA_TEMPLATE=/absolute/path/to/template pnpm create secra my-app
 ```
+
+## Maintain the Built-in Template
+
+If you want to refresh `template/` from another project (for example `secra-front`), copy files with excludes:
+
+```bash
+rsync -a --delete \
+  --exclude node_modules \
+  --exclude dist \
+  --exclude .turbo \
+  --exclude .git \
+  /path/to/source-project/ \
+  ./template/
+```

package/README.zh-CN.md

@@ -0,0 +1,53 @@
+# create-secra
+
+基于内置本地模板快速创建 Secra 前端项目。
+
+[English README](./README.md)
+
+## 使用方式
+
+创建项目：
+
+```bash
+pnpm create secra my-app
+```
+
+或
+
+```bash
+npm create secra@latest my-app
+```
+
+## Template 功能说明
+
+- 默认模板来源：当前包内的 `template/` 目录。
+- 不使用 git clone / degit 拉取远程仓库。
+- 复制模板时会自动排除以下目录：
+  - `node_modules`
+  - `dist`
+  - `.turbo`
+  - `.git`
+- 创建项目时会根据目标目录名自动更新根目录 `package.json` 的 `name` 字段。
+- 脚手架复制完成后，会自动根据当前环境识别包管理器并安装依赖（`pnpm`/`yarn`/`bun`/`npm`）。
+
+## 临时覆盖模板目录
+
+如需临时指定其他本地模板目录，可通过环境变量：
+
+```bash
+SECRA_TEMPLATE=/absolute/path/to/template pnpm create secra my-app
+```
+
+## 维护内置模板
+
+如果你想从其他项目（例如 `secra-front`）更新 `template/`，可执行：
+
+```bash
+rsync -a --delete \
+  --exclude node_modules \
+  --exclude dist \
+  --exclude .turbo \
+  --exclude .git \
+  /path/to/source-project/ \
+  ./template/
+```

package/bin/index.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import { spawn } from "node:child_process";
-import { cpSync, existsSync, readdirSync } from "node:fs";
+import { cpSync, existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import path from "node:path";
 import process from "node:process";
@@ -18,6 +18,30 @@ function fail(message) {
   process.exit(1);
 }
 
+function toPackageName(input) {
+  const normalized = input
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+
+  return normalized || "secra-app";
+}
+
+function updatePackageName(cwd, name) {
+  const packageJsonPath = path.join(cwd, "package.json");
+  if (!existsSync(packageJsonPath)) return;
+
+  try {
+    const content = readFileSync(packageJsonPath, "utf8");
+    const json = JSON.parse(content);
+    json.name = toPackageName(name);
+    writeFileSync(packageJsonPath, `${JSON.stringify(json, null, 2)}\n`, "utf8");
+  } catch (error) {
+    fail(`Failed to update package name. ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
 function detectPackageManager() {
   const userAgent = process.env.npm_config_user_agent || "";
   if (userAgent.startsWith("pnpm")) return "pnpm";
@@ -76,6 +100,8 @@ async function main() {
     fail(`Failed to copy template. ${error instanceof Error ? error.message : String(error)}`);
   }
 
+  updatePackageName(targetPath, path.basename(targetPath));
+
   console.log(`[create-secra] Installing dependencies with ${manager} ...`);
   try {
     await runInstall(targetPath, manager);
@@ -85,7 +111,9 @@ async function main() {
 
   console.log(`[create-secra] Done. Next steps:`);
   console.log(`  cd ${targetDir}`);
-  console.log(`  ${manager === "npm" ? "npm run dev" : `${manager} dev`}`);
+  console.log(`  pnpm install`);
+  console.log(`  pnpm -r --filter "./packages/*" build`);
+  console.log(`  pnpm dev`);
 }
 
 main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-secra",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Create a Secra project from the official template.",
   "type": "module",
   "bin": {

package/template/apps/core/src/pages/index.tsx

@@ -1,4 +1,84 @@
+import type { CSSProperties } from "react";
+import reactLogo from "../assets/react.svg";
+
+const cardStyle: CSSProperties = {
+    border: "1px solid #e5e7eb",
+    borderRadius: 12,
+    padding: 16,
+    background: "#ffffff",
+    boxShadow: "0 6px 24px rgba(15, 23, 42, 0.06)",
+};
+
 const Home = () => {
-    return (<div>首页</div>);
+    return (
+        <main
+            style={{
+                minHeight: "100vh",
+                padding: "48px 20px",
+                background: "linear-gradient(180deg, #f8fafc 0%, #ffffff 100%)",
+                color: "#0f172a",
+            }}
+        >
+            <section style={{ maxWidth: 920, margin: "0 auto" }}>
+                <header style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24 }}>
+                    <img src={reactLogo} alt="React Logo" width={48} height={48} />
+                    <div>
+                        <h1 style={{ fontSize: 34, lineHeight: 1.2, margin: 0 }}>
+                            React + Vite + Secra
+                        </h1>
+                        <p style={{ margin: "8px 0 0", color: "#475569" }}>
+                            A fast starter template for modern frontend projects.
+                        </p>
+                    </div>
+                </header>
+
+                <div
+                    style={{
+                        display: "grid",
+                        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+                        gap: 14,
+                    }}
+                >
+                    <article style={cardStyle}>
+                        <h3 style={{ marginTop: 0 }}>React</h3>
+                        <p style={{ margin: 0, color: "#475569" }}>
+                            Build component-based UI with a clean and maintainable structure.
+                        </p>
+                    </article>
+                    <article style={cardStyle}>
+                        <h3 style={{ marginTop: 0 }}>Vite</h3>
+                        <p style={{ margin: 0, color: "#475569" }}>
+                            Enjoy instant startup and fast HMR for daily development.
+                        </p>
+                    </article>
+                    <article style={cardStyle}>
+                        <h3 style={{ marginTop: 0 }}>Secra</h3>
+                        <p style={{ margin: 0, color: "#475569" }}>
+                            Structured app bootstrap, routing and engineering defaults out of the box.
+                        </p>
+                    </article>
+                </div>
+
+                <section style={{ ...cardStyle, marginTop: 18 }}>
+                    <h2 style={{ marginTop: 0, fontSize: 20 }}>Quick Start</h2>
+                    <pre
+                        style={{
+                            margin: 0,
+                            padding: 14,
+                            borderRadius: 8,
+                            background: "#0f172a",
+                            color: "#e2e8f0",
+                            overflowX: "auto",
+                        }}
+                    >
+{`pnpm install
+pnpm -r --filter "./packages/*" build
+pnpm dev`}
+                    </pre>
+                </section>
+            </section>
+        </main>
+    );
 };
+
 export default Home;