Reversible attachment

https://observablehq.com/@tomlarkworthy/reversible-attachment

reversibleAttach allows you toggle whether a viewUI is attached to a composite viewUI at runtime. This is useful for development when building viewUIs hierarchically, as you can use the reversibleAttach to work on isolated pieces or the whole.

The value remain accessible in both places. Works with both Inputs.form and @tomlarkworthy/view, the latter supports back-driving values, which only works when the attachment is active.

    ```js
    import {reversibleAttach} from '@tomlarkworthy/reversible-attachment'
    ```

const attachElement = Inputs.toggle({
  label: "attach"
})

const attach = Generators.input(attachElement)

attachElement

attach

child viewUI

const childElement = Inputs.text()

const child = Generators.input(childElement)

display(childElement)

child

parent viewUI (@tomlarkworthy/view)

// CHECK viewUI CONFIG
const parent = viewUI`<div>
${["child", reversibleAttach(attach, childElement)]}
</div>`

Note changes propogate to both

child

parent

Backdrivability works

Inputs.button("backdrive parent", {
  reduce: () => {
    parent.value.child = Math.random();
    parent.child.dispatchEvent(new Event("input", { bubbles: true }));
  }
})

grandparent viewUI (Inputs.form)

const attach_gpElement = Inputs.toggle({
  label: "attach gradparent"
})

const attach_gp = Generators.input(attach_gpElement)

attach_gp

attach_gpElement

const grand_parentElement = Inputs.form({
  parent: reversibleAttach(attach_gp, parent)
})

const grand_parent = Generators.input(grand_parentElement)

grand_parent

grand_parentElement

Inputs.button("backdrive grand_parent", {
  reduce: () => {
    grand_parent.parent.child = Math.random();
    grand_parent.dispatchEvent(new Event("input", { bubbles: true }));
  }
})

//import { viewUI, bindOneWay } from "@tomlarkworthy/viewUI"
import {viewUI, bindOneWay } from "/components/view.js";
display(viewUI);
display(bindOneWay)

//import { footer } from "@tomlarkworthy/footer"

//footer