anywidget 测试

# 预加载 anywidget
import anywidget
import traitlets
class Counter(anywidget.AnyWidget):
    _esm = """
    import * as React from "https://esm.sh/react@18";
    import { createRender, useModelState } from "https://esm.sh/@anywidget/react?deps=react@18,react-dom@18";
    function Counter() {
      let [value, setValue] = useModelState("value");
      return React.createElement(
        "button",
        { onClick: () => setValue(value + 1) },
        `count is ${value}`
      );
    }
    export let render = createRender(Counter);
    """
    value = traitlets.Int(0).tag(sync=True)

Counter()

import anywidget
import traitlets

class ExampleWidget(anywidget.AnyWidget):
    # anywidget, required #
    _esm = """
    function render({ model, el }) {
        el.classList.add("custom-widget");
        function value_changed() {
            el.textContent = model.get("value");
        }
        value_changed();
        model.on("change:value", value_changed);
    }
    export default { render };
    """
    # anywidget, optional #
    _css = """
    .custom-widget {
        background-color: lightseagreen;
        padding: 0px 2px;
    }
    """
    # custom state for the widget #
    value = traitlets.Unicode("Hello World").tag(sync=True)

ExampleWidget()