@cedarjs/cli 0.0.4

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

@@ -0,0 +1,55 @@
+import { diag, DiagConsoleLogger, DiagLogLevel } from '@opentelemetry/api'
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+import { registerInstrumentations } from '@opentelemetry/instrumentation'
+import { FastifyInstrumentation } from '@opentelemetry/instrumentation-fastify'
+import { HttpInstrumentation } from '@opentelemetry/instrumentation-http'
+import { Resource } from '@opentelemetry/resources'
+import {
+  NodeTracerProvider,
+  SimpleSpanProcessor,
+} from '@opentelemetry/sdk-trace-node'
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
+import { PrismaInstrumentation } from '@prisma/instrumentation'
+
+import { getConfig } from '@cedarjs/project-config'
+
+// You may wish to set this to DiagLogLevel.DEBUG when you need to debug opentelemetry itself
+diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.INFO)
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'redwood-app',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.0.0',
+  })
+)
+
+const studioPort = getConfig().studio.basePort
+const exporter = new OTLPTraceExporter({
+  // Update this URL to point to where your OTLP compatible collector is listening
+  // The redwood development studio (`yarn rw 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`,
+  concurrencyLimit: 64,
+})
+
+// You may wish to switch to BatchSpanProcessor in production as it is the recommended choice for performance reasons
+const processor = new SimpleSpanProcessor(exporter)
+
+const provider = new NodeTracerProvider({
+  resource: resource,
+})
+provider.addSpanProcessor(processor)
+
+// Optionally register instrumentation libraries here
+registerInstrumentations({
+  tracerProvider: provider,
+  instrumentations: [
+    new HttpInstrumentation(),
+    new FastifyInstrumentation(),
+    new PrismaInstrumentation({
+      middleware: true,
+    }),
+  ],
+})
+
+provider.register()

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

@@ -0,0 +1,20 @@
+'use client'
+
+import React from 'react'
+
+// @ts-expect-error no types
+import styles from './Counter.module.css'
+import './Counter.css'
+
+export const AboutCounter = () => {
+  const [count, setCount] = React.useState(0)
+
+  return (
+    <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
+      <h3 className={styles.header}>This is a client component.</h3>
+      <p>RSC on client: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}</p>
+    </div>
+  )
+}

package/dist/commands/experimental/templates/rsc/AboutPage.css.template

@@ -0,0 +1,2 @@
+.about-page {
+}

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

@@ -0,0 +1,17 @@
+import { AboutCounter } from 'src/components/Counter/AboutCounter'
+
+import './AboutPage.css'
+
+const AboutPage = () => {
+  return (
+    <div className="about-page">
+      <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
+        <h1>About Redwood</h1>
+        <AboutCounter />
+        <p>RSC on server: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}</p>
+      </div>
+    </div>
+  )
+}
+
+export default AboutPage

package/dist/commands/experimental/templates/rsc/Counter.css.template

@@ -0,0 +1,7 @@
+/**
+ * This should affect all h3 elements on the page, both server components and
+ * client components. This is just standard CSS stuff
+ */
+h3 {
+  color: orange;
+}

package/dist/commands/experimental/templates/rsc/Counter.module.css.template

@@ -0,0 +1,3 @@
+.header {
+  font-style: italic;
+}

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

@@ -0,0 +1,18 @@
+'use client'
+
+import React from 'react'
+
+import styles from './Counter.module.css'
+import './Counter.css'
+
+export const Counter = () => {
+  const [count, setCount] = React.useState(0)
+
+  return (
+    <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
+      <h3 className={styles.header}>This is a client component.</h3>
+    </div>
+  )
+}

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

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { Css, Meta } from '@cedarjs/web/htmlTags'
+import type { TagDescriptor } from '@cedarjs/web/htmlTags'
+
+interface DocumentProps {
+  children: React.ReactNode
+  css: string[] // array of css import strings
+  meta?: TagDescriptor[]
+}
+
+export const Document: React.FC<DocumentProps> = ({ children, css, meta }) => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <Css css={css} />
+        <Meta tags={meta} />
+      </head>
+      <body>
+        <div id="redwood-app">{children}</div>
+      </body>
+    </html>
+  )
+}

package/dist/commands/experimental/templates/rsc/HomePage.css.template

@@ -0,0 +1,2 @@
+.home-page {
+}

package/dist/commands/experimental/templates/rsc/HomePage.module.css.template

@@ -0,0 +1,3 @@
+.title {
+  color: green;
+}

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

@@ -0,0 +1,19 @@
+import { Counter } from 'src/components/Counter/Counter'
+
+import styles from './HomePage.module.css'
+
+import './HomePage.css'
+
+const HomePage = ({ name = 'Anonymous' }) => {
+  return (
+    <div className="home-page">
+      <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
+        <h1 className={styles.title}>Hello {name}!!</h1>
+        <h3>This is a server component.</h3>
+        <Counter />
+      </div>
+    </div>
+  )
+}
+
+export default HomePage

package/dist/commands/experimental/templates/rsc/NavigationLayout.css.template

@@ -0,0 +1,32 @@
+.navigation-layout {
+  & nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: color-mix(in srgb, yellow 50%, transparent);
+    border-bottom: 2px dashed color-mix(in srgb, yellow 90%, black);
+  }
+
+  & ul {
+    list-style: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+  }
+
+  & li {
+    margin-right: 10px;
+  }
+
+  & a {
+    text-decoration: none;
+    color: #333;
+    padding: 5px;
+    border-bottom: 2px solid transparent;
+  }
+
+  & a:hover {
+    border-bottom: 2px solid #333;
+  }
+}

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

@@ -0,0 +1,31 @@
+import { namedRoutes as routes } from '@cedarjs/router/dist/namedRoutes'
+
+import './NavigationLayout.css'
+
+const Link = (props: any) => {
+  return <a href={props.to}>{props.children}</a>
+}
+
+type NavigationLayoutProps = {
+  children?: React.ReactNode
+}
+
+const NavigationLayout = ({ children }: NavigationLayoutProps) => {
+  return (
+    <div className="navigation-layout">
+      <nav>
+        <ul>
+          <li>
+            <Link to={routes.home()}>Home</Link>
+          </li>
+          <li>
+            <Link to={routes.about()}>About</Link>
+          </li>
+        </ul>
+      </nav>
+      <main>{children}</main>
+    </div>
+  )
+}
+
+export default NavigationLayout

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

@@ -0,0 +1,29 @@
+// In this file, all Page components from 'src/pages` are auto-imported. Nested
+// directories are supported, and should be uppercase. Each subdirectory will be
+// prepended onto the component name.
+//
+// Examples:
+//
+// 'src/pages/HomePage/HomePage.js'         -> HomePage
+// 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
+
+import { Route } from '@cedarjs/router/Route'
+import { Router } from '@cedarjs/router/RscRouter'
+import { Set } from '@cedarjs/router/Set'
+
+import NavigationLayout from 'src/layouts/NavigationLayout'
+import NotFoundPage from 'src/pages/NotFoundPage'
+
+const Routes = () => {
+  return (
+    <Router>
+      <Set wrap={NavigationLayout}>
+        <Route path="/" page={HomePage} name="home" />
+        <Route path="/about" page={AboutPage} name="about" />
+      </Set>
+      <Route notfound page={NotFoundPage} />
+    </Router>
+  )
+}
+
+export default Routes

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

@@ -0,0 +1,35 @@
+import { hydrateRoot, createRoot } from 'react-dom/client'
+
+import App from './App'
+import Routes from './Routes'
+
+/**
+ * When `#redwood-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')
+
+if (!redwoodAppElement) {
+  throw new Error(
+    "Could not find an element with ID 'redwood-app'. Please ensure it " +
+      "exists in your 'web/src/index.html' file."
+  )
+}
+
+if (redwoodAppElement.children?.length > 0) {
+  hydrateRoot(
+    redwoodAppElement,
+    <App>
+      <Routes />
+    </App>
+  )
+} else {
+  const root = createRoot(redwoodAppElement)
+  root.render(
+    <App>
+      <Routes />
+    </App>
+  )
+}

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

@@ -0,0 +1,20 @@
+import type { TagDescriptor } from '@cedarjs/web/htmlTags'
+
+import App from './App'
+import { Document } from './Document'
+import Routes from './Routes'
+
+interface Props {
+  css: string[]
+  meta?: TagDescriptor[]
+}
+
+export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
+  return (
+    <Document css={css} meta={meta}>
+      <App>
+        <Routes />
+      </App>
+    </Document>
+  )
+}

package/dist/commands/experimental/templates/rsc/index.css.template

@@ -0,0 +1,4 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}

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

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { Css, Meta } from '@cedarjs/web/htmlTags'
+import type { TagDescriptor } from '@cedarjs/web/htmlTags'
+
+interface DocumentProps {
+  children: React.ReactNode
+  css: string[] // array of css import strings
+  meta?: TagDescriptor[]
+}
+
+export const Document: React.FC<DocumentProps> = ({ children, css, meta }) => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <Css css={css} />
+        <Meta tags={meta} />
+      </head>
+      <body>
+        <div id="redwood-app">{children}</div>
+      </body>
+    </html>
+  )
+}

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

@@ -0,0 +1,40 @@
+import { hydrateRoot, createRoot } from 'react-dom/client'
+
+import App from './App'
+import { Document } from './Document'
+import Routes from './Routes'
+
+/**
+ * When `#redwood-app` isn't empty then it's very likely that you're using
+ * prerendering. 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')
+
+if (!redwoodAppElement) {
+  throw new Error(
+    "Could not find an element with ID 'redwood-app'. Please ensure it " +
+      "exists in your 'web/src/index.html' file."
+  )
+}
+
+if (redwoodAppElement.children?.length > 0) {
+  hydrateRoot(
+    document,
+    <Document css={window.__assetMap?.()?.css}>
+      <App>
+        <Routes />
+      </App>
+    </Document>
+  )
+} else {
+  const root = createRoot(document)
+  root.render(
+    <Document css={window.__assetMap?.()?.css}>
+      <App>
+        <Routes />
+      </App>
+    </Document>
+  )
+}

package/dist/commands/experimental/templates/streamingSsr/entry.server.tsx.template

@@ -0,0 +1,20 @@
+import type { TagDescriptor } from '@cedarjs/web'
+
+import App from './App'
+import { Document } from './Document'
+import Routes from './Routes'
+
+interface Props {
+  css: string[]
+  meta?: TagDescriptor[]
+}
+
+export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
+  return (
+    <Document css={css} meta={meta}>
+      <App>
+        <Routes />
+      </App>
+    </Document>
+  )
+}

package/dist/commands/experimental/templates/streamingSsr/tsconfig.json.template

@@ -0,0 +1,54 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "target": "esnext",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "skipLibCheck": false,
+    "rootDirs": [
+      "./src",
+      "../.redwood/types/mirror/web/src",
+      "../api/src",
+      "../.redwood/types/mirror/api/src"
+    ],
+    "paths": {
+      "src/*": [
+        "./src/*",
+        "../.redwood/types/mirror/web/src/*",
+        "../api/src/*",
+        "../.redwood/types/mirror/api/src/*"
+      ],
+      "$api/*": [
+        "../api/*"
+      ],
+      "types/*": [
+        "./types/*",
+        "../types/*"
+      ],
+      "@cedarjs/testing": [
+        "../node_modules/@cedarjs/testing/web"
+      ]
+    },
+    "typeRoots": [
+      "../node_modules/@types",
+      "./node_modules/@types",
+      "../node_modules/@testing-library"
+    ],
+    "types": [
+      "jest",
+      "jest-dom",
+      "react/experimental"
+    ],
+    "jsx": "preserve"
+  },
+  "include": [
+    "src",
+    "config",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/web-*",
+    "../types",
+    "./types"
+  ]
+}

package/dist/commands/experimental/util.js

@@ -0,0 +1,69 @@
+import path from "path";
+import chalk from "chalk";
+import fs from "fs-extra";
+import terminalLink from "terminal-link";
+import { getPaths } from "../../lib/index.js";
+import { isTypeScriptProject, serverFileExists } from "../../lib/project.js";
+const link = (topicId, isTerminal = false) => {
+  const communityLink = `https://community.redwoodjs.com/t/${topicId}`;
+  if (isTerminal) {
+    return terminalLink(communityLink, communityLink);
+  } else {
+    return communityLink;
+  }
+};
+const getEpilogue = (command, description, topicId, isTerminal = false) => `This is an experimental feature to: ${description}.
+
+Please find documentation and links to provide feedback for ${command} at:
+ -> ${link(
+  topicId,
+  isTerminal
+)}`;
+const printTaskEpilogue = (command, description, topicId) => {
+  console.log(
+    `${chalk.hex("#ff845e")(
+      `------------------------------------------------------------------
+ \u{1F9EA} ${chalk.green(
+        "Experimental Feature"
+      )} \u{1F9EA}
+------------------------------------------------------------------`
+    )}`
+  );
+  console.log(getEpilogue(command, description, topicId, false));
+  console.log(
+    `${chalk.hex("#ff845e")(
+      "------------------------------------------------------------------"
+    )}
+`
+  );
+};
+const isServerFileSetup = () => {
+  if (!serverFileExists()) {
+    throw new Error(
+      "RedwoodJS Realtime requires a serverful environment. Please run `yarn rw setup server-file` first."
+    );
+  }
+  return true;
+};
+const realtimeExists = () => {
+  const realtimePath = path.join(
+    getPaths().api.lib,
+    `realtime.${isTypeScriptProject() ? "ts" : "js"}`
+  );
+  return fs.existsSync(realtimePath);
+};
+const isRealtimeSetup = () => {
+  if (!realtimeExists) {
+    throw new Error(
+      "Adding realtime events requires that RedwoodJS Realtime be setup. Please run `yarn setup realtime` first."
+    );
+  }
+  return true;
+};
+export {
+  getEpilogue,
+  isRealtimeSetup,
+  isServerFileSetup,
+  printTaskEpilogue,
+  realtimeExists
+};

package/dist/commands/experimental.js

@@ -0,0 +1,22 @@
+import terminalLink from "terminal-link";
+import detectRxVersion from "../middleware/detectProjectRxVersion.js";
+import * as experimentalInngest from "./experimental/setupInngest.js";
+import * as experimentalOpenTelemetry from "./experimental/setupOpentelemetry.js";
+import * as experimentalReactCompiler from "./experimental/setupReactCompiler.js";
+import * as experimentalRsc from "./experimental/setupRsc.js";
+import * as experimentalStreamingSsr from "./experimental/setupStreamingSsr.js";
+const command = "experimental <command>";
+const aliases = ["exp"];
+const description = "Run or setup experimental features";
+const builder = (yargs) => yargs.command(experimentalInngest).command(experimentalOpenTelemetry).command(experimentalReactCompiler).command(experimentalRsc).command(experimentalStreamingSsr).demandCommand().middleware(detectRxVersion).epilogue(
+  `Also see the ${terminalLink(
+    "Redwood CLI Reference",
+    "https://redwoodjs.com/docs/cli-commands#experimental"
+  )}`
+);
+export {
+  aliases,
+  builder,
+  command,
+  description
+};

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

@@ -0,0 +1,35 @@
+import {
+  createCommand,
+  createDescription,
+  createBuilder,
+  getYargsDefaults,
+  createHandler
+} from "../yargsCommandHelpers.js";
+const command = createCommand("cell");
+const description = createDescription("cell");
+const builder = createBuilder({
+  componentName: "cell",
+  optionsObj: () => {
+    return {
+      ...getYargsDefaults(),
+      list: {
+        alias: "l",
+        default: false,
+        description: "Use when you want to generate a cell for a list of the model name.",
+        type: "boolean"
+      },
+      query: {
+        default: "",
+        description: "Use to enforce a specific query name within the generated cell - must be unique.",
+        type: "string"
+      }
+    };
+  }
+});
+const handler = createHandler("cell");
+export {
+  builder,
+  command,
+  description,
+  handler
+};