[SDK][Vue] Make the package tree-shakeable and prevent eager TinyMCE loading
Nobody has claimed this yet.
- 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.tscore-web/libs/sdk/vue/src/lib/components/DotCMSEditableText/DotCMSEditableText.vuecore-web/libs/sdk/vue/vite.config.mtscore-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
sideEffectsmetadata, retaining any required CSS side effects. - Importing a utility such as
toPlaindoes 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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