dotCMS / dotCMS/core

[SDK][Vue] Make the package tree-shakeable and prevent eager TinyMCE loading

Open
#37,569 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

dotCMS : SDK javascript OKR : Application Performance
Dominant language
Java
Stars
970
Forks
486
Avg merge
3d 33m
Merged PRs (30d)
170

Description

Description

The published @dotcms/vue package is emitted as one flattened ESM file (currently about 30 KB before its peer dependencies). Its public barrel re-exports DotCMSEditableText.vue, which statically imports @tinymce/tinymce-vue.

Because the complete SDK is flattened into one module, consumers retain the TinyMCE import edge even when they import an unrelated utility such as toPlain or createDotCMSImageLoader. Adding sideEffects: false alone will not fix this: the import is inside the same module as the requested export.

Relevant files:

  • core-web/libs/sdk/vue/src/index.ts
  • core-web/libs/sdk/vue/src/lib/components/DotCMSEditableText/DotCMSEditableText.vue
  • core-web/libs/sdk/vue/vite.config.mts
  • core-web/dist/libs/sdk/vue/index.js

The Vue build should preserve module boundaries (or expose equivalent focused subpath entrypoints) and declare accurate side-effect metadata. TinyMCE should also be loaded only when editable text is used, ideally only when UVE edit mode initializes the editor.

Acceptance Criteria

  • The Vue package is emitted with independently tree-shakeable modules or focused subpath exports.
  • The package publishes accurate sideEffects metadata, retaining any required CSS side effects.
  • Importing a utility such as toPlain does not retain @tinymce/tinymce-vue, the layout renderer, or unrelated SDK features.
  • Importing layout rendering without editable text does not retain TinyMCE.
  • Live-mode editable text does not download the TinyMCE integration until the editor is actually required, if technically feasible without breaking SSR.
  • A small Vue consumer fixture or bundle-metafile test verifies the forbidden dependencies and establishes a size budget.
  • Existing Vue SDK tests and SSR behavior remain green.

Priority

High

Additional Context

Static inspection of the shipped artifact confirmed that index.js contains a top-level import of @tinymce/tinymce-vue. A bundle probe importing only toPlain still retained imports for Vue, @dotcms/client, UVE, types, and TinyMCE.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with core-web/libs/sdk/vue/src/index.ts and vite.config.mts, then compare the generated core-web/dist/libs/sdk/vue/index.js with the stated import behavior. Use a small Vue consumer fixture or bundle-metafile test to verify that utility and layout imports omit TinyMCE and unrelated features. Run the existing Vue SDK and SSR tests; done means the acceptance criteria and size budget are met without regressions.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
build-system, frontend, performance
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.