Module "object"

Uses {@link @thi.ng/rstream#fromObject} for creating the internal key-value streams. These can then be used by inner to produce reactive child elements. The given src object is only used to seed those streams with initial values. The component wrapper can be updated with new values, using the .update() life cycle method with a new object.

By default the value streams will only trigger updates if their values have changed. See {@link @thi.ng/rstream#StreamObjOpts} for more details and options.

Also see $subObject.

const obj = $object(
  // source object (for seeding)
  { id: "a", name: "foo", ignore: 23 },
  // create subscriptions for given keys
  { keys: ["id", "name"] }
  // component factory
  async (obj) => <ComponentLike>["div", {}, "id: ", obj.id, " name: ", obj.name]
);

obj.mount(document.body);

obj.update({ id: "b", name: "bar" });

interface Foo {
  id: string;
  name: string;
}

const state = reactive<Foo>({ id: "a", name: "foo" });

$subObject<Foo, keyof Foo>(
  state,
  { keys: ["id", "name"] },
  // component factory
  // only executed once, but `obj.id` and `obj.name` are reactive values
  async (obj) => <ComponentLike>["div", {}, "id: ", obj.id, " name: ", obj.name]
).mount(document.body);

// update
state.next({ id: "b", name: "bar" });