65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
import { load_widget, load_css } from "widget";
|
|
import { cleanObject } from "../../static/utils/json.js";
|
|
|
|
export default {
|
|
template: "<div></div>",
|
|
async mounted() {
|
|
const emit_to_py = this.$emit;
|
|
|
|
// Implement AFM: https://anywidget.dev/en/afm/
|
|
// References:
|
|
// * Marimo AFM impl:
|
|
// https://github.com/marimo-team/marimo/blob/7f3023ff0caef22b2bf4c1b5a18ad1899bd40fa3/frontend/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx#L161-L267
|
|
this.model = {
|
|
attributes: { ...this.traits },
|
|
callbacks: {},
|
|
get: function (key) {
|
|
return cleanObject(this.attributes[key]);
|
|
},
|
|
set: function (key, value) {
|
|
this.attributes[key] = value;
|
|
this.emit("change:" + key, value);
|
|
},
|
|
save_changes: function () {
|
|
if (this.callbacks.change && Array.isArray(this.callbacks.change)) {
|
|
this.callbacks.change.forEach((cb) => cb());
|
|
}
|
|
emit_to_py("update:traits", { ...this.attributes });
|
|
},
|
|
on: function (event, callback) {
|
|
if (!this.callbacks[event]) this.callbacks[event] = [];
|
|
this.callbacks[event].push(callback);
|
|
},
|
|
off: function (event, callback) {
|
|
if (!event) this.callbacks = {};
|
|
else if (!callback) this.callbacks[event] = [];
|
|
else this.callbacks[event]?.delete(callback);
|
|
},
|
|
emit: function (event, value) {
|
|
this.callbacks[event]?.forEach((cb) => cb(value));
|
|
},
|
|
send: function (content, callbacks, buffers) {
|
|
console.warn("anywidget.send() is not yet implemented in NiceGUI", content);
|
|
},
|
|
};
|
|
|
|
// Dynamically load esm_content as an ECMAScript module
|
|
const mod = await load_widget(this.esm_content, this.traits._anywidget_id);
|
|
// TODO: cleanup_widget and cleanup_view should be called when the widget is destroyed
|
|
this.cleanup_widget = await mod.initialize?.({ model: this.model });
|
|
this.cleanup_view = await mod.render?.({ model: this.model, el: this.$el });
|
|
|
|
load_css(this.css_content, this.traits._anywidget_id);
|
|
},
|
|
methods: {
|
|
update_trait(trait, value) {
|
|
this.model.set(trait, value);
|
|
},
|
|
},
|
|
props: {
|
|
traits: Object,
|
|
esm_content: String,
|
|
css_content: String,
|
|
},
|
|
};
|