D5 :: 3PS :: Example Modules :: Migrate Legacy Types by ayubadiputra · Pull Request #72 · elegantthemes/d5-extension-example-modules

ayubadiputra · 2026-05-31T07:25:44Z

The Issue

Issue Reference

Fixes: https://github.com/elegantthemes/Divi/issues/49115

Root Cause

Divi 5.1 moved Visual Builder type definitions from legacy divi-types-* packages (installed via npm aliases like @types/divi__module → divi-types-module) to first-party scoped @divi/* packages. The D5 Extension Example Modules plugin still depended on the old alias pattern and bundled ~25 unused type packages, which caused:

Outdated dependency model — developers following the example extension were pointed at deprecated packages instead of Release 5.1’s @divi/* workflow.
npm install failures on current Node — transitive undici@7.x (via enzyme → cheerio and @wordpress/scripts → jest-environment-jsdom → jsdom) requires Node >= 20.18.1, while engines.node was still >= 18.0.0 and .npmrc has engine-strict=true.
Broken transitive type dependency — @divi/module pulls in @divi/field-library, which requests @types/codemirror@5.65.16, a version that was never published to npm.
Build warnings — sass-loader used Dart Sass’s deprecated legacy JS API, producing deprecation warnings on every SCSS compile.

The README also documented known placeholderContent type errors as a temporary workaround tied to the old divi-types packages, which blocked a clean developer experience.

Historical Context

Git history shows the legacy npm alias setup was introduced early in the extension’s life (7e824ae — Fikri Rasyid, “Removed yarn setup, points package.json to actual types package”). Over time, more @types/divi__* aliases were added as the example modules grew. transpileOnly: true was later added to ts-loader (e257cb0) to keep builds unblocked while legacy type packages lagged behind Divi core. Release 5.1’s scoped @divi/* packages are the intended long-term replacement; this PR updates the reference extension so third-party developers follow the current model.

The Pull Request

Solution Approach

Migrate the example extension to Release 5.1’s scoped type packages and document the migration path for third-party developers:

Replace legacy type aliases with scoped @divi/* packages — Remove all divi-types-* / @types/divi__* npm aliases. Add only the packages actually imported by the example modules: @divi/types, @divi/module, @divi/module-library, @divi/module-utils, @divi/rest, @divi/style-library, and @divi/icon-library. Unused legacy packages are dropped; npm resolves related transitive @divi/* dependencies automatically.
Refresh lockfile via clean install — Regenerate package-lock.json with npm run reset-install after the dependency swap.
Raise minimum Node version — Bump engines.node to >= 20.18.1 to satisfy undici@7.x engine checks under engine-strict=true.
Pin @types/codemirror — Add an npm overrides entry (5.60.17) to work around the unpublished 5.65.16 version requested by @divi/field-library.
Modernize Sass compilation — Configure sass-loader with api: 'modern-compiler' to use Dart Sass’s modern compiler API and eliminate legacy JS API deprecation warnings.
Update README — Replace outdated install notes (Node 18, placeholderContent workarounds) with Release 5.1 guidance: required Node version, scoped @divi/* install model, and troubleshooting for missing types / failed installs.

Screencast Verification

Install Works

Build Works

Load and Edit Module Works

Load.and.Eddit.Works.mp4

Testing & Verification

Make sure you install and activate the D5 Extension Example Modules plugin.
Go to your terminal.
Run npm run reset-install to refresh node_modules and package-lock.json. Make sure it's done successfully.
Run npm run start to start the project. Make sure it's done successfully.
Run npm run build to build the project. Make sure it's done successfully.
Go to Visual Builder.
Try to add an example module (i.e. Module Settings Demo module). Make sure it's loaded and edit normally.

Alternative Solutions (if any)

Keep all legacy @types/divi__* aliases — Rejected; deprecated in Release 5.1 and misleads third-party developers.
Install every @divi/* package explicitly — Rejected; npm resolves transitive type dependencies; only packages with direct imports are listed in devDependencies.
npm install --ignore-engines — Documented as a temporary workaround only; not suitable as the default because .npmrc uses engine-strict=true.
Wait for upstream @types/codemirror@5.65.16 — Not viable; version was never published. npm overrides to 5.60.17 is the practical fix until @divi/field-library updates its dependency.
Remove transpileOnly: true from ts-loader immediately — Considered; deferred for a follow-up once all example module sources are verified clean against the new @divi/* types under full type-checking.

Changelog

Updated D5 Extension Example Modules to use scoped @divi/* npm type packages per Divi 5.1, with updated Node.js requirements and build configuration for a clean install and compile experience.

… wire Elements callbacks - Add module metadata for layout/html/elements on showcase modules; Group-style Elements on Parent; childrenName [] on leaf examples. - Register elementsCallbacks and render element children in VB for leaf modules. - Document optional "any module as child" pattern for Parent in README and JSDoc. Part of elegantthemes/Divi#48612

…Module Use childrenName listing example/child-module plus allowAllElements (Accordion pattern) so Divi’s is-valid-child still accepts category child-module while opening the module picker to regular modules. Update VB wrapper, SCSS, and README/index JSDoc; child edit uses a div root for mixed child types. Part of elegantthemes/Divi#48612

…e FE - Append WordPress-rendered inner block HTML ($content) to Module::render for Dynamic, Static, D4, and Parent so Elements children appear on FE - Replace ElementComponents background output with style_components(module) where updated, and pass childrenIds via ChildrenUtils::extract_children_ids - D4: stop shadowing $content when rendering the content element (richtext) Part of elegantthemes/Divi#48612

…r Static, Dynamic, Divi 4 example modules Align Static, Dynamic, and Divi 4 example modules with core Audio patterns for Divi 5 Layout. - Add module.json styleProps.layout selectors targeting each module’s inner wrapper. - Apply et_flex_module / et_grid_module from decoration.layout display in VB (edit.tsx) and FE (RenderCallbackTrait via HTMLUtility::classnames). - Scope module Advanced > Text styles to the module order class in styles.tsx and ModuleStylesTrait so layout flex/reverse is not overridden on the inner node. - Dynamic: pass defaultPrintedStyleAttrs on module styles (VB parity with PHP). - D4: fold standalone TextStyle into elements.style advancedStyles; fix CommonStyle parallax so position:relative only applies when parallax is enabled. - Rebuild scripts/bundle.js and styles bundles. Refs: elegantthemes/Divi#48612

Add example/module-settings-demo as a D5-only sandbox for Content panel field types (text, richtext, select, checkboxes) under one Content group. VB/FE use framework render for text and rich text; select and checkboxes resolve labels from shared TS/PHP option maps in ascending checkbox order. Fixes elegantthemes/Divi#49970

…ixes elegantthemes/Divi#49920.

…ckages Replace legacy `divi-types-*` and `@types/divi__*` aliases with direct `@divi/*` dependencies per Release 5.1. Require Node >= `20.18.1` for `undici@7.x` engine checks, pin `@types/codemirror` via overrides, and configure `sass-loader` to use Dart Sass `modern-compiler` API. Re-enable `ts-loader` type-checking and update `README` install and troubleshooting notes. Fixes elegantthemes/Divi#49115

shohel

@ayubadiputra This PR has merge conflicts, Please resolve it.

Thanks

…ivi#49115.

ayubadiputra · 2026-07-07T18:05:46Z

@shohel Thanks! I addressed your feedback.

robicse11127

LGTM!

…son file when running reset-install script. Part of elegantthemes/Divi#48612

Jronk · 2026-08-13T21:29:09Z

@ayubadiputra please fix merge conflict

ayubadiputra added 7 commits May 6, 2026 19:02

feat(D5, Example Modules): add README for new Module Settings Demo. F…

70b39c2

…ixes elegantthemes/Divi#49920.

etstaging requested a review from shohel May 31, 2026 07:25

ayubadiputra changed the title ~~feat(D5, Example Modules): migrate npm types to scoped @divi/* pa…~~ D5 :: 3PS :: Example Modules :: Migrate Legacy Types May 31, 2026

shohel requested changes Jun 4, 2026

View reviewed changes

ayubadiputra changed the base branch from 49970-d5-settings-demo-example to main July 7, 2026 17:41

fix(D5, Example Modules): fix merged conflicts. Fixes elegantthemes/D…

9e429c5

…ivi#49115.

ayubadiputra requested a review from shohel July 7, 2026 18:05

robicse11127 approved these changes Jul 20, 2026

View reviewed changes

fix(D5, Example Modules): remove unnecessary remove of package-lock.j…

19a5ec7

…son file when running reset-install script. Part of elegantthemes/Divi#48612

Navigation Menu

Uh oh!

D5 :: 3PS :: Example Modules :: Migrate Legacy Types - #72

D5 :: 3PS :: Example Modules :: Migrate Legacy Types#72
ayubadiputra wants to merge 9 commits into
mainfrom
49115-d5-migrate-legacy-types

ayubadiputra commented May 31, 2026 •

edited

Loading

Uh oh!

shohel left a comment

Uh oh!

ayubadiputra commented Jul 7, 2026

Uh oh!

robicse11127 left a comment

Uh oh!

Jronk commented Aug 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

ayubadiputra commented May 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

The Issue

Issue Reference

Root Cause

Historical Context

The Pull Request

Solution Approach

Screencast Verification

Testing & Verification

Alternative Solutions (if any)

Changelog

Uh oh!

shohel left a comment

Choose a reason for hiding this comment

Uh oh!

ayubadiputra commented Jul 7, 2026

Uh oh!

robicse11127 left a comment

Choose a reason for hiding this comment

Uh oh!

Jronk commented Aug 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ayubadiputra commented May 31, 2026 •

edited

Loading