@redwoodjs/core 0.28.0

v0.28.0

on Node.js NPM

tl;dr
The Redwood Community shipped some code in this release. A lot of code. Many amazing new features. And you're going to like what they added 🚀

This release contains recommended code modifications, which are required to use new features such as the Logger. See the "How to Upgrade" section for more information.

v0.28 Highlights 🎉

There are so many amazing contributors to thank for this release. And for major new features like the Logger, the new Router <Set />, and Router a11y, there were months of discussions, iterations, and collaboration happening behind the scenes of every PR. To all of you both seen and unseen, thank you! And for everyone else who gets to benefit from all the goodness jam-packed into v0.28, we can't wait to see what you build.

🧭 Router <Set wrap={}>

You can now group Routes into sets using the Set component. Set allows you to wrap a set of Routes in another component or array of components—usually a Context, a Layout, or both.

• Learn how to use it via the Router Doc
• See it in action in the updated sections of the Tutorial, starting with Layouts
• Have suggestions, feedback, or "thanks" to give? Check out this Forum Post about the new feature.

🪣 Logger

Introducing API logging done the RedwoodWay: an opinionated logger with sensible, practical defaults that grants you visibility into the applications while you're developing and after you have deployed. Under the hood, the Logger is built on pino with its rich features, ecosystem and community.

• There's a whole lot you can do with the new Logger. Check out the Logger Doc to get started.
• ⚠️ If you are upgrading, you will need to manually add the Logger to your project. See the "Manual Code Modifications" section below.

🌏 Accessibility (aka a11y)

This release is an important, foundational step for Redwood a11y: all your pages will automatically be announced to screen-reader users. You can customize the announcement with the RouteAnnouncement component (@redwoodjs/router). Keep a lookout for even more in future releases — focus management, skip links, and tooling (via yarn rw setup a11y).

• Check out the new Accessibility Doc
• Stay in the loop and provide feedback via this Forum Post

✍️ Storybook v6: Now Configurable!

Redwood has upgraded to Storybook v6, which you can configure and customize to your heart's delight via storybook.config.js and storybook.preview.js.

• Check out the new Storybook Doc

🏗 ESBuild: API + Web (experimental)

Level up build performance (optionally) with ESBuild. It's experimental at the moment, which means we need your help trying it out and letting us know how it worked! Should we make the full switch to ESBuild?

• Check out this Forum Post to learn more and let us know how you like it

Changed

• Auth: Pass event and context into getCurrentUser #1908 by @brentjanderson
• Auth: Improve auth cli filesystem calls #2007 by @renansoares
• Auth: Azure Active Directory Auth — Adding try-catch block on callback to capture empty key #2010 by @jeliasson
• Auth: return signup() output from auth client #1992 by @jvanbaarsen
  • ⚠️ signUp from useAuth returns a promise that will now resolve with the return value of the underlying auth client's sign-up method. Previously that promise always resolved with undefined.
• Internal: Refactor: Converted Prisma.ts to js #1958 by @saideepesh000
• Internal: Update error message in tasks/publish-local to point to tasks/run-loc... #2004 by @webstackdev
• Internal: Update all contributors as of v0.27+ #2045 by @thedavidprice
• API: Make per-request-context rely on lazy initialization #2046 by @peterp
• CLI: Set cwd to project's base path when running yarn rw upgrade #2081 by @qooqu
• Generators: Updates checkbox width CSS #2093 by @cannikin
• Storybook: Bump Storybook to 6.1 #2054 by @corbt 🎉
  • can now define a custom Storybook preview file in web/config/storybook.preview.js
• Prisma: Upgrade to Prisma 2.19.0 (Prisma Migrate GA) #2021 by @thedavidprice
  • v2.19.0 Release Notes
    • Prisma Migrate now GA 🎉
    • added support for prisma db pull, which was added in 2.18 and will replace introspect in the future

Added

• Router: #1898 by @Tobbe 🎉
  • Add the new Set component to the Router docs #2097 by @jtoar
• Router: Make useParams usable in layouts in #2043 by @Tobbe 🎉
• Logger: Implement Redwood API side Logger #1937 #2090 by @dthyresson 🎉
• a11y: Steps towards a11y for Redwood Router #1817 by @jtoar 🎉
  • also adds scroll to top on new page navigation
• a11y: Add a11y configuration for eslint #1849 #2087 by @jtoar 🎉
• Build: Add experimental ESBuild for api side #1948 by @peterp 🎉
• Build: Use esbuild-loader for web side. #2049 by @peterp 🎉
• API: Add makeExecSchema options #1964 by @peterp ⚠️
  • [DEPRECATION Warning] makeMergedSchema option schemaDirective will be deprecated. Use schemaOptions instead.
• TS: TypeScript support for CLI function-generator #1854 by @realStandal
• CI: Add CodeQL Analysis GitHub Action #1951 by @thedavidprice
• Prisma: Add Prisma 'format' to command array requiring schema #2061 by @thedavidprice

Fixes

• Cells: withCellHOC: Fix TS error #1967 by @Tobbe
• Auth: Fix issue with verify email redirect using Auth0 #1990 by @o0charlie0o
• Auth: fix Router error when useAuth isn't passed #2038 by @Tobbe
• Docs: remove (coming soon) #1998 by @guledali
• Docs: Simple typo fixes in README #2041 by @bdurette
• Docs: Replaces logger docs with link to www site docs #2094 by @dthyresson
• Internal Fix yarn install errors: upgrade gotrue-js to v0.9.29 #2011 by @thedavidprice
• Internal: Fixed path on windows to allow for pages under subdirectories #2022 by @cjreimer
• Storybook: Fix grabbing a user's storybook config #2002 by @jtoar
• Lint: globalContext.tsx: Fix lint warning #2000 by @Tobbe
• Lint: Fix lint breaking when deleting a side #2017 by @Magicjuju
• Lint: Fix router lint issue | Bump and pin @types/react to 17.0.3 #2058 by @dac09
• Testing: fix: mock window.scrollTo to stop jest's consoling #2044 by @jtoar
• Logger: Fixes case when File Logging didn't get set with the correct logger options #2047 by @dthyresson
• Logger: Fix Logger Readme destination param in transport examples #2055 by @dthyresson
• DevServer: fix(html-mismatch) — Fixes warning in browser console #2056 by @dac09
• Generator: Pick a field other than a foreign key when creating update test #2059 by @cannikin
• Forms: Fixes formatDateTime helper when field is optional and value is empty #2072 by @cannikin
• Filesystem: Fix glob matching to support subdirectories #2079 by @peterp
• Router: only render one page #2080 by @Tobbe
• a11y: Fix invalid html in route announcer test #2089 by @jtoar
• TS: Fix typeDefs for schema options #2096 @peterp

Breaking ⚠️

Surprise! Nothing to see here. If you've been keeping up with upgrades for a while, you've earned yourself a treat 🍦

How to upgrade to Redwood v0.28 from v0.27

👉 IMPORTANT: Skipping versions when upgrading is not recommended and will likely cause problems. Do read through all Release Notes between your current version and this latest version. Each minor release will likely require you to implement breaking change fixes and apply manual code modifications.

Manual Code Modifications

Logger (opt-in)

To use the new Redwood Logger, you will need to make the following changes.

1. Optional Env Var
We recommend adding this commented code to your env.defaults so you'll have it as a reminder when you need it!

• reference env.defaults

// env.defaults

# 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

2. DB Imports
Make the following changes to add imports:

• reference db.[ts|js]

// api/src/lib/db.[ts|js]

import { PrismaClient } from '@prisma/client'

-export const db = new PrismaClient()
+import { emitLogLevels, handlePrismaLogging } from '@redwoodjs/api/logger'
+
+import { logger } from './logger'
+
+/*
+ * Instance of the Prisma Client
+ */
+export const db = new PrismaClient({
+  log: emitLogLevels(['info', 'warn', 'error']),
+})
+
+handlePrismaLogging({
+  db,
+  logger,
+  logLevels: ['info', 'warn', 'error'],
+})

Create a new Logger file
Create a new file api/src/lib/logger.[ts|js]. (Note: choose .js or .ts based on your project language target.)

• reference logger.[ts|js]

// api/src/lib/logger.[ts|js]

import { createLogger } from '@redwoodjs/api/logger'

/**
 * Creates a logger with RedwoodLoggerOptions
 *
 * These extend and override default LoggerOptions,
 * can define a destination like a file or other supported pin log transport stream,
 * and sets where or not to show the logger configuration settings (defaults to false)
 *
 * @param RedwoodLoggerOptions
 *
 * RedwoodLoggerOptions have
 * @param {options} LoggerOptions - defines how to log, such as pretty printing, redaction, and format
 * @param {string | DestinationStream} destination - defines where to log, such as a transport stream or file
 * @param {boolean} showConfig - whether to display logger configuration on initialization
 */
export const logger = createLogger({})

Custom web/src/index.js update (optional)

If you are using a custom index.js, you can make the following change to account for a fix applied via #2056, which removes a non-critical console error.

// web/src/index.js

-if (rootElement.hasChildNodes()) {
+if (rootElement.children?.length > 0) { 
  ReactDOM.hydrate(<App />, rootElement)
} else { 
  ReactDOM.render(<App />, rootElement)
}

Upgrade Packages

Run the following command within your App's directory:

yarn rw upgrade

Need help or having trouble upgrading packages? See this forum topic for manual upgrade instructions and general upgrade help.