van icon indicating copy to clipboard operation
van copied to clipboard

vanX reactive don't track undeclared fields

Open cubxx opened this issue 4 months ago • 1 comments

const o = vanX.reactive({});
van.derive(() => console.log(o.p)); // only undefined
o.p = "new";

It will cause unexpected issues with components with optional props:

const defineComponent = (setup, defaultProps) => {
  const props = vanX.reactive(defaultProps);
  const dom = setup(props);
  return {
    dom,
    update: (patchProps) => Object.assign(props, defaultProps, patchProps),
  };
};
const Comp = defineComponent(
  (props) => van.tags.p({ textContent: () => props.text }),
  {},
);
van.add(document.body, Comp.dom);
Comp.update({ text: 'new' }); // won't update

So I have to use a Proxy to decorate the reactive object:

new Proxy(vanX.reactive({}), {
  get(target, prop, receiver) {
    Object.prototype.hasOwnProperty.call(target, prop) || (target[prop] = void 0); // add property
    return Reflect.get(target, prop, receiver); // track deps
  },
});

cubxx avatar Oct 07 '25 08:10 cubxx

This is intended behavior. I am currently not convinced to add considerable complexity to VanX only for the support of undeclared fields.

Tao-VanJS avatar Oct 21 '25 18:10 Tao-VanJS