create-shiftapi 0.0.4 → 0.0.6

package/README.md

@@ -1,5 +1,8 @@
 <p align="center">
-	<img src="https://raw.githubusercontent.com/fcjr/shiftapi/main/assets/logo.svg" alt="ShiftAPI Logo">
+	<picture>
+		<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/fcjr/shiftapi/main/assets/logo-dark.svg">
+		<img src="https://raw.githubusercontent.com/fcjr/shiftapi/main/assets/logo.svg" alt="ShiftAPI Logo">
+	</picture>
 </p>
 
 # create-shiftapi

package/dist/index.js

@@ -78,12 +78,12 @@ 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"
@@ -97,14 +97,18 @@ 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",
@@ -126,7 +130,7 @@ 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-shiftapi",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "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>,
 );