@wasp.sh/wasp-cli-darwin-arm64-unknown 0.20.2 → 0.21.0

package/data/Cli/starters/basic/README.md

@@ -7,7 +7,7 @@ Basic starter is a well-rounded template that showcases the most important bits
 - **Node.js** (newest LTS version recommended): We recommend install Node through a Node version manager, e.g. `nvm`.
 - **Wasp** (latest version): Install via
   ```sh
-  curl -sSL https://get.wasp.sh/installer.sh | sh
+  npm i -g @wasp.sh/wasp-cli@latest
   ```
 
 ## Using the template

package/data/Cli/starters/basic/package.json

@@ -1,27 +1,30 @@
 {
   "name": "__waspAppName__",
   "type": "module",
-  "workspaces": [".wasp/build/*", ".wasp/out/*"],
+  "workspaces": [
+    ".wasp/out/*",
+    ".wasp/out/sdk/wasp"
+  ],
   "dependencies": {
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
-    "react-hook-form": "^7.57.0",
-    "react-router-dom": "^6.26.2",
-    "tailwind-merge": "~2.6.0",
-    "wasp": "file:.wasp/out/sdk/wasp"
+    "react-hook-form": "^7.69.0",
+    "react-router": "^7.12.0",
+    "tailwind-merge": "~3.4.0",
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "@tailwindcss/vite": "^4.1.18",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.1.0",
     "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "prisma": "5.19.1",
-    "tailwindcss": "^3.4.17",
     "typescript": "5.8.2",
     "typescript-eslint": "^8.32.1",
     "vite": "^7.0.6"

package/data/Cli/starters/basic/src/App.css

@@ -1,13 +1,31 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .card {
-    @apply rounded-xl border border-neutral-200 bg-white shadow-sm transition-all duration-200;
-  }
-
-  .label {
-    @apply text-sm font-medium text-neutral-700;
-  }
+@import "tailwindcss";
+
+@theme {
+  --text-tiny: 0.625rem; /* Font size is 10px */
+  --text-tiny--line-height: 1rem;
+
+  /* Created using https://www.tints.dev */
+  --color-primary-50: #fffbeb;
+  --color-primary-100: #fff7d6;
+  --color-primary-200: #ffefad;
+  --color-primary-300: #ffe680;
+  --color-primary-400: #ffda47;
+  --color-primary-500: #ffcc00;
+  --color-primary-600: #e6b800;
+  --color-primary-700: #cca300;
+  --color-primary-800: #a88700;
+  --color-primary-900: #7a6200;
+  --color-primary-950: #574500;
+}
+
+body {
+  @apply has-[dialog:open]:overflow-hidden;
+}
+
+@utility card {
+  @apply rounded-xl border border-neutral-200 bg-white shadow-xs transition-all duration-200;
+}
+
+@utility label {
+  @apply text-sm font-medium text-neutral-700;
 }

package/data/Cli/starters/basic/src/App.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import "./App.css";
 import { Header } from "./shared/components/Header";
 

package/data/Cli/starters/basic/src/auth/AuthLayout.tsx

@@ -1,4 +1,6 @@
-export function AuthLayout({ children }: React.PropsWithChildren) {
+import { ReactNode } from "react";
+
+export function AuthLayout({ children }: { children: ReactNode }) {
   return (
     <div className="flex justify-center">
       {/* Auth UI has margin-top on title, so we lower the top padding */}

package/data/Cli/starters/basic/src/auth/email/EmailVerificationPage.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { VerifyEmailForm } from "wasp/client/auth";
 import { AuthLayout } from "../AuthLayout";
 
@@ -8,7 +8,7 @@ export function EmailVerificationPage() {
       <VerifyEmailForm />
       <br />
       <span className="text-sm font-medium text-neutral-900">
-        {"If everything is okay, "}
+        If everything is okay,{" "}
         <Link to="/login" className="font-semibold underline">
           go to login
         </Link>

package/data/Cli/starters/basic/src/auth/email/LoginPage.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { LoginForm } from "wasp/client/auth";
 import { AuthLayout } from "../AuthLayout";
 
@@ -8,7 +8,7 @@ export function LoginPage() {
       <LoginForm />
       <br />
       <span className="text-sm font-medium text-neutral-900">
-        {"Don't have an account yet? "}
+        Don&apos;t have an account yet?{" "}
         <Link to="/signup" className="font-semibold underline">
           Go to signup
         </Link>
@@ -16,7 +16,7 @@ export function LoginPage() {
       </span>
       <br />
       <span className="text-sm font-medium text-neutral-900">
-        {"Forgot your password? "}
+        Forgot your password?{" "}
         <Link to="/request-password-reset" className="font-semibold underline">
           Reset it
         </Link>

package/data/Cli/starters/basic/src/auth/email/PasswordResetPage.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { ResetPasswordForm } from "wasp/client/auth";
 import { AuthLayout } from "../AuthLayout";
 
@@ -8,7 +8,7 @@ export function PasswordResetPage() {
       <ResetPasswordForm />
       <br />
       <span className="text-sm font-medium text-neutral-900">
-        {"If everything is okay, "}
+        If everything is okay,{" "}
         <Link to="/login" className="font-semibold underline">
           go to login
         </Link>

package/data/Cli/starters/basic/src/auth/email/SignupPage.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { SignupForm } from "wasp/client/auth";
 import { AuthLayout } from "../AuthLayout";
 
@@ -23,7 +23,7 @@ export function SignupPage() {
       />
       <br />
       <span className="text-sm font-medium text-neutral-900">
-        {"Already have an account? "}
+        Already have an account?{" "}
         <Link to="/login" className="font-semibold underline">
           Go to login
         </Link>

package/data/Cli/starters/basic/src/shared/components/Button.tsx

@@ -1,10 +1,11 @@
+import { ComponentProps } from "react";
 import { ClassNameValue, twJoin } from "tailwind-merge";
 import { Link } from "wasp/client/router";
 
 type ButtonSize = "md" | "sm" | "xs";
 type ButtonVariant = "primary" | "danger" | "ghost";
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends ComponentProps<"button"> {
   size?: ButtonSize;
   variant?: ButtonVariant;
 }
@@ -32,7 +33,7 @@ export function Button({
   );
 }
 
-type ButtonLinkProps = React.ComponentProps<typeof Link> & {
+type ButtonLinkProps = ComponentProps<typeof Link> & {
   size?: ButtonSize;
   variant?: ButtonVariant;
 };

package/data/Cli/starters/basic/src/shared/components/Dialog.tsx

@@ -1,10 +1,12 @@
-import React from "react";
+import { MouseEvent, ReactNode, useCallback, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
 import { twJoin } from "tailwind-merge";
 
-interface DialogProps extends React.PropsWithChildren {
+interface DialogProps {
   open: boolean;
   onClose: () => void;
   closeOnClickOutside?: boolean;
+  children?: ReactNode;
 }
 
 export function Dialog({
@@ -13,9 +15,9 @@ export function Dialog({
   children,
   closeOnClickOutside = true,
 }: DialogProps) {
-  const dialogRef = React.useRef<HTMLDialogElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
 
-  React.useEffect(
+  useEffect(
     function handleShowOrCloseDialog() {
       const dialog = dialogRef.current;
       if (!dialog) return;
@@ -29,57 +31,37 @@ export function Dialog({
     [open],
   );
 
-  React.useEffect(
-    function handleCloseOnClickOutside() {
-      if (!closeOnClickOutside) return;
-
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
       const dialog = dialogRef.current;
-      if (!dialog) return;
-
-      const handleClick = (e: MouseEvent) => {
-        const rect = dialog.getBoundingClientRect();
-        const clickedOutside =
-          e.clientX < rect.left ||
-          e.clientX > rect.right ||
-          e.clientY < rect.top ||
-          e.clientY > rect.bottom;
+      if (!closeOnClickOutside || !dialog) return;
 
-        if (clickedOutside) {
-          onClose();
-        }
-      };
+      const rect = dialog.getBoundingClientRect();
+      const clickedOutside =
+        e.clientX < rect.left ||
+        e.clientX > rect.right ||
+        e.clientY < rect.top ||
+        e.clientY > rect.bottom;
 
-      dialog.addEventListener("click", handleClick);
-      return () => {
-        dialog.removeEventListener("click", handleClick);
-      };
+      if (clickedOutside) {
+        onClose();
+      }
     },
     [closeOnClickOutside, onClose],
   );
 
-  React.useEffect(
-    function handlePreventScroll() {
-      if (!open) return;
-
-      const originalOverflow = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
-      return () => {
-        document.body.style.overflow = originalOverflow;
-      };
-    },
-    [open],
-  );
-
-  return (
+  return createPortal(
     <dialog
       ref={dialogRef}
       className={twJoin(
         "max-h top-[20vh] my-0 flex max-h-[55vh]",
-        "bg-transparent backdrop:bg-black/50 backdrop:backdrop-blur-sm",
+        "bg-transparent backdrop:bg-black/50 backdrop:backdrop-blur-xs",
       )}
       onClose={onClose}
+      onClick={handleClick}
     >
       {children}
-    </dialog>
+    </dialog>,
+    document.body,
   );
 }

package/data/Cli/starters/basic/src/shared/components/Header.tsx

@@ -7,8 +7,8 @@ export function Header() {
   const { data: user } = useAuth();
 
   return (
-    <header className="sticky top-0 z-10 flex justify-center border-b border-neutral-200 bg-white shadow">
-      <div className="flex w-full max-w-screen-lg items-center justify-between p-4 px-12">
+    <header className="sticky top-0 z-10 flex justify-center border-b border-neutral-200 bg-white shadow-sm">
+      <div className="flex w-full max-w-(--breakpoint-lg) items-center justify-between p-4 px-12">
         <Link to="/" className="flex items-center gap-2">
           <img src={Logo} alt="Todo App Logo" className="h-10 w-10" />
           <h1 className="text-2xl font-semibold">Todo App</h1>

package/data/Cli/starters/basic/src/shared/components/Input.tsx

@@ -1,36 +1,33 @@
-import React from "react";
+import { ComponentProps, useId } from "react";
 import { ControllerFieldState } from "react-hook-form";
 import { twJoin } from "tailwind-merge";
 
-interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "id"> {
+interface InputProps extends Omit<ComponentProps<"input">, "children" | "id"> {
   label: string;
   fieldState: ControllerFieldState;
 }
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  function Input({ className, label, fieldState, ...props }, ref) {
-    const id = React.useId();
-    return (
-      <div className="flex flex-col gap-1">
-        <label htmlFor={id} className="label">
-          {label}
-        </label>
-        <input
-          id={id}
-          className={twJoin(
-            "w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-neutral-800 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500",
-            className,
-          )}
-          {...props}
-          ref={ref}
-        />
-        {fieldState.error && (
-          <span className="text-sm text-red-500">
-            {fieldState.error.message}
-          </span>
+export function Input({ className, label, fieldState, ...props }: InputProps) {
+  const id = useId();
+
+  return (
+    <div className="flex flex-col gap-1">
+      <label htmlFor={id} className="label">
+        {label}
+      </label>
+
+      <input
+        id={id}
+        className={twJoin(
+          "w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-neutral-800 shadow-xs focus:border-primary-500 focus:outline-hidden focus:ring-1 focus:ring-primary-500",
+          className,
         )}
-      </div>
-    );
-  },
-);
+        {...props}
+      />
+
+      {fieldState.error && (
+        <span className="text-sm text-red-500">{fieldState.error.message}</span>
+      )}
+    </div>
+  );
+}

package/data/Cli/starters/basic/src/tags/components/ColorRadioButton.tsx

@@ -1,13 +1,12 @@
-import React from "react";
+import { ComponentProps, useId } from "react";
 import { twJoin } from "tailwind-merge";
 
-interface ColorRadioButtonProps
-  extends Required<
-    Pick<
-      React.InputHTMLAttributes<HTMLInputElement>,
-      "name" | "checked" | "value" | "onChange" | "title"
-    >
-  > {
+interface ColorRadioButtonProps extends Required<
+  Pick<
+    ComponentProps<"input">,
+    "name" | "checked" | "value" | "onChange" | "title"
+  >
+> {
   bgColor: string;
 }
 
@@ -17,7 +16,7 @@ export function ColorRadioButton({
   title,
   ...props
 }: ColorRadioButtonProps) {
-  const id = React.useId();
+  const id = useId();
 
   return (
     <div className="relative flex items-center">

package/data/Cli/starters/basic/src/tags/components/CreateTagDialog.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import { useId, useState } from "react";
 import { Button } from "../../shared/components/Button";
 import { Dialog } from "../../shared/components/Dialog";
-import { Portal } from "../../shared/components/Portal";
-import { CREATE_TAG_FORM_ID, CreateTagForm } from "./CreateTagForm";
+import { CreateTagForm } from "./CreateTagForm";
 
 export function CreateTagDialog() {
-  const [tagDialogOpen, setTagDialogOpen] = React.useState(false);
+  const formId = useId();
+  const [tagDialogOpen, setTagDialogOpen] = useState(false);
 
   return (
     <>
@@ -19,31 +19,31 @@ export function CreateTagDialog() {
         <span>+</span>
       </Button>
       {tagDialogOpen && (
-        <Portal>
-          <Dialog open={tagDialogOpen} onClose={() => setTagDialogOpen(false)}>
-            <section className="card relative flex flex-col">
-              <header className="px-4 py-6 lg:px-6 lg:py-8">
-                <h2 className="text-xl font-semibold">Create a new tag</h2>
-              </header>
-              <div className="overflow-y-auto p-4 lg:p-6">
-                <CreateTagForm onTagCreated={() => setTagDialogOpen(false)} />
-              </div>
-              <footer className="flex justify-end gap-2 px-4 py-6 lg:px-6 lg:py-8">
-                <Button form={CREATE_TAG_FORM_ID} type="submit">
-                  Create
-                </Button>
-                <Button
-                  form={CREATE_TAG_FORM_ID}
-                  type="button"
-                  onClick={() => setTagDialogOpen(false)}
-                  variant="ghost"
-                >
-                  Cancel
-                </Button>
-              </footer>
-            </section>
-          </Dialog>
-        </Portal>
+        <Dialog open={tagDialogOpen} onClose={() => setTagDialogOpen(false)}>
+          <section className="card relative flex flex-col">
+            <header className="px-4 py-6 lg:px-6 lg:py-8">
+              <h2 className="text-xl font-semibold">Create a new tag</h2>
+            </header>
+            <div className="overflow-y-auto p-4 lg:p-6">
+              <CreateTagForm
+                id={formId}
+                onTagCreated={() => setTagDialogOpen(false)}
+              />
+            </div>
+            <footer className="flex justify-end gap-2 px-4 py-6 lg:px-6 lg:py-8">
+              <Button form={formId} type="submit">
+                Create
+              </Button>
+              <Button
+                type="button"
+                onClick={() => setTagDialogOpen(false)}
+                variant="ghost"
+              >
+                Cancel
+              </Button>
+            </footer>
+          </section>
+        </Dialog>
       )}
     </>
   );

package/data/Cli/starters/basic/src/tags/components/CreateTagForm.tsx

@@ -1,3 +1,4 @@
+import { FormEvent } from "react";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { createTag } from "wasp/client/operations";
 import { Input } from "../../shared/components/Input";
@@ -6,6 +7,7 @@ import { generateBrightColor } from "./colors";
 import { TagLabel } from "./TagLabel";
 
 interface CreateTagFormProps {
+  id: string;
   onTagCreated: () => void;
 }
 
@@ -14,9 +16,7 @@ interface CreateTagFormValues {
   color: string;
 }
 
-export const CREATE_TAG_FORM_ID = "create-tag";
-
-export function CreateTagForm({ onTagCreated }: CreateTagFormProps) {
+export function CreateTagForm({ id, onTagCreated }: CreateTagFormProps) {
   const { handleSubmit, setValue, watch, control, reset } =
     useForm<CreateTagFormValues>({
       defaultValues: {
@@ -40,7 +40,7 @@ export function CreateTagForm({ onTagCreated }: CreateTagFormProps) {
 
   return (
     <form
-      id={CREATE_TAG_FORM_ID}
+      id={id}
       onSubmit={stopPropagate(handleSubmit(onSubmit))}
       className="flex flex-col gap-6"
     >
@@ -90,10 +90,8 @@ export function CreateTagForm({ onTagCreated }: CreateTagFormProps) {
  *
  * @see https://github.com/react-hook-form/documentation/issues/916
  */
-function stopPropagate(
-  callback: (event: React.FormEvent<HTMLFormElement>) => void,
-) {
-  return (e: React.FormEvent<HTMLFormElement>) => {
+function stopPropagate(callback: (event: FormEvent<HTMLFormElement>) => void) {
+  return (e: FormEvent<HTMLFormElement>) => {
     e.stopPropagation();
     callback(e);
   };

package/data/Cli/starters/basic/src/tasks/components/CreateTaskForm.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useCallback } from "react";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { createTask, getTags, useQuery } from "wasp/client/operations";
 import { Tag } from "wasp/entities";
@@ -34,7 +34,7 @@ export function CreateTaskForm() {
     }
   };
 
-  const toggleTag = React.useCallback(
+  const toggleTag = useCallback(
     function toggleTag(id: Tag["id"]) {
       const tagIds = getValues("tagIds");
       if (tagIds.includes(id)) {

package/data/Cli/starters/basic/src/tasks/components/TaskListItem.tsx

@@ -1,3 +1,4 @@
+import { ChangeEvent } from "react";
 import { twJoin } from "tailwind-merge";
 import { updateTaskStatus } from "wasp/client/operations";
 import { TagLabel } from "../../tags/components/TagLabel";
@@ -9,7 +10,7 @@ interface TaskListItemProps {
 
 export function TaskListItem({ task }: TaskListItemProps) {
   async function setTaskDone(
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: ChangeEvent<HTMLInputElement>,
   ): Promise<void> {
     try {
       await updateTaskStatus({
@@ -36,7 +37,7 @@ export function TaskListItem({ task }: TaskListItemProps) {
             checked={task.isDone}
             onChange={setTaskDone}
           />
-          <div className="flex min-w-0 flex-col break-words">
+          <div className="flex min-w-0 flex-col wrap-break-word">
             <p>{task.description}</p>
             <span className="text-xs text-neutral-500">
               {task.createdAt.toLocaleDateString()}

package/data/Cli/starters/basic/vite.config.ts

@@ -1,6 +1,9 @@
+import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'
+import { wasp } from 'wasp/client/vite'
 
 export default defineConfig({
+  plugins: [wasp(), tailwindcss()],
   server: {
     open: true,
   },

package/data/Cli/starters/minimal/package.json

@@ -1,12 +1,11 @@
 {
   "name": "__waspAppName__",
   "type": "module",
-  "workspaces": [".wasp/build/*", ".wasp/out/*"],
+  "workspaces": [".wasp/out/*", ".wasp/out/sdk/wasp"],
   "dependencies": {
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
-    "react-router-dom": "^6.26.2",
-    "wasp": "file:.wasp/out/sdk/wasp"
+    "react-router": "^7.12.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",

package/data/Cli/starters/minimal/vite.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from "vite";
+import { wasp } from "wasp/client/vite";
 
 export default defineConfig({
+  plugins: [wasp()],
   server: {
     open: true,
   },

package/data/Cli/starters/skeleton/src/vite-env.d.ts

@@ -1,7 +1,3 @@
 /// <reference types="vite/client" />
-
-// This is needed to properly support Vitest testing with jest-dom matchers.
-// Types for jest-dom are not recognized automatically and Typescript complains
-// about missing types e.g. when using `toBeInTheDocument` and other matchers.
-// Reference: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
-import "@testing-library/jest-dom";
+/// <reference types="vitest/globals" />
+/// <reference types="@testing-library/jest-dom" />