diff --git a/__fixtures__/test-project/.env.defaults b/__fixtures__/test-project/.env.defaults index 630016bee2f2..fb88fb33b334 100644 --- a/__fixtures__/test-project/.env.defaults +++ b/__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 \ No newline at end of file +# 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 diff --git a/__fixtures__/test-project/api/server.config.js b/__fixtures__/test-project/api/server.config.js index b012191dce14..e82b04ea3f52 100644 --- a/__fixtures__/test-project/api/server.config.js +++ b/__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 diff --git a/docs/docs/app-configuration-redwood-toml.md b/docs/docs/app-configuration-redwood-toml.md index 94848b3c411c..3179d8dd14c3 100644 --- a/docs/docs/app-configuration-redwood-toml.md +++ b/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', () => { diff --git a/packages/api-server/src/fastify.ts b/packages/api-server/src/fastify.ts index 025cef1f08f1..ffce1de6adf1 100644 --- a/packages/api-server/src/fastify.ts +++ b/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}` ) diff --git a/packages/api-server/src/server.ts b/packages/api-server/src/server.ts index 8aed3d6c610c..04cd88b085c4 100644 --- a/packages/api-server/src/server.ts +++ b/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 diff --git a/packages/auth-providers/clerk/web/package.json b/packages/auth-providers/clerk/web/package.json index d273466fdcb7..7148f5dc5475 100644 --- a/packages/auth-providers/clerk/web/package.json +++ b/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", diff --git a/packages/cli/src/commands/serveHandler.js b/packages/cli/src/commands/serveHandler.js index 1c6b4af016b7..4367113c7511 100644 --- a/packages/cli/src/commands/serveHandler.js +++ b/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 diff --git a/packages/codemods/jest.config.js b/packages/codemods/jest.config.js index 8de199d8b175..7a0f5009d19e 100644 --- a/packages/codemods/jest.config.js +++ b/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', diff --git a/packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/tsconfigForRouteHooks.yargs.ts b/packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/tsconfigForRouteHooks.yargs.ts index 1d50a6128b1b..566d1a20dd95 100644 --- a/packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/tsconfigForRouteHooks.yargs.ts +++ b/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') diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/README.md b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/README.md new file mode 100644 index 000000000000..8468fe6f9c1f --- /dev/null +++ b/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 = () => ( + + + + + + + +) + +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. + diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/App.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/App.js new file mode 100644 index 000000000000..97fb5e02520d --- /dev/null +++ b/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 = () => ( + + + + + + + +) + +export default App diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/Routes.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/Routes.js new file mode 100644 index 000000000000..f4e5f389c80a --- /dev/null +++ b/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 ( + + + + + ) +} + +export default Routes diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.js new file mode 100644 index 000000000000..2a0260c40f0b --- /dev/null +++ b/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 = () =>
Loading...
+ +export const Empty = () =>
Empty
+ +export const Failure = ({ error }) => ( +
Error: {error?.message}
+) + +export const Success = ({ test }) => { + return
{JSON.stringify(test)}
+} diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.mock.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.mock.js new file mode 100644 index 000000000000..6db709e2edb6 --- /dev/null +++ b/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, + }, +}) diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.stories.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.stories.js new file mode 100644 index 000000000000..198bb1ca9df2 --- /dev/null +++ b/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 ? : <> +} + +export const empty = () => { + return Empty ? : <> +} + +export const failure = (args) => { + return Failure ? : <> +} + +export const success = (args) => { + return Success ? : <> +} + +export default { title: 'Cells/TestCell' } diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.test.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestCell/TestCell.test.js new file mode 100644 index 000000000000..daee05047212 --- /dev/null +++ b/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() + }).not.toThrow() + }) + + it('renders Empty successfully', async () => { + expect(() => { + render() + }).not.toThrow() + }) + + it('renders Failure successfully', async () => { + expect(() => { + render() + }).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() + }).not.toThrow() + }) +}) diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestComponent/TestComponent.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestComponent/TestComponent.js new file mode 100644 index 000000000000..0dca58476b8e --- /dev/null +++ b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestComponent/TestComponent.js @@ -0,0 +1,10 @@ +const TestComponent = () => { + return ( +
+

{'TestComponent'}

+

{'Find me in ./web/src/components/TestComponent/TestComponent.js'}

+
+ ) +} + +export default TestComponent diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestComponent/TestComponent.stories.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestComponent/TestComponent.stories.js new file mode 100644 index 000000000000..1c3ee40e258b --- /dev/null +++ b/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 +// } +// ``` +// +// See https://storybook.js.org/docs/react/writing-stories/args. + +import TestComponent from './TestComponent' + +export const generated = () => { + return +} + +export default { + title: 'Components/TestComponent', + component: TestComponent, +} diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestComponent/TestComponent.test.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/components/TestComponent/TestComponent.test.js new file mode 100644 index 000000000000..0bc0a7cad920 --- /dev/null +++ b/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() + }).not.toThrow() + }) +}) diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/index.css b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/index.css new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/index.html b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/index.html new file mode 100644 index 000000000000..e240b8eb8c54 --- /dev/null +++ b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + + +
+ + + diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/layouts/TestLayout/TestLayout.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/layouts/TestLayout/TestLayout.js new file mode 100644 index 000000000000..f46b6ceba653 --- /dev/null +++ b/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 diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/layouts/TestLayout/TestLayout.stories.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/layouts/TestLayout/TestLayout.stories.js new file mode 100644 index 000000000000..03ee1ff33b19 --- /dev/null +++ b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/layouts/TestLayout/TestLayout.stories.js @@ -0,0 +1,10 @@ +import TestLayout from './TestLayout' + +export const generated = (args) => { + return +} + +export default { + title: 'Layouts/TestLayout', + component: TestLayout, +} diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/layouts/TestLayout/TestLayout.test.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/layouts/TestLayout/TestLayout.test.js new file mode 100644 index 000000000000..ad9336038eb1 --- /dev/null +++ b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/layouts/TestLayout/TestLayout.test.js @@ -0,0 +1,14 @@ +import { render } from '@redwoodjs/testing/web' + +import TestLayout from './TestLayout' + +// Improve this test with help from the Redwood Testing Doc: +// https://redwoodjs.com/docs/testing#testing-pages-layouts + +describe('TestLayout', () => { + it('renders successfully', () => { + expect(() => { + render() + }).not.toThrow() + }) +}) diff --git a/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/pages/FatalErrorPage/FatalErrorPage.js b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/pages/FatalErrorPage/FatalErrorPage.js new file mode 100644 index 000000000000..7ff31af1a7f4 --- /dev/null +++ b/packages/codemods/src/codemods/v6.x.x/convertJsToJsx/__testfixtures__/example/input/web/src/pages/FatalErrorPage/FatalErrorPage.js @@ -0,0 +1,62 @@ +// This page will be rendered when an error makes it all the way to the top of the +// application without being handled by a Javascript catch statement or React error +// boundary. +// +// You can modify this page as you wish, but it is important to keep things simple to +// avoid the possibility that it will cause its own error. If it does, Redwood will +// still render a generic error page, but your users will prefer something a bit more +// thoughtful. =) + +// Ensures that production builds do not include the error page +let RedwoodDevFatalErrorPage = undefined +if (process.env.NODE_ENV === 'development') { + RedwoodDevFatalErrorPage = + require('@redwoodjs/web/dist/components/DevFatalErrorPage').DevFatalErrorPage +} + +export default RedwoodDevFatalErrorPage || + (() => ( +
+