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

js/src/VuetifyApp.js

@@ -1,5 +1,4 @@
-import { h } from "vue";
-import { VDatePicker } from "vuetify/components";
+import { h, resolveComponent } from "vue";
 
 const appsWithComponents = new WeakSet();
 
@@ -28,6 +27,11 @@ const DatePicker = {
   props: ["modelValue"],
   emits: ["update:modelValue"],
   setup(props, { attrs, emit, slots }) {
+    // Use the VDatePicker registered in the app we render in: the host's Vuetify in
+    // nodeps.js (Solara), ipyvuetify's own in Jupyter. Importing it from
+    // "vuetify/components" would bundle VDatePicker and its dependencies into nodeps.js,
+    // a second partial Vuetify that cannot find the host's date setup.
+    const VDatePicker = resolveComponent("VDatePicker");
     return () =>
       h(
         VDatePicker,

js/src/VuetifyView.js

@@ -1,10 +1,7 @@
 import { VueView, createViewContext, vueRender } from "jupyter-vue";
-import "vuetify/styles";
 import colors from "vuetify/lib/util/colors.mjs";
-import { createVuetify, useTheme } from "vuetify";
-import * as components from "vuetify/components";
-import * as labComponents from "vuetify/labs/components";
-import * as directives from "vuetify/directives";
+import { useTheme } from "vuetify";
+import { createVuetifyPlugin } from "./vuetifyPlugin";
 import { ThemeColorsModel, ThemeModel } from "./Themes";
 import { addApp } from "./VuetifyApp";
 
@@ -17,13 +14,7 @@ function getManagerState(widgetManager) {
   if (!managerState) {
     managerState = {
       initializedThemes: new WeakSet(),
-      vuetify: createVuetify({
-        components: {
-          ...components,
-          ...labComponents,
-        },
-        directives,
-      }),
+      vuetify: createVuetifyPlugin(),
     };
     managerStateByWidgetManager.set(widgetManager, managerState);
   }

js/src/nodepsVuetifyPlugin.js

@@ -0,0 +1,8 @@
+// nodeps.js: the host page (Solara) already has Vuetify, and shares its plugin as a global.
+export const createVuetifyPlugin = () => {
+  if (!window.vuetifyPlugin)
+    throw new Error(
+      "jupyter-vuetify nodeps.js needs the host's window.vuetifyPlugin (Solara)"
+    );
+  return window.vuetifyPlugin;
+};

js/src/vuetifyPlugin.js

@@ -0,0 +1,13 @@
+// Jupyter: ipyvuetify brings its own Vuetify. nodeps.js (Solara) replaces this module with
+// nodepsVuetifyPlugin.js, so it does not bundle a second copy (see webpack.config.js).
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as labComponents from "vuetify/labs/components";
+import * as directives from "vuetify/directives";
+
+export const createVuetifyPlugin = () =>
+  createVuetify({
+    components: { ...components, ...labComponents },
+    directives,
+  });

js/webpack.config.js

@@ -1,3 +1,4 @@
+var webpack = require("webpack");
 var path = require("path");
 var version = require("./package.json").version;
 
@@ -114,6 +115,13 @@ module.exports = [
       "vuetify",
     ],
     mode: "production",
+    // use the host's Vuetify plugin instead of bundling a second Vuetify
+    plugins: [
+      new webpack.NormalModuleReplacementPlugin(
+        /^\.\/vuetifyPlugin$/,
+        "./nodepsVuetifyPlugin"
+      ),
+    ],
   },
   {
     name: "nodeps-embed",
@@ -143,6 +151,13 @@ module.exports = [
       "vuetify",
     ],
     mode: "production",
+    // use the host's Vuetify plugin instead of bundling a second Vuetify
+    plugins: [
+      new webpack.NormalModuleReplacementPlugin(
+        /^\.\/vuetifyPlugin$/,
+        "./nodepsVuetifyPlugin"
+      ),
+    ],
   },
   {
     name: "embed",