Merge branch 'chore/rename-entry-client' of github.com:dac09/redwood …

…into chore/rename-entry-client

* 'chore/rename-entry-client' of github.com:dac09/redwood:
  Move fastify.logger.infos to fastify.logger.traces (redwoodjs#8590)
  Make the fastify logger respect the LOG_LEVEL value set in the env (redwoodjs#8588)
  feat: Update the SDL types lib (redwoodjs#8586)
  Fix the codegen path for the GraphQL context objcet (redwoodjs#8585)
  chore(deps): update dependency @clerk/types to v3.42.0 (redwoodjs#8584)
  feat(codemod): Add codemod for js to jsx conversion (redwoodjs#8551)

__fixtures__/test-project/.env.defaults

@@ -12,8 +12,8 @@ DATABASE_URL=file:./dev.db
 # disables Prisma CLI update notifier
 PRISMA_HIDE_UPDATE_MESSAGE=true
 
-
 # Option to override the current environment's default api-side log level
-# See: https://redwoodjs.com/docs/logger for level options:
-# trace | info | debug | warn | error | silent
-# LOG_LEVEL=debug
+# See: https://redwoodjs.com/docs/logger for level options, defaults to "trace" otherwise.
+# Most applications want "debug" or "info" during dev, "trace" when you have issues and "warn" in production.
+# Ordered by how verbose they are: trace | debug | info | warn | error | silent
+# LOG_LEVEL=debug

__fixtures__/test-project/api/server.config.js

@@ -16,7 +16,7 @@
 const config = {
   requestTimeout: 15_000,
   logger: {
-    // Note: If running locally using `yarn rw serve` you may want to adust
+    // Note: If running locally using `yarn rw serve` you may want to adjust
     // the default non-development level to `info`
     level: process.env.NODE_ENV === 'development' ? 'debug' : 'warn',
   },
@@ -36,11 +36,11 @@ const config = {
 /** @type {import('@redwoodjs/api-server/dist/fastify').FastifySideConfigFn} */
 const configureFastify = async (fastify, options) => {
   if (options.side === 'api') {
-    fastify.log.info({ custom: { options } }, 'Configuring api side')
+    fastify.log.trace({ custom: { options } }, 'Configuring api side')
   }
 
   if (options.side === 'web') {
-    fastify.log.info({ custom: { options } }, 'Configuring web side')
+    fastify.log.trace({ custom: { options } }, 'Configuring web side')
   }
 
   return fastify

docs/docs/app-configuration-redwood-toml.md

@@ -151,11 +151,11 @@ This configuration does **not** apply in a serverless deploy.
 /** @type {import('@redwoodjs/api-server/dist/fastify').FastifySideConfigFn} */
 const configureFastify = async (fastify, options) => {
   if (options.side === 'api') {
-    fastify.log.info({ custom: { options } }, 'Configuring api side')
+    fastify.log.trace({ custom: { options } }, 'Configuring api side')
   }
 
   if (options.side === 'web') {
-    fastify.log.info({ custom: { options } }, 'Configuring web side')
+    fastify.log.trace({ custom: { options } }, 'Configuring web side')
   }
 
   return fastify
@@ -184,7 +184,7 @@ yarn workspace api add @fastify/rate-limit @fastify/compress
 /** @type {import('@redwoodjs/api-server/dist/fastify').FastifySideConfigFn} */
 const configureFastify = async (fastify, options) => {
   if (options.side === 'api') {
-    fastify.log.info({ custom: { options } }, 'Configuring api side')
+    fastify.log.trace({ custom: { options } }, 'Configuring api side')
 
     await fastify.register(import('@fastify/compress'), {
       global: true,
@@ -217,7 +217,7 @@ This may seem counter-intuitive, since you're configuring the `web` side, but th
 /** @type {import('@redwoodjs/api-server/dist/fastify').FastifySideConfigFn} */
 const configureFastify = async (fastify, options) => {
   if (options.side === 'web') {
-    fastify.log.info({ custom: { options } }, 'Configuring web side')
+    fastify.log.trace({ custom: { options } }, 'Configuring web side')
 
     fastify.register(import('@fastify/etag'))
   }
@@ -257,7 +257,7 @@ For example, to support image file uploads you'd tell Fastify to allow `/^image\
 /** @type {import('@redwoodjs/api-server/dist/fastify').FastifySideConfigFn} */
 const configureFastify = async (fastify, options) => {
   if (options.side === 'api') {
-    fastify.log.info({ custom: { options } }, 'Configuring api side')
+    fastify.log.trace({ custom: { options } }, 'Configuring api side')
 
     fastify.addContentTypeParser(/^image\/.*/, (req, payload, done) => {
       payload.on('end', () => {

packages/api-server/src/fastify.ts

@@ -21,7 +21,7 @@ let serverConfigFile: {
 } = {
   config: DEFAULT_OPTIONS,
   configureFastify: async (fastify, options) => {
-    fastify.log.info(
+    fastify.log.trace(
       options,
       `In configureFastify hook for side: ${options?.side}`
     )

packages/api-server/src/server.ts

@@ -18,11 +18,11 @@ export const startServer = ({
   fastify.listen({ port: serverPort, host })
 
   fastify.ready(() => {
-    fastify.log.debug(
+    fastify.log.trace(
       { custom: { ...fastify.initialConfig } },
       'Fastify server configuration'
     )
-    fastify.log.debug(`Registered plugins \n${fastify.printPlugins()}`)
+    fastify.log.trace(`Registered plugins \n${fastify.printPlugins()}`)
   })
 
   return fastify

packages/auth-providers/clerk/web/package.json

@@ -30,7 +30,7 @@
     "@babel/cli": "7.21.5",
     "@babel/core": "7.22.1",
     "@clerk/clerk-react": "4.18.0",
-    "@clerk/types": "3.41.0",
+    "@clerk/types": "3.42.0",
     "@types/react": "18.2.9",
     "jest": "29.5.0",
     "react": "18.2.0",

packages/cli/src/commands/serveHandler.js

@@ -33,11 +33,11 @@ export const apiServerHandler = async (options) => {
   })
 
   fastify.ready(() => {
-    fastify.log.debug(
+    fastify.log.trace(
       { custom: { ...fastify.initialConfig } },
       'Fastify server configuration'
     )
-    fastify.log.debug(`Registered plugins \n${fastify.printPlugins()}`)
+    fastify.log.trace(`Registered plugins \n${fastify.printPlugins()}`)
     console.log(chalk.italic.dim('Took ' + (Date.now() - tsApiServer) + ' ms'))
 
     const on = socket

packages/codemods/jest.config.js

@@ -3,6 +3,7 @@ module.exports = {
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/*.test.[jt]s?(x)'],
   testPathIgnorePatterns: [
     '__fixtures__',
+    '__testfixtures__',
     '__tests__/utils/*',
     '.d.ts',
     'dist',

packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/tsconfigForRouteHooks.yargs.ts

@@ -7,6 +7,7 @@ export const description =
   '(v2.3.x->v2.3.x) Allow $api imports in *.routesHooks.ts files'
 
 export const handler = () => {
+  // @ts-expect-error ignore, old codemod
   task('Tsconfig For Route Hooks', async ({ setOutput }: task.TaskInnerApi) => {
     addApiAliasToTsConfig()
     setOutput('All done! Run `yarn rw lint --fix` to prettify your code')

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/README.md

@@ -0,0 +1,47 @@
+# Convert Js To Jsx
+
+**Description**
+
+Vite works best when you avoid using `.js` files which actually contain JSX inside them. They should ideally be given the `.jsx` extension. Features such as hot reloading is unavailable in cases where you use `.js` where `.jsx` is more appropriate.
+
+This codemod examines all files ending in `.js` within your `web/src` and renames any files which contains JSX to end with `.jsx` instead of `.js`.
+
+**NOTE**: The contents of your files are untouched. This only affects the extension.
+
+**Examples**
+
+For example the following `App.js`:
+```js
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
+
+import FatalErrorPage from 'src/pages/FatalErrorPage'
+import Routes from 'src/Routes'
+
+import './index.css'
+
+const App = () => (
+  <FatalErrorBoundary page={FatalErrorPage}>
+    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+      <RedwoodApolloProvider>
+        <Routes />
+      </RedwoodApolloProvider>
+    </RedwoodProvider>
+  </FatalErrorBoundary>
+)
+
+export default App
+```
+would become `App.jsx` as it clearly contains JSX.
+
+However a file such as `TestCell.mock.js`:
+```js
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  test: {
+    id: 42,
+  },
+})
+```
+would remain `TestCell.mock.js` as it does not contain JSX.
+

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/App.js

@@ -0,0 +1,19 @@
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
+
+import FatalErrorPage from 'src/pages/FatalErrorPage'
+import Routes from 'src/Routes'
+
+import './index.css'
+
+const App = () => (
+  <FatalErrorBoundary page={FatalErrorPage}>
+    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+      <RedwoodApolloProvider>
+        <Routes />
+      </RedwoodApolloProvider>
+    </RedwoodProvider>
+  </FatalErrorBoundary>
+)
+
+export default App

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/Routes.js

@@ -0,0 +1,21 @@
+// 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 { Router, Route } from '@redwoodjs/router'
+
+const Routes = () => {
+  return (
+    <Router>
+      <Route path="/test" page={TestPage} name="test" />
+      <Route notfound page={NotFoundPage} />
+    </Router>
+  )
+}
+
+export default Routes

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.js

@@ -0,0 +1,19 @@
+export const QUERY = gql`
+  query FindTestQuery($id: Int!) {
+    test: test(id: $id) {
+      id
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({ test }) => {
+  return <div>{JSON.stringify(test)}</div>
+}

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.mock.js

@@ -0,0 +1,6 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  test: {
+    id: 42,
+  },
+})

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.stories.js

@@ -0,0 +1,20 @@
+import { Loading, Empty, Failure, Success } from './TestCell'
+import { standard } from './TestCell.mock'
+
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
+}
+
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+}
+
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
+}
+
+export default { title: 'Cells/TestCell' }

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.test.js

@@ -0,0 +1,41 @@
+import { render } from '@redwoodjs/testing/web'
+import { Loading, Empty, Failure, Success } from './TestCell'
+import { standard } from './TestCell.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://redwoodjs.com/docs/testing#testing-cells
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('TestCell', () => {
+  it('renders Loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  it('renders Failure successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).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 '@redwoodjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success test={standard().test} />)
+    }).not.toThrow()
+  })
+})

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestComponent/TestComponent.js

@@ -0,0 +1,10 @@
+const TestComponent = () => {
+  return (
+    <div>
+      <h2>{'TestComponent'}</h2>
+      <p>{'Find me in ./web/src/components/TestComponent/TestComponent.js'}</p>
+    </div>
+  )
+}
+
+export default TestComponent

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestComponent/TestComponent.stories.js

@@ -0,0 +1,21 @@
+// When you've added props to your component,
+// pass Storybook's `args` through this story to control it from the addons panel:
+//
+// ```jsx
+// export const generated = (args) => {
+//   return <TestComponent {...args} />
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import TestComponent from './TestComponent'
+
+export const generated = () => {
+  return <TestComponent />
+}
+
+export default {
+  title: 'Components/TestComponent',
+  component: TestComponent,
+}

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestComponent/TestComponent.test.js

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import TestComponent from './TestComponent'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('TestComponent', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<TestComponent />)
+    }).not.toThrow()
+  })
+})

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<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" />
+</head>
+
+<body>
+  <!-- Please keep this div empty -->
+  <div id="redwood-app"></div>
+</body>
+
+</html>

packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/layouts/TestLayout/TestLayout.js

@@ -0,0 +1,5 @@
+const TestLayout = ({ children }) => {
+  return <>{children}</>
+}
+
+export default TestLayout