create-shiftapi 0.0.5 → 0.0.7

package/dist/index.js

@@ -16,10 +16,14 @@ var renameFiles = {
 };
 var pkgDir = path.resolve(fileURLToPath(import.meta.url), "../..");
 var templatesDir = path.join(pkgDir, "templates");
-var pkgVersion = JSON.parse(
-  fs.readFileSync(path.join(pkgDir, "package.json"), "utf-8")
-).version;
-function replaceplaceholders(content, opts) {
+var pkgVersion = "0.0.0";
+try {
+  pkgVersion = JSON.parse(
+    fs.readFileSync(path.join(pkgDir, "package.json"), "utf-8")
+  ).version;
+} catch {
+}
+function replacePlaceholders(content, opts) {
   return content.replaceAll("{{name}}", opts.name).replaceAll("{{modulePath}}", opts.modulePath).replaceAll("{{port}}", opts.port).replaceAll("{{version}}", pkgVersion);
 }
 function renamePath(filePath, opts) {
@@ -37,7 +41,7 @@ function copyDir(srcDir, destDir, opts) {
     } else {
       const content = fs.readFileSync(srcPath, "utf-8");
       fs.mkdirSync(path.dirname(destPath), { recursive: true });
-      fs.writeFileSync(destPath, replaceplaceholders(content, opts));
+      fs.writeFileSync(destPath, replacePlaceholders(content, opts));
     }
   }
 }
@@ -52,6 +56,39 @@ function gitInit(cwd) {
     });
   });
 }
+function checkCommand(cmd) {
+  return new Promise((resolve, reject) => {
+    execFile(cmd, ["version"], (err) => {
+      if (err) {
+        reject(new Error(`"${cmd}" is not installed or not on PATH. Please install it and try again.`));
+        return;
+      }
+      resolve();
+    });
+  });
+}
+async function installDeps(cwd) {
+  await checkCommand("go");
+  await new Promise((resolve, reject) => {
+    execFile("go", ["mod", "tidy"], { cwd }, (err) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve();
+    });
+  });
+  await checkCommand("npm");
+  await new Promise((resolve, reject) => {
+    execFile("npm", ["install"], { cwd }, (err) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve();
+    });
+  });
+}
 async function scaffold(opts) {
   copyDir(path.join(templatesDir, "base"), opts.targetDir, opts);
   copyDir(path.join(templatesDir, opts.framework), opts.targetDir, opts);
@@ -78,15 +115,20 @@ function getGitHubUser() {
   }
 }
 async function main() {
-  const positionalName = process.argv[2];
+  const positionalArg = process.argv[2];
   const ghUser = getGitHubUser();
   p.intro("create-shiftapi");
   const project = await p.group(
     {
-      name: () => positionalName ? Promise.resolve(positionalName) : p.text({
+      rawName: () => positionalArg ? Promise.resolve(positionalArg) : p.text({
         message: "Project name",
         placeholder: "my-app",
-        defaultValue: "my-app"
+        defaultValue: "my-app",
+        validate: (value) => {
+          if (!/^[a-zA-Z0-9_-]+$/.test(value)) {
+            return "Project name must only contain letters, numbers, hyphens, and underscores";
+          }
+        }
       }),
       framework: () => p.select({
         message: "Framework",
@@ -97,18 +139,28 @@ async function main() {
       }),
       directory: ({ results }) => p.text({
         message: "Directory",
-        placeholder: `./${results.name}`,
-        defaultValue: `./${results.name}`
-      }),
-      module: ({ results }) => p.text({
-        message: "Go module path",
-        placeholder: ghUser ? `github.com/${ghUser}/${results.name}` : results.name,
-        defaultValue: ghUser ? `github.com/${ghUser}/${results.name}` : results.name
+        placeholder: `./${results.rawName}`,
+        defaultValue: `./${results.rawName}`
       }),
+      module: ({ results }) => {
+        const name = path2.basename(results.rawName);
+        const defaultModule = ghUser ? `github.com/${ghUser}/${name}` : name;
+        return p.text({
+          message: "Go module path",
+          placeholder: defaultModule,
+          defaultValue: defaultModule
+        });
+      },
       port: () => p.text({
         message: "Server port",
         placeholder: "8080",
-        defaultValue: "8080"
+        defaultValue: "8080",
+        validate: (value) => {
+          const n = parseInt(value, 10);
+          if (isNaN(n) || n < 1 || n > 65535) {
+            return "Port must be a number between 1 and 65535";
+          }
+        }
       })
     },
     {
@@ -126,18 +178,29 @@ async function main() {
   const s = p.spinner();
   s.start("Scaffolding project");
   await scaffold({
-    name: project.name,
+    name: path2.basename(project.rawName),
     modulePath: project.module,
     port: project.port,
     framework: project.framework,
     targetDir
   });
   s.stop("Project scaffolded");
+  const shouldInstallDeps = await p.confirm({
+    message: "Install dependencies? (go mod tidy & npm install)",
+    initialValue: true
+  });
+  if (p.isCancel(shouldInstallDeps)) {
+    p.cancel("Cancelled.");
+    process.exit(1);
+  }
+  if (shouldInstallDeps) {
+    s.start("Installing dependencies");
+    await installDeps(targetDir);
+    s.stop("Dependencies installed");
+  }
   const relDir = path2.relative(process.cwd(), targetDir) || ".";
-  p.note(
-    [`cd ${relDir}`, "go mod tidy", "npm install", "npm run dev"].join("\n"),
-    "Next steps"
-  );
+  const steps = shouldInstallDeps ? [`cd ${relDir}`, "npm run dev"] : [`cd ${relDir}`, "go mod tidy", "npm install", "npm run dev"];
+  p.note(steps.join("\n"), "Next steps");
   p.outro("Happy hacking!");
 }
 main().catch((err) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-shiftapi",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Scaffold a new ShiftAPI fullstack app",
   "author": "Frank Chiarulli Jr. <frank@frankchiarulli.com>",
   "license": "MIT",

package/templates/react/apps/web/package.json

@@ -8,6 +8,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "openapi-react-query": "^0.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/templates/react/apps/web/src/App.tsx

@@ -1,42 +1,27 @@
-import { useEffect, useState } from "react";
-import type { FormEvent } from "react";
-import { client } from "@shiftapi/client";
+import { useState } from "react";
+import { $api } from "./api";
 
 export default function App() {
-  const [output, setOutput] = useState("");
+  const [message, setMessage] = useState("");
+  const health = $api.useQuery("get", "/health");
+  const echo = $api.useMutation("post", "/echo");
 
-  useEffect(() => {
-    client.GET("/health").then(({ error }) => {
-      if (error) {
-        setOutput(`Health check failed: ${error.message}`);
-      } else {
-        setOutput("Health check passed. Try sending a message.");
-      }
-    });
-  }, []);
-
-  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    const message = (formData.get("message") as string).trim();
-    if (!message) return;
-    setOutput("Loading...");
-    const { data, error } = await client.POST("/echo", { body: { message } });
-    if (error) {
-      setOutput(`Error: ${error.message}`);
-    } else {
-      setOutput(`Echo: ${data.message}`);
-    }
-  }
+  if (health.isLoading) return <p>Loading...</p>;
+  if (health.error) return <p>Health check failed: {health.error.message}</p>;
 
   return (
     <div>
       <h1>{{name}}</h1>
-      <form onSubmit={handleSubmit}>
-        <input type="text" name="message" placeholder="Enter a message" />
-        <button type="submit">Send</button>
-      </form>
-      <pre>{output}</pre>
+      <input
+        type="text"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="Enter a message"
+      />
+      <button onClick={() => echo.mutate({ body: { message } })}>Send</button>
+      {echo.isPending && <p>Loading...</p>}
+      {echo.error && <p>Error: {echo.error.message}</p>}
+      {echo.data && <pre>Echo: {echo.data.message}</pre>}
     </div>
   );
 }

package/templates/react/apps/web/src/api.ts

@@ -0,0 +1,4 @@
+import createClient from "openapi-react-query";
+import { client } from "@shiftapi/client";
+
+export const $api = createClient(client);

package/templates/react/apps/web/src/main.tsx

@@ -1,9 +1,14 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import App from "./App";
 
+const queryClient = new QueryClient();
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>,
 );