@cedarjs/cli 9.0.0-canary.1784 → 9.0.0-canary.3124

package/dist/commands/experimental/setupInngestHandler.js

@@ -1,7 +1,8 @@
-import execa from "execa";
 import { Listr } from "listr2";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { runBin } from "@cedarjs/cli-helpers/packageManager/exec";
+import { addRootPackages } from "@cedarjs/cli-helpers/packageManager/packages";
 import { errorTelemetry } from "@cedarjs/telemetry";
-import c from "../../lib/colors.js";
 import { getPaths } from "../../lib/index.js";
 import { command, description, EXPERIMENTAL_TOPIC_ID } from "./setupInngest.js";
 import { printTaskEpilogue } from "./util.js";
@@ -10,18 +11,16 @@ const handler = async ({ force }) => {
     {
       title: `Adding Inngest setup packages for RedwoodJS ...`,
       task: async () => {
-        await execa("yarn", ["add", "-D", "inngest-setup-redwoodjs"], {
-          cwd: getPaths().base
+        await addRootPackages(["inngest-setup-redwoodjs"], {
+          cwd: getPaths().base,
+          dev: true
         });
       }
     },
     {
       task: async () => {
-        const pluginCommands = ["inngest-setup-redwoodjs", "plugin"];
-        if (force) {
-          pluginCommands.push("--force");
-        }
-        await execa("yarn", [...pluginCommands], {
+        const pluginArgs = force ? ["--force"] : [];
+        await runBin("inngest-setup-redwoodjs", ["plugin", ...pluginArgs], {
           stdout: "inherit",
           cwd: getPaths().base
         });
@@ -36,9 +35,11 @@ const handler = async ({ force }) => {
   try {
     await tasks.run();
   } catch (e) {
-    errorTelemetry(process.argv, e.message);
-    console.error(c.error(e.message));
-    process.exit(e?.exitCode || 1);
+    const message = e instanceof Error ? e.message : String(e);
+    const exitCode = e instanceof Error && "exitCode" in e && typeof e.exitCode === "number" ? e.exitCode : 1;
+    errorTelemetry(process.argv, message);
+    console.error(c.error(message));
+    process.exit(exitCode);
   }
 };
 export {

package/dist/commands/experimental/setupOpentelemetry.js

@@ -1,8 +1,8 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getEpilogue } from "./util.js";
 const command = "setup-opentelemetry";
 const description = "Setup OpenTelemetry within the API side";
-const EXPERIMENTAL_TOPIC_ID = 4772;
+const EXPERIMENTAL_TOPIC_ID = "4772";
 const builder = (yargs) => {
   yargs.option("force", {
     alias: "f",

package/dist/commands/experimental/setupOpentelemetryHandler.js

@@ -1,16 +1,16 @@
 import fs from "node:fs";
 import path from "node:path";
 import { ListrEnquirerPromptAdapter } from "@listr2/prompt-adapter-enquirer";
-import execa from "execa";
 import { Listr } from "listr2";
-import { addApiPackages } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { addApiPackages } from "@cedarjs/cli-helpers/installHelpers";
+import { runBin } from "@cedarjs/cli-helpers/packageManager/exec";
 import {
   getConfigPath,
   resolveFile,
   getSchemaPath
 } from "@cedarjs/project-config";
 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";
 import {
@@ -19,7 +19,10 @@ import {
   EXPERIMENTAL_TOPIC_ID
 } from "./setupOpentelemetry.js";
 import { printTaskEpilogue } from "./util.js";
-const handler = async ({ force, verbose }) => {
+const handler = async ({
+  force,
+  verbose
+}) => {
   const ts = isTypeScriptProject();
   const configTomlPath = getConfigPath();
   const configFileName = path.basename(configTomlPath);
@@ -112,7 +115,7 @@ const handler = async ({ force, verbose }) => {
       },
       task: (_ctx, task) => {
         task.output = [
-          "Please add the following to your 'redwoodFastifyGraphQLServer' plugin options to enable OTel for your graphql",
+          "Please add the following to your 'cedarFastifyGraphQLServer' plugin options to enable OTel for your graphql",
           "openTelemetryOptions: {",
           "  resolvers: true,",
           "  result: true,",
@@ -171,9 +174,8 @@ const handler = async ({ force, verbose }) => {
     {
       title: "Regenerate the Prisma client...",
       task: (_ctx, _task) => {
-        return execa(`yarn cedar prisma generate`, {
+        return runBin("cedar", ["prisma", "generate"], {
           stdio: "inherit",
-          shell: true,
           cwd: getPaths().web.base
         });
       }
@@ -210,9 +212,11 @@ const handler = async ({ force, verbose }) => {
   try {
     await tasks.run();
   } catch (e) {
-    errorTelemetry(process.argv, e.message);
-    console.error(c.error(e.message));
-    process.exit(e?.exitCode || 1);
+    const message = e instanceof Error ? e.message : String(e);
+    const exitCode = e instanceof Error && "exitCode" in e && typeof e.exitCode === "number" ? e.exitCode : 1;
+    errorTelemetry(process.argv, message);
+    console.error(c.error(message));
+    process.exit(exitCode);
   }
 };
 export {

package/dist/commands/experimental/setupReactCompiler.js

@@ -1,8 +1,8 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getEpilogue } from "./util.js";
 const command = "setup-react-compiler";
 const description = "Enable the experimental React Compiler";
-const EXPERIMENTAL_TOPIC_ID = 7128;
+const EXPERIMENTAL_TOPIC_ID = "7128";
 const builder = (yargs) => {
   yargs.option("force", {
     alias: "f",

package/dist/commands/experimental/setupReactCompilerHandler.js

@@ -1,11 +1,14 @@
 import fs from "node:fs";
 import path from "node:path";
-import execa from "execa";
 import { Listr } from "listr2";
-import semver from "semver";
+import { coerce, isGreaterOrEqual } from "verkit";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import {
+  addRootPackages,
+  addWorkspacePackages
+} from "@cedarjs/cli-helpers/packageManager/packages";
 import { getConfigPath } from "@cedarjs/project-config";
 import { errorTelemetry } from "@cedarjs/telemetry";
-import c from "../../lib/colors.js";
 import { getPaths, writeFile } from "../../lib/index.js";
 import {
   command,
@@ -13,16 +16,16 @@ import {
   EXPERIMENTAL_TOPIC_ID
 } from "./setupReactCompiler.js";
 import { printTaskEpilogue } from "./util.js";
-const handler = async ({ force, verbose }) => {
+const handler = async (options) => {
   const rwPaths = getPaths();
   const configTomlPath = getConfigPath();
   const configFileName = path.basename(configTomlPath);
   const configContent = fs.readFileSync(configTomlPath, "utf-8");
-  const tasks = new Listr(
-    [
+  function buildTaskData() {
+    return [
       {
         title: "Check prerequisites",
-        skip: force,
+        skip: options.force,
         task: () => {
           if (!rwPaths.web.entryClient || !rwPaths.web.viteConfig) {
             throw new Error(
@@ -36,8 +39,8 @@ const handler = async ({ force, verbose }) => {
             )
           );
           const reactVersion = webPkgJson["dependencies"]["react"];
-          const coercedReactVersion = semver.coerce(reactVersion);
-          if (!semver.gte(coercedReactVersion, "19.0.0")) {
+          const coercedReactVersion = coerce(reactVersion);
+          if (!coercedReactVersion || !isGreaterOrEqual(coercedReactVersion, "19.0.0")) {
             throw new Error(
               "You need to be using at least React version 19 to enable the React Compiler"
             );
@@ -59,7 +62,7 @@ const handler = async ({ force, verbose }) => {
               }
             );
           } else {
-            if (force) {
+            if (options.force) {
               task.output = `Overwriting config in ${configFileName}`;
               writeFile(
                 configTomlPath,
@@ -79,29 +82,27 @@ const handler = async ({ force, verbose }) => {
               );
             }
           }
-        },
-        rendererOptions: { persistentOutput: true }
+        }
       },
-      // We are using two different yarn commands here which is fine because they're operating on different
-      // workspaces - web and the root
+      // We are using two different package manager commands here which is
+      // fine because they're operating on different workspaces - web and the
+      // root
       {
         title: "Installing eslint-plugin-react-compiler",
         task: async () => {
-          await execa("yarn", ["add", "-D", "eslint-plugin-react-compiler"], {
-            cwd: getPaths().base
+          await addRootPackages(["eslint-plugin-react-compiler"], {
+            cwd: getPaths().base,
+            dev: true
           });
         }
       },
       {
         title: "Installing babel-plugin-react-compiler",
         task: async () => {
-          await execa(
-            "yarn",
-            ["web/", "add", "-D", "babel-plugin-react-compiler"],
-            {
-              cwd: getPaths().base
-            }
-          );
+          await addWorkspacePackages("web", ["babel-plugin-react-compiler"], {
+            cwd: getPaths().base,
+            dev: true
+          });
         }
       },
       {
@@ -109,18 +110,32 @@ const handler = async ({ force, verbose }) => {
           printTaskEpilogue(command, description, EXPERIMENTAL_TOPIC_ID);
         }
       }
-    ],
-    {
-      rendererOptions: { collapseSubtasks: false, persistentOutput: true },
-      renderer: verbose ? "verbose" : "default"
-    }
-  );
+    ];
+  }
   try {
-    await tasks.run();
+    if (options.verbose) {
+      await new Listr(buildTaskData(), {
+        exitOnError: true,
+        renderer: "verbose"
+      }).run();
+    } else {
+      await new Listr(
+        buildTaskData().map((t) => ({
+          ...t,
+          rendererOptions: { persistentOutput: true }
+        })),
+        {
+          exitOnError: true,
+          rendererOptions: { collapseSubtasks: false }
+        }
+      ).run();
+    }
   } catch (e) {
-    errorTelemetry(process.argv, e.message);
-    console.error(c.error(e.message));
-    process.exit(e?.exitCode || 1);
+    const message = e instanceof Error ? e.message : String(e);
+    const exitCode = e instanceof Error && "exitCode" in e && typeof e.exitCode === "number" ? e.exitCode : 1;
+    errorTelemetry(process.argv, message);
+    console.error(c.error(message));
+    process.exit(exitCode);
   }
 };
 export {

package/dist/commands/experimental/setupRsc.js

@@ -1,4 +1,4 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getEpilogue } from "./util.js";
 const command = "setup-rsc";
 const description = "Enable React Server Components (RSC)";

package/dist/commands/experimental/setupRscHandler.js

@@ -2,15 +2,20 @@ import fs from "node:fs";
 import path from "node:path";
 import execa from "execa";
 import { Listr } from "listr2";
-import { prettify } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { prettify } from "@cedarjs/cli-helpers/fileHelpers";
+import { install } from "@cedarjs/cli-helpers/packageManager";
 import { getConfig, getConfigPath } from "@cedarjs/project-config";
+import { getPackageManager } from "@cedarjs/project-config/packageManager";
 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";
 import { command, description, EXPERIMENTAL_TOPIC_ID } from "./setupRsc.js";
 import { printTaskEpilogue } from "./util.js";
-const handler = async ({ force, verbose }) => {
+const handler = async ({
+  force,
+  verbose
+}) => {
   const rwPaths = getPaths();
   const configTomlPath = getConfigPath();
   const configContent = fs.readFileSync(configTomlPath, "utf-8");
@@ -83,11 +88,9 @@ const handler = async ({ force, verbose }) => {
             ),
             "utf-8"
           );
-          const entryClientContent = isTypeScriptProject() ? entryClientTemplate : await transformTSToJS(
-            rwPaths.web.entryClient,
-            entryClientTemplate
-          );
-          writeFile(rwPaths.web.entryClient, entryClientContent, {
+          const entryClient = rwPaths.web.entryClient ?? "";
+          const entryClientContent = isTypeScriptProject() ? entryClientTemplate : await transformTSToJS(entryClient, entryClientTemplate);
+          writeFile(entryClient, entryClientContent, {
             overwriteExisting: true
           });
         }
@@ -219,7 +222,7 @@ const handler = async ({ force, verbose }) => {
       {
         title: "Adding CSS files...",
         task: async () => {
-          const files = [
+          const cssFiles = [
             {
               template: "Counter.css.template",
               path: ["components", "Counter", "Counter.css"]
@@ -241,7 +244,7 @@ const handler = async ({ force, verbose }) => {
               path: ["pages", "AboutPage", "AboutPage.css"]
             }
           ];
-          files.forEach((file) => {
+          cssFiles.forEach((file) => {
             const template = fs.readFileSync(
               path.resolve(
                 import.meta.dirname,
@@ -379,9 +382,8 @@ const handler = async ({ force, verbose }) => {
               overwriteExisting: true
             }
           );
-          await execa("yarn", [], {
-            cwd: getPaths().web.base
-          });
+          const pm = getPackageManager();
+          await execa(pm, [install()], { cwd: getPaths().web.base });
         }
       },
       {
@@ -398,9 +400,11 @@ const handler = async ({ force, verbose }) => {
   try {
     await tasks.run();
   } catch (e) {
-    errorTelemetry(process.argv, e.message);
-    console.error(c.error(e.message));
-    process.exit(e?.exitCode || 1);
+    const message = e instanceof Error ? e.message : String(e);
+    const exitCode = e instanceof Error && "exitCode" in e && typeof e.exitCode === "number" ? e.exitCode : 1;
+    errorTelemetry(process.argv, message);
+    console.error(c.error(message));
+    process.exit(exitCode);
   }
 };
 export {

package/dist/commands/experimental/setupStreamingSsr.js

@@ -1,8 +1,8 @@
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getEpilogue } from "./util.js";
 const command = "setup-streaming-ssr";
 const description = "Enable React Streaming and Server Side Rendering (SSR)";
-const EXPERIMENTAL_TOPIC_ID = 5052;
+const EXPERIMENTAL_TOPIC_ID = "5052";
 const builder = (yargs) => {
   yargs.option("force", {
     alias: "f",

package/dist/commands/experimental/setupStreamingSsrHandler.js

@@ -2,10 +2,10 @@ import fs from "node:fs";
 import path from "path";
 import { ListrEnquirerPromptAdapter } from "@listr2/prompt-adapter-enquirer";
 import { Listr } from "listr2";
-import { addWebPackages } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { addWebPackages } from "@cedarjs/cli-helpers/installHelpers";
 import { getConfigPath } from "@cedarjs/project-config";
 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";
 import {
@@ -14,18 +14,18 @@ import {
   EXPERIMENTAL_TOPIC_ID
 } from "./setupStreamingSsr.js";
 import { printTaskEpilogue } from "./util.js";
-const handler = async ({ force, verbose }) => {
-  const rwPaths = getPaths();
+const handler = async (options) => {
+  const cedarPaths = getPaths();
   const configPath = getConfigPath();
   const configContent = fs.readFileSync(configPath, "utf-8");
   const ts = isTypeScriptProject();
-  const ext = path.extname(rwPaths.web.entryClient || "");
-  const tasks = new Listr(
-    [
+  const ext = path.extname(cedarPaths.web.entryClient || "");
+  function buildTaskData() {
+    return [
       {
         title: "Check prerequisites",
         task: () => {
-          if (!rwPaths.web.entryClient || !rwPaths.web.viteConfig) {
+          if (!cedarPaths.web.entryClient || !cedarPaths.web.viteConfig) {
             throw new Error(
               "Vite needs to be setup before you can enable Streaming SSR"
             );
@@ -50,7 +50,7 @@ const handler = async ({ force, verbose }) => {
               }
             );
           } else {
-            if (force) {
+            if (options.force) {
               task.output = "Overwriting config in cedar.toml";
               writeFile(
                 configPath,
@@ -76,8 +76,7 @@ const handler = async ({ force, verbose }) => {
               );
             }
           }
-        },
-        rendererOptions: { persistentOutput: true }
+        }
       },
       {
         title: `Adding entry.client${ext}...`,
@@ -91,10 +90,13 @@ const handler = async ({ force, verbose }) => {
             ),
             "utf-8"
           );
-          let entryClientPath = rwPaths.web.entryClient;
+          let entryClientPath = cedarPaths.web.entryClient;
+          if (!entryClientPath) {
+            throw new Error("entryClient is not set");
+          }
           const entryClientContent = ts ? entryClientTemplate : await transformTSToJS(entryClientPath, entryClientTemplate);
-          let overwriteExisting = force;
-          if (!force) {
+          let overwriteExisting = options.force;
+          if (!options.force) {
             const prompt = task.prompt(ListrEnquirerPromptAdapter);
             overwriteExisting = await prompt.run({
               type: "Confirm",
@@ -107,8 +109,7 @@ You'll manually need to merge it with your existing entry.client${ext} file.`;
             }
           }
           writeFile(entryClientPath, entryClientContent, { overwriteExisting });
-        },
-        rendererOptions: { persistentOutput: true }
+        }
       },
       {
         title: `Adding entry.server${ext}...`,
@@ -123,12 +124,12 @@ You'll manually need to merge it with your existing entry.client${ext} file.`;
             "utf-8"
           );
           const entryServerPath = path.join(
-            rwPaths.web.src,
+            cedarPaths.web.src,
             `entry.server${ext}`
           );
           const entryServerContent = ts ? entryServerTemplate : await transformTSToJS(entryServerPath, entryServerTemplate);
           writeFile(entryServerPath, entryServerContent, {
-            overwriteExisting: force
+            overwriteExisting: options.force
           });
         }
       },
@@ -144,10 +145,10 @@ You'll manually need to merge it with your existing entry.client${ext} file.`;
             ),
             "utf-8"
           );
-          const documentPath = path.join(rwPaths.web.src, `Document${ext}`);
+          const documentPath = path.join(cedarPaths.web.src, `Document${ext}`);
           const documentContent = ts ? documentTemplate : await transformTSToJS(documentPath, documentTemplate);
           writeFile(documentPath, documentContent, {
-            overwriteExisting: force
+            overwriteExisting: options.force
           });
         }
       },
@@ -164,18 +165,18 @@ You'll manually need to merge it with your existing entry.client${ext} file.`;
             "utf-8"
           );
           const tsconfigPath = path.join(
-            rwPaths.web.base,
+            cedarPaths.web.base,
             ts ? "tsconfig.json" : "jsconfig.json"
           );
           writeFile(tsconfigPath, tsconfigTemplate, {
-            overwriteExisting: force
+            overwriteExisting: options.force
           });
         }
       },
       {
         title: 'Adding resolution for "@apollo/client-react-streaming/superjson"',
         task: () => {
-          const pkgJsonPath = path.join(rwPaths.base, "package.json");
+          const pkgJsonPath = path.join(cedarPaths.base, "package.json");
           const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8"));
           const resolutions = pkgJson.resolutions || {};
           resolutions["@apollo/client-react-streaming/superjson"] = "^1.12.2";
@@ -183,24 +184,38 @@ You'll manually need to merge it with your existing entry.client${ext} file.`;
           fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
         }
       },
-      addWebPackages(["@apollo/client-react-streaming@0.10.0"]),
+      addWebPackages(["@apollo/client-react-streaming@0.14.5"]),
       {
         task: () => {
           printTaskEpilogue(command, description, EXPERIMENTAL_TOPIC_ID);
         }
       }
-    ],
-    {
-      rendererOptions: { collapseSubtasks: false, persistentOutput: true },
-      renderer: verbose ? "verbose" : "default"
-    }
-  );
+    ];
+  }
   try {
-    await tasks.run();
+    if (options.verbose) {
+      await new Listr(buildTaskData(), {
+        exitOnError: true,
+        renderer: "verbose"
+      }).run();
+    } else {
+      await new Listr(
+        buildTaskData().map((t) => ({
+          ...t,
+          rendererOptions: { persistentOutput: true }
+        })),
+        {
+          exitOnError: true,
+          rendererOptions: { collapseSubtasks: false }
+        }
+      ).run();
+    }
   } catch (e) {
-    errorTelemetry(process.argv, e.message);
-    console.error(c.error(e.message));
-    process.exit(e?.exitCode || 1);
+    const message = e instanceof Error ? e.message : String(e);
+    const exitCode = e instanceof Error && "exitCode" in e && typeof e.exitCode === "number" ? e.exitCode : 1;
+    errorTelemetry(process.argv, message);
+    console.error(c.error(message));
+    process.exit(exitCode);
   }
 };
 export {

package/dist/commands/experimental/templates/opentelemetry.ts.template

@@ -24,11 +24,12 @@ const resource = Resource.default().merge(
 )
 
 const studioPort = getConfig().studio.basePort
+const apiUrl = getConfig().web.apiUrl.replace(/\/$/, '')
 const exporter = new OTLPTraceExporter({
   // Update this URL to point to where your OTLP compatible collector is listening
   // The redwood development studio (`yarn cedar exp studio`) can collect your
   // telemetry at `http://127.0.0.1:<PORT>/v1/traces` (default PORT is 4318)
-  url: `http://127.0.0.1:${studioPort}/.redwood/functions/otel-trace`,
+  url: `http://127.0.0.1:${studioPort}${apiUrl}/otel-trace`,
   concurrencyLimit: 64,
 })
 

package/dist/commands/experimental/templates/rsc/Document.tsx.template

@@ -20,7 +20,7 @@ export const Document: React.FC<DocumentProps> = ({ children, css, meta }) => {
         <Meta tags={meta} />
       </head>
       <body>
-        <div id="redwood-app">{children}</div>
+        <div id="cedar-app">{children}</div>
       </body>
     </html>
   )

package/dist/commands/experimental/templates/rsc/entry.client.tsx.template

@@ -4,29 +4,29 @@ import App from './App'
 import Routes from './Routes'
 
 /**
- * When `#redwood-app` isn't empty then it's very likely that you're using
+ * When `#cedar-app` isn't empty then it's very likely that you're using
  * pre-rendering. So React attaches event listeners to the existing markup
  * rather than replacing it.
  * https://react.dev/reference/react-dom/client/hydrateRoot
  */
-const redwoodAppElement = document.getElementById('redwood-app')
+const cedarAppElement = document.getElementById('cedar-app')
 
-if (!redwoodAppElement) {
+if (!cedarAppElement) {
   throw new Error(
-    "Could not find an element with ID 'redwood-app'. Please ensure it " +
-      "exists in your 'web/src/index.html' file."
+    'Could not find an element with ID "cedar-app". Please ensure it exists ' +
+      'in your `web/index.html` file.'
   )
 }
 
-if (redwoodAppElement.children?.length > 0) {
+if (cedarAppElement.children?.length > 0) {
   hydrateRoot(
-    redwoodAppElement,
+    cedarAppElement,
     <App>
       <Routes />
     </App>
   )
 } else {
-  const root = createRoot(redwoodAppElement)
+  const root = createRoot(cedarAppElement)
   root.render(
     <App>
       <Routes />

package/dist/commands/experimental/templates/streamingSsr/Document.tsx.template

@@ -20,7 +20,7 @@ export const Document: React.FC<DocumentProps> = ({ children, css, meta }) => {
         <Meta tags={meta} />
       </head>
       <body>
-        <div id="redwood-app">{children}</div>
+        <div id="cedar-app">{children}</div>
       </body>
     </html>
   )