@cedarjs/cli 0.0.4

package/dist/commands/setup/i18n/templates/i18n.js.template

@@ -0,0 +1,52 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import fr from './locales/fr.json'
+import en from './locales/en.json'
+
+// This is a simple i18n configuration with English and French translations.
+// You can find the translations in web/src/locales/{language}.json
+// see: https://react.i18next.com
+// Here's an example of how to use it in your components, pages or layouts:
+/*
+import { Link, routes } from '@cedarjs/router'
+import { useTranslation } from 'react-i18next'
+
+const HomePage = () => {
+  const { t, i18n } = useTranslation()
+  return (
+    <>
+      <h1>{t('HomePage.title')}</h1>
+      <button onClick={() => i18n.changeLanguage('fr')}>fr</button>
+      <button onClick={() => i18n.changeLanguage('en')}>en</button>
+      <p>
+        {t('HomePage.info')} <code>./web/src/pages/HomePage/HomePage.js</code>
+      </p>
+      <p>
+        {t('HomePage.route')} <code>home</code>, {t('HomePage.link')}`
+        <Link to={routes.home()}>Home</Link>`
+      </p>
+    </>
+  )
+}
+
+export default HomePage
+*/
+
+i18n
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    interpolation: { escapeValue: false }, // React already does escaping
+    fallbackLng: 'en',
+    resources: {
+      en: {
+        translation: en,
+      },
+      fr: {
+        translation: fr,
+      },
+    },
+  })
+export default i18n

package/dist/commands/setup/i18n/templates/storybook.preview.tsx.template

@@ -0,0 +1,43 @@
+import * as React from 'react'
+
+import type { GlobalTypes } from '@storybook/csf'
+import type { Preview, StoryContext, StoryFn } from '@storybook/react'
+import { I18nextProvider } from 'react-i18next'
+import i18n from 'web/src/i18n'
+
+/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation | Global types and the toolbar annotation}  */
+export const globalTypes: GlobalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'fr', right: '🇫🇷', title: 'Français' },
+      ],
+    },
+  },
+}
+
+/**
+ * @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator}
+ */
+const withI18n = function WithI18n(Story: StoryFn, context: StoryContext) {
+  React.useEffect(() => {
+    i18n.changeLanguage(context.globals.locale)
+  }, [context.globals.locale])
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      <Story />
+    </I18nextProvider>
+  )
+}
+
+const preview: Preview = {
+  decorators: [withI18n],
+}
+
+export default preview

package/dist/commands/setup/jobs/jobs.js

@@ -0,0 +1,31 @@
+import terminalLink from "terminal-link";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+const command = "jobs";
+const description = "Sets up the config file and parent directory for background jobs";
+const builder = (yargs) => {
+  yargs.option("force", {
+    alias: "f",
+    default: false,
+    description: "Overwrite existing files",
+    type: "boolean"
+  }).epilogue(
+    `Also see the ${terminalLink(
+      "Redwood CLI Reference",
+      "https://redwoodjs.com/docs/cli-commands#setup-jobs"
+    )}`
+  );
+};
+const handler = async (options) => {
+  recordTelemetryAttributes({
+    command: "setup jobs",
+    force: options.force
+  });
+  const { handler: handler2 } = await import("./jobsHandler.js");
+  return handler2(options);
+};
+export {
+  builder,
+  command,
+  description,
+  handler
+};

package/dist/commands/setup/jobs/jobsHandler.js

@@ -0,0 +1,122 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import prismaInternals from "@prisma/internals";
+import { Listr } from "listr2";
+import { addApiPackages } from "@cedarjs/cli-helpers";
+import c from "../../../lib/colors.js";
+import { getPaths, transformTSToJS, writeFile } from "../../../lib/index.js";
+import { isTypeScriptProject } from "../../../lib/project.js";
+const MODEL_SCHEMA = `
+model BackgroundJob {
+  id        Int       @id @default(autoincrement())
+  attempts  Int       @default(0)
+  handler   String
+  queue     String
+  priority  Int
+  runAt     DateTime?
+  lockedAt  DateTime?
+  lockedBy  String?
+  lastError String?
+  failedAt  DateTime?
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+}
+`;
+const getModelNames = async () => {
+  const schema = await prismaInternals.getDMMF({
+    datamodelPath: getPaths().api.dbSchema
+  });
+  return schema.datamodel.models.map((model) => model.name);
+};
+const addDatabaseModel = () => {
+  const schema = fs.readFileSync(getPaths().api.dbSchema, "utf-8");
+  const schemaWithUser = schema + MODEL_SCHEMA;
+  fs.writeFileSync(getPaths().api.dbSchema, schemaWithUser);
+};
+const tasks = async ({ force }) => {
+  const modelExists = (await getModelNames()).includes("BackgroundJob");
+  const packageJsonPath = path.join(getPaths().base, "package.json");
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+  const redwoodVersion = packageJson.devDependencies?.["@cedarjs/core"] ?? "latest";
+  const jobsPackage = `@cedarjs/jobs@${redwoodVersion}`;
+  return new Listr(
+    [
+      {
+        title: "Creating job database model...",
+        task: () => {
+          addDatabaseModel();
+        },
+        skip: () => {
+          if (modelExists) {
+            return "BackgroundJob model exists, skipping";
+          }
+        }
+      },
+      {
+        title: "Creating config file in api/src/lib...",
+        task: async () => {
+          const isTs = isTypeScriptProject();
+          const outputExtension = isTs ? "ts" : "js";
+          const outputPath = path.join(
+            getPaths().api.lib,
+            `jobs.${outputExtension}`
+          );
+          let template = fs.readFileSync(
+            path.resolve(
+              import.meta.dirname,
+              "templates",
+              "jobs.ts.template"
+            )
+          ).toString();
+          if (!isTs) {
+            template = await transformTSToJS(outputPath, template);
+          }
+          writeFile(outputPath, template, {
+            overwriteExisting: force
+          });
+        }
+      },
+      {
+        title: "Creating jobs dir at api/src/jobs...",
+        task: () => {
+          fs.mkdirSync(getPaths().api.jobs, { recursive: true });
+          writeFile(path.join(getPaths().api.jobs, ".keep"), "", {
+            overwriteExisting: force
+          });
+        }
+      },
+      addApiPackages([jobsPackage]),
+      {
+        title: "One more thing...",
+        task: (_ctx, task) => {
+          task.title = `One more thing...
+
+          ${c.success("\nBackground jobs configured!\n")}
+
+          ${!modelExists ? "Migrate your database to finish setting up jobs:\n" : ""}
+          ${!modelExists ? c.highlight("\n\xA0\xA0yarn rw prisma migrate dev\n") : ""}
+
+          Generate jobs with: ${c.highlight("yarn rw g job <name>")}
+          Execute jobs with:  ${c.highlight("yarn rw jobs work\n")}
+
+          Check out the docs for more info:
+          ${c.link("https://docs.redwoodjs.com/docs/background-jobs")}
+
+        `;
+        }
+      }
+    ],
+    { rendererOptions: { collapseSubtasks: false }, errorOnExist: true }
+  );
+};
+const handler = async ({ force }) => {
+  const t = await tasks({ force });
+  try {
+    await t.run();
+  } catch (e) {
+    console.error(c.error(e.message));
+  }
+};
+export {
+  handler
+};

package/dist/commands/setup/jobs/templates/jobs.ts.template

@@ -0,0 +1,32 @@
+// Setup for background jobs. Jobs themselves live in api/src/jobs
+// Execute jobs in dev with `yarn rw jobs work`
+// See https://docs.redwoodjs.com/docs/background-jobs
+
+import { PrismaAdapter, JobManager } from '@cedarjs/jobs'
+
+import { db } from 'src/lib/db'
+import { logger } from 'src/lib/logger'
+
+export const jobs = new JobManager({
+  adapters: {
+    prisma: new PrismaAdapter({ db, logger }),
+  },
+  queues: ['default'] as const,
+  logger,
+  workers: [
+    {
+      adapter: 'prisma',
+      logger,
+      queue: '*', // watch all queues
+      count: 1,
+      maxAttempts: 24,
+      maxRuntime: 14_400,
+      deleteFailedJobs: false,
+      sleepDelay: 5,
+    },
+  ],
+})
+
+export const later = jobs.createScheduler({
+  adapter: 'prisma',
+})

package/dist/commands/setup/mailer/mailer.js

@@ -0,0 +1,30 @@
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+const command = "mailer";
+const description = "Setup the redwood mailer. This will install the required packages and add the required initial configuration to your redwood app.";
+const builder = (yargs) => {
+  yargs.option("force", {
+    alias: "f",
+    default: false,
+    description: "Overwrite existing configuration",
+    type: "boolean"
+  }).option("skip-examples", {
+    default: false,
+    description: "Only include required files and exclude any examples",
+    type: "boolean"
+  });
+};
+const handler = async (options) => {
+  recordTelemetryAttributes({
+    command: "setup mailer",
+    force: options.force,
+    skipExamples: options.skipExamples
+  });
+  const { handler: handler2 } = await import("./mailerHandler.js");
+  return handler2(options);
+};
+export {
+  builder,
+  command,
+  description,
+  handler
+};

package/dist/commands/setup/mailer/mailerHandler.js

@@ -0,0 +1,106 @@
+import path from "node:path";
+import fs from "fs-extra";
+import { Listr } from "listr2";
+import { addApiPackages } from "@cedarjs/cli-helpers";
+import { errorTelemetry } from "@cedarjs/telemetry";
+import c from "../../../lib/colors.js";
+import { getPaths, transformTSToJS, writeFile } from "../../../lib/index.js";
+import { isTypeScriptProject } from "../../../lib/project.js";
+const handler = async ({ force, skipExamples }) => {
+  const projectIsTypescript = isTypeScriptProject();
+  const redwoodVersion = await import(path.join(getPaths().base, "package.json"), {
+    with: { type: "json " }
+  }).default.devDependencies["@cedarjs/core"] ?? "latest";
+  const tasks = new Listr(
+    [
+      {
+        title: `Adding api/src/lib/mailer.${projectIsTypescript ? "ts" : "js"}...`,
+        task: async () => {
+          const templatePath = path.resolve(
+            import.meta.dirname,
+            "templates",
+            "mailer.ts.template"
+          );
+          const templateContent = fs.readFileSync(templatePath, {
+            encoding: "utf8",
+            flag: "r"
+          });
+          const mailerPath = path.join(
+            getPaths().api.lib,
+            `mailer.${projectIsTypescript ? "ts" : "js"}`
+          );
+          const mailerContent = projectIsTypescript ? templateContent : await transformTSToJS(mailerPath, templateContent);
+          return writeFile(mailerPath, mailerContent, {
+            overwriteExisting: force
+          });
+        }
+      },
+      {
+        title: "Adding api/src/mail directory...",
+        task: () => {
+          const mailDir = path.join(getPaths().api.mail);
+          if (!fs.existsSync(mailDir)) {
+            fs.mkdirSync(mailDir);
+          }
+        }
+      },
+      {
+        title: `Adding example ReactEmail mail template`,
+        skip: () => skipExamples,
+        task: async () => {
+          const templatePath = path.resolve(
+            import.meta.dirname,
+            "templates",
+            "re-example.tsx.template"
+          );
+          const templateContent = fs.readFileSync(templatePath, {
+            encoding: "utf8",
+            flag: "r"
+          });
+          const exampleTemplatePath = path.join(
+            getPaths().api.mail,
+            "Example",
+            `Example.${projectIsTypescript ? "tsx" : "jsx"}`
+          );
+          const exampleTemplateContent = projectIsTypescript ? templateContent : await transformTSToJS(exampleTemplatePath, templateContent);
+          return writeFile(exampleTemplatePath, exampleTemplateContent, {
+            overwriteExisting: force
+          });
+        }
+      },
+      {
+        // Add production dependencies
+        ...addApiPackages([
+          `@cedarjs/mailer-core@${redwoodVersion}`,
+          `@cedarjs/mailer-handler-nodemailer@${redwoodVersion}`,
+          `@cedarjs/mailer-renderer-react-email@${redwoodVersion}`,
+          `@react-email/components`
+          // NOTE: Unpinned dependency here
+        ]),
+        title: "Adding production dependencies to your api side..."
+      },
+      {
+        // Add development dependencies
+        ...addApiPackages([
+          "-D",
+          `@cedarjs/mailer-handler-in-memory@${redwoodVersion}`,
+          `@cedarjs/mailer-handler-studio@${redwoodVersion}`
+        ]),
+        title: "Adding development dependencies to your api side..."
+      }
+    ],
+    {
+      rendererOptions: { collapseSubtasks: false }
+    }
+  );
+  try {
+    await tasks.run();
+  } catch (e) {
+    errorTelemetry(process.argv, e.message);
+    console.error(c.error(e.message));
+    process.exit(e?.exitCode || 1);
+  }
+};
+export {
+  handler
+};

package/dist/commands/setup/mailer/templates/mailer.ts.template

@@ -0,0 +1,30 @@
+import { Mailer } from '@cedarjs/mailer-core'
+import { NodemailerMailHandler } from '@cedarjs/mailer-handler-nodemailer'
+import { ReactEmailRenderer } from '@cedarjs/mailer-renderer-react-email'
+
+import { logger } from 'src/lib/logger'
+
+export const mailer = new Mailer({
+  handling: {
+    handlers: {
+      // TODO: Update this handler config or switch it out for a different handler completely
+      nodemailer: new NodemailerMailHandler({
+        transport: {
+          host: 'localhost',
+          port: 4319,
+          secure: false,
+        },
+      }),
+    },
+    default: 'nodemailer',
+  },
+
+  rendering: {
+    renderers: {
+      reactEmail: new ReactEmailRenderer(),
+    },
+    default: 'reactEmail',
+  },
+
+  logger,
+})

package/dist/commands/setup/mailer/templates/re-example.tsx.template

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import {
+  Html,
+  Text,
+  Hr,
+  Body,
+  Head,
+  Tailwind,
+  Preview,
+  Container,
+  Heading,
+} from '@react-email/components'
+
+export function ExampleEmail(
+  { when }: { when: string } = { when: new Date().toLocaleString() }
+) {
+  return (
+    <Html lang="en">
+      <Head />
+      <Preview>An example email</Preview>
+      <Tailwind>
+        <Body className="mx-auto my-auto bg-white font-sans">
+          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 p-[20px]">
+            <Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black">
+              Example Email
+            </Heading>
+            <Text className="text-[14px] leading-[24px] text-black">
+              This is an example email which you can customise to your needs.
+            </Text>
+            <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
+            <Text className="text-[12px] leading-[24px] text-[#666666]">
+              Message was sent on {when}
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  )
+}

package/dist/commands/setup/middleware/middleware.js

@@ -0,0 +1,17 @@
+import terminalLink from "terminal-link";
+import * as ogImageCommand from "./ogImage/ogImage.js";
+const command = "middleware <type>";
+const description = "Set up a middleware";
+function builder(yargs) {
+  return yargs.command(ogImageCommand).epilogue(
+    `Also see the ${terminalLink(
+      "Redwood CLI Reference",
+      "https://redwoodjs.com/docs/cli-commands"
+    )}`
+  );
+}
+export {
+  builder,
+  command,
+  description
+};

package/dist/commands/setup/middleware/ogImage/__codemod_tests__/middleware.js

@@ -0,0 +1,15 @@
+import { describe, it } from "vitest";
+describe("Middleware codemod", () => {
+  it("Handles the default TSX case", async () => {
+    await matchTransformSnapshot("codemodMiddleware", "defaultTsx");
+  });
+  it("Handles when OgImageMiddleware is already imported", async () => {
+    await matchTransformSnapshot("codemodMiddleware", "alreadyContainsImport");
+  });
+  it("Handles when registerMiddleware function is already defined", async () => {
+    await matchTransformSnapshot(
+      "codemodMiddleware",
+      "registerFunctionAlreadyDefined"
+    );
+  });
+});

package/dist/commands/setup/middleware/ogImage/__codemod_tests__/vitePlugin.js

@@ -0,0 +1,6 @@
+import { describe, it } from "vitest";
+describe("Vite plugin codemod", () => {
+  it("Handles the default vite config case", async () => {
+    await matchTransformSnapshot("codemodVitePlugin", "defaultViteConfig");
+  });
+});

package/dist/commands/setup/middleware/ogImage/codemodMiddleware.js

@@ -0,0 +1,97 @@
+function transform(file, api) {
+  const j = api.jscodeshift;
+  const ast = j(file.source);
+  const needsImport = ast.find(j.ImportDeclaration, {
+    specifiers: [
+      {
+        type: "ImportDefaultSpecifier",
+        local: {
+          name: "OgImageMiddleware"
+        }
+      }
+    ],
+    source: {
+      value: "@cedarjs/ogimage-gen/middleware",
+      type: "StringLiteral"
+    }
+  }).length === 0;
+  if (needsImport) {
+    ast.find(j.ImportDeclaration).at(0).insertBefore(
+      j.importDeclaration(
+        [j.importDefaultSpecifier(j.identifier("OgImageMiddleware"))],
+        j.stringLiteral("@cedarjs/ogimage-gen/middleware")
+      )
+    );
+  }
+  const registerMiddleware = ast.find(j.ExportNamedDeclaration, {
+    declaration(value) {
+      if (!value) {
+        return false;
+      }
+      if (value.type === "VariableDeclaration") {
+        return value.declarations[0].type === "VariableDeclarator" && value.declarations[0].id.type === "Identifier" && value.declarations[0].id.name === "registerMiddleware";
+      }
+      if (value.type === "FunctionDeclaration") {
+        return value.id?.type === "Identifier" && value.id?.name === "registerMiddleware";
+      }
+      return false;
+    }
+  });
+  const appObjectProperty = j.objectProperty(
+    j.identifier("App"),
+    j.identifier("App")
+  );
+  appObjectProperty.shorthand = true;
+  const documentObjectProperty = j.objectProperty(
+    j.identifier("Document"),
+    j.identifier("Document")
+  );
+  documentObjectProperty.shorthand = true;
+  const ogMwDeclaration = j.variableDeclaration("const", [
+    j.variableDeclarator(
+      j.identifier("ogMw"),
+      j.newExpression(j.identifier("OgImageMiddleware"), [
+        j.objectExpression([appObjectProperty, documentObjectProperty])
+      ])
+    )
+  ]);
+  const arrowFunc = j.arrowFunctionExpression(
+    [],
+    j.blockStatement([
+      ogMwDeclaration,
+      j.returnStatement(j.arrayExpression([j.identifier("ogMw")]))
+    ])
+  );
+  arrowFunc.async = true;
+  const needsCompleteRegisterMiddleware = registerMiddleware.length === 0;
+  if (needsCompleteRegisterMiddleware) {
+    ast.find(j.ExportNamedDeclaration).at(-1).insertAfter(
+      j.exportNamedDeclaration(
+        j.variableDeclaration("const", [
+          j.variableDeclarator(j.identifier("registerMiddleware"), arrowFunc)
+        ])
+      )
+    );
+  } else {
+    const returnStatement = registerMiddleware.find(j.ReturnStatement, {
+      argument: {
+        type: "ArrayExpression"
+      }
+    });
+    if (returnStatement.length === 0) {
+      throw new Error(
+        "Could not find the return statement in the existing registerMiddleware function"
+      );
+    }
+    returnStatement.insertBefore(ogMwDeclaration);
+    returnStatement.find(j.ArrayExpression).at(0).replaceWith((nodePath) => {
+      const elements = nodePath.value.elements;
+      elements.push(j.identifier("ogMw"));
+      return nodePath.value;
+    });
+  }
+  return ast.toSource();
+}
+export {
+  transform as default
+};