Strapi Release: 4.2.0-beta.0

TL;DR

Strapi v4.2.0-beta.0 introduces two major features: Dark Mode for improved UI customization and TypeScript support for enhanced development workflows. The release also includes a new in-app marketplace that allows users to discover, install, and manage plugins directly from the admin panel. These additions significantly improve developer experience and interface customization options while maintaining Strapi's commitment to flexibility and ease of use.

Highlight of the Release

• Dark Mode support for improved UI customization and accessibility
• TypeScript support for enhanced development workflows and type safety
• New in-app marketplace for discovering and installing plugins
• Improved Media Library microcopy for better user experience
• New admin:create-user CLI command for easier user management

Migration Guide

Migrating to TypeScript (Optional)

If you want to use TypeScript in your existing Strapi project:

1. Add TypeScript as a dependency:

   npm install --save-dev typescript
   # or
   yarn add -D typescript
   

2. Create a tsconfig.json file in your project root with the recommended configuration:

   {
     "compilerOptions": {
       "target": "es2018",
       "module": "commonjs",
       "esModuleInterop": true,
       "sourceMap": true,
       "outDir": "dist",
       "baseUrl": ".",
       "paths": {
         "*": ["node_modules/*"]
       }
     },
     "include": ["./src/**/*"],
     "exclude": ["node_modules", "build", "dist"]
   }
   

3. For admin customization, create a tsconfig-admin.json file:

   {
     "extends": "./tsconfig.json",
     "include": ["./src/admin/**/*"]
   }
   

4. You can gradually migrate your JavaScript files to TypeScript by renaming them from .js to .ts or .tsx for React components.

Theme Customization for Dark Mode

If you have custom themes or UI components, you may need to update them to support Dark Mode:

1. Use the theme context to access the current theme mode:

   import { useTheme } from '@strapi/design-system';
   
   const MyComponent = () => {
     const { theme } = useTheme();
     
     return (
       <div style={{ color: theme.colors.neutral800 }}>
         My Component
       </div>
     );
   };
   

2. For custom theme extensions, make sure to provide values for both light and dark modes:

   // path: /src/admin/app.js
   export default {
     config: {
       theme: {
         light: {
           colors: {
             primary100: '#f6ecfc',
             // other color overrides
           },
         },
         dark: {
           colors: {
             primary100: '#181826',
             // other color overrides
           },
         },
       },
     },
   };
   

Upgrade Recommendations

This beta release introduces significant new features like Dark Mode and TypeScript support, which are stable enough for testing but may still have some issues to be resolved before the final release.

For Production Environments:

• Wait for the final 4.2.0 release before upgrading production environments
• If you're currently on v4.1.x, stay on that version for production use

For Development/Testing Environments:

• It's recommended to test this beta release in development environments to:
  • Explore the new Dark Mode functionality
  • Test TypeScript support if you plan to use it
  • Try out the new in-app marketplace
  • Provide feedback on any issues encountered

How to Upgrade:

npm install [email protected]
# or
yarn add [email protected]

After upgrading, run the build command to ensure all new features are properly initialized:

npm run build
# or
yarn build

Bug Fixes

UI and Accessibility Fixes

• Fixed relation select foreground color in Dark Mode
• Fixed sanitization of datetime type in query parameters
• Fixed release notification stacking in the admin panel
• Improved handling of null default values for boolean fields in GenericInput
• Fixed redirection issues when preserving URLs for users who aren't logged in
• Handled user not found error in email confirmation process

Developer Experience Fixes

• Fixed plugin generator to support valid package names for pluginId
• Improved error handling in admin user creation
• Fixed issues with the watch-admin command
• Improved handling of TypeScript files in development mode

New Features

Dark Mode

Strapi now supports Dark Mode in the admin panel, allowing users to switch between light and dark themes based on their preferences. This feature improves accessibility and reduces eye strain when working in low-light environments.

• Users can enable Dark Mode through their administrator profile settings
• Developers can extend and customize the theme through the theme extension API
• All UI components have been updated to support both light and dark themes

TypeScript Support

Strapi now offers first-class TypeScript support, allowing developers to create and maintain projects with improved type safety and developer tooling.

• Create TypeScript projects using the --typescript flag with the CLI
• TypeScript configuration files are automatically generated
• Webpack has been configured to handle TypeScript files
• Generators support TypeScript for creating new content types, plugins, etc.

In-App Marketplace

A new in-app marketplace has been added to the admin panel, allowing users to discover, install, and manage Strapi plugins directly from the interface.

• Browse and search available plugins
• View plugin details including verification status and developer information
• Copy installation commands with a single click
• Track plugin installation status
• Submit new plugins to the marketplace
• Filter plugins made by Strapi

Security Updates

Security Enhancements

• Added Airtable to the Content Security Policy (CSP) to allow integration
• Improved user authentication flow with better error handling
• Enhanced security in the email confirmation process

Performance Improvements

Search Performance

• Replaced FlexSearch with matchSorter for more efficient local search in the marketplace
• Optimized search indexing to improve marketplace plugin discovery
• Kept computation outside of components to reduce unnecessary re-renders

Build Process Improvements

• Improved webpack configuration for TypeScript support
• Optimized the build and develop commands for TypeScript projects
• Differentiated app and dist directories for better organization
• Cleaned up the dist directory before build to prevent stale files

Impact Summary

Strapi v4.2.0-beta.0 represents a significant enhancement to the developer and user experience with the introduction of Dark Mode, TypeScript support, and an in-app marketplace.

The Dark Mode feature improves accessibility and user comfort, particularly for those working in low-light environments or with light sensitivity. This addition aligns with modern UI/UX practices and user expectations for customizable interfaces.

TypeScript support marks a major step forward for developer experience, bringing improved type safety, better IDE integration, and enhanced code quality to Strapi projects. This feature has been highly requested by the community and positions Strapi as a more robust option for enterprise development teams.

The new in-app marketplace streamlines the plugin discovery and installation process, making it easier for users to extend Strapi's functionality without leaving the admin interface. This creates a more cohesive ecosystem for plugin developers and users alike.

These features collectively enhance Strapi's position as a flexible, developer-friendly headless CMS while improving the day-to-day experience for content editors and administrators. The beta status indicates these features are ready for testing but may receive further refinements before the final 4.2.0 release.

Full Release Notes