Divi 5 Dev Tool

URL: https://github.com/elegantthemes/d5-dev-tool

Description

A Divi 5 extension with various tools for developers. It consists of a custom modal for Divi 5 visual builder that displays the state of the layout:

• Hovered module
• Selected module
• Edited module
• Active view
• Active breakpoint
• Active attribute state
• Number of selected module
• Keypress
• Triggered shortcuts

Showcased examples

This extension is the example of "options 3: Importing Divi packages from window variables as externals using webpack" mentioned on this documentation Technically, examples that can be drawn from this extension samples:

• Custom modal on D5 visual builder extension.
• Using D5 packages as external and use type declaration package to add proper typing.
• Webpack configuration for D5 visual builder extension that do the following:
  • Use already enqueued script as externals.
  • Module rules that handle tsx, ts, jsx, css, scss, spawn multiple process and split works to make faster build process, transpile newer syntax into older syntax, etc
  • Extract and output CSS into its own file using plugins.
• tsconfig.json for typescript configuration
• Registered onClick event on admin bar item on top window.
• Using typed component from components imported as externals
• Using Higher Order Component to retrieve data from store and pass it into custom modal component.

Screenshots

Click here to open Divi 5 Dev Tool.

State monitor modal features.