Skip to content

perf: let nodeps.js use the host's Vuetify instead of bundling a second copy - #350

Merged
maartenbreddels merged 2 commits into
masterfrom
perf/nodeps-host-vuetify-min
Oct 6, 2026
Merged

maartenbreddels merged 2 commits into
masterfrom
perf/nodeps-host-vuetify-min

Conversation

@maartenbreddels

Copy link
Copy Markdown
Collaborator

nodeps.js, the bundle Solara loads, now uses the Vuetify of the host page instead of a second copy: 2.6 MB to 120 KB (354 to 18 KB gzip). This replaces #346 with the smallest change that gets the same win.

Problem

Solara pages already have Vue and Vuetify. nodeps.js still bundles Vuetify's components, directives and a scoped copy of Vuetify's CSS, so every Solara page downloads and runs a second Vuetify: 354 KB gzip.

Change

  • js/src/vuetifyPlugin.js: the createVuetify(...) call moves here from VuetifyView.js, unchanged.
  • js/webpack.config.js: the two nodeps builds swap that module for js/src/nodepsVuetifyPlugin.js, which returns the host's window.vuetifyPlugin. It throws a clear error if the host has none.
  • js/src/VuetifyApp.js: the DatePicker wrapper gets VDatePicker with resolveComponent instead of importing it, because the import would bundle it again.
  • index.js and the labextension still bundle Vuetify, so Jupyter does not change.

Validation

  • nodeps.js: 2,594,705 to 120,327 bytes raw, 353,753 to 17,932 gzip. It has no v-data-table string and no scoped Vuetify CSS. index.js is the same size as on master within 50 bytes.
  • On the Solara runner (solara 1.64.0, ipyvue 3.1.0), one run each: a date picker test and an overlay CSS test (both from perf: let nodeps.js use the host's Vuetify instead of a second copy #346, not committed here) pass. A Lumino-hosted v.Btn and a button in a v-menu render. button_test.py gives the same screenshot as released 3.0.0 on the same machine.
  • astra found no defect. gpt-6.1-sol found that a missing window.vuetifyPlugin was cached as undefined and failed later with an unclear error; the clear error now throws before anything is cached.

Gaps

  • Visible change: inside menus, dialogs and Lumino-hosted widgets, the app's own CSS now wins over Vuetify rules of equal specificity, as it already does in the main page. Before, the scoped copy of Vuetify's CSS came after the app's CSS and won there.
  • Solara before 1.61 has Vuetify 3.3. With this change, components that Vuetify 3.3 lacks, such as VDatePicker, do not render there. Released 3.0.0 already failed on those versions in other ways.
  • No new tests or CI size check. perf: let nodeps.js use the host's Vuetify instead of a second copy #346 had them; they can follow in a separate PR.

Align results

Caution

/align was not run on this change: Maarten asked to replace #346 with a much smaller PR.

Crossreview results

One round, by astra and gpt-6.1-sol. gpt-6.1-sol: MEDIUM, a missing host plugin was cached as undefined; fixed in this commit with a clear error that throws before caching. astra: no defects.

🤖 Generated with Claude Code

maartenbreddels and others added 2 commits October 6, 2026 10:51
nodeps.js is the bundle for Solara, whose page already has Vue and Vuetify.
It still bundled Vuetify's components, directives and a scoped copy of
Vuetify's CSS: about 2.6 MB raw and 354 KB gzip on every Solara page.

The Vuetify plugin now comes from a small module. In the two nodeps builds,
webpack swaps it for one that returns the host's plugin (window.vuetifyPlugin),
so the components, directives and CSS are no longer bundled. The DatePicker
wrapper resolves VDatePicker from the app instead of importing it, which
would bundle it again. index.js and the labextension still bundle Vuetify, so
Jupyter does not change.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…rting it

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@maartenbreddels
maartenbreddels force-pushed the perf/nodeps-host-vuetify-min branch from d50f66d to 6a8cb64 Compare October 6, 2026 08:51
@maartenbreddels
maartenbreddels merged commit b083cb7 into master Oct 6, 2026
12 checks passed
maartenbreddels added a commit to widgetti/solara that referenced this pull request Oct 6, 2026
…y's CSS

ipyvuetify 3.1.0 (widgetti/ipyvuetify#350) makes nodeps.js use the host's Vuetify, so -vuetify-css now removes all of Vuetify's stylesheet there. The sentence said this was true for ipyvuetify in general.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant