@cedarjs/cli 7.0.1-next.314 → 7.0.1-next.466

package/dist/commands/destroy/scaffold/scaffoldHandler.js

@@ -1,8 +1,7 @@
+import { parse } from "@babel/parser";
 import { Listr } from "listr2";
-import pascalcase from "pascalcase";
 import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
-import { pluralize } from "@cedarjs/utils/cedarPluralize";
 import {
   deleteFilesTask,
   getPaths,
@@ -13,6 +12,7 @@ import {
 import { verifyModelName } from "../../../lib/schemaHelpers.js";
 import {
   files,
+  getScaffoldLayoutNames,
   routes as scaffoldRoutes,
   splitPathAndModel
 } from "../../generate/scaffold/scaffoldHandler.js";
@@ -23,45 +23,83 @@ const removeRoutesWithSet = async ({
 }) => {
   const routes = await scaffoldRoutes({ model, path, nestScaffoldByModel });
   const routeNames = routes.map(extractRouteName);
-  const pluralPascalName = pascalcase(pluralize(model));
-  const layoutName = `${pluralPascalName}Layout`;
-  return removeRoutesFromRouterTask(routeNames, layoutName);
+  const { importName } = getScaffoldLayoutNames(model, path);
+  return removeRoutesFromRouterTask(routeNames, importName);
+};
+const removeNamedImport = (code, source, name) => {
+  const program = parse(code, {
+    sourceType: "module",
+    plugins: ["jsx", "typescript"]
+  }).program;
+  for (const statement of program.body) {
+    if (statement.type !== "ImportDeclaration" || statement.source.value !== source) {
+      continue;
+    }
+    const specifiers = statement.specifiers;
+    const index = specifiers.findIndex(
+      (specifier2) => specifier2.type === "ImportSpecifier" && specifier2.imported.type === "Identifier" && specifier2.imported.name === name && specifier2.local.name === name
+    );
+    if (index === -1) {
+      continue;
+    }
+    const specifier = specifiers[index];
+    let start;
+    let end;
+    if (specifiers.length === 1) {
+      start = statement.start ?? 0;
+      end = statement.end ?? 0;
+      if (code[end] === "\n") {
+        end++;
+      }
+    } else if (index === specifiers.length - 1) {
+      start = specifiers[index - 1].end ?? 0;
+      end = specifier.end ?? 0;
+    } else {
+      start = specifier.start ?? 0;
+      end = specifiers[index + 1].start ?? 0;
+    }
+    return code.slice(0, start) + code.slice(end);
+  }
+  return code;
 };
 const removeSetImport = () => {
   const routesPath = getPaths().web.routes;
   const routesContent = readFile(routesPath).toString();
-  if (routesContent.match("<Set")) {
+  const unusedNames = ["Set", "PrivateSet"].filter(
+    (name) => !new RegExp(`<${name}\\b`).test(routesContent)
+  );
+  if (unusedNames.length === 0) {
     return "Skipping removal of Set import in Routes.{jsx,tsx}";
   }
-  const cedarRouterImportMatch = routesContent.match(
-    /import {[^]*} from '@cedarjs\/router'/
-  );
-  if (!cedarRouterImportMatch) {
-    return "No @cedarjs/router import found in Routes.{jsx,tsx}";
+  let newRoutesContent = routesContent;
+  try {
+    for (const name of unusedNames) {
+      newRoutesContent = removeNamedImport(
+        newRoutesContent,
+        "@cedarjs/router",
+        name
+      );
+    }
+  } catch {
+    return "Skipping removal of Set import, Routes.{jsx,tsx} couldn't be parsed";
+  }
+  if (newRoutesContent === routesContent) {
+    return "No unused Set or PrivateSet import found in Routes.{jsx,tsx}";
   }
-  const [cedarRouterImport] = cedarRouterImportMatch;
-  const removedSetImport = cedarRouterImport.replace(/,*\s*Set,*/, "");
-  const newRoutesContent = routesContent.replace(
-    cedarRouterImport,
-    removedSetImport
-  );
   writeFile(routesPath, newRoutesContent, { overwriteExisting: true });
-  return "Removed Set import in Routes.{jsx,tsx}";
+  return "Removed unused Set and PrivateSet imports in Routes.{jsx,tsx}";
 };
 const removeLayoutImport = ({
   model: name,
   path: scaffoldPath = ""
 }) => {
-  const pluralPascalName = pascalcase(pluralize(name));
-  const pascalScaffoldPath = scaffoldPath === "" ? scaffoldPath : scaffoldPath.split("/").map(pascalcase).join("/") + "/";
-  const layoutName = `${pluralPascalName}Layout`;
-  const importLayout = `import ${pluralPascalName}Layout from 'src/layouts/${pascalScaffoldPath}${layoutName}'`;
+  const { importName, importPath } = getScaffoldLayoutNames(name, scaffoldPath);
   const routesPath = getPaths().web.routes;
   const routesContent = readFile(routesPath).toString();
-  const newRoutesContent = routesContent.replace(
-    new RegExp(`\\s*${importLayout}`),
-    ""
+  const importLayout = new RegExp(
+    `\\s*import ${importName} from (['"])${importPath}\\1;?`
   );
+  const newRoutesContent = routesContent.replace(importLayout, "");
   writeFile(routesPath, newRoutesContent, { overwriteExisting: true });
   return "Removed layout import from Routes.{jsx,tsx}";
 };

package/dist/commands/dev/devHandler.js

@@ -185,21 +185,33 @@ const handler = async ({
   const rootPackageJson = JSON.parse(
     fs.readFileSync(rootPackageJsonPath, "utf8")
   );
+  const warnUdFallback = (reason) => {
+    console.warn(
+      c.warning(
+        `--ud has no effect: ${reason}. Falling back to classic dev-server mode.`
+      )
+    );
+  };
   const buildUnifiedDevCommand = () => {
     if (!ud) {
       return null;
     }
     if (streamingSsrEnabled) {
+      warnUdFallback("streaming SSR uses its own dev server");
       return null;
     }
     if (!workspace.includes("api") || !workspace.includes("web")) {
+      warnUdFallback("the unified dev server needs both the api and web sides");
       return null;
     }
     if (serverFile) {
+      warnUdFallback(
+        "the unified dev server does not support a custom server file"
+      );
       return null;
     }
     if (!fs.existsSync(cedarPaths.api.src) || !fs.existsSync(cedarPaths.web.src)) {
-      console.log("api.src or web.src does not exist");
+      warnUdFallback("api.src or web.src does not exist");
       return null;
     }
     return [

package/dist/commands/generate/dbAuth/dbAuth.js

@@ -1,9 +1,13 @@
 import { terminalLink } from "termi-link";
 import { getYargsDefaults, createHandler } from "../yargsCommandHelpers.js";
 const command = "dbAuth";
-const description = "Generate Login, Signup and Forgot Password pages for dbAuth";
+const description = "Generate Login, Signup, Forgot Password, Reset Password and Change Password pages for dbAuth";
 const builder = (yargs) => {
-  yargs.option("skip-forgot", {
+  yargs.option("skip-change", {
+    description: "Skip generating the Change Password page",
+    type: "boolean",
+    default: false
+  }).option("skip-forgot", {
     description: "Skip generating the Forgot Password page",
     type: "boolean",
     default: false

package/dist/commands/generate/dbAuth/dbAuthHandler.js

@@ -18,12 +18,25 @@ import {
 } from "../../../lib/index.js";
 import { prepareForRollback } from "../../../lib/rollback.js";
 import { templateForComponentFile } from "../yargsHandlerHelpers.js";
-const ROUTES = [
-  `<Route path="/login" page={LoginPage} name="login" />`,
-  `<Route path="/signup" page={SignupPage} name="signup" />`,
-  `<Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />`,
-  `<Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />`
-];
+function routesFor({
+  skipChange,
+  skipForgot,
+  skipLogin,
+  skipReset,
+  skipSignup
+}) {
+  return [
+    !skipLogin && `<Route path="/login" page={LoginPage} name="login" />`,
+    !skipSignup && `<Route path="/signup" page={SignupPage} name="signup" />`,
+    !skipForgot && `<Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />`,
+    !skipReset && `<Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />`,
+    !skipChange && `<Route path="/change-password" page={ChangePasswordPage} name="changePassword" />`
+  ].filter((route) => typeof route === "string");
+}
+function pascalCase(str) {
+  const camelCased = camelCase(str);
+  return camelCased.charAt(0).toUpperCase() + camelCased.slice(1);
+}
 function getPostInstallMessage(isDbAuthSetup2) {
   return [
     `   ${c.warning("Pages created! But you're not done yet:")}
@@ -35,9 +48,11 @@ function getPostInstallMessage(isDbAuthSetup2) {
     "       navigate(routes.home())",
     "     }\n",
     "   and change the route to where you want them to go if the user is already",
-    "   logged in. Also take a look in the onSubmit() functions in ForgotPasswordPage",
-    "   and ResetPasswordPage to change where the user redirects to after submitting",
-    "   those forms.\n",
+    "   logged in. Also take a look in the onSubmit() functions in ForgotPasswordPage,",
+    "   ResetPasswordPage and ChangePasswordPage to change where the user redirects",
+    "   to after submitting those forms.\n",
+    "   ChangePasswordPage is for users who are already logged in. Link to it from",
+    "   wherever your app lets users manage their account.\n",
     !isDbAuthSetup2 && `   Oh, and if you haven't already, add the necessary dbAuth functions and
    app setup by running:
 
@@ -58,9 +73,11 @@ function getPostInstallWebauthnMessage(isDbAuthSetup2) {
     "       navigate(routes.home())",
     "     }\n",
     "   and change the route to where you want them to go if the user is already",
-    "   logged in. Also take a look in the onSubmit() functions in ForgotPasswordPage",
-    "   and ResetPasswordPage to change where the user redirects to after submitting",
-    "   those forms.\n",
+    "   logged in. Also take a look in the onSubmit() functions in ForgotPasswordPage,",
+    "   ResetPasswordPage and ChangePasswordPage to change where the user redirects",
+    "   to after submitting those forms.\n",
+    "   ChangePasswordPage is for users who are already logged in. Link to it from",
+    "   wherever your app lets users manage their account.\n",
     !isDbAuthSetup2 && `   Oh, and if you haven't already, add the necessary dbAuth functions and
    app setup by running:
 
@@ -71,6 +88,7 @@ function getPostInstallWebauthnMessage(isDbAuthSetup2) {
 }
 const files = async ({
   typescript,
+  skipChange,
   skipForgot,
   skipLogin,
   skipReset,
@@ -90,7 +108,8 @@ const files = async ({
     usernameTitleCase: titleCase(usernameLabel),
     passwordLowerCase: passwordLabel.toLowerCase(),
     passwordCamelCase: camelCase(passwordLabel),
-    passwordTitleCase: titleCase(passwordLabel)
+    passwordTitleCase: titleCase(passwordLabel),
+    passwordPascalCase: pascalCase(passwordLabel)
   };
   if (!skipForgot) {
     filesList.push(
@@ -131,6 +150,19 @@ const files = async ({
       })
     );
   }
+  if (!skipChange) {
+    filesList.push(
+      await templateForComponentFile({
+        name: "ChangePassword",
+        suffix: "Page",
+        extension: typescript ? ".tsx" : ".jsx",
+        webPathSection: "pages",
+        generator: "dbAuth",
+        templatePath: "changePassword.tsx.template",
+        templateVars
+      })
+    );
+  }
   if (!skipSignup) {
     filesList.push(
       await templateForComponentFile({
@@ -179,6 +211,7 @@ const tasks = ({
   listr2,
   force,
   typescript,
+  skipChange,
   skipForgot,
   skipLogin,
   skipReset,
@@ -289,6 +322,7 @@ const tasks = ({
         task: async () => {
           const filesObj = await files({
             typescript,
+            skipChange,
             skipForgot,
             skipLogin,
             skipReset,
@@ -305,7 +339,15 @@ const tasks = ({
       {
         title: "Adding routes...",
         task: async () => {
-          addRoutesToRouterTask(ROUTES);
+          addRoutesToRouterTask(
+            routesFor({
+              skipChange,
+              skipForgot,
+              skipLogin,
+              skipReset,
+              skipSignup
+            })
+          );
         }
       },
       {
@@ -335,6 +377,7 @@ const tasks = ({
 const handler = async (yargs) => {
   recordTelemetryAttributes({
     command: "generate dbAuth",
+    skipChange: yargs.skipChange,
     skipForgot: yargs.skipForgot,
     skipLogin: yargs.skipLogin,
     skipReset: yargs.skipReset,

package/dist/commands/generate/dbAuth/templates/changePassword.tsx.template

@@ -0,0 +1,131 @@
+import { useEffect, useRef } from 'react'
+
+import {
+  Form,
+  Label,
+  PasswordField,
+  Submit,
+  FieldError,
+} from '@cedarjs/forms'
+import { navigate, routes } from '@cedarjs/router'
+import { Metadata } from '@cedarjs/web'
+import { toast, Toaster } from '@cedarjs/web/toast'
+
+import { useAuth } from 'src/auth'
+
+const ChangePasswordPage = () => {
+  const { loading, isAuthenticated, reauthenticate, changePassword } =
+    useAuth()
+
+  // Only a logged in user can change their password
+  useEffect(() => {
+    if (!loading && !isAuthenticated) {
+      navigate(routes.login())
+    }
+  }, [loading, isAuthenticated])
+
+  const current${passwordPascalCase}Ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    current${passwordPascalCase}Ref.current?.focus()
+  }, [])
+
+  const onSubmit = async (data: Record<string, string>) => {
+    const response = await changePassword({
+      currentPassword: data.current${passwordPascalCase},
+      newPassword: data.new${passwordPascalCase},
+    })
+
+    if (response.error) {
+      toast.error(response.error)
+    } else {
+      // The function `changePassword.handler` in api/src/functions/auth.js
+      // decides if the user stays logged in. `reauthenticate()` picks up
+      // whichever it was
+      toast.success('${passwordTitleCase} changed!')
+      await reauthenticate()
+      navigate(routes.home())
+    }
+  }
+
+  return (
+    <>
+      <Metadata title="Change ${passwordTitleCase}" />
+
+      <main className="rw-main">
+        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+        <div className="rw-scaffold rw-login-container">
+          <div className="rw-segment">
+            <header className="rw-segment-header">
+              <h2 className="rw-heading rw-heading-secondary">
+                Change ${passwordTitleCase}
+              </h2>
+            </header>
+
+            <div className="rw-segment-main">
+              <div className="rw-form-wrapper">
+                <Form onSubmit={onSubmit} className="rw-form-wrapper">
+                  <Label
+                    name="current${passwordPascalCase}"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    Current ${passwordTitleCase}
+                  </Label>
+                  <PasswordField
+                    name="current${passwordPascalCase}"
+                    autoComplete="current-password"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    ref={current${passwordPascalCase}Ref}
+                    validation={{
+                      required: {
+                        value: true,
+                        message: 'Current ${passwordTitleCase} is required',
+                      },
+                    }}
+                  />
+
+                  <FieldError
+                    name="current${passwordPascalCase}"
+                    className="rw-field-error"
+                  />
+
+                  <Label
+                    name="new${passwordPascalCase}"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    New ${passwordTitleCase}
+                  </Label>
+                  <PasswordField
+                    name="new${passwordPascalCase}"
+                    autoComplete="new-password"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    validation={{
+                      required: {
+                        value: true,
+                        message: 'New ${passwordTitleCase} is required',
+                      },
+                    }}
+                  />
+
+                  <FieldError
+                    name="new${passwordPascalCase}"
+                    className="rw-field-error"
+                  />
+
+                  <div className="rw-button-group">
+                    <Submit className="rw-button rw-button-blue">Submit</Submit>
+                  </div>
+                </Form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default ChangePasswordPage

package/dist/commands/generate/dbAuth/templates/login.webAuthn.tsx.template

@@ -17,7 +17,7 @@ import { useAuth } from 'src/auth'
 const WELCOME_MESSAGE = 'Welcome back!'
 const REDIRECT = routes.home()
 
-const LoginPage = ({ type }) => {
+const LoginPage = ({ type }: { type?: string }) => {
   const {
     isAuthenticated,
     client: webAuthn,
@@ -27,12 +27,12 @@ const LoginPage = ({ type }) => {
   } = useAuth()
   const [shouldShowWebAuthn, setShouldShowWebAuthn] = useState(false)
   const [showWebAuthn, setShowWebAuthn] = useState(
-    webAuthn.isEnabled() && type !== 'password'
+    !!webAuthn?.isEnabled() && type !== 'password'
   )
 
   // should redirect right after login or wait to show the webAuthn prompts?
   useEffect(() => {
-    if (isAuthenticated && (!shouldShowWebAuthn || webAuthn.isEnabled())) {
+    if (isAuthenticated && (!shouldShowWebAuthn || webAuthn?.isEnabled())) {
       navigate(REDIRECT)
     }
   }, [isAuthenticated, shouldShowWebAuthn])
@@ -45,13 +45,13 @@ const LoginPage = ({ type }) => {
   }, [loading, isAuthenticated])
 
   // focus on the ${usernameLowerCase} field as soon as the page loads
-  const ${usernameCamelCase}Ref = useRef()
+  const ${usernameCamelCase}Ref = useRef<HTMLInputElement>(null)
   useEffect(() => {
-    ${usernameCamelCase}Ref.current && ${usernameCamelCase}Ref.current.focus()
+    ${usernameCamelCase}Ref.current?.focus()
   }, [])
 
-  const onSubmit = async (data) => {
-    const webAuthnSupported = await webAuthn.isSupported()
+  const onSubmit = async (data: Record<string, string>) => {
+    const webAuthnSupported = !!(await webAuthn?.isSupported())
 
     if (webAuthnSupported) {
       setShouldShowWebAuthn(true)
@@ -75,30 +75,38 @@ const LoginPage = ({ type }) => {
   }
 
   const onAuthenticate = async () => {
+    if (!webAuthn) {
+      return
+    }
+
     try {
       await webAuthn.authenticate()
       await reauthenticate()
       toast.success(WELCOME_MESSAGE)
       navigate(REDIRECT)
     } catch (e) {
-      if (e.name === 'WebAuthnDeviceNotFoundError') {
+      if (e instanceof Error && e.name === 'WebAuthnDeviceNotFoundError') {
         toast.error(
           'Device not found, log in with ${usernameTitleCase}/${passwordTitleCase} to continue'
         )
         setShowWebAuthn(false)
       } else {
-        toast.error(e.message)
+        toast.error(e instanceof Error ? e.message : String(e))
       }
     }
   }
 
   const onRegister = async () => {
+    if (!webAuthn) {
+      return
+    }
+
     try {
       await webAuthn.register()
       toast.success(WELCOME_MESSAGE)
       navigate(REDIRECT)
     } catch (e) {
-      toast.error(e.message)
+      toast.error(e instanceof Error ? e.message : String(e))
     }
   }
 
@@ -200,7 +208,7 @@ const LoginPage = ({ type }) => {
 
   const formToRender = () => {
     if (showWebAuthn) {
-      if (webAuthn.isEnabled()) {
+      if (webAuthn?.isEnabled()) {
         return <AuthWebAuthnPrompt />
       } else {
         return <RegisterWebAuthnPrompt />
@@ -212,7 +220,7 @@ const LoginPage = ({ type }) => {
 
   const linkToRender = () => {
     if (showWebAuthn) {
-      if (webAuthn.isEnabled()) {
+      if (webAuthn?.isEnabled()) {
         return (
           <div className="rw-login-link">
             <span>or login with </span>{' '}

package/dist/commands/generate/directive/directive.js

@@ -1,11 +1,24 @@
 import {
   createBuilder,
   createCommand,
-  createHandler
+  createHandler,
+  getYargsDefaults
 } from "../yargsCommandHelpers.js";
 const command = createCommand("directive");
 const description = "Generate a new GraphQL directive";
-const builder = createBuilder({ componentName: "directive" });
+const builder = createBuilder({
+  componentName: "directive",
+  optionsObj: () => ({
+    ...getYargsDefaults(),
+    // No default value, so the handler prompts for a type when the option is
+    // omitted
+    type: {
+      description: "Directive type. If omitted, the generator prompts for one",
+      type: "string",
+      choices: ["validator", "transformer"]
+    }
+  })
+});
 const handler = createHandler("directive");
 export {
   builder,

package/dist/commands/generate/helpers.js

@@ -37,11 +37,33 @@ const redactedModelFields = (fieldNames) => {
   }
   return sensitive;
 };
+const DEFAULT_IGNORE_FIELDS_FOR_INPUT = ["createdAt", "updatedAt"];
+const requiredFieldsInUpdateInput = (model) => {
+  return inputFields(model).filter((field) => {
+    return field.isRequired && !field.isList && !field.isId;
+  }).map((field) => field.name);
+};
+const nullableJsonFieldsInInput = (model) => {
+  return inputFields(model).filter((field) => {
+    return field.type === "Json" && !field.isRequired && !field.isList;
+  }).map((field) => field.name);
+};
+const inputFields = (model) => {
+  const redactedFields = redactedModelFields(
+    model.fields.map((field) => field.name)
+  );
+  return model.fields.filter((field) => {
+    return field.kind !== "object" && !DEFAULT_IGNORE_FIELDS_FOR_INPUT.includes(field.name) && !redactedFields.includes(field.name);
+  });
+};
 const relationsForModel = (model) => {
   return model?.fields.filter((f) => f.relationName).map((field) => {
     return field.name;
   });
 };
+const nullableRelationsForModel = (model) => {
+  return model.fields.filter((f) => f.kind === "object" && !f.isList && !f.isRequired).map((f) => f.name);
+};
 const intForeignKeysForModel = (model) => {
   return model.fields.filter((f) => f.name.match(/Id$/) && f.type === "Int").map((f) => f.name);
 };
@@ -74,14 +96,18 @@ const mapPrismaScalarToPagePropTsType = (scalarType) => {
   return prismaScalarToTsType[scalarType] || "unknown";
 };
 export {
+  DEFAULT_IGNORE_FIELDS_FOR_INPUT,
   SENSITIVE_FIELDS,
   forcePluralizeWord,
   intForeignKeysForModel,
   mapPrismaScalarToPagePropTsType,
   mapRouteParamTypeToTsType,
+  nullableJsonFieldsInInput,
+  nullableRelationsForModel,
   pathName,
   redactedModelFields,
   relationsForModel,
   removeGeneratorName,
+  requiredFieldsInUpdateInput,
   validateName
 };

package/dist/commands/generate/ogImage/templates/ogImage.og.tsx.template

@@ -2,7 +2,7 @@ export const data = async () => {
   return new Date()
 }
 
-export const output = ({ data }) => {
+export const output = ({ data }: { data: Date }) => {
   return (
     <>
       <h1>${pageName} og:image</h1>

package/dist/commands/generate/package/templates/tsconfig.json.template

@@ -4,6 +4,7 @@
     "target": "es2023",
     "module": "node20",
     "esModuleInterop": true,
+    "strict": true,
     "skipLibCheck": true,
     "baseUrl": ".",
     "rootDir": "src",