@cedarjs/cli 6.0.0-canary.2919 → 6.0.0-canary.2923

package/dist/commands/generate/cell/cell.js

@@ -37,6 +37,11 @@ const builder = createBuilder({
         default: false,
         description: "Include a typed `isEmpty` stub for overriding the default check for the Empty component.",
         type: "boolean"
+      },
+      fragment: {
+        default: "",
+        description: "Generate a fragment cell (exports FRAGMENT instead of QUERY) that reads its data from a parent Cell, given the GraphQL type it selects from - e.g. --fragment User.",
+        type: "string"
       }
     };
   }

package/dist/commands/generate/cell/cellHandler.js

@@ -29,7 +29,8 @@ const files = async ({
   tests,
   beforeQuery = false,
   afterQuery = false,
-  isEmpty = false
+  isEmpty = false,
+  fragment = ""
 }) => {
   let cellName = removeGeneratorName(name, "cell");
   let idName = "id";
@@ -38,22 +39,49 @@ const files = async ({
   let model = null;
   let templateNameSuffix = "";
   let typeName = cellName;
-  const shouldGenerateList = (isWordPluralizable(cellName) ? isPlural(cellName) : list) || list;
-  try {
-    model = await getSchema(pascalcase(singularize(cellName)));
-    idName = getIdName(model);
-    idType = getIdType(model);
-    typeName = model.name;
-    mockIdValues = idType === "String" ? mockIdValues.map((value) => `'${value}'`) : mockIdValues;
-  } catch {
-    idType = "Int";
+  if (fragment) {
+    if (list) {
+      throw new Error(
+        "The --list flag cannot be combined with --fragment; fragment cells always render a single item."
+      );
+    }
+    if (beforeQuery) {
+      throw new Error(
+        "The --before-query flag cannot be combined with --fragment; fragment cells never fire a query of their own."
+      );
+    }
+    if (query) {
+      throw new Error(
+        "The --query flag cannot be combined with --fragment; fragment cells don't have an operation name."
+      );
+    }
+  }
+  const shouldGenerateList = !fragment && ((isWordPluralizable(cellName) ? isPlural(cellName) : list) || list);
+  if (!fragment) {
+    try {
+      model = await getSchema(pascalcase(singularize(cellName)));
+      idName = getIdName(model);
+      idType = getIdType(model);
+      typeName = model.name;
+      mockIdValues = idType === "String" ? mockIdValues.map((value) => `'${value}'`) : mockIdValues;
+    } catch {
+      idType = "Int";
+    }
   }
   if (shouldGenerateList) {
     cellName = forcePluralizeWord(cellName);
     templateNameSuffix = "List";
   }
   let operationName = query;
-  if (operationName) {
+  let fragmentName;
+  let fragmentOnType;
+  let fragmentPropName;
+  if (fragment) {
+    const fragmentTypeVariants = nameVariants(fragment);
+    fragmentOnType = fragmentTypeVariants.pascalName;
+    fragmentPropName = fragmentTypeVariants.camelName;
+    fragmentName = `${nameVariants(cellName).pascalName}Cell_${fragmentPropName}`;
+  } else if (operationName) {
     const userSpecifiedOperationNameIsUnique = await operationNameIsUnique(operationName);
     if (!userSpecifiedOperationNameIsUnique) {
       throw new Error(`Specified query name: "${operationName}" is not unique!`);
@@ -70,8 +98,14 @@ const files = async ({
     extension,
     webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
-    templatePath: `cell${templateNameSuffix}.tsx.template`,
-    templateVars: {
+    templatePath: fragment ? "cellFragment.tsx.template" : `cell${templateNameSuffix}.tsx.template`,
+    templateVars: fragment ? {
+      fragmentName,
+      fragmentOnType,
+      camelName: fragmentPropName,
+      afterQuery,
+      isEmpty
+    } : {
       operationName,
       idName,
       idType,
@@ -86,8 +120,8 @@ const files = async ({
     extension: `.test${extension}`,
     webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
-    templatePath: "test.js.template",
-    templateVars: {
+    templatePath: fragment ? "testFragment.js.template" : "test.js.template",
+    templateVars: fragment ? { camelName: fragmentPropName } : {
       idName: shouldGenerateList ? void 0 : idName,
       mockIdValues: shouldGenerateList ? void 0 : mockIdValues
     }
@@ -98,7 +132,7 @@ const files = async ({
     extension: `.stories${extension}`,
     webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
-    templatePath: "stories.tsx.template"
+    templatePath: fragment ? "storiesFragment.tsx.template" : "stories.tsx.template"
   });
   const mockFile = await templateForComponentFile({
     name: cellName,
@@ -107,7 +141,12 @@ const files = async ({
     webPathSection: CEDAR_WEB_PATH_NAME,
     generator: "cell",
     templatePath: `mock${templateNameSuffix}.ts.template`,
-    templateVars: {
+    templateVars: fragment ? {
+      idName,
+      mockIdValues,
+      typeName: fragmentOnType,
+      camelName: fragmentPropName
+    } : {
       idName,
       mockIdValues,
       typeName
@@ -128,7 +167,10 @@ const files = async ({
 const handler = createHandler({
   componentName: "cell",
   filesFn: files,
-  includeAdditionalTasks: ({ name: cellName }) => {
+  includeAdditionalTasks: ({
+    name: cellName,
+    fragment
+  }) => {
     return [
       {
         title: `Generating types ...`,
@@ -136,7 +178,7 @@ const handler = createHandler({
           const queryFieldName = nameVariants(
             removeGeneratorName(cellName, "cell")
           ).camelName;
-          const projectHasSdl = await checkProjectForQueryField(queryFieldName);
+          const projectHasSdl = Boolean(fragment) || await checkProjectForQueryField(queryFieldName);
           if (projectHasSdl) {
             const { errors } = await generateTypes();
             for (const { message, error } of errors) {

package/dist/commands/generate/cell/templates/cellFragment.tsx.template

@@ -0,0 +1,43 @@
+import type { ${fragmentName} } from 'types/graphql'
+
+import type {
+  CellSuccessProps,<% if (afterQuery || isEmpty) { %>
+  DataObject,<% } %>
+} from '@cedarjs/web'
+
+// A parent Cell spreads this fragment by name in its own QUERY, and passes
+// the matching field down as the `${camelName}` prop - no import needed,
+// just render <${pascalName}Cell />:
+//
+//   query FindSomething($id: Int!) {
+//     something(id: $id) {
+//       id
+//       ...${fragmentName}
+//     }
+//   }
+//
+//   <${pascalName}Cell ${camelName}={something} />
+export const FRAGMENT = gql`
+  fragment ${fragmentName} on ${fragmentOnType} {
+    id
+  }
+`
+<% if (isEmpty) { %>
+export const isEmpty = (
+  data: DataObject,
+  { isDataEmpty }: { isDataEmpty: (data: DataObject) => boolean },
+) => {
+  return isDataEmpty(data)
+}
+<% } %><% if (afterQuery) { %>
+export const afterQuery = (data: DataObject): DataObject => {
+  return data
+}
+<% } %>
+export const Empty = () => <div>Empty</div>
+
+export const Success = ({
+  ${camelName},
+}: CellSuccessProps<{ ${camelName}: ${fragmentName} }>) => {
+  return <div>{JSON.stringify(${camelName})}</div>
+}

package/dist/commands/generate/cell/templates/storiesFragment.tsx.template

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Empty, Success } from './${pascalName}Cell'
+import { standard } from './${pascalName}Cell.mock'
+
+const meta: Meta = {
+  title: 'Cells/${pascalName}Cell',
+  tags: ['autodocs']
+}
+
+export default meta
+
+export const empty: StoryObj<typeof Empty> = {
+  render: () => {
+    return Empty ? <Empty /> : <></>
+  }
+}
+
+export const success: StoryObj<typeof Success> = {
+  render: (args) => {
+    return Success ? <Success {...standard()} {...args} /> : <></>
+  }
+}

package/dist/commands/generate/cell/templates/testFragment.js.template

@@ -0,0 +1,30 @@
+import { render } from '@cedarjs/testing/web'
+
+import { Empty, Success } from './${pascalName}Cell'
+import { standard } from './${pascalName}Cell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://cedarjs.com/docs/testing#testing-cells
+// https://cedarjs.com/docs/testing#jest-expect-type-considerations
+
+describe('${pascalName}Cell', () => {
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@cedarjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success ${camelName}={standard().${camelName}} />)
+    }).not.toThrow()
+  })
+})

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

@@ -6,6 +6,7 @@ import humanize from "humanize-string";
 import { Listr } from "listr2";
 import pascalcase from "pascalcase";
 import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { formatCedarCommand } from "@cedarjs/cli-helpers/packageManager/display";
 import {
   addWorkspacePackages,
   removeWorkspacePackages
@@ -38,10 +39,14 @@ import {
 import { builder as sdlBuilder } from "../sdl/sdl.js";
 import {
   files as sdlFiles,
+  stubFiles as sdlStubFiles,
   printRedactedFieldsNote,
   redactedSensitiveFields
 } from "../sdl/sdlHandler.js";
-import { writeFilesWithStubsTask } from "../sdl/stubFiles.js";
+import {
+  missingRelatedModels,
+  writeFilesWithStubsTask
+} from "../sdl/stubFiles.js";
 import { builder as serviceBuilder } from "../service/service.js";
 import { files as serviceFiles } from "../service/serviceHandler.js";
 import { customOrDefaultTemplatePath } from "../yargsHandlerHelpers.js";
@@ -630,22 +635,26 @@ const tasks = ({
   tests,
   typescript,
   javascript: _javascript,
-  tailwind
+  tailwind,
+  missingModels
 }) => {
   return new Listr(
     [
       {
         title: "Generating scaffold files...",
         task: async () => {
-          const f = await files({
-            docs,
-            model,
-            path: path2,
-            tests,
-            typescript,
-            tailwind,
-            force
-          });
+          const f = {
+            ...await files({
+              docs,
+              model,
+              path: path2,
+              tests,
+              typescript,
+              tailwind,
+              force
+            }),
+            ...await sdlStubFiles(missingModels, model, { docs, typescript })
+          };
           return writeFilesWithStubsTask(f, { overwriteExisting: force });
         }
       },
@@ -711,6 +720,7 @@ const handler = async ({
   tailwind = shouldUseTailwindCSS(tailwind);
   try {
     const { name } = await verifyModelName({ name: model });
+    const missingModels = await missingRelatedModels(name);
     const t = tasks({
       docs,
       model: name,
@@ -718,13 +728,44 @@ const handler = async ({
       force,
       tests,
       typescript,
-      tailwind
+      tailwind,
+      missingModels
     });
     if (rollback && !force) {
       prepareForRollback(t);
     }
     await t.run();
-    printRedactedFieldsNote(await redactedSensitiveFields([name]));
+    if (missingModels.length > 0) {
+      console.log();
+      console.log(
+        c.info(
+          `${name} has relations to models that don't have SDL files of their own yet: ${missingModels.join(", ")}`
+        )
+      );
+      console.log(
+        c.info(
+          "Read-only SDL stubs were generated for them, since GraphQL type generation fails otherwise."
+        )
+      );
+      console.log(
+        c.info("To replace a stub, run one of the following for each model:")
+      );
+      for (const stubModel of missingModels) {
+        console.log(
+          c.info(
+            `  ${formatCedarCommand(["generate", "sdl", stubModel])} (SDL + service only)`
+          )
+        );
+        console.log(
+          c.info(
+            `  ${formatCedarCommand(["generate", "scaffold", stubModel])} (adds pages, cells, and forms too)`
+          )
+        );
+      }
+    }
+    printRedactedFieldsNote(
+      await redactedSensitiveFields([name, ...missingModels])
+    );
   } catch (e) {
     const message = e instanceof Error ? e.message : String(e);
     const exitCode = e instanceof Error && "exitCode" in e ? e.exitCode ?? 1 : 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarjs/cli",
-  "version": "6.0.0-canary.2919",
+  "version": "6.0.0-canary.2923",
   "description": "The CedarJS Command Line",
   "repository": {
     "type": "git",
@@ -36,17 +36,17 @@
     "@babel/preset-typescript": "7.29.7",
     "@babel/traverse": "7.29.7",
     "@babel/types": "7.29.7",
-    "@cedarjs/api-server": "6.0.0-canary.2919",
-    "@cedarjs/babel-config": "6.0.0-canary.2919",
-    "@cedarjs/cli-helpers": "6.0.0-canary.2919",
-    "@cedarjs/internal": "6.0.0-canary.2919",
-    "@cedarjs/prerender": "6.0.0-canary.2919",
-    "@cedarjs/project-config": "6.0.0-canary.2919",
-    "@cedarjs/structure": "6.0.0-canary.2919",
-    "@cedarjs/telemetry": "6.0.0-canary.2919",
-    "@cedarjs/utils": "6.0.0-canary.2919",
-    "@cedarjs/vite": "6.0.0-canary.2919",
-    "@cedarjs/web-server": "6.0.0-canary.2919",
+    "@cedarjs/api-server": "6.0.0-canary.2923",
+    "@cedarjs/babel-config": "6.0.0-canary.2923",
+    "@cedarjs/cli-helpers": "6.0.0-canary.2923",
+    "@cedarjs/internal": "6.0.0-canary.2923",
+    "@cedarjs/prerender": "6.0.0-canary.2923",
+    "@cedarjs/project-config": "6.0.0-canary.2923",
+    "@cedarjs/structure": "6.0.0-canary.2923",
+    "@cedarjs/telemetry": "6.0.0-canary.2923",
+    "@cedarjs/utils": "6.0.0-canary.2923",
+    "@cedarjs/vite": "6.0.0-canary.2923",
+    "@cedarjs/web-server": "6.0.0-canary.2923",
     "@listr2/prompt-adapter-enquirer": "4.3.0",
     "@opentelemetry/api": "1.9.1",
     "@opentelemetry/core": "1.30.1",
@@ -82,7 +82,7 @@
     "prettier": "3.8.4",
     "prisma": "7.8.0",
     "prompts": "2.4.2",
-    "semver": "7.7.4",
+    "semver": "7.8.5",
     "smol-toml": "1.6.1",
     "srvx": "0.11.16",
     "string-env-interpolation": "1.0.1",
@@ -94,7 +94,7 @@
     "yargs": "17.7.3"
   },
   "devDependencies": {
-    "@cedarjs/framework-tools": "6.0.0-canary.2919",
+    "@cedarjs/framework-tools": "6.0.0-canary.2923",
     "@prisma/dmmf": "7.8.0",
     "@types/archiver": "^7.0.0",
     "memfs": "4.68.1",