sdx

SDX (Single Directory Components eXtended) brings modern JavaScript frameworks to Drupal's component system. Write React, Vue, or Svelte components inside Drupal's Single Directory Components (SDC) structure and let SDX handle the build pipeline, mounting, and server integration.

Features

Framework Support

• React 18+, Vue 3, and Svelte 5 via a plugin system
• Any framework can be added as a contrib module - no core changes needed
• One framework per site, selected through a setup wizard

Build Pipeline

• Vite bundler with Hot Module Replacement (HMR) for development
• Automatic import maps, vendor bundles, and code splitting
• SCSS/Sass and PostCSS support via optional submodules
• TypeScript support with type generation from component schemas

Reactive Components (Livewire for Drupal)

• sdx_reactive lets you build interactive components in pure PHP + Twig
• Server-owned state with #[ReactiveState] properties
• Server-side actions with #[ReactiveAction] methods
• Computed properties with #[Computed]
• Three transport modes: props (JS framework re-render), morph (server HTML replacement), realtime (shared state with polling)
• Zero JavaScript required from the developer

Developer Experience

• Setup wizard guides you through framework, bundler, and package manager selection
• drush sdx:doctor diagnoses common issues with actionable fixes
• drush sdx:build compiles all components in one command
• drush sdx:dev starts a dev server with hot reload
• drush sdx:create-component scaffolds new components
• Dashboard with build status, dependency management, and component overview
• Developer toolbar showing mount state, props, performance, and debug info

Package Manager Support

• npm, Yarn, pnpm, and Bun via pluggable submodules
• Automatic dependency resolution from component schemas

Additional Capabilities

• Server-Side Rendering (SSR) via Node.js microservice
• Theme Engine that replaces Twig with React/Vue templates
• Client-side navigation with SPA-like page transitions
• Storybook story generation from component schemas
• Layout Builder integration

Post-Installation

After enabling the sdx module, a setup wizard will guide you through selecting your stack:

• Framework - React, Vue, or Svelte
• Bundler - Vite (auto-selected as the only option)
• Package Manager - npm, Yarn, pnpm, or Bun (only available options are shown)
• Features - Optional modules like SSR, TypeScript, Reactive, Storybook, etc.
• Once the wizard completes, run drush sdx:doctor to verify your environment and drush sdx:build to compile your first components.

For DDEV users, expose the Vite port in .ddev/config.yaml for HMR support:

web_extra_exposed_ports:
  - name: vite
    container_port: 5173
    http_port: 5173
    https_port: 5174

Additional Requirements

• Node.js 18+ - Required for building components and running the dev server
• npm (or Yarn/pnpm/Bun) - Required for managing JavaScript dependencies
• PHP 8.3+ - Required by the module
• Drupal 10.3+ or 11 - Core version requirement
• Private file system - Must be configured in settings.php ($settings['file_private_path'])

Recommended modules/libraries

• Drush 13+ - Required for all CLI commands (sdx:build, sdx:dev, sdx:doctor, etc.)
• BigPipe (core) - Recommended for optimal caching with reactive components
• Layout Builder (core) - For placing SDX components as blocks in layouts

Similar projects

Single Directory Components (SDC) - SDX extends SDC, which is now part of Drupal core. SDC provides the component discovery and Twig rendering. SDX adds JavaScript framework integration and build tooling on top of it.

React Drupal - Provides basic React integration. SDX offers a more comprehensive approach with build pipeline, multiple framework support, and the reactive system.

Livewire for Drupal - Similar goals to sdx_reactive. SDX's reactive module is inspired by Laravel Livewire but built natively for Drupal's plugin and component systems.

Supporting this Module

Report bugs and feature requests in the issue queue

Contributions welcome - the plugin architecture makes it easy to add new frameworks, bundlers, and features as separate submodules

The project follows Drupal coding standards and uses PHPUnit for testing

Community Documentation

-