@marimo-team/islands 0.19.10-dev49 → 0.19.10-dev51

package/dist/main.js

@@ -64533,41 +64533,41 @@ ${O}`,
   }
   const AnyWidgetPlugin = createPlugin("marimo-anywidget").withData(object$1({
     jsUrl: string$2(),
-    jsHash: string$2(),
-    css: string$2().nullish()
+    jsHash: string$2()
   })).withFunctions({}).renderer((e) => (0, import_jsx_runtime.jsx)(AnyWidgetSlot, {
     ...e
   }));
   var AnyWidgetSlot = (e) => {
     var _a2;
-    let r = (0, import_compiler_runtime$98.c)(15), { css: c, jsUrl: d, jsHash: f } = e.data, { model_id: _ } = e.value, v = e.host, y;
-    r[0] !== f || r[1] !== d ? (y = {
-      jsUrl: d,
-      jsHash: f
-    }, r[0] = f, r[1] = d, r[2] = y) : y = r[2];
-    let { jsModule: S, error: w } = useAnyWidgetModule(y);
-    if (useMountCss(c, v), w) {
+    let r = (0, import_compiler_runtime$98.c)(16), { jsUrl: c, jsHash: d } = e.data, { model_id: f } = e.value, _ = e.host, v;
+    r[0] !== d || r[1] !== c ? (v = {
+      jsUrl: c,
+      jsHash: d
+    }, r[0] = d, r[1] = c, r[2] = v) : v = r[2];
+    let { jsModule: y, error: S } = useAnyWidgetModule(v);
+    if (S) {
       let e2;
-      return r[3] === w ? e2 = r[4] : (e2 = (0, import_jsx_runtime.jsx)(ErrorBanner, {
-        error: w
-      }), r[3] = w, r[4] = e2), e2;
-    }
-    if (!S) return null;
-    if (!isAnyWidgetModule(S)) {
-      let e2 = `Module at ${d} does not appear to be a valid anywidget`, c2;
-      r[5] === e2 ? c2 = r[6] : (c2 = Error(e2), r[5] = e2, r[6] = c2);
-      let f2 = c2, _2;
+      return r[3] === S ? e2 = r[4] : (e2 = (0, import_jsx_runtime.jsx)(ErrorBanner, {
+        error: S
+      }), r[3] = S, r[4] = e2), e2;
+    }
+    if (!y) return null;
+    if (!isAnyWidgetModule(y)) {
+      let e2 = `Module at ${c} does not appear to be a valid anywidget`, d2;
+      r[5] === e2 ? d2 = r[6] : (d2 = Error(e2), r[5] = e2, r[6] = d2);
+      let f2 = d2, _2;
       return r[7] === f2 ? _2 = r[8] : (_2 = (0, import_jsx_runtime.jsx)(ErrorBanner, {
         error: f2
       }), r[7] = f2, r[8] = _2), _2;
     }
-    let E;
-    r[9] === e.host ? E = r[10] : (E = (_a2 = e.host.closest("[random-id]")) == null ? void 0 : _a2.getAttribute("random-id"), r[9] = e.host, r[10] = E);
-    let O = E ?? d, M;
-    return r[11] !== S.default || r[12] !== O || r[13] !== _ ? (M = (0, import_jsx_runtime.jsx)(LoadedSlot, {
-      widget: S.default,
-      modelId: _
-    }, O), r[11] = S.default, r[12] = O, r[13] = _, r[14] = M) : M = r[14], M;
+    let w;
+    r[9] === e.host ? w = r[10] : (w = (_a2 = e.host.closest("[random-id]")) == null ? void 0 : _a2.getAttribute("random-id"), r[9] = e.host, r[10] = w);
+    let E = w ?? c, O;
+    return r[11] !== _ || r[12] !== y.default || r[13] !== E || r[14] !== f ? (O = (0, import_jsx_runtime.jsx)(LoadedSlot, {
+      widget: y.default,
+      modelId: f,
+      host: _
+    }, E), r[11] = _, r[12] = y.default, r[13] = E, r[14] = f, r[15] = O) : O = r[15], O;
   };
   async function runAnyWidgetModule(e, r, c, d, f) {
     d.innerHTML = "";
@@ -64582,24 +64582,22 @@ ${O}`,
     return e.default ? typeof e.default == "function" || typeof ((_a2 = e.default) == null ? void 0 : _a2.render) == "function" || typeof ((_b3 = e.default) == null ? void 0 : _b3.initialize) == "function" : false;
   }
   var LoadedSlot = (e) => {
-    let r = (0, import_compiler_runtime$98.c)(8), { widget: c, modelId: d } = e, f = (0, import_react.useRef)(null), _;
-    r[0] === d ? _ = r[1] : (_ = MODEL_MANAGER.getSync(d), r[0] = d, r[1] = _);
-    let v = _;
-    v || Logger.error("Model not found for modelId", d);
-    let y, S;
-    r[2] !== v || r[3] !== d || r[4] !== c ? (y = () => {
-      if (!f.current || !v) return;
+    let r = (0, import_compiler_runtime$98.c)(9), { widget: c, modelId: d, host: f } = e, _ = (0, import_react.useRef)(null), v, y;
+    r[0] === d ? (v = r[1], y = r[2]) : (v = MODEL_MANAGER.getSync(d), v || Logger.error("Model not found for modelId", d), y = v == null ? void 0 : v.get("_css"), r[0] = d, r[1] = v, r[2] = y), useMountCss(y, f);
+    let S, w;
+    r[3] !== v || r[4] !== d || r[5] !== c ? (S = () => {
+      if (!_.current || !v) return;
       let e2 = new AbortController();
-      return runAnyWidgetModule(c, v, d, f.current, e2.signal), () => e2.abort();
-    }, S = [
+      return runAnyWidgetModule(c, v, d, _.current, e2.signal), () => e2.abort();
+    }, w = [
       c,
       d,
       v
-    ], r[2] = v, r[3] = d, r[4] = c, r[5] = y, r[6] = S) : (y = r[5], S = r[6]), (0, import_react.useEffect)(y, S);
-    let w;
-    return r[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = (0, import_jsx_runtime.jsx)("div", {
-      ref: f
-    }), r[7] = w) : w = r[7], w;
+    ], r[3] = v, r[4] = d, r[5] = c, r[6] = S, r[7] = w) : (S = r[6], w = r[7]), (0, import_react.useEffect)(S, w);
+    let E;
+    return r[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (E = (0, import_jsx_runtime.jsx)("div", {
+      ref: _
+    }), r[8] = E) : E = r[8], E;
   }, import_compiler_runtime$97 = require_compiler_runtime();
   const KeyboardHotkeys = (e) => {
     let r = (0, import_compiler_runtime$97.c)(10), { shortcut: c, className: d } = e;
@@ -73309,7 +73307,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.10-dev49"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.10-dev51"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.10-dev49",
+  "version": "0.19.10-dev51",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -21,7 +21,6 @@ import { BINDING_MANAGER, WIDGET_DEF_REGISTRY } from "./widget-binding";
 interface Data {
   jsUrl: string;
   jsHash: string;
-  css?: string | null;
 }
 
 type AnyWidgetState = ModelState;
@@ -118,21 +117,18 @@ export const AnyWidgetPlugin = createPlugin<ModelIdRef>("marimo-anywidget")
     z.object({
       jsUrl: z.string(),
       jsHash: z.string(),
-      css: z.string().nullish(),
     }),
   )
   .withFunctions({})
   .renderer((props) => <AnyWidgetSlot {...props} />);
 
 const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
-  const { css, jsUrl, jsHash } = props.data;
+  const { jsUrl, jsHash } = props.data;
   const { model_id: modelId } = props.value;
   const host = props.host as HTMLElementNotDerivedFromRef;
 
   const { jsModule, error } = useAnyWidgetModule({ jsUrl, jsHash });
 
-  useMountCss(css, host);
-
   if (error) {
     return <ErrorBanner error={error} />;
   }
@@ -160,6 +156,7 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
       key={key}
       widget={jsModule.default}
       modelId={modelId}
+      host={host}
     />
   );
 };
@@ -207,11 +204,13 @@ function isAnyWidgetModule(mod: any): mod is { default: AnyWidget } {
 interface Props<T extends AnyWidgetState> {
   widget: AnyWidget<T>;
   modelId: WidgetModelId;
+  host: HTMLElementNotDerivedFromRef;
 }
 
 const LoadedSlot = <T extends AnyWidgetState>({
   widget,
   modelId,
+  host,
 }: Props<T> & { widget: AnyWidget<T> }) => {
   const htmlRef = useRef<HTMLDivElement>(null);
 
@@ -222,6 +221,9 @@ const LoadedSlot = <T extends AnyWidgetState>({
     Logger.error("Model not found for modelId", modelId);
   }
 
+  const css = model?.get("_css");
+  useMountCss(css, host);
+
   useEffect(() => {
     if (!htmlRef.current || !model) {
       return;