@cedarjs/cli 7.1.0-rc.34 → 7.1.1-next.468

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/dbAuth/templates/signup.oauth.tsx.template

@@ -0,0 +1,147 @@
+import { useEffect, useRef } from 'react'
+
+import {
+  Form,
+  Label,
+  TextField,
+  PasswordField,
+  FieldError,
+  Submit,
+} from '@cedarjs/forms'
+import { Link, navigate, routes } from '@cedarjs/router'
+import { Metadata } from '@cedarjs/web'
+import { toast, Toaster } from '@cedarjs/web/toast'
+
+import { getOAuthUrl } from '@cedarjs/auth-dbauth-web/oauth'
+
+import { useAuth } from 'src/auth'
+
+const SignupPage = () => {
+  const { isAuthenticated, signUp } = useAuth()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate(routes.home())
+    }
+  }, [isAuthenticated])
+
+  // focus on ${usernameLowerCase} box on page load
+  const ${usernameCamelCase}Ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    ${usernameCamelCase}Ref.current?.focus()
+  }, [])
+
+  const onSubmit = async (data: Record<string, string>) => {
+    const response = await signUp({ username: data.${usernameCamelCase}, password: data.${passwordCamelCase} })
+
+    if (response.message) {
+      toast(response.message)
+    } else if (response.error) {
+      toast.error(response.error)
+    } else {
+      // user is signed in automatically
+      toast.success('Welcome!')
+    }
+  }
+
+  return (
+    <>
+      <Metadata title="Signup" />
+
+      <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">Signup</h2>
+            </header>
+
+            <div className="rw-segment-main">
+              <div className="rw-form-wrapper">
+                <Form onSubmit={onSubmit} className="rw-form-wrapper">
+                  <Label
+                    name="${usernameCamelCase}"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    ${usernameTitleCase}
+                  </Label>
+                  <TextField
+                    name="${usernameCamelCase}"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    ref={${usernameCamelCase}Ref}
+                    validation={{
+                      required: {
+                        value: true,
+                        message: '${usernameTitleCase} is required',
+                      },
+                    }}
+                  />
+                  <FieldError name="${usernameCamelCase}" className="rw-field-error" />
+
+                  <Label
+                    name="${passwordCamelCase}"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    ${passwordTitleCase}
+                  </Label>
+                  <PasswordField
+                    name="${passwordCamelCase}"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    autoComplete="current-password"
+                    validation={{
+                      required: {
+                        value: true,
+                        message: '${passwordTitleCase} is required',
+                      },
+                    }}
+                  />
+                  <FieldError name="${passwordCamelCase}" className="rw-field-error" />
+
+                  <div className="rw-button-group">
+                    <Submit className="rw-button rw-button-blue">
+                      Sign Up
+                    </Submit>
+                  </div>
+                </Form>
+
+                {/*
+                 * OAuth signup buttons. Delete the ones for providers you
+                 * haven't configured in `cedar setup auth dbAuth --oauth`.
+                 * Each link is a full-page navigation to the provider's
+                 * authorize route — it must not be turned into a fetch/XHR
+                 * call.
+                 */}
+                <div className="rw-button-group">
+                  <a
+                    href={getOAuthUrl('google', { flow: 'signup' })}
+                    className="rw-button rw-button-blue"
+                  >
+                    Continue with Google
+                  </a>
+                  <a
+                    href={getOAuthUrl('github', { flow: 'signup' })}
+                    className="rw-button rw-button-blue"
+                  >
+                    Continue with GitHub
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="rw-login-link">
+            <span>Already have an account?</span>{' '}
+            <Link to={routes.login()} className="rw-link">
+              Log in!
+            </Link>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default SignupPage

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

@@ -1,8 +1,9 @@
 import camelcase from "camelcase";
 import { Listr } from "listr2";
 import prompts from "prompts";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { runBin } from "@cedarjs/cli-helpers/packageManager/exec";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getConfig } from "@cedarjs/project-config";
 import { writeFilesTask, transformTSToJSMap } from "../../../lib/index.js";
 import {

package/dist/commands/generate/function/functionHandler.js

@@ -1,6 +1,7 @@
 import { Listr } from "listr2";
 import { terminalLink } from "termi-link";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { errorTelemetry } from "@cedarjs/telemetry";
 import { transformTSToJSMap, writeFilesTask } from "../../../lib/index.js";
 import { prepareForRollback } from "../../../lib/rollback.js";

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/job/jobHandler.js

@@ -2,8 +2,9 @@ import path from "node:path";
 import { pathToFileURL } from "node:url";
 import * as changeCase from "change-case";
 import { Listr } from "listr2";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { runBinSync } from "@cedarjs/cli-helpers/packageManager/exec";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { errorTelemetry } from "@cedarjs/telemetry";
 import {
   getPaths,

package/dist/commands/generate/model/modelHandler.js

@@ -1,6 +1,7 @@
 import path from "path";
 import { Listr } from "listr2";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import {
   getPaths,
   writeFilesTask,

package/dist/commands/generate/ogImage/ogImageHandler.js

@@ -2,7 +2,8 @@ import fs from "node:fs";
 import path from "node:path";
 import fg from "fast-glob";
 import { Listr } from "listr2";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { ensurePosixPath } from "@cedarjs/project-config";
 import { errorTelemetry } from "@cedarjs/telemetry";
 import {

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/filesTask.js

@@ -11,7 +11,6 @@ const files = async ({
   fileName,
   typescript,
   tests: generateTests = true,
-  esm = false,
   ...rest
 }) => {
   const extension = typescript ? ".ts" : ".js";
@@ -67,17 +66,15 @@ const files = async ({
       outputPath: path.join(folderName, "src", `${fileName}.test${extension}`)
     });
     outputFiles.push(testFile);
-    if (esm) {
-      const vitestConfigFile = await templateForFile({
-        name,
-        side: "packages",
-        generator: "package",
-        templatePath: "vitest.config.ts.template",
-        templateVars: { folderName, ...rest },
-        outputPath: path.join(folderName, `vitest.config${extension}`)
-      });
-      outputFiles.push(vitestConfigFile);
-    }
+    const vitestConfigFile = await templateForFile({
+      name,
+      side: "packages",
+      generator: "package",
+      templatePath: "vitest.config.ts.template",
+      templateVars: { folderName, ...rest },
+      outputPath: path.join(folderName, `vitest.config${extension}`)
+    });
+    outputFiles.push(vitestConfigFile);
   }
   return outputFiles.reduce(async (accP, [outputPath, content]) => {
     const acc = await accP;

package/dist/commands/generate/package/packageHandler.js

@@ -6,12 +6,13 @@ import { modify, applyEdits } from "jsonc-parser";
 import { Listr } from "listr2";
 import { terminalLink } from "termi-link";
 import ts from "typescript";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { workspacePackageSpecifier } from "@cedarjs/cli-helpers/packageManager";
 import { runScript, runBinSync } from "@cedarjs/cli-helpers/packageManager/exec";
 import { installPackages } from "@cedarjs/cli-helpers/packageManager/packages";
 import { addWorkspaceDir } from "@cedarjs/cli-helpers/packageManager/workspaces";
-import { getConfig, projectIsEsm } from "@cedarjs/project-config";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
+import { getConfig } from "@cedarjs/project-config";
 import { getPackageManager } from "@cedarjs/project-config/packageManager";
 import { errorTelemetry } from "@cedarjs/telemetry";
 import { getPaths, writeFilesTask } from "../../../lib/index.js";
@@ -342,8 +343,6 @@ const handler = async ({
         task: async (ctx) => {
           packageFiles = await files({
             ...ctx.nameVariants,
-            // Only Vitest projects get a config generated for them
-            esm: projectIsEsm(),
             ...rest
           });
           return writeFilesTask(packageFiles, { overwriteExisting: force });

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",

package/dist/commands/generate/page/pageHandler.js

@@ -2,7 +2,8 @@ import { execSync } from "child_process";
 import camelcase from "camelcase";
 import { Listr } from "listr2";
 import pascalcase from "pascalcase";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { generate as generateTypes } from "@cedarjs/internal/dist/generate/generate";
 import { getConfig } from "@cedarjs/project-config";
 import { errorTelemetry } from "@cedarjs/telemetry";

package/dist/commands/generate/realtime/realtime.js

@@ -1,4 +1,4 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 const command = "realtime <name>";
 const description = "Generate a subscription or live query used with RedwoodJS Realtime";
 function builder(yargs) {

package/dist/commands/generate/realtime/realtimeHandler.js

@@ -4,9 +4,8 @@ import { Listr } from "listr2";
 import pascalcase from "pascalcase";
 import pluralize from "pluralize";
 import prompts from "prompts";
-import { colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { generate as generateTypes } from "@cedarjs/internal/dist/generate/generate";
-import { projectIsEsm } from "@cedarjs/project-config";
 import { errorTelemetry } from "@cedarjs/telemetry";
 import {
   generateTemplate,
@@ -120,16 +119,10 @@ async function handler({
             exampleFile,
             exampleSubscriptionTemplateContent
           );
-          let blankTemplateContent = await generateTemplate(
+          const blankTemplateContent = await generateTemplate(
             setupScriptContent,
             templateVariables(name)
           );
-          if (projectIsEsm()) {
-            blankTemplateContent = blankTemplateContent.replace(
-              "import gql from 'graphql-tag'",
-              "import { gql } from 'graphql-tag'"
-            );
-          }
           return [
             writeFile(
               sdlFile,

package/dist/commands/generate/realtime/templates/liveQueries/blank/blank.service.ts.template

@@ -1,9 +1,17 @@
 // api/src/services/${name}s/${name}s.ts
+import type { ${typeName}ItemInput } from 'types/graphql'
+
 import type { LiveQueryStorageMechanism } from '@cedarjs/realtime'
 
 import { logger } from 'src/lib/logger'
 
-const ${collectionName} = [
+interface ${typeName}Data {
+  id: string
+  title: string
+  items: { amount: number }[]
+}
+
+const ${collectionName}: ${typeName}Data[] = [
   { id: '1', title: 'First ${modelName}', items: [{ amount: 11 }] },
   { id: '2', title: '2nd ${modelName}', items: [{ amount: 22 }] },
   { id: '3', title: 'Third ${modelName}',  items: [{ amount: 33 }] },
@@ -35,14 +43,14 @@ const ${collectionName} = [
  *   }
  * }
  */
-export const ${liveQueryName} = async ({ id }) => {
+export const ${liveQueryName} = async ({ id }: { id: string }) => {
   const found${modelName} = ${collectionName}.find((a) => a.id === id)
   logger.debug({ id, ${name}: found${modelName} }, `${name} details`)
   return found${modelName}
 }
 
 export const create${typeName}Item = async (
-  { input },
+  { input }: { input: ${typeName}ItemInput },
   { context }: { context: { liveQueryStore: LiveQueryStorageMechanism } }
 ) => {
   const { ${camelName}Id, amount } = input
@@ -63,7 +71,7 @@ export const create${typeName}Item = async (
 }
 
 export const ${modelName} = {
-  largest${typeName}Item: (obj, { root }) => {
+  largest${typeName}Item: (obj: unknown, { root }: { root: ${typeName}Data }) => {
     const [largest] = root.items.sort((a, b) => b.amount - a.amount)
 
     logger.debug({ obj, root }, 'largest ${typeName}Item')

package/dist/commands/generate/realtime/templates/subscriptions/blank/blank.service.ts.template

@@ -1,9 +1,9 @@
 import type { ${subscriptionInputType} } from 'types/graphql'
 
 import { logger } from 'src/lib/logger'
-import type { Publish${typeName}ChannelType } from 'src/subscriptions/${name}/${name}.service.js'
+import type { Publish${typeName}ChannelType } from 'src/subscriptions/${name}/${name}.js'
 
-export const ${subscriptionQueryName} = ({ id }) => [id]
+export const ${subscriptionQueryName} = ({ id }: { id: string }) => [id]
 
 export const ${subscriptionServiceResolver} = async (
   { input }: { input: ${subscriptionInputType} },

package/dist/commands/generate/realtime/templates/subscriptions/blank/blank.ts.template

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag'
+import { gql } from 'graphql-tag'
 
 import type { PubSub } from '@cedarjs/realtime'
 
@@ -39,15 +39,15 @@ export type Publish${typeName}ChannelType = PubSub<Publish${typeName}Channel>
 const ${subscriptionName}Subscription = {
   ${subscriptionName}: {
     subscribe: (
-      _,
-      { id },
+      _: unknown,
+      { id }: { id: string },
       { pubSub }: { pubSub: Publish${typeName}ChannelType }
     ) => {
       logger.debug({ id }, '${name} subscription')
 
       return pubSub.subscribe('${typeName}', id)
     },
-    resolve: (payload) => {
+    resolve: (payload: Publish${typeName}Channel['${typeName}'][1]) => {
       logger.debug({ payload }, '${name} subscription resolve')
 
       return payload

package/dist/commands/generate/scaffold/scaffold.js

@@ -13,7 +13,7 @@ const builder = (yargs) => {
     description: "Generate test files",
     type: "boolean"
   }).option("tailwind", {
-    description: "Generate TailwindCSS version of scaffold.css (automatically set to `true` if TailwindCSS config exists)",
+    description: "Generate TailwindCSS version of scaffold.css (automatically set to `true` if the web side depends on `tailwindcss`)",
     type: "boolean"
   }).option("rollback", {
     description: "Revert all generator actions if an error occurs",